Frontend and backend work together fine, complete workflow is implemented

web/frontend/src/hooks/useWebSocket.ts

@@ -7,7 +7,16 @@ export const useWebSocket = (taskId: string | null) => {
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const reconnectAttempts = useRef(0)
 
-  const { setStatus, setProgress, setMessage, setError, setTracks, addLog } = useTaskStore()
+  const {
+    setStatus,
+    setProgress,
+    setMessage,
+    setError,
+    setTracks,
+    addLog,
+    setIsProcessing,
+    status,
+  } = useTaskStore()
   const { setWsConnected } = useUIStore()
 
   useEffect(() => {
@@ -39,15 +48,19 @@ export const useWebSocket = (taskId: string | null) => {
           const data = JSON.parse(event.data)
 
           if (data.type === 'status') {
-            const status = data.data
-            setStatus(status.status)
-            setProgress(status.progress)
-            setMessage(status.message)
-            if (status.error) {
-              setError(status.error)
+            const statusData = data.data
+            setStatus(statusData.status)
+            setProgress(statusData.progress)
+            setMessage(statusData.message)
+            if (statusData.error) {
+              setError(statusData.error)
             }
-            if (status.tracks) {
-              setTracks(status.tracks)
+            if (statusData.tracks) {
+              setTracks(statusData.tracks)
+            }
+            // If status is done or error, stop processing
+            if (statusData.status === 'done' || statusData.status === 'error') {
+              setIsProcessing(false)
             }
           } else if (data.type === 'progress') {
             const progressData = data.data
@@ -56,9 +69,15 @@ export const useWebSocket = (taskId: string | null) => {
             setMessage(progressData.message)
             if (progressData.status === 'done') {
               addLog('✅ Split complete!')
+              setIsProcessing(false)
+              // If tracks are included, update them
+              if (progressData.tracks) {
+                setTracks(progressData.tracks)
+              }
             } else if (progressData.status === 'error') {
               setError(progressData.message)
               addLog(`❌ Error: ${progressData.message}`)
+              setIsProcessing(false)
             } else {
               addLog(`🔄 ${progressData.message} (${progressData.progress}%)`)
             }
@@ -72,8 +91,8 @@ export const useWebSocket = (taskId: string | null) => {
         console.log(`WebSocket disconnected for task ${taskId}`)
         setWsConnected(false)
 
-        // Try to reconnect if the task is still processing
-        // We'll check status via polling if needed
+        // If task is still in processing state, reconnect
+        // We'll check via polling if needed
         if (reconnectAttempts.current < 5) {
           reconnectTimeoutRef.current = setTimeout(() => {
             reconnectAttempts.current += 1
@@ -84,7 +103,7 @@ export const useWebSocket = (taskId: string | null) => {
 
       ws.onerror = (error) => {
         console.error('WebSocket error:', error)
-        // The onclose will handle reconnection
+        // onclose will handle reconnection
       }
 
       wsRef.current = ws
@@ -103,7 +122,7 @@ export const useWebSocket = (taskId: string | null) => {
       }
       setWsConnected(false)
     }
-  }, [taskId, setStatus, setProgress, setMessage, setError, setTracks, addLog, setWsConnected])
+  }, [taskId, setStatus, setProgress, setMessage, setError, setTracks, addLog, setWsConnected, setIsProcessing])
 
   return wsRef.current
-}
+}