log: add log query API endpoints and display logs on web interface

main/html/index.html

@@ -688,6 +688,23 @@
                 </div>
             </div>
         </div>
+
+        <div class="grid">
+            <!-- System Logs Card -->
+            <div class="card">
+                <h2><span class="icon">📋</span> System Logs</h2>
+                <div class="console-container">
+                    <div class="console-output" id="logs-output">
+                        <pre>Loading logs...</pre>
+                    </div>
+                    <div class="console-controls">
+                        <button class="btn btn-secondary" onclick="refreshLogs()">Refresh</button>
+                        <button class="btn btn-secondary" onclick="clearLogs()">Clear Logs</button>
+                        <label><input type="checkbox" id="auto-refresh-logs" onchange="toggleAutoRefreshLogs()" /> Auto-refresh</label>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <div class="toast-container" id="toast-container"></div>
@@ -1218,12 +1235,61 @@
                 }
             });
 
+            // Initialize logs
+            refreshLogs();
+
             // Periodic updates
             setInterval(updateSystemInfo, 5000);
             setInterval(updateGPIOStates, 2000);
             setInterval(updatePowerStatus, 2000);
             setInterval(updateOTAStatus, 5000);
         });
+
+        // Log viewer functions
+        let logsAutoRefreshInterval = null;
+
+        async function refreshLogs() {
+            try {
+                const response = await fetch(`${API_BASE}/api/logs`);
+                const logs = await response.text();
+                const logsOutput = document.getElementById('logs-output');
+                logsOutput.innerHTML = `<pre>${escapeHtml(logs)}</pre>`;
+                // Scroll to bottom
+                logsOutput.scrollTop = logsOutput.scrollHeight;
+            } catch (error) {
+                console.error('Failed to fetch logs:', error);
+                document.getElementById('logs-output').innerHTML = '<pre>Failed to load logs</pre>';
+            }
+        }
+
+        async function clearLogs() {
+            try {
+                await fetch(`${API_BASE}/api/logs/clear`, { method: 'POST' });
+                refreshLogs();
+                showToast('Logs cleared', 'success');
+            } catch (error) {
+                console.error('Failed to clear logs:', error);
+                showToast('Failed to clear logs', 'error');
+            }
+        }
+
+        function toggleAutoRefreshLogs() {
+            const checkbox = document.getElementById('auto-refresh-logs');
+            if (checkbox.checked) {
+                logsAutoRefreshInterval = setInterval(refreshLogs, 2000);
+            } else {
+                if (logsAutoRefreshInterval) {
+                    clearInterval(logsAutoRefreshInterval);
+                    logsAutoRefreshInterval = null;
+                }
+            }
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
     </script>
 </body>
 </html>