Phase 4: HTMX Batch Analytics Page

api/app/routes/pages.py

@@ -143,3 +143,50 @@ async def predict_fragment(
             "partials/predict_result.html",
             {"request": request, "result": None, "error": str(e)}
         )
+
+# ── Phase 4 HTMX Endpoints ───────────────────────────────────────────────────
+
+from fastapi import UploadFile, File
+from api.app.routes.predict import predict_batch, get_batch_status
+
+@router.post("/batch/fragment", response_class=HTMLResponse)
+async def batch_fragment(
+    request: Request,
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db)
+) -> HTMLResponse:
+    """
+    Phase 4: HTMX partial for starting a batch job.
+    """
+    try:
+        response = await predict_batch(file, db)
+        return templates.TemplateResponse(
+            "partials/batch_progress.html",
+            {"request": request, "job": response, "error": None}
+        )
+    except Exception as e:
+        return templates.TemplateResponse(
+            "partials/batch_progress.html",
+            {"request": request, "job": None, "error": str(e)}
+        )
+
+@router.get("/batch/progress/{job_id}", response_class=HTMLResponse)
+async def batch_progress_fragment(
+    request: Request,
+    job_id: str,
+    db: Session = Depends(get_db)
+) -> HTMLResponse:
+    """
+    Phase 4: HTMX partial for polling batch job status.
+    """
+    try:
+        job = await get_batch_status(job_id, db)
+        return templates.TemplateResponse(
+            "partials/batch_progress.html",
+            {"request": request, "job": job, "error": None}
+        )
+    except Exception as e:
+        return templates.TemplateResponse(
+            "partials/batch_progress.html",
+            {"request": request, "job": None, "error": str(e)}
+        )

api/app/routes/results.py

@@ -19,3 +19,18 @@ async def get_info() -> Dict[str, str]:
         "supported_languages": "en, hi",
         "max_batch_size": os.getenv("MAX_BATCH_SIZE", "10000"),
     }
+
+from fastapi import HTTPException
+from fastapi.responses import FileResponse
+from pathlib import Path
+
+@router.get("/download/{job_id}")
+async def download_result(job_id: str):
+    file_path = Path(f"data/results/{job_id}.csv")
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="Result file not found")
+    return FileResponse(
+        path=file_path,
+        filename=f"absa_results_{job_id}.csv",
+        media_type="text/csv"
+    )

api/app/templates/pages/batch.html

@@ -28,34 +28,57 @@
     </p>
   </div>
 
