C'

app/templates/index.html

@@ -152,25 +152,36 @@
                 <h3 class="text-lg font-semibold mb-2" id="planTitle"></h3>
                 <div id="planSections" class="space-y-4"></div>
             </div>
-            <div id="debugPanel" class="mt-6 bg-gray-800 rounded p-4 text-white hidden">
+            <div id="debugPanel" class="mt-6 bg-gray-800 rounded-lg p-4 text-white">
                 <div class="flex justify-between items-center mb-4">
                     <h3 class="text-lg font-semibold">Debug Panel</h3>
-                    <button onclick="toggleDebugPanel()" class="text-gray-400 hover:text-white">
-                        <i class="fas fa-times"></i>
-                    </button>
+                    <div class="space-x-2">
+                        <button onclick="copyRawContent()" class="text-xs bg-blue-500 hover:bg-blue-600 px-2 py-1 rounded">
+                            <i class="fas fa-copy mr-1"></i>Copy
+                        </button>
+                        <button onclick="toggleDebugPanel()" class="text-gray-400 hover:text-white">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
                 </div>
+                
                 <div class="space-y-4">
-                    <div>
-                        <h4 class="text-sm font-semibold text-gray-400">Request Data</h4>
-                        <pre id="requestData" class="text-xs bg-gray-900 p-2 rounded overflow-auto max-h-40"></pre>
+                    <div class="border-b border-gray-700 pb-4">
+                        <h4 class="text-sm font-semibold text-gray-400 mb-2">Request Data</h4>
+                        <pre id="requestData" class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-40 font-mono"></pre>
                     </div>
-                    <div>
-                        <h4 class="text-sm font-semibold text-gray-400">Raw API Response</h4>
-                        <pre id="rawResponse" class="text-xs bg-gray-900 p-2 rounded overflow-auto max-h-40"></pre>
+                    
+                    <div class="border-b border-gray-700 pb-4">
+                        <div class="flex justify-between items-center mb-2">
+                            <h4 class="text-sm font-semibold text-gray-400">Raw Model Output</h4>
+                            <span id="rawContentLength" class="text-xs text-gray-500"></span>
+                        </div>
+                        <pre id="rawContent" class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-96 font-mono whitespace-pre-wrap"></pre>
                     </div>
+                    
                     <div>
-                        <h4 class="text-sm font-semibold text-gray-400">Parsed Sections</h4>
-                        <pre id="parsedSections" class="text-xs bg-gray-900 p-2 rounded overflow-auto max-h-40"></pre>
+                        <h4 class="text-sm font-semibold text-gray-400 mb-2">Parsed Sections</h4>
+                        <pre id="parsedSections" class="text-xs bg-gray-900 p-3 rounded overflow-auto max-h-40 font-mono"></pre>
                     </div>
                 </div>
             </div>
@@ -195,6 +206,37 @@
             </div>
             <div id="featuresOutput" class="bg-gray-50 rounded p-4 min-h-32"></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>
+            
+            <div class="space-y-6">
+                <!-- Request Data -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-2 text-blue-600">Request Data</h3>
+                    <pre id="rawRequest" class="bg-gray-900 text-green-400 p-4 rounded overflow-auto max-h-60 font-mono text-sm whitespace-pre-wrap"></pre>
+                </div>
+
+                <!-- API Response -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-2 text-blue-600">API Response</h3>
+                    <pre id="rawApiResponse" class="bg-gray-900 text-green-400 p-4 rounded overflow-auto max-h-96 font-mono text-sm whitespace-pre-wrap"></pre>
+                </div>
+
+                <!-- Raw Content -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-2 text-blue-600">Raw Content</h3>
+                    <pre id="rawContent" class="bg-gray-900 text-green-400 p-4 rounded overflow-auto max-h-96 font-mono text-sm whitespace-pre-wrap"></pre>
+                </div>
+
+                <!-- Parsed Sections -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-2 text-blue-600">Parsed Sections</h3>
+                    <pre id="rawSections" class="bg-gray-900 text-green-400 p-4 rounded overflow-auto max-h-96 font-mono text-sm whitespace-pre-wrap"></pre>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Chat Widget -->
@@ -397,40 +439,55 @@
                 return;
             }
 
