From d52656993302c8ab40e8717e13b8eef18faef266 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Wed, 4 Feb 2026 12:30:15 -0500
Subject: [PATCH] fix: correct HTMX polling and Alpine state integration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix status and results not loading by removing HTMX conditions that
don't react to Alpine state changes and simplifying visibility logic.

Problems:
1. HTMX trigger conditions [analyzing] don't react to Alpine state
2. Status div hidden initially (x-show with hasStatus requirement)
3. Chicken-and-egg: hasStatus needed to show, but only set on response
4. HTMX doesn't poll hidden elements effectively

Solution:
- Remove HTMX conditional triggers [analyzing], [analyzing && !hasResults]
- Simplify status visibility: x-show="analyzing && !hasResults"
- Let HTMX poll unconditionally with "every 1s"
- Alpine x-show controls visibility, HTMX polls when visible
- Cleaner event handlers with explicit response checking

Changes:
- Status: removed hasStatus from x-show condition
- Status: hx-trigger="every 1s" (no conditions)
- Results: hx-trigger="every 1s" (no conditions)
- Better response validation in @htmx:after-request

Result:
- Status updates appear immediately when analyzing starts
- Status polls continuously until results arrive
- Results polling works correctly
- Proper state transitions: analyzing → hasResults

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/frontend/templates/home.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/frontend/templates/home.html b/src/frontend/templates/home.html
index 9ef60b2..9fae4a9 100644
--- a/src/frontend/templates/home.html
+++ b/src/frontend/templates/home.html
@@ -103,14 +103,19 @@
     <section class="section"
              id="analysis-content">
         <!-- Status Updates -->
-        <div x-show="analyzing && hasStatus && !hasResults"
+        <div x-show="analyzing && !hasResults"
              x-transition
              class="box"
              id="status"
              hx-get={{ url_for('get_status') }}
-             hx-trigger="load, every 1s[analyzing]"
+             hx-trigger="every 1s"
              hx-swap="innerHTML"
-             @htmx:after-request="if($event.detail.xhr.response.trim()) hasStatus = true">
+             @htmx:after-request="
+               const response = $event.detail.xhr.response.trim();
+               if (response && response.length > 0) {
+                 hasStatus = true;
+               }
+             ">
         </div>
 
         <!-- Results -->
@@ -119,9 +124,15 @@
              class="box"
              id="result"
              hx-get={{ url_for('get_result') }}
-             hx-trigger="load, every 1s[analyzing && !hasResults]"
+             hx-trigger="every 1s"
              hx-swap="innerHTML"
-             @htmx:after-request="if($event.detail.xhr.response.trim() && $event.detail.xhr.response.includes('result-container')) { hasResults = true; analyzing = false; }">
+             @htmx:after-request="
+               const response = $event.detail.xhr.response.trim();
+               if (response && response.includes('result-container')) {
+                 hasResults = true;
+                 analyzing = false;
+               }
+             ">
         </div>
     </section>
 </div>