From 5f2c9f4df98c14d55de32957845f54a9bbc3f647 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sat, 14 Mar 2026 23:10:13 -0700
Subject: [PATCH] Fix menu extraction progress: show each completed menu as
 persistent line

Previously each extraction step cleared the conversation and only showed
the latest result. Now completed menus accumulate as checkmarked lines
while the spinner updates in place for the current extraction.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/setup-wizard.html | 42 ++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/portal/setup-wizard.html b/portal/setup-wizard.html
index d5b5e71..a159d26 100644
--- a/portal/setup-wizard.html
+++ b/portal/setup-wizard.html
@@ -1624,6 +1624,14 @@
 
       document.getElementById('conversation').innerHTML = '';
 
+      // Progress container: completed results stay, spinner updates in place
+      const progressDiv = document.createElement('div');
+      progressDiv.id = 'extractionProgress';
+      const spinnerDiv = document.createElement('div');
+      spinnerDiv.id = 'extractionSpinner';
+      document.getElementById('conversation').appendChild(progressDiv);
+      document.getElementById('conversation').appendChild(spinnerDiv);
+
       // Combined results — start with business info from discovery phase
       const allItems = [];
       const allCategories = [];
@@ -1632,12 +1640,14 @@
       let totalProcessed = 0;
 
       for (const page of pages) {
-        addMessage('ai', `
-          <div style="display:flex;align-items:center;gap:12px;">
-            <div class="loading-spinner"></div>
-            <span>Extracting <strong>${page.name}</strong> menu... (${totalProcessed + 1} of ${pages.length})</span>
+        spinnerDiv.innerHTML = `
+          <div class="message ai-message" style="margin-top:8px;">
+            <div style="display:flex;align-items:center;gap:12px;">
+              <div class="loading-spinner"></div>
+              <span>Extracting <strong>${page.name}</strong> menu... (${totalProcessed + 1} of ${pages.length})</span>
+            </div>
           </div>
-        `);
+        `;
 
         try {
           const resp = await fetch(`${config.apiBaseUrl}/setup/analyzeMenuUrl.php`, {
@@ -1670,24 +1680,28 @@
             allMenus.push(menuEntry);
 
             totalProcessed++;
-            // Update with progress
             const scheduleNote = result.menuSchedule ? ` (${result.menuSchedule})` : '';
-            document.getElementById('conversation').innerHTML = '';
-            addMessage('ai', `
-              <p>Extracted <strong>${page.name}</strong>${scheduleNote}: ${data.items?.length || 0} items in ${data.categories?.length || 0} categories</p>
-            `);
+            const line = document.createElement('div');
+            line.className = 'message ai-message';
+            line.innerHTML = `<p style="margin:4px 0;">✓ Extracted <strong>${page.name}</strong>${scheduleNote}: ${data.items?.length || 0} items in ${data.categories?.length || 0} categories</p>`;
+            progressDiv.appendChild(line);
           } else {
-            document.getElementById('conversation').innerHTML = '';
-            addMessage('ai', `<p style="color:var(--warning);">Could not extract items from ${page.name} page.</p>`);
+            const line = document.createElement('div');
+            line.className = 'message ai-message';
+            line.innerHTML = `<p style="margin:4px 0;color:var(--warning);">✗ Could not extract items from ${page.name} page.</p>`;
+            progressDiv.appendChild(line);
             totalProcessed++;
           }
         } catch (err) {
           console.error(`Error extracting ${page.name}:`, err);
-          document.getElementById('conversation').innerHTML = '';
-          addMessage('ai', `<p style="color:var(--danger);">Error extracting ${page.name}: ${err.message}</p>`);
+          const line = document.createElement('div');
+          line.className = 'message ai-message';
+          line.innerHTML = `<p style="margin:4px 0;color:var(--danger);">✗ Error extracting ${page.name}: ${err.message}</p>`;
+          progressDiv.appendChild(line);
           totalProcessed++;
         }
       }
+      spinnerDiv.remove();
 
       // Compute max business hours from all menu schedules
       if (allMenus.some(m => m.schedule) && !businessInfo.hours) {