HTML log viewer

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log Viewer</title>
<style>
    body {
        background-color: #111;
        color: #0f0;
        font-family: 'Cascadia Code', 'Courier New', monospace;
        margin: 0;
        padding: 20px;
        white-space: pre-wrap;
        word-wrap: break-word;
        line-height: 1.4;
    }
    #log { margin: 0; }
</style>
</head>
<body><pre id="log">Loading log…</pre>

<script>
let lastModified = null;
const logElement = document.getElementById('log');

async function loadLog() {
    try {
        // We add a timestamp (?t=...) to bypass aggressive browser caching
        const response = await fetch('messages.log?t=' + Date.now(), {
            cache: 'no-store'
        });

        if (!response.ok) throw new Error('Network response was not ok');

        lastModified = response.headers.get('Last-Modified');
        const text = await response.text();

        logElement.textContent = text;

        // Auto-scroll to bottom
        window.scrollTo(0, document.body.scrollHeight);
    } catch (err) {
        logElement.textContent = 'Error loading log: ' + err.message;
    }
}

async function checkForUpdate() {
    try {
        const response = await fetch('messages.log?t=' + Date.now(), {
            method: 'HEAD',
            cache: 'no-store'
        });

        const newModified = response.headers.get('Last-Modified');

        // Only reload if the header exists and has changed
        if (newModified && newModified !== lastModified) {
            console.log('Log updated, reloading...');
            loadLog();
        }
    } catch (err) {
        console.error('Error checking log update:', err);
    }
}

// Initial load
loadLog();

// Check every 5 seconds (reduced from 10 for better responsiveness)
setInterval(checkForUpdate, 5000);
</script>
</body>
</html>