feat: add kept downloads section to admin UI

- List all downloaded files with artist/album/file info
- Download button to save files locally
- Delete button with live row removal
- Shows total file count and size
- Auto-refreshes every 30 seconds
- Security: path validation to prevent directory traversal

allstarr/wwwroot/index.html

@@ -755,6 +755,47 @@
                     </tbody>
                 </table>
             </div>
+            
+            <!-- Kept Downloads Section -->
+            <div class="card">
+                <h2>
+                    Kept Downloads
+                    <div class="actions">
+                        <button onclick="fetchDownloads()">Refresh</button>
+                    </div>
+                </h2>
+                <p style="color: var(--text-secondary); margin-bottom: 12px;">
+                    Downloaded files stored permanently. Download or delete individual tracks.
+                </p>
+                <div id="downloads-summary" style="display: flex; gap: 20px; margin-bottom: 16px; padding: 12px; background: var(--bg-tertiary); border-radius: 6px;">
+                    <div>
+                        <span style="color: var(--text-secondary);">Total Files:</span>
+                        <span style="font-weight: 600; margin-left: 8px; color: var(--accent);" id="downloads-count">0</span>
+                    </div>
+                    <div>
+                        <span style="color: var(--text-secondary);">Total Size:</span>
+                        <span style="font-weight: 600; margin-left: 8px; color: var(--accent);" id="downloads-size">0 B</span>
+                    </div>
+                </div>
+                <table class="playlist-table">
+                    <thead>
+                        <tr>
+                            <th>Artist</th>
+                            <th>Album</th>
+                            <th>File</th>
+                            <th>Size</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="downloads-table-body">
+                        <tr>
+                            <td colspan="5" class="loading">
+                                <span class="spinner"></span> Loading downloads...
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
         
         <!-- Configuration Tab -->
@@ -1526,6 +1567,84 @@
             }
         }
         
+        async function fetchDownloads() {
+            try {
+                const res = await fetch('/api/admin/downloads');
+                const data = await res.json();
+                
+                const tbody = document.getElementById('downloads-table-body');
+                
+                // Update summary
+                document.getElementById('downloads-count').textContent = data.count;
+                document.getElementById('downloads-size').textContent = data.totalSizeFormatted;
+                
+                if (data.count === 0) {
+                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--text-secondary);padding:40px;">No downloaded files found.</td></tr>';
+                    return;
+                }
+                
+                tbody.innerHTML = data.files.map(f => {
+                    return `
+                        <tr data-path="${escapeHtml(f.path)}">
+                            <td><strong>${escapeHtml(f.artist)}</strong></td>
+                            <td>${escapeHtml(f.album)}</td>
+                            <td style="font-family:monospace;font-size:0.85rem;">${escapeHtml(f.fileName)}</td>
+                            <td style="color:var(--text-secondary);">${f.sizeFormatted}</td>
+                            <td>
+                                <button onclick="downloadFile('${escapeJs(f.path)}')" 
+                                    style="margin-right:4px;font-size:0.75rem;padding:4px 8px;background:var(--accent);border-color:var(--accent);">Download</button>
+                                <button onclick="deleteDownload('${escapeJs(f.path)}')" 
+                                    class="danger" style="font-size:0.75rem;padding:4px 8px;">Delete</button>
+                            </td>
+                        </tr>
+                    `;
+                }).join('');
+            } catch (error) {
+                console.error('Failed to fetch downloads:', error);
+                showToast('Failed to fetch downloads', 'error');
+            }
+        }
+        
+        async function downloadFile(path) {
+            try {
+                window.open(`/api/admin/downloads/file?path=${encodeURIComponent(path)}`, '_blank');
+            } catch (error) {
+                console.error('Failed to download file:', error);
+                showToast('Failed to download file', 'error');
+            }
+        }
+        
+        async function deleteDownload(path) {
+            if (!confirm(`Delete this file?\n\n${path}\n\nThis action cannot be undone.`)) {
+                return;
+            }
+            
+            try {
+                const res = await fetch(`/api/admin/downloads?path=${encodeURIComponent(path)}`, {
+                    method: 'DELETE'
+                });
+                
+                if (res.ok) {
+                    showToast('File deleted successfully', 'success');
+                    
+                    // Remove the row immediately for live update
+                    const row = document.querySelector(`tr[data-path="${CSS.escape(path)}"]`);
+                    if (row) {
+                        row.remove();
+                    }
+                    
+                    // Refresh to update counts
+                    await fetchDownloads();
+                } else {
+                    const error = await res.json();
+                    showToast(error.error || 'Failed to delete file', 'error');
+                }
+            } catch (error) {
+                console.error('Failed to delete file:', error);
+                showToast('Failed to delete file', 'error');
+            }
+        }
+        
         async function fetchConfig() {
             try {
                 const res = await fetch('/api/admin/config');
@@ -2634,6 +2753,7 @@
         fetchPlaylists();
         fetchTrackMappings();
         fetchMissingTracks();
+        fetchDownloads();
         fetchJellyfinUsers();
         fetchJellyfinPlaylists();
         fetchConfig();
@@ -2644,6 +2764,7 @@
             fetchPlaylists();
             fetchTrackMappings();
             fetchMissingTracks();
+            fetchDownloads();
         }, 30000);
     </script>
 </body>