async function loadDashboard() {
    const res = await apiFetch('/api/dashboard');
    if (!res) return;
    const d = await res.json();

    function setDaemon(id, running) {
        document.getElementById(id).innerHTML =
            `<span class="dot ${running ? 'dot-green' : 'dot-red'}"></span>
             <span class="small">${running ? 'Running' : 'Stopped'}</span>`;
    }
    setDaemon('statusSmbd', d.status.smbd);
    setDaemon('statusNfsd', d.status.nfsd);

    if (d.disk && !d.disk.error) {
        const p = d.disk.percent;
        const bar = document.getElementById('diskBar');
        bar.style.width = p + '%';
        bar.style.background = p > 90 ? 'var(--red)' : p > 75 ? 'var(--yellow)' : 'var(--accent)';
        document.getElementById('diskLabel').textContent =
            `${d.disk.used_gb} GB / ${d.disk.total_gb} GB — ${d.disk.free_gb} GB free`;
    } else if (d.disk?.error) {
        document.getElementById('diskLabel').textContent = 'Error: ' + d.disk.error;
    }

    const sb = document.getElementById('dashSharesBody');
    if (!d.shares?.length) {
        sb.innerHTML = `<tr><td colspan="5" style="color:var(--muted)">No shares configured.</td></tr>`;
    } else {
        sb.innerHTML = d.shares.map(s => `
            <tr>
                <td><span class="badge rounded-pill ${s.type === 'smb' ? 'badge-smb' : 'badge-nfs'}">${s.type.toUpperCase()}</span></td>
                <td>${esc(s.name ?? '—')}</td>
                <td><code>${esc(s.path)}</code></td>
                <td style="color:var(--muted); font-size:.87em">${esc(s.access || '—')}</td>
                <td class="text-end" style="color:var(--muted)">${s.size_gb} GB</td>
            </tr>`).join('');
    }

    _startRefreshCountdown();
}