Fix UI 404 by applying async job queue client logic to actual index.html template

templates/index.html

@@ -433,72 +433,108 @@
             cpu_threads: 16
           };
 
-          const res = await fetch('/api/query', {
+          const startRes = await fetch('/api/query/start', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', 'X-Session-Token': SESSION_TOKEN },
             body: JSON.stringify(payload)
           });
 
-          if (!res.ok) {
-            throw new Error(`Network response was not ok: ${res.status}`);
+          if (!startRes.ok) {
+            throw new Error(`Network response was not ok: ${startRes.status}`);
           }
+          
+          const startData = await startRes.json();
+          const jobId = startData.job_id;
 
           diag.info('Generation started. Streaming chunks...');
-          const reader = res.body.getReader();
-          const decoder = new TextDecoder('utf-8');
-          let done = false;
+          
+          let jobDone = false;
+          let currentOffset = 0;
           let answer = '';
 
-          while (!done) {
-            const { value, done: readerDone } = await reader.read();
-            if (value) {
-              const chunk = decoder.decode(value, { stream: true });
-              const lines = chunk.split('\n\n');
-              for (let line of lines) {
-                if (line.startsWith('data: ')) {
-                  try {
-                    const data = JSON.parse(line.substring(6));
-                    if (data.chunk) {
-                      genGraph.style.display = 'none';
-                      answer += data.chunk;
-                      diag.info(`Received chunk: ${data.chunk}`);
-                      if (window.marked) {
-                        answerContent.innerHTML = marked.parse(answer);
-                      } else {
-                        answerContent.textContent = answer;
-                      }
-                      // Auto-scroll to bottom
-                      window.scrollTo(0, document.body.scrollHeight);
-                    } else if (data.status) {
-                      diag.info(`Status update:`, data.status);
-                      if (milestoneText) {
-                        const msg = typeof data.status === 'string' ? data.status : (data.status.message || 'Processing...');
-                        milestoneText.setAttribute('data-status', msg);
+          while (!jobDone) {
+            try {
+              const res = await fetch(`/api/query/stream/${jobId}?offset=${currentOffset}`, {
+                headers: { 'X-Session-Token': SESSION_TOKEN }
+              });
+              
+              if (!res.ok) {
+                if (res.status === 404) throw new Error("Job not found or expired on server.");
+                throw new Error(`Stream network response was not ok: ${res.status}`);
+              }
+              
+              const reader = res.body.getReader();
+              const decoder = new TextDecoder('utf-8');
+              let buffer = '';
+              
+              while (!jobDone) {
+                const { value, done: readerDone } = await reader.read();
+                if (readerDone) break;
+                if (value) {
+                  buffer += decoder.decode(value, { stream: true });
+                  const lines = buffer.split('\n\n');
+                  buffer = lines.pop(); // keep the last incomplete chunk in buffer
+                  
+                  for (let line of lines) {
+                    if (line.startsWith('data: ')) {
+                      try {
+                        const data = JSON.parse(line.substring(6));
+                        
+                        // Successfully received an event
+                        currentOffset++;
+                        
+                        if (data.chunk) {
+                          genGraph.style.display = 'none';
+                          answer += data.chunk;
+                          diag.info(`Received chunk: ${data.chunk}`);
+                          if (window.marked) {
+                            answerContent.innerHTML = marked.parse(answer);
+                          } else {
+                            answerContent.textContent = answer;
+                          }
+                          // Auto-scroll to bottom
+                          window.scrollTo(0, document.body.scrollHeight);
+                        } else if (data.status) {
+                          diag.info(`Status update:`, data.status);
+                          if (milestoneText) {
+                            const msg = typeof data.status === 'string' ? data.status : (data.status.message || 'Processing...');
+                            milestoneText.setAttribute('data-status', msg);
+                          }
+                        } else if (data.metrics) {
+                          diag.info(`Generation metrics:`, data.metrics);
+                          const metricsHtml = `
+                            <div style="font-size: 0.85rem; color: #666; margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 10px;">
+                              Analysis took ${data.metrics.time_seconds?.toFixed(1) || '?'} seconds.
+                              Tokens: ${data.metrics.tokens_in || '?'} in, ${data.metrics.tokens_out || '?'} out.
+                            </div>
+                          `;
+                          answerContent.innerHTML += metricsHtml;
+                          window.scrollTo(0, document.body.scrollHeight);
+                        } else if (data.done) {
+                          diag.info('Generation complete.');
+                          jobDone = true;
+                          break;
+                        } else if (data.error) {
+                          genGraph.style.display = 'none';
+                          diag.error(`Backend error: ${data.error}`);
+                          answerContent.innerHTML += `<p style="color:#d32f2f; font-weight:bold;">Error: ${data.error}</p>`;
+                          jobDone = true;
+                          break;
+                        }
+                      } catch (e) {
+                        // Ignore parse errors on incomplete chunks
                       }
-                    } else if (data.metrics) {
-                      diag.info(`Generation metrics:`, data.metrics);
-                      const metricsHtml = `
-                        <div style="font-size: 0.85rem; color: #666; margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 10px;">
-                          Analysis took ${data.metrics.time_seconds?.toFixed(1) || '?'} seconds.
-                          Tokens: ${data.metrics.tokens_in || '?'} in, ${data.metrics.tokens_out || '?'} out.
-                        </div>
-                      `;
-                      answerContent.innerHTML += metricsHtml;
-                      window.scrollTo(0, document.body.scrollHeight);
-                    } else if (data.done) {
-                      diag.info('Generation complete.');
-                    } else if (data.error) {
-                      genGraph.style.display = 'none';
-                      diag.error(`Backend error: ${data.error}`);
-                      answerContent.innerHTML += `<p style="color:#d32f2f; font-weight:bold;">Error: ${data.error}</p>`;
                     }
-                  } catch (e) {
-                    // Ignore parse errors on incomplete chunks
                   }
                 }
               }
+            } catch (err) {
+              if (err.message.includes("Job not found") || jobDone) {
+                throw err;
+              }
+              diag.warn('Network dropped, reconnecting to job...', err);
+              await new Promise(r => setTimeout(r, 1500));
             }
-            done = readerDone;
           }
         } catch (e) {
           genGraph.style.display = 'none';