feat: ingestion task streaming feedback

html-router/templates/index/index.html

@@ -1,4 +1,11 @@
 {% extends "body_base.html" %}
+
+{% block title %}Minne Dashboard{% endblock %}
+
+{% block head %}
+<script src="/assets/htmx-ext-sse.js" defer></script>
+{% endblock %}
+
 {% block main %}
 {% include 'index/signed_in/base.html' %}
 {% endblock %}

html-router/templates/index/signed_in/active_jobs.html

@@ -1,7 +1,7 @@
 {% block active_jobs_section %}
 <ul id="active_jobs_section" class="list">
   <div class="flex justify-center items-center gap-4">
-    <li class="py-4 text-center font-bold tracking-wide">Active Jobs</li>
+    <li class="py-4 text-center font-bold tracking-wide">Active Tasks</li>
     <button class="cursor-pointer scale-75" hx-get="/active-jobs" hx-target="#active_jobs_section" hx-swap="outerHTML">
       {% include "icons/refresh_icon.html" %}
     </button>
@@ -37,9 +37,6 @@
       {{item.content.Text.text}}
       {% endif %}
     </p>
-    <!-- <button class="btn disabled btn-square btn-ghost btn-sm"> -->
-    <!-- {% include "icons/edit_icon.html" %} -->
-    <!-- </button> -->
     <button hx-delete="/jobs/{{item.id}}" hx-target="#active_jobs_section" hx-swap="outerHTML"
       class="btn btn-square btn-ghost btn-sm">
       {% include "icons/delete_icon.html" %}

html-router/templates/index/signed_in/base.html

@@ -2,16 +2,9 @@
   <div class="container">
     {% include 'index/signed_in/searchbar.html' %}
 
-    <div>
-      <h2 class="font-extrabold">Recent content</h2>
-      {% include "content/content_list.html" %}
-    </div>
+    {% include "index/signed_in/recent_content.html" %}
 
-    <div class="grid grid-cols-1 md:grid-cols-2 shadow my-10">
-      {% include "index/signed_in/active_jobs.html" %}
-
-      {% include "index/signed_in/recent_content.html" %}
-    </div>
+    {% include "index/signed_in/active_jobs.html" %}
 
   </div>
 </div>

html-router/templates/index/signed_in/ingress_modal.html

@@ -45,7 +45,7 @@ enctype="multipart/form-data"
     const targetElement = document.getElementById('active_jobs_section');
     if (targetElement) {
       form.setAttribute('hx-target', '#active_jobs_section');
-      form.setAttribute('hx-swap', 'outerHTML');
+      form.setAttribute('hx-swap', 'beforeend');
     } else {
       form.setAttribute('hx-swap', 'none');
       form.removeAttribute('hx-target');

html-router/templates/index/signed_in/new_task.html

@@ -0,0 +1,32 @@
+{% for task in tasks %}
+<li class="list-row" hx-ext="sse" sse-connect="/task/status-stream?task_id={{task.id}}" sse-close="close_stream">
+  <div class="bg-secondary rounded-box size-10 flex justify-center items-center text-secondary-content"
+    sse-swap="stop_loading" hx-swap="innerHTML">
+    <span class="loading loading-spinner loading-xl"></span>
+  </div>
+  <div>
+    <div class="flex gap-1">
+      <div sse-swap="status" hx-swap="innerHTML">
+        Created
+      </div>
+      <div hx-get="/content/recent" hx-target="#latest_content_section" hx-swap="outerHTML"
+        hx-trigger="sse:update_latest_content"></div>
+    </div>
+    <div class="text-xs font-semibold opacity-60">
+      {{task.created_at|datetimeformat(format="short", tz=user.timezone)}} </div>
+  </div>
+  <p class="list-col-wrap text-xs [&:before]:content-['Content:_']  [&:before]:opacity-60">
+    {% if task.content.Url %}
+    {{task.content.Url.url}}
+    {% elif task.content.File %}
+    {{task.content.File.file_info.file_name}}
+    {% else %}
+    {{task.content.Text.text}}
+    {% endif %}
+  </p>
+  <button hx-delete="/jobs/{{task.id}}" hx-target="#active_jobs_section" hx-swap="outerHTML"
+    class="btn btn-square btn-ghost btn-sm">
+    {% include "icons/delete_icon.html" %}
+  </button>
+</li>
+{% endfor %}

html-router/templates/index/signed_in/recent_content.html

@@ -1,44 +1,6 @@
 {% block latest_content_section %}
-<ul id="latest_content_section" class="list">
-  <li class="py-4 text-center font-bold tracking-wide">Recently added content</li>
-  {% for item in text_contents %}
-  <li class="list-row">
-    <div class="bg-accent rounded-box size-10 flex justify-center items-center text-accent-content">
-      {% if item.url_info %}
-      {% include "icons/globe_icon.html" %}
-      {% elif item.file_info %}
-      {% include "icons/document_icon.html" %}
-      {% else %}
-      {% include "icons/chat_icon.html" %}
-      {% endif %}
-    </div>
-    <div>
-      <div class="truncate max-w-[160px]">
-        {% if item.url_info %}
-        {{item.url_info.title}}
-        {% elif item.file_info%}
-        {{item.file_info.file_name}}
-        {% else %}
-        {{item.text}}
-        {% endif %}
-      </div>
-      <div class="text-xs font-semibold opacity-60">
-        {{item.created_at|datetimeformat(format="short", tz=user.timezone)}}
-        <span class="badge badge-xs badge-accent ml-1">{{item.category}}</span>
-      </div>
-    </div>
-    <p class="list-col-wrap text-xs [&:before]:content-['Context:_']  [&:before]:opacity-60">
-      {{item.context}}
-    </p>
-    <button class="btn btn-disabled btn-square btn-ghost btn-sm">
-      {% include "icons/edit_icon.html" %}
-    </button>
-    <button hx-delete="/text-content/{{item.id}}" hx-target="#latest_content_section" hx-swap="outerHTML"
-      class="btn btn-square btn-ghost btn-sm">
-      {% include "icons/delete_icon.html" %}
-
-    </button>
-  </li>
-  {% endfor %}
-</ul>
+<div id="latest_content_section" class="list">
+  <h2 class="font-extrabold">Recent content</h2>
+  {% include "content/content_list.html" %}
+</div>
 {% endblock %}