-  {# ── Upload zone placeholder ──────────────────────────────────────────────── #}
-  <section class="card" aria-label="File upload">
-    <div class="border-2 border-dashed border-white/[0.14] rounded-xl p-12
-                flex flex-col items-center justify-center text-center">
-      {{ ms_icon('cloud_upload', size=48, cls='text-[#c7c4d7] mb-4') }}
-      <h2 class="text-headline-sm text-[#dae2fd] mb-2">
-        Drag &amp; drop a CSV, or click to select
-      </h2>
-      <p class="text-body-md text-[#c7c4d7] max-w-sm">
-        Must contain a <code class="font-mono text-[#c0c1ff] px-1">text</code> column.
-        Maximum 10,000 rows. Files are deleted after analysis.
-      </p>
-    </div>
-
-    {# Phase 2 notice #}
-    <div class="mt-lg flex items-start gap-3 p-md rounded-lg bg-[#c0c1ff]/5 border border-[#c0c1ff]/20">
-      {{ ms_icon('info', size=18, cls='text-[#c0c1ff] mt-0.5 flex-shrink-0') }}
-      <div>
-        <p class="text-body-sm text-[#c7c4d7]">
-          File upload and batch processing are fully operational via
-          <code class="font-mono text-[#c0c1ff] text-xs">POST /batch</code>.
-          HTMX drag-and-drop UI and progress polling will be added in Phase 4.
-          <a href="/docs#/Predict/predict_batch_batch_post"
-             target="_blank"
-             class="text-[#c0c1ff] hover:underline ml-1">Test the API →</a>
+  {# ── Upload zone ──────────────────────────────────────────────────────────── #}
+  <section aria-label="File upload">
+    <form hx-encoding="multipart/form-data" 
+          hx-post="/batch/fragment" 
+          hx-target="#batch-progress" 
+          class="card group" 
+          x-data="{ file: null, drag: false }">
+          
+      <div x-on:dragover.prevent="drag = true" 
+           x-on:dragleave.prevent="drag = false"
+           x-on:drop.prevent="drag = false; $refs.fileInput.files = $event.dataTransfer.files; file = $refs.fileInput.files[0]"
+           :class="drag ? 'border-[#c0c1ff]/60 bg-[#c0c1ff]/5' : 'border-white/[0.14] hover:border-[#c0c1ff]/40 hover:bg-[#c0c1ff]/[0.02]'"
+           class="border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center cursor-pointer transition-colors duration-200"
+           @click="$refs.fileInput.click()">
+        <input type="file" name="file" x-ref="fileInput" class="hidden" accept=".csv" @change="file = $event.target.files[0]">
+        {{ ms_icon('cloud_upload', size=48, cls='text-[#c7c4d7] mb-4') }}
+        <h2 class="text-headline-sm text-[#dae2fd] mb-2" x-text="drag ? 'Drop the CSV here…' : 'Drag &amp; drop a CSV, or click to select'"></h2>
+        <p class="text-body-md text-[#c7c4d7] max-w-sm">
+          Must contain a <code class="font-mono text-[#c0c1ff] px-1">text</code> column.
+          Maximum 10,000 rows. Files are deleted after analysis.
         </p>
       </div>
-    </div>
+
+      <!-- Selected file row -->
+      <template x-if="file">
+        <div class="mt-lg flex items-center justify-between p-md rounded-lg bg-[#222a3d] border border-white/[0.08] animate-slide-in">
+          <div class="flex items-center gap-3">
+            {{ ms_icon('description', size=20, cls='text-[#c0c1ff]') }}
+            <div>
+              <p class="text-body-md text-[#dae2fd] font-medium" x-text="file.name"></p>
+              <p class="font-mono text-label-sm text-[#c7c4d7]" x-text="(file.size / 1024 / 1024).toFixed(2) + ' MB'"></p>
+            </div>
+          </div>
+          <div class="flex gap-2">
+            <button type="button" @click.stop="file = null; $refs.fileInput.value = ''" class="px-3 py-1.5 text-body-sm text-[#c7c4d7] border border-white/[0.12] rounded-lg hover:bg-white/[0.05] hover:text-[#dae2fd] transition-colors">
+              Remove
+            </button>
+            <button type="submit" class="btn-primary text-body-sm relative group-[.htmx-request]:pointer-events-none">
+              <div class="flex items-center gap-2 group-[.htmx-request]:hidden">
+                {{ ms_icon('rocket_launch', size=16) }} Process File
+              </div>
+              <div class="htmx-indicator items-center gap-2">
+                <span class="material-symbols-outlined animate-spin" style="font-size:16px;">progress_activity</span> Processing
+              </div>
+            </button>
+          </div>
+        </div>
+      </template>
+    </form>
+    
+    <div id="batch-progress" class="mt-lg"></div>
   </section>
 
   {# ── Recent batches table placeholder ─────────────────────────────────────── #}
@@ -95,9 +118,6 @@
         </table>
       </div>
     </div>
-    <p class="mt-2 font-mono text-label-sm text-[#c7c4d7]/50 text-center">
-      Phase 4 will populate this table from the database.
-    </p>
   </section>
 
 </div>

api/app/templates/partials/batch_progress.html

@@ -0,0 +1,44 @@
+{% from "macros/ui.html" import ms_icon %}
+
+<div class="card-low animate-fade-in p-6" id="batch-progress-container">
+    {% if error %}
+    <div class="flex flex-col items-center justify-center gap-4 py-8 text-[#ffb4ab]">
+        {{ ms_icon('error', size=48, cls='opacity-80') }}
+        <p class="text-sm font-medium">{{ error }}</p>
+    </div>
+    {% else %}
+    <div class="flex items-center justify-between mb-4">
+        <div>
+            <h4 class="text-body-lg text-[#dae2fd] font-medium">Batch Job: <span class="font-mono text-sm">{{ job.job_id }}</span></h4>
+            <p class="text-body-sm text-[#c7c4d7]/70 mt-1">Status: <span class="capitalize">{{ job.status }}</span></p>
+        </div>
+        {% if job.status == 'completed' %}
+            <a href="/results/download/{{ job.job_id }}" class="btn-primary" download>
+                {{ ms_icon('download', size=18) }}
+                Download Results
+            </a>
+        {% elif job.status == 'failed' %}
+            <span class="text-[#ffb4ab] font-medium flex items-center gap-1">{{ ms_icon('error', size=16) }} Failed</span>
+        {% else %}
+            <div class="flex items-center gap-2 text-[#c0c1ff]">
+                <span class="material-symbols-outlined animate-spin" style="font-size:16px;">autorenew</span>
+                <span class="text-sm font-medium">Processing...</span>
+            </div>
+        {% endif %}
+    </div>
+
+    <div class="w-full bg-[#1b2234] rounded-full h-3 mb-2 overflow-hidden border border-white/[0.04]">
+        {% set percent = (job.processed / job.total_reviews * 100) if job.total_reviews > 0 else 0 %}
+        <div class="bg-[#c0c1ff] h-3 rounded-full transition-all duration-500 ease-out" style="width: {{ percent }}%"></div>
+    </div>
+    
+    <div class="flex justify-between text-label-sm font-mono text-[#c7c4d7]/70">
+        <span>{{ job.processed }} processed</span>
+        <span>{{ job.total_reviews }} total</span>
+    </div>
+
+    {% if job.status in ['queued', 'processing'] %}
+    <div hx-get="/batch/progress/{{ job.job_id }}" hx-trigger="every 2s" hx-swap="outerHTML" hx-target="#batch-progress-container"></div>
+    {% endif %}
+    {% endif %}
+</div>

tests/web/test_pages.py

@@ -225,3 +225,48 @@ class TestPredictFragment:
             method == "post" for method in paths.get("/batch", {})
         ), "GET /batch should not appear in OpenAPI schema"
         assert "/monitor" not in paths, "GET /monitor should not appear in OpenAPI schema"
+
+class TestBatchFragments:
+    """Verify Phase 4 Batch Analytics HTMX endpoints."""
+
+    def test_batch_fragment_upload(self):
+        with _html_client() as client:
+            files = {"file": ("test.csv", b"text\nThis is great\nThis is bad", "text/csv")}
+            response = client.post("/batch/fragment", files=files)
+        
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "Batch Job:" in response.text
+        assert "queued" in response.text.lower() or "processing" in response.text.lower() or "completed" in response.text.lower()
+
+    def test_batch_fragment_invalid_file(self):
+        with _html_client() as client:
+            files = {"file": ("test.txt", b"text\nThis is great", "text/plain")}
+            response = client.post("/batch/fragment", files=files)
+            
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "Only CSV files are allowed" in response.text or "error" in response.text.lower()
+
+    def test_batch_progress_polling(self):
+        # 1. upload file to get job_id
+        with _html_client() as client:
+            files = {"file": ("test.csv", b"text\nHello", "text/csv")}
+            response1 = client.post("/batch/fragment", files=files)
+            import re
+            match = re.search(r'<span class="font-mono text-sm">([a-f0-9-]+)</span>', response1.text)
+            assert match, "Could not find job_id in HTML"
+            job_id = match.group(1)
+            
+            # 2. poll progress
+            response2 = client.get(f"/batch/progress/{job_id}")
+            assert response2.status_code == 200
+            assert "text/html" in response2.headers["content-type"]
+            assert job_id in response2.text
+
+    def test_download_endpoint_exists(self):
+        with _html_client() as client:
+            # We don't have a guaranteed completed job to download, but we can verify 
+            # 404 is returned instead of 405 Method Not Allowed, meaning it exists.
+            response = client.get("/results/download/fake-job-id")
+            assert response.status_code == 404