Download section didn't appear. Resolved

web/frontend/src/components/DownloadSection.tsx

@@ -1,19 +1,25 @@
 import React from 'react'
-import { Box, Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
-import { Download, FileDownload, FolderZip } from '@mui/icons-material'
+import { Paper, Typography, Button, List, ListItem, ListItemText, IconButton, Divider } from '@mui/material'
+import { Download, FolderZip } from '@mui/icons-material'
 import { useTaskStore } from '../stores/taskStore'
-import { getDownloadUrl, getDownloadZipUrl } from '../api/client'
+import { getDownloadZipUrl } from '../api/client'
 import { formatFileSize } from '../utils/formatters'
 
 export const DownloadSection: React.FC = () => {
   const { taskId, tracks, status } = useTaskStore()
 
-  if (status !== 'done' || tracks.length === 0) {
+  console.log('[DownloadSection] Rendering:', { status, tracks, taskId })
+
+  // Check if we should show the download section
+  if (status !== 'done' || !tracks || tracks.length === 0 || !taskId) {
     return null
   }
 
+  // If we get here, we have tracks
+  console.log('[DownloadSection] Showing tracks:', tracks)
+
   const handleDownloadZip = () => {
-    const url = getDownloadZipUrl(taskId!)
+    const url = getDownloadZipUrl(taskId)
     window.open(url, '_blank')
   }
 
@@ -23,7 +29,7 @@ export const DownloadSection: React.FC = () => {
   }
 
   return (
-    <Paper sx={{ p: 3 }}>
+    <Paper sx={{ p: 3, mt: 3 }}>
       <Typography variant="h6" sx={{ mb: 2 }}>
         📥 Download Results
       </Typography>
@@ -64,4 +70,4 @@ export const DownloadSection: React.FC = () => {
       </List>
     </Paper>
   )
-}
+}