+            const requestData = {
+                project_title: projectTitle,
+                requirements,
+                features,
+                platform,
+                additional_requirements: additionalRequirements
+            };
+
+            // Display request data
+            document.getElementById('rawRequest').textContent = JSON.stringify(requestData, null, 2);
+
             const loading = document.getElementById('planLoading');
             const output = document.getElementById('planOutput');
             loading.style.display = 'block';
             output.classList.add('hidden');
 
             try {
-                console.log('Sending request with data:', {
-                    project_title: projectTitle,
-                    requirements,
-                    features,
-                    platform,
-                    additional_requirements: additionalRequirements
-                });
-
                 const response = await fetch('/generate-plan', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        project_title: projectTitle,
-                        requirements,
-                        features,
-                        platform,
-                        additional_requirements: additionalRequirements
-                    })
+                    body: JSON.stringify(requestData)
                 });
 
                 const data = await response.json();
-                console.log('Raw API Response:', data);
-                console.log('Sections:', data.sections);
-                console.log('Raw Content:', data.raw_content);
                 
+                // 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');
+
             } catch (error) {
-                console.error('Error generating plan:', error);
+                console.error('Error:', error);
+                document.getElementById('rawApiResponse').textContent = `Error: ${error.message}`;
                 alert('Error generating plan');
             } finally {
                 loading.style.display = 'none';
@@ -442,59 +499,68 @@
             debugPanel.classList.toggle('hidden');
         }
 
+        function copyRawContent() {
+            const rawContent = document.getElementById('rawContent').textContent;
+            navigator.clipboard.writeText(rawContent).then(() => {
+                alert('Raw content copied to clipboard!');
+            });
+        }
+
         function displayPlan(data) {
-            console.log('Displaying plan data:', data);
             const output = document.getElementById('planOutput');
             const title = document.getElementById('planTitle');
             const sections = document.getElementById('planSections');
 
-            title.textContent = `Technical Project Plan: ${data.project_title}`;
-            console.log('Set title to:', title.textContent);
+            // Update debug panel with raw data
+            document.getElementById('requestData').textContent = JSON.stringify({
+                project_title: data.project_title,
+                sections: data.sections
+            }, null, 2);
+
+            // Display raw content with line breaks preserved
+            const rawContent = document.getElementById('rawContent');
+            rawContent.textContent = data.raw_content;
             
-            // Clear previous sections
+            // Show content length
+            const contentLength = data.raw_content.length;
+            document.getElementById('rawContentLength').textContent = 
+                `Length: ${contentLength} characters`;
+
+            // Display parsed sections
+            document.getElementById('parsedSections').textContent = 
+                JSON.stringify(data.sections, null, 2);
+
+            // Original plan display code
+            title.textContent = `Technical Project Plan: ${data.project_title}`;
             sections.innerHTML = '';
 
-            // Display each section
             Object.entries(data.sections).forEach(([key, content]) => {
-                console.log(`Processing section ${key}:`, content);
-                
                 const sectionTitle = key
                     .split('_')
                     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                     .join(' ');
 
-                // Format the content based on type
-                let formattedContent = content;
-                if (typeof content === 'object') {
-                    console.log(`Section ${key} is an object:`, content);
-                    formattedContent = Object.entries(content)
-                        .map(([k, v]) => `<strong>${k}:</strong> ${v}`)
-                        .join('<br>');
-                }
-
                 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">
-                        ${formattedContent}
+                        ${content}
                     </div>
                 `;
                 sections.appendChild(section);
             });
 
-            console.log('Final HTML output:', sections.innerHTML);
             output.classList.remove('hidden');
-
-            // Update debug panel
-            document.getElementById('debugPanel').classList.remove('hidden');
-            document.getElementById('requestData').textContent = JSON.stringify({
-                project_title: data.project_title,
-                sections: data.sections
-            }, null, 2);
-            document.getElementById('rawResponse').textContent = data.raw_content;
-            document.getElementById('parsedSections').textContent = JSON.stringify(data.sections, null, 2);
         }
+
+        // Add keyboard shortcut to toggle debug panel
+        document.addEventListener('keydown', function(e) {
+            if (e.ctrlKey && e.key === 'd') {
+                e.preventDefault();
+                toggleDebugPanel();
+            }
+        });
     </script>
 </body>
 </html>