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);
 });

app/web/static/script.js

@@ -19,8 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function renderNodeGrid(nodes) {
-        nodeGridContainer.innerHTML = '';
-        nodeCountSpan.textContent = nodes.length;
+        nodeGridContainer.innerHTML = ''; // Clear existing content
+        nodeCountSpan.textContent = nodes.length; // Update total node count
 
         if (nodes.length === 0) {
             nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
@@ -132,4 +132,3 @@ document.addEventListener('DOMContentLoaded', () => {
     fetchNodeData();
     setInterval(fetchNodeData, POLLING_INTERVAL_MS);
 });
-

app/web/static/style.css

@@ -38,10 +38,10 @@ body {
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     margin-bottom: 20px;
-    width: 80vw;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+    width: 80vw; /* Keep this fixed width for the header */
+    max-width: 1200px; /* Keep this max-width for the header */
+    margin-left: auto; /* Center the header */
+    margin-right: auto; /* Center the header */
 }
 
 h1 {
@@ -65,17 +65,18 @@ code {
 }
 
 #node-grid-container, #log-table-container {
-    width: 95vw;
-    max-width: 1600px;
-    min-width: 400px;
+    /* Adjusted width/max-width to allow dynamic resizing and scrolling */
+    width: 95vw; /* Allow it to take up to 95% of viewport width */
+    max-width: 1800px; /* Increased max-width to accommodate more columns */
+    min-width: 400px; /* Keep a minimum width */
     padding: 20px;
     background-color: var(--nord3);
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    margin-bottom: 20px;
-    margin-left: auto;
-    margin-right: auto;
-    overflow-x: auto;
+    margin-bottom: 20px; /* Spacing below the container */
+    margin-left: auto; /* Center the block */
+    margin-right: auto; /* Center the block */
+    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
 }
 
 .connection-grid {
@@ -263,7 +264,7 @@ code {
     color: var(--nord11); /* Red */
 }
 
-.log-level-debug { /* Added for potential debug logs */
+.log-level-debug {
     color: var(--nord9); /* Blue */
 }
 

app/web/templates/index.html

@@ -10,7 +10,7 @@
     <div class="header-container">
         <h1>Node Monitoring System</h1>
         <p>Total Nodes: <span id="node-count">0</span></p>
-        <p>Service UUID: <code>{{ service_uuid }}</code></p>
+        <p>Service UUID: <code>{{ service_uuid }}</code></p> <!-- ALWAYS DISPLAYED -->
     </div>
 
     <div id="node-grid-container">

app/web/templates/logs.html

@@ -24,6 +24,7 @@
         </div>
     </div>
     <div id="log-table-container" data-service-uuid="{{ service_uuid }}">
+        {# The initial logs are rendered by Jinja2 here #}
         {% if logs %}
             <table class="log-table">
                 <thead>
@@ -63,4 +64,3 @@
     <script src="{{ url_for('static', path='/logs.js') }}"></script>
 </body>
 </html>
-