starting to be usable.

app/web/static/logs.js

@@ -24,9 +24,11 @@ document.addEventListener('DOMContentLoaded', () => {
             console.log('Fetch URL:', url);
             const response = await fetch(url);
             console.log('Response status:', response.status);
+            console.log('Response Content-Type:', response.headers.get('Content-Type')); // NEW: Log Content-Type
+
             if (!response.ok) {
                 const errorText = await response.text(); // Try to get response body as text
-                console.error('Response text on error:', errorText); // Log it
+                console.error('Raw response text on error:', errorText.substring(0, 500) + (errorText.length > 500 ? '...' : '')); // Log first 500 chars
                 // If the server returns a 404, it might be due to a stale UUID.
                 // Log a more specific message.
                 if (response.status === 404) {
@@ -39,7 +41,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
                 return; // Stop further processing if error
             }
-            const data = await response.json();
+
+            // Attempt to parse JSON. This is where the error would occur if the content is HTML.
+            const data = await response.json(); 
             console.log('Received logs:', data.logs.length);
             renderLogTable(data.logs);
             logCountSpan.textContent = data.log_count;
@@ -51,7 +55,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function renderLogTable(logs) {
         console.log('Rendering logs:', logs.length);
-        logTableContainer.innerHTML = '';
+        logTableContainer.innerHTML = ''; // Clear existing content before rendering
 
         if (logs.length === 0) {
             logTableContainer.innerHTML = '<p class="loading-message">No logs available.</p>';
@@ -86,7 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const row = document.createElement('tr');
             row.innerHTML = `
                 <td>${new Date(log.timestamp).toLocaleString()}</td>
-                <td class="log-level log-level-${log.level.toLowerCase()}">${log.level}</td>
+                <td class="log-level log-level-${(log.level || '').toLowerCase()}">${log.level || 'N/A'}</td>
                 <td>${escapeHtml(log.message)}</td>
                 <td>
                     ${log.extra ? `
@@ -158,6 +162,8 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     console.log('Initializing logs page');
+    // Call fetchLogs immediately on page load to populate the table with fresh data
+    // and handle the initial refresh logic.
     fetchLogs();
     setInterval(fetchLogs, POLLING_INTERVAL_MS);
 });