templates/dashboard.html

<div class="dashboard">
    <h2>📊 Autonomous AI Dashboard</h2>
    
    <div class="card">
        <h3>System Status</h3>
        <p id="status">Initializing...</p>
    </div>
    
    <div class="card">
        <h3>Knowledge Base</h3>
        <ul id="knowledge">
            <li>Loading...</li>
        </ul>
    </div>
    
    <div class="card">
        <h3>Recent Snapshots</h3>
        <div id="snapshots">None yet</div>
    </div>
</div>

<script>
    async function updateStatus() {
        const response = await fetch('/monitor');
        const data = await response.json();
        
        document.getElementById('status').innerHTML = `
            CPU: ${data.cpu} | Memory: ${data.memory} | Disk: ${data.disk}
        `;
    }
    
    // Update every 5 seconds
    setInterval(updateStatus, 5000);
    updateStatus();
</script>