garden/static/js/estate.js

/* estate.js — Vigo's Estate API client
 *
 * Fetches Estate API data and populates dynamic sections: homepage pulse
 * cards and full estate dashboard. Uses build-time JSON snapshots from
 * /data/*.json (static files generated by prebuild-fetch.sh).
 *
 * If nginx /api/ reverse proxy is configured (garden.trentuna.com/api/ →
 * localhost:8000), the JS can also fetch live data from there. By default
 * it reads from /data/ for simplicity.
 */

const DATA_BASE = '/data';

/* ── Helpers ────────────────────────────────────────────────────── */

function $(id) { return document.getElementById(id); }

async function loadJSON(path) {
  const res = await fetch(path);
  if (!res.ok) throw new Error(`${path}: ${res.status}`);
  return res.json();
}

function fmtPct(v) { return (typeof v === 'number') ? v + '%' : v; }

function fmtTime(t) {
  if (!t) return '—';
  try { return new Date(t).toLocaleString(); } catch { return t; }
}

/* ── Homepage pulse cards ──────────────────────────────────────── */

async function fetchPulse() {
  try {
    const summary = await loadJSON(DATA_BASE + '/summary.json');
    const trends = await loadJSON(DATA_BASE + '/trends-limit-5.json');

    // Disk
    const diskPct = summary?.estate?.disk_latest;
    if ($('disk-value')) $('disk-value').textContent = diskPct ? diskPct + '%' : '—';
    if ($('disk-detail')) $('disk-detail').textContent = diskPct ? `used` : 'n/a';

    // Health
    const healthStatus = summary?.estate?.health_status || '—';
    if ($('health-value')) $('health-value').textContent = healthStatus === 'ok' ? 'ok' : healthStatus;
    if ($('health-detail')) $('health-detail').textContent = healthStatus === 'ok' ? 'estate nominal' : 'check estate';

    // Events
    const eventCount = summary?.estate?.recent_events?.length || 0;
    if ($('events-value')) $('events-value').textContent = eventCount > 0 ? eventCount : '—';
    if ($('events-detail')) $('events-detail').textContent = eventCount === 1 ? 'event' : eventCount + ' events';

    // Session count from trends
    const sessions = trends?.data?.[0]?.vault?.sessions || null;
    if ($('vault-sessions-value')) $('vault-sessions-value').textContent = sessions !== null ? sessions : '—';

    // Session count standalone (in the intro block)
    if ($('session-count')) {
      $('session-count').textContent = sessions !== null ? sessions.toLocaleString() + ' sessions' : '? sessions';
    }

    // Timestamp
    const updated = summary?.estate?.recent_events?.[0]?.timestamp;
    if ($('pulse-timestamp')) {
      $('pulse-timestamp').textContent = updated
        ? 'Last update: ' + fmtTime(updated)
        : 'Estate data live';
    }

  } catch (err) {
    console.warn('estate.js: pulse fetch failed', err);
    if ($('pulse-timestamp')) $('pulse-timestamp').textContent = 'Estate API offline';
    // Leave placeholder dashes in the cards
  }
}

/* ── Estate dashboard (full) ───────────────────────────────────── */

