C

app/templates/index.html

@@ -207,6 +207,17 @@
             <div id="featuresOutput" class="bg-gray-50 rounded p-4 min-h-32"></div>
         </div>
 
+        <!-- Add this before the rawOutput div -->
+        <div id="progressBar" class="hidden mt-4 mb-8">
+            <div class="flex justify-between mb-1">
+                <span class="text-sm font-medium text-blue-700" id="progressText">0%</span>
+                <span class="text-sm font-medium text-blue-700" id="progressStep">Step 0/100</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-150" id="progressFill" style="width: 0%"></div>
+            </div>
+        </div>
+
         <!-- Add this right after the form -->
         <div id="rawOutput" class="mt-8 bg-white rounded-lg shadow-lg p-6">
             <h2 class="text-xl font-bold mb-4 text-gray-800">Raw Response Data</h2>
@@ -462,35 +473,53 @@
                     body: JSON.stringify(requestData)
                 });
 
-                const data = await response.json();
-                
-                // Display complete API response
-                document.getElementById('rawApiResponse').textContent = JSON.stringify(data, null, 2);
-                
-                // Display raw content
-                document.getElementById('rawContent').textContent = data.raw_content;
-                
-                // Display parsed sections
-                document.getElementById('rawSections').textContent = JSON.stringify(data.sections, null, 2);
-
-                // Log everything to console
-                console.log('Request:', requestData);
-                console.log('API Response:', data);
-                console.log('Raw Content:', data.raw_content);
-                console.log('Sections:', data.sections);
-
-                // Still display the formatted plan
-                displayPlan(data);
-                
-                // Show raw output section
-                document.getElementById('rawOutput').classList.remove('hidden');
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                // Show progress bar
+                document.getElementById('progressBar').classList.remove('hidden');
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const data = JSON.parse(line.slice(5));
+                            
+                            if (data.type === 'progress') {
+                                // Update progress bar
+                                const progressFill = document.getElementById('progressFill');
+                                const progressText = document.getElementById('progressText');
+                                const progressStep = document.getElementById('progressStep');
+                                
+                                progressFill.style.width = `${data.progress}%`;
+                                progressText.textContent = `${Math.round(data.progress)}%`;
+                                progressStep.textContent = `Step ${data.step}/${data.total}`;
+                            } else if (data.type === 'complete') {
+                                // Display final results
+                                displayPlan(data);
+                                document.getElementById('rawApiResponse').textContent = JSON.stringify(data, null, 2);
+                                document.getElementById('rawContent').textContent = data.raw_content;
+                                document.getElementById('rawSections').textContent = JSON.stringify(data.sections, null, 2);
+                            } else if (data.type === 'error') {
+                                console.error('Error:', data.error);
+                                alert(`Error: ${data.error}`);
+                            }
+                        }
+                    }
+                }
 
             } catch (error) {
                 console.error('Error:', error);
-                document.getElementById('rawApiResponse').textContent = `Error: ${error.message}`;
                 alert('Error generating plan');
             } finally {
                 loading.style.display = 'none';
+                // Hide progress bar when done
+                document.getElementById('progressBar').classList.add('hidden');
             }
         }
 
@@ -534,33 +563,16 @@
             title.textContent = `Technical Project Plan: ${data.project_title}`;
             sections.innerHTML = '';
 
-            Object.entries(data.sections).forEach(([key, content]) => {
-                const sectionTitle = key
-                    .split('_')
-                    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                    .join(' ');
-
-                const section = document.createElement('div');
-                section.className = 'mb-6 bg-white p-4 rounded shadow';
-                section.innerHTML = `
-                    <h4 class="text-lg font-semibold mb-3 text-blue-600">${sectionTitle}</h4>
-                    <div class="whitespace-pre-wrap text-gray-700 prose max-w-none">
-                        ${content}
-                    </div>
-                `;
-                sections.appendChild(section);
+            // Keep only debug panel toggle functionality
+            document.addEventListener('keydown', function(e) {
+                if (e.ctrlKey && e.key === 'd') {
+                    e.preventDefault();
+                    toggleDebugPanel();
+                }
             });
 
-            output.classList.remove('hidden');
+            output.classList.add('hidden');  // Hide the output section
         }
-
-        // Add keyboard shortcut to toggle debug panel
-        document.addEventListener('keydown', function(e) {
-            if (e.ctrlKey && e.key === 'd') {
-                e.preventDefault();
-                toggleDebugPanel();
-            }
-        });
     </script>
 </body>
 </html>