fix: [PANELS] Add heartbeat / morning briefing panel tied to Hermes state (closes #698)

2026-04-10 20:19:20 -04:00
parent cc4af009c7
commit 43455e9c83
5 changed files with 408 additions and 1 deletions
--- a/app.js
+++ b/app.js
@@ -713,6 +713,8 @@ async function init() {
  connectHermes();
  fetchGiteaData();
  setInterval(fetchGiteaData, 30000); // Refresh every 30s
+  updateHeartbeatBriefing(); // Initial briefing load
+  setInterval(updateHeartbeatBriefing, 60000); // Refresh briefing every 60s

  composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));
@@ -1140,6 +1142,7 @@ async function fetchGiteaData() {
      const worldState = JSON.parse(atob(content.content));
      updateNexusCommand(worldState);
      updateSovereignHealth();
+      updateHeartbeatBriefing();
    }
  } catch (e) {
    console.error('Failed to fetch Gitea data:', e);
@@ -1235,6 +1238,127 @@ function updateNexusCommand(state) {
  terminal.updatePanelText(lines);
 }

+// ═══ HEARTBEAT BRIEFING PANEL ═════════════════════════════════════════
+async function updateHeartbeatBriefing() {
+  const container = document.getElementById('heartbeat-briefing-content');
+  const pulseDot = document.querySelector('.hb-pulse-dot');
+  if (!container) return;
+
+  let data = null;
+  try {
+    // Derive briefing endpoint from current location or fallback to localhost
+    const briefingUrl = window.location.protocol === 'file:'
+      ? 'http://localhost:8766/api/briefing'
+      : `${window.location.protocol}//${window.location.hostname}:8766/api/briefing`;
+    const res = await fetch(briefingUrl);
+    if (res.ok) data = await res.json();
+  } catch (e) {
+    // Server not reachable — show honest offline state
+  }
+
+  if (!data) {
+    if (pulseDot) pulseDot.classList.add('offline');
+    container.innerHTML = '<div class="hb-empty">Briefing offline<br>No connection to Nexus gateway</div>';
+    return;
+  }
+
+  if (pulseDot) pulseDot.classList.remove('offline');
+
+  let html = '';
+
+  // ── Core Heartbeat ──
+  html += '<div class="briefing-section">';
+  html += '<div class="briefing-section-label">Nexus Core</div>';
+  const hb = data.core_heartbeat;
+  if (hb) {
+    const age = hb.age_secs != null ? hb.age_secs : '?';
+    const ageLabel = typeof age === 'number'
+      ? (age < 60 ? `${age.toFixed(0)}s ago` : `${(age / 60).toFixed(1)}m ago`)
+      : age;
+    const isAlive = typeof age === 'number' && age < 120;
+    html += `<div class="hb-core-row">
+      <span class="hb-core-status ${isAlive ? 'alive' : 'dead'}">${isAlive ? '● ALIVE' : '○ STALE'}</span>
+      <span class="hb-core-meta">cycle ${hb.cycle || '?'} · ${hb.model || 'unknown'} · ${ageLabel}</span>
+    </div>`;
+    html += `<div class="hb-core-meta">status: ${hb.status || '?'}</div>`;
+  } else {
+    html += '<div class="hb-core-row"><span class="hb-core-status dead">○ NO DATA</span></div>';
+  }
+  html += '</div>';
+
+  // ── Cron Heartbeats ──
+  const cron = data.cron_heartbeat;
+  if (cron && cron.jobs && cron.jobs.length > 0) {
+    html += '<div class="briefing-section">';
+    html += '<div class="briefing-section-label">Cron Heartbeats</div>';
+    html += `<div class="hb-cron-row">
+      <span class="hb-cron-healthy">● ${cron.healthy_count} healthy</span>
+      ${cron.stale_count > 0 ? `<span class="hb-cron-stale">⚠ ${cron.stale_count} stale</span>` : ''}
+    </div>`;
+    for (const job of cron.jobs.slice(0, 5)) {
+      const cls = job.healthy ? 'healthy' : 'stale';
+      html += `<div class="hb-cron-job">
+        <span class="hb-cron-job-name">${esc(job.job)}</span>
+        <span class="hb-cron-job-status ${cls}">${esc(job.message)}</span>
+      </div>`;
+    }
+    if (cron.jobs.length > 5) {
+      html += `<div class="hb-core-meta">+${cron.jobs.length - 5} more jobs</div>`;
+    }
+    html += '</div>';
+  }
+
+  // ── Morning Report ──
+  const report = data.morning_report;
+  if (report) {
+    html += '<div class="briefing-section">';
+    html += '<div class="briefing-section-label">Latest Report</div>';
+
+    // Aggregate stats
+    let totalClosed = 0, totalMerged = 0;
+    if (report.repos) {
+      for (const r of Object.values(report.repos)) {
+        totalClosed += r.closed_issues || 0;
+        totalMerged += r.merged_prs || 0;
+      }
+    }
+    html += `<div class="hb-stats-row">
+      <div class="hb-stat"><span class="hb-stat-value" style="color:#4af0c0">${totalClosed}</span><span class="hb-stat-label">Closed</span></div>
+      <div class="hb-stat"><span class="hb-stat-value" style="color:#7b5cff">${totalMerged}</span><span class="hb-stat-label">Merged</span></div>
+      <div class="hb-stat"><span class="hb-stat-value" style="color:#ffd700">${(report.blockers || []).length}</span><span class="hb-stat-label">Blockers</span></div>
+    </div>`;
+
+    // Highlights (up to 3)
+    if (report.highlights && report.highlights.length > 0) {
+      for (const h of report.highlights.slice(0, 3)) {
+        html += `<div class="hb-core-meta">+ ${esc(h)}</div>`;
+      }
+    }
+
+    // Blockers
+    if (report.blockers && report.blockers.length > 0) {
+      for (const b of report.blockers) {
+        html += `<div class="hb-blocker">⚠ ${esc(b)}</div>`;
+      }
+    }
+
+    html += `<div class="hb-timestamp">Report: ${esc(report.generated_at || '?')}</div>`;
+    html += '</div>';
+  }
+
+  // ── Timestamp ──
+  html += `<div class="hb-timestamp">Briefing updated: ${new Date().toLocaleTimeString('en-US', { hour12: false })}</div>`;
+
+  container.innerHTML = html;
+}
+
+function esc(str) {
+  if (!str) return '';
+  const d = document.createElement('div');
+  d.textContent = String(str);
+  return d.innerHTML;
+}
+
 // ═══ AGENT PRESENCE SYSTEM ═══
 function createAgentPresences() {
  const agentData = [