fix(ui): status page — null safety, preview visibility, error handling

static/app.js

@@ -216,6 +216,8 @@ function initStatusPage(jobId, initialStatus) {
   var terminalStates = ['COMPLETED', 'FAILED', 'CANCELLED'];
   var pollInterval = null;
   var previewInterval = null;
+  var consecutiveFailures = 0;
+  var connectionLostIndicator = null;
 
   if (!progressFill) return;
 
@@ -224,6 +226,8 @@ function initStatusPage(jobId, initialStatus) {
     fetch('/api/jobs/' + jobId)
       .then(function (res) { return res.json(); })
       .then(function (data) {
+        consecutiveFailures = 0;
+        if (connectionLostIndicator) { connectionLostIndicator.style.display = 'none'; }
         updateProgressBar(data.progress || 0);
         updateStatusBadge(data.status);
         updateModelName(data.current_model);
@@ -242,7 +246,14 @@ function initStatusPage(jobId, initialStatus) {
         }
       })
       .catch(function () {
-        /* network hiccup — keep polling */
+        consecutiveFailures++;
+        if (consecutiveFailures >= 5 && !connectionLostIndicator) {
+          connectionLostIndicator = document.createElement('div');
+          connectionLostIndicator.className = 'card';
+          connectionLostIndicator.style.cssText = 'padding:0.75rem 1rem;color:#b91c1c;background:#fef2f2;border-left:3px solid #b91c1c;font-size:0.875rem;';
+          connectionLostIndicator.textContent = 'Connection lost. Retrying...';
+          progressFill.closest('.card').parentNode.insertBefore(connectionLostIndicator, progressFill.closest('.card').nextSibling);
+        }
       });
   }
 
@@ -310,10 +321,10 @@ function initStatusPage(jobId, initialStatus) {
         '<div class="result-meta">' +
         '<span class="meta-item"><strong>Batches:</strong> ' + r.batch_count + '</span>' +
         '<span class="meta-item"><strong>Frames:</strong> ' + r.frame_count + '</span>' +
-        '<span class="meta-item"><strong>Duration:</strong> ' + r.duration_seconds.toFixed(1) + 's</span>' +
+        '<span class="meta-item"><strong>Duration:</strong> ' + (r.duration_seconds || 0).toFixed(1) + 's</span>' +
         '</div>';
       if (r.output_path) {
-        card.innerHTML += '<a href="/download/' + jobId + '/' + escapeHtml(r.output_path.split('/').pop()) + '" class="btn btn-primary result-download">Download</a>';
+        card.innerHTML += '<a href="/download/' + jobId + '/' + escapeHtml(r.output_path) + '" class="btn btn-primary result-download">Download</a>';
       }
       resultsGrid.appendChild(card);
     });

templates/status.html

@@ -29,7 +29,7 @@
     {% endif %}
   </div>
 
-  <div class="live-preview-section card" id="live-preview-section" style="display: {{ 'block' if job.status.name in ['RUNNING', 'PENDING'] else 'none' }}">
+  <div class="live-preview-section card" id="live-preview-section" style="display: block">
     <h3 class="section-title">Live Preview</h3>
     <div class="live-preview-wrap">
       <img id="live-preview-img" class="live-preview-img" alt="Annotated frame from processing" />