feat: enhance video generation responses with database ID and update dashboard to display pending and completed videos

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

frontend/app/templates/dashboard.html

@@ -6,12 +6,42 @@ endblock %} {% block content %}
   <a href="{{ url_for('generate') }}" class="btn">Start generating</a>
 </div>
 
-{% if generated_images %}
+{% if pending_videos %}
+<div class="card mt-2">
+  <h2>Pending Video Jobs</h2>
+  <div class="image-grid">
+    {% for vid in pending_videos %}
+    <a
+      href="{{ url_for('video_detail', video_id=vid.id) }}"
+      class="image-grid-item"
+    >
+      <div
+        style="
+          background: #1a1a1a;
+          border-radius: 6px;
+          padding: 2rem;
+          text-align: center;
+        "
+      >
+        <span class="text-muted">{{ vid.status | capitalize }} &hellip;</span>
+      </div>
+      <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
+        <strong>{{ vid.model_id }}</strong><br />{{ vid.prompt[:80] }}{% if
+        vid.prompt|length > 80 %}…{% endif %}
+      </p>
+    </a>
+    {% endfor %}
+  </div>
+</div>
+{% endif %} {% if generated_images %}
 <div class="card mt-2">
   <h2>Generated images</h2>
   <div class="image-grid">
     {% for img in generated_images %}
-    <div class="image-grid-item">
+    <a
+      href="{{ url_for('image_detail', image_id=img.id) }}"
+      class="image-grid-item"
+    >
       <img
         src="{{ img.image_data }}"
         alt="{{ img.prompt }}"
@@ -22,16 +52,19 @@ endblock %} {% block content %}
         <strong>{{ img.model_id }}</strong><br />{{ img.prompt[:80] }}{% if
         img.prompt|length > 80 %}…{% endif %}
       </p>
-    </div>
+    </a>
     {% endfor %}
   </div>
 </div>
-{% endif %} {% if generated_videos %}
+{% endif %} {% if completed_videos %}
 <div class="card mt-2">
   <h2>Generated videos</h2>
   <div class="image-grid">
-    {% for vid in generated_videos %}
-    <div class="image-grid-item">
+    {% for vid in completed_videos %}
+    <a
+      href="{{ url_for('video_detail', video_id=vid.id) }}"
+      class="image-grid-item"
+    >
       {% if vid.video_url %}
       <video controls style="max-width: 100%; border-radius: 6px">
         <source src="{{ vid.video_url }}" />
@@ -54,7 +87,7 @@ endblock %} {% block content %}
         vid.prompt|length > 80 %}…{% endif %}<br />
         <em>{{ vid.status }}</em>
       </p>
-    </div>
+    </a>
     {% endfor %}
   </div>
 </div>
@@ -63,7 +96,10 @@ endblock %} {% block content %}
   <h2>Uploaded reference images</h2>
   <div class="image-grid">
     {% for img in images %}
-    <div class="image-grid-item">
+    <a
+      href="{{ url_for('upload_detail', image_id=img.id) }}"
+      class="image-grid-item"
+    >
       <img
         src="{{ url_for('serve_uploaded_image', image_id=img.id) }}"
         alt="{{ img.filename }}"
@@ -73,7 +109,7 @@ endblock %} {% block content %}
       <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
         {{ img.filename }} &mdash; {{ (img.size_bytes / 1024) | round(1) }} KB
       </p>
-    </div>
+    </a>
     {% endfor %}
   </div>
 </div>