async function fetchEstate() {
  const el = (id) => $(id);
  const setText = (id, val) => { const e = el(id); if (e) e.textContent = val; };
  const setHTML = (id, html) => { const e = el(id); if (e) e.innerHTML = html; };

  try {
    const [summary, health, disk, events, repos, providers, builds, trends] = await Promise.all([
      loadJSON(DATA_BASE + '/summary.json'),
      loadJSON(DATA_BASE + '/health.json').catch(() => ({ error: true, data: [] })),
      loadJSON(DATA_BASE + '/disk.json').catch(() => ({ error: true })),
      loadJSON(DATA_BASE + '/events-limit-10.json').catch(() => ({ error: true, data: [] })),
      loadJSON(DATA_BASE + '/repos.json').catch(() => ({ error: true, data: [] })),
      loadJSON(DATA_BASE + '/providers.json').catch(() => ({ error: true, data: [] })),
      loadJSON(DATA_BASE + '/builds.json').catch(() => ({ error: true, data: [] })),
      loadJSON(DATA_BASE + '/trends-limit-5.json').catch(() => ({ error: true, data: [] })),
    ]);

    // ── Summary cards ──
    setText('estate-api-version', summary?.api_version || '—');
    setText('estate-disk', summary?.estate?.disk_latest ? summary.estate.disk_latest + '%' : '—');
    setText('estate-health', summary?.estate?.health_status || '—');
    setText('estate-sources', summary?.sources?.length || '—');

    const sourceRows = (summary?.sources || []).map(s =>
      `<tr><td>${s.source}</td><td>${s.available ? '✓' : '✗'}</td><td>${s.count}</td><td>${s.last_updated || '—'}</td></tr>`
    ).join('');
    setHTML('estate-sources-table', sourceRows || '<tr><td colspan="4">No source data</td></tr>');

    // ── Health ──
    if (health?.error) {
      setHTML('estate-health-table', '<tr><td colspan="3">Health data unavailable</td></tr>');
    } else {
      const healthRows = (Array.isArray(health?.data) ? health.data : health?.data ? [health.data] : []).slice(0, 10).map(h =>
        `<tr><td>${h.timestamp || '—'}</td><td>${h.status || '—'}</td><td>${(h.detail || '').substring(0, 80)}</td></tr>`
      ).join('');
      setHTML('estate-health-table', healthRows || '<tr><td colspan="3">No health entries</td></tr>');
    }

    // ── Disk ──
    if (disk?.error) {
      setHTML('estate-disk-info', '<p>Disk data unavailable</p>');
    } else {
      const diskLatest = disk?.latest || disk;
      const diskHtml = Object.entries(diskLatest || {}).map(([k, v]) =>
        `<tr><td>${k}</td><td>${v}</td></tr>`
      ).join('');
      setHTML('estate-disk-info', diskHtml ? '<table><thead><tr><th>Metric</th><th>Value</th></tr></thead><tbody>' + diskHtml + '</tbody></table>' : '<p>No disk data</p>');
    }

    // ── Events ──
    const evts = Array.isArray(events?.data) ? events.data : (events?.data ? [events.data] : []);
    const eventRows = evts.slice(0, 10).map(e =>
      `<tr><td>${fmtTime(e.timestamp)}</td><td>${e.source || '—'}</td><td>${(e.detail || '').substring(0, 90)}</td></tr>`
    ).join('');
    setHTML('estate-events-table', eventRows || '<tr><td colspan="3">No events</td></tr>');

    // ── Repos ──
    const repoList = Array.isArray(repos?.data) ? repos.data : (repos?.repos?.data ? repos.repos.data : []);
    const repoRows = repoList.slice(0, 15).map(r =>
      `<tr><td>${r.name || r.path || '—'}</td><td>${r.url || '—'}</td><td>${r.branch || r.status || '—'}</td></tr>`
    ).join('');
    setHTML('estate-repos-table', repoRows || '<tr><td colspan="3">No repo data</td></tr>');

    // ── Providers ──
    const provList = Array.isArray(providers?.data) ? providers.data : (providers?.providers || []);
    const provRows = provList.slice(0, 10).map(p =>
      `<tr><td>${p.name || '—'}</td><td>${p.status || p.reachable ? '✓' : '✗'}</td><td>${p.model || '—'}</td></tr>`
    ).join('');
    setHTML('estate-providers-table', provRows || '<tr><td colspan="3">No provider data</td></tr>');

    // ── Builds ──
    const buildList = Array.isArray(builds?.data) ? builds.data : [];
    const buildRows = buildList.slice(0, 10).map(b =>
      `<tr><td>${b.timestamp || '—'}</td><td>${b.repo || b.project || '—'}</td><td>${b.status || '—'}</td></tr>`
    ).join('');
    setHTML('estate-builds-table', buildRows || '<tr><td colspan="3">No builds</td></tr>');

    // ── Trends ──
    const trendData = Array.isArray(trends?.data) ? trends.data : [];
    const trendRows = trendData.slice(0, 10).map(t =>
      `<tr><td>${fmtTime(t.timestamp)}</td><td>${t.vault?.sessions || '—'}</td><td>${t.vault?.notes || '—'}</td><td>${t.disk?.used_pct || '—'}%</td><td>${t.system?.mem_used_pct || '—'}%</td></tr>`
    ).join('');
    setHTML('estate-trends-table', trendRows || '<tr><td colspan="5">No trend data</td></tr>');

    // Estate loaded indicator
    setHTML('estate-loading', '');
  } catch (err) {
    console.warn('estate.js: full estate fetch failed', err);
    setHTML('estate-loading', '<p class="error">Estate API unavailable</p>');
  }
}

/* ── State files ───────────────────────────────────────────────── */

async function fetchStateFiles() {
  const el = (id) => $(id);
  const setHTML = (id, html) => { const e = el(id); if (e) e.innerHTML = html; };

  try {
    const state = await loadJSON(DATA_BASE + '/state.json');
    const files = Array.isArray(state?.files) ? state.files : [];

    const fileCards = files.map(f => {
      const truncated = f.content.length > 600 ? f.content.substring(0, 600) + '…' : f.content || '(empty)';
      return `<article data-card>
        <header>${f.name}</header>
        <p>${(f.size_bytes || 0).toLocaleString()} bytes</p>
        <pre style="font-size:0.75rem;max-height:200px;overflow:auto">${escHtml(truncated)}</pre>
        <a href="/api/state?file=${f.name}">View full →</a>
      </article>`;
    }).join('');

    setHTML('estate-state-files', fileCards || '<p>No state files</p>');
  } catch (err) {
    console.warn('estate.js: state file fetch failed', err);
    setHTML('estate-state-files', '<p>State data unavailable</p>');
  }
}

function escHtml(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML;
}

/* ── Init ──────────────────────────────────────────────────────── */

document.addEventListener('DOMContentLoaded', () => {
  // Always fetch pulse (homepage widget)
  fetchPulse();

  // If we're on the estate dashboard, fetch full data
  if ($('estate-dashboard')) {
    fetchEstate();
    fetchStateFiles();
  }
});