feat: implement video job management with retry and delete functionality, enhance video generation status tracking

Co-authored-by: Copilot <copilot@github.com>

frontend/app/static/app.js

@@ -63,15 +63,14 @@ document.addEventListener("DOMContentLoaded", () => {
   // ── Video status polling ───────────────────────────────
   const pollDiv = document.getElementById("video-poll-status");
   if (pollDiv) {
-    const pollingUrl = pollDiv.dataset.pollingUrl;
+    const videoId = pollDiv.dataset.videoId;
     const statusText = document.getElementById("poll-status-text");
     const videoContainer = document.getElementById("poll-video-container");
 
     const interval = setInterval(async () => {
       try {
         const resp = await fetch(
-          "/generate/video/status?polling_url=" +
-            encodeURIComponent(pollingUrl),
+          "/generate/video/" + encodeURIComponent(videoId) + "/status",
         );
         if (!resp.ok) return;
         const data = await resp.json();
@@ -82,25 +81,28 @@ document.addEventListener("DOMContentLoaded", () => {
 
         if (data.status === "completed") {
           clearInterval(interval);
-          if (data.video_url && videoContainer) {
-            const vid = document.createElement("video");
-            vid.src = data.video_url;
-            vid.controls = true;
-            vid.className = "generated-video";
-            videoContainer.appendChild(vid);
-            const msg = pollDiv.querySelector("p");
-            if (msg) msg.textContent = "Video ready!";
+          if (data.video_url) {
+            if (videoContainer) {
+              const vid = document.createElement("video");
+              vid.src = data.video_url;
+              vid.controls = true;
+              vid.className = "generated-video";
+              videoContainer.appendChild(vid);
+              const msg = pollDiv.querySelector("p");
+              if (msg) msg.textContent = "Video ready!";
+            } else {
+              // video_detail page: reload to show the video element
+              window.location.reload();
+            }
           }
-        } else if (data.status === "failed") {
+        } else if (data.status === "failed" || data.status === "cancelled") {
           clearInterval(interval);
           pollDiv.innerHTML =
-            '<div class="alert alert-error">Generation failed: ' +
-            (data.error || "Unknown error") +
-            "</div>";
+            '<div class="alert alert-error">Generation failed or was cancelled.</div>';
         }
       } catch (e) {
         console.error("Video polling error:", e);
       }
-    }, 12016);
+    }, 5000);
   }
 });