From 8ba991a5867901c38c587b866a1d537041eb1854 Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Tue, 24 Mar 2026 14:16:32 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20heartbeat=20=E2=80=94=20wire=20real=20d?=
 =?UTF-8?q?ata=20sources,=20remove=20static=20stub?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace api/status.json with live Gitea commit-author tally (24h window)
for agent activity. Add Open-Meteo weather fetch and blockstream.info BTC
block height. Sovereignty shows HONEST-OFFLINE when sovereignty-status.json
is absent. All fetches run in parallel via Promise.all; page stays under
50KB and auto-refreshes every 60s.

Fixes #416

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 heartbeat.html | 410 ++++++++++++++++++++++++++++---------------------
 1 file changed, 237 insertions(+), 173 deletions(-)
diff --git a/heartbeat.html b/heartbeat.html
index a0f49a0..beaa2aa 100644
--- a/heartbeat.html
+++ b/heartbeat.html
@@ -3,219 +3,283 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="refresh" content="60">
     <title>Nexus Heartbeat</title>
     <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
         body {
             font-family: 'Courier New', monospace;
-            background-color: #0a0a0a;
+            background: #0a0a0a;
             color: #00ff00;
-            margin: 0;
             padding: 10px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 100vh;
-            box-sizing: border-box;
-            line-height: 1.4;
+            font-size: 14px;
+            line-height: 1.5;
         }
         .container {
-            width: 100%;
-            max-width: 375px; /* Mobile screen width */
-            padding: 10px;
+            max-width: 375px;
+            margin: 0 auto;
             border: 1px solid #006600;
-            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
-            margin-bottom: 10px;
+            box-shadow: 0 0 10px rgba(0,255,0,0.3);
+            padding: 12px;
         }
         h1 {
             color: #00ffff;
             text-align: center;
-            font-size: 1.5em;
-            margin-top: 5px;
-            margin-bottom: 15px;
-            text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
-        }
-        .status-section {
-            margin-bottom: 15px;
-        }
-        .status-section h2 {
-            color: #00ffcc;
             font-size: 1.2em;
-            border-bottom: 1px dashed #003300;
-            padding-bottom: 5px;
-            margin-top: 0;
-            margin-bottom: 10px;
+            margin-bottom: 14px;
+            text-shadow: 0 0 5px rgba(0,255,255,0.6);
+            letter-spacing: 2px;
         }
-        .status-item {
+        .section {
+            margin-bottom: 14px;
+            border-top: 1px dashed #003300;
+            padding-top: 10px;
+        }
+        .section-title {
+            color: #00ffcc;
+            font-size: 0.8em;
+            letter-spacing: 1px;
+            margin-bottom: 8px;
+        }
+        .row {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 5px;
+            margin-bottom: 4px;
+            gap: 8px;
         }
-        .status-label {
-            color: #00ccff;
-            flex-shrink: 0;
-            margin-right: 10px;
-        }
-        .status-value {
-            color: #00ff00;
-            text-align: right;
-            word-break: break-all;
-        }
-        .agent-status.working { color: #00ff00; }
-        .agent-status.idle { color: #ffff00; }
-        .agent-status.dead { color: #ff0000; }
-
-        .last-updated {
+        .lbl { color: #009999; flex-shrink: 0; }
+        .val { color: #00ff00; text-align: right; word-break: break-all; }
+        .val.ok    { color: #00ff00; }
+        .val.idle  { color: #ffcc00; }
+        .val.off   { color: #ff4444; }
+        .val.dim   { color: #556655; }
+        .val.manual { color: #aaaaaa; }
+        .footer {
             text-align: center;
-            font-size: 0.8em;
-            color: #009900;
-            margin-top: 20px;
+            color: #336633;
+            font-size: 0.75em;
+            margin-top: 10px;
+            padding-top: 8px;
+            border-top: 1px dashed #003300;
         }
+        #spinner { display: inline-block; animation: spin 1s linear infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>NEXUS HEARTBEAT</h1>
+<div class="container">
+    <h1>&#9675; NEXUS HEARTBEAT</h1>
 
-        <div class="status-section">
-            <h2>SOVEREIGNTY STATUS</h2>
-            <div class="status-item">
-                <span class="status-label">SCORE:</span>
-                <span class="status-value" id="sovereignty-score">LOADING...</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">LABEL:</span>
-                <span class="status-value" id="sovereignty-label">LOADING...</span>
-            </div>
+    <div class="section">
+        <div class="section-title">SOVEREIGNTY</div>
+        <div class="row">
+            <span class="lbl">SCORE:</span>
+            <span class="val manual" id="sov-score">AWAITING FILE</span>
         </div>
-
-        <div class="status-section">
-            <h2>AGENT STATUSES</h2>
-            <div id="agent-statuses">
-                <div class="status-item"><span class="status-label">LOADING...</span><span class="status-value"></span></div>
-            </div>
-        </div>
-
-        <div class="status-section">
-            <h2>LAST COMMITS</h2>
-            <div id="last-commits">
-                <div class="status-item"><span class="status-label">LOADING...</span><span class="status-value"></span></div>
-            </div>
-        </div>
-
-        <div class="status-section">
-            <h2>ENVIRONMENTALS</h2>
-            <div class="status-item">
-                <span class="status-label">WEATHER:</span>
-                <span class="status-value" id="weather">UNKNOWN</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">BTC BLOCK:</span>
-                <span class="status-value" id="btc-block">UNKNOWN</span>
-            </div>
-        </div>
-
-        <div class="last-updated" id="last-updated">
-            Last Updated: NEVER
+        <div class="row">
+            <span class="lbl">LABEL:</span>
+            <span class="val manual" id="sov-label">MANUAL UPDATE</span>
         </div>
     </div>
 
-    <script>
-        const GITEA_API_URL = 'http://143.198.27.163:3000/api/v1/repos/Timmy_Foundation/the-nexus/commits?limit=10';
-        const GITEA_TOKEN = 'dc0517a965226b7a0c5ffdd961b1ba26521ac592';
-        const SOVEREIGNTY_STATUS_FILE = './sovereignty-status.json';
-        const API_STATUS_FILE = './api/status.json';
+    <div class="section">
+        <div class="section-title">AGENT ACTIVITY (24H)</div>
+        <div id="agents"><div class="row"><span class="lbl"><span id="spinner">&#8635;</span> LOADING...</span></div></div>
+    </div>
 
-        async function fetchSovereigntyStatus() {
-            try {
-                const response = await fetch(SOVEREIGNTY_STATUS_FILE);
-                const data = await response.json();
-                document.getElementById('sovereignty-score').textContent = data.score + '%';
-                document.getElementById('sovereignty-label').textContent = data.label.toUpperCase();
-            } catch (error) {
-                console.error('Error fetching sovereignty status:', error);
-                document.getElementById('sovereignty-score').textContent = 'ERROR';
-                document.getElementById('sovereignty-label').textContent = 'ERROR';
+    <div class="section">
+        <div class="section-title">RECENT COMMITS</div>
+        <div id="commits"><div class="row"><span class="lbl"><span id="spinner2">&#8635;</span> LOADING...</span></div></div>
+    </div>
+
+    <div class="section">
+        <div class="section-title">ENVIRONMENTALS</div>
+        <div class="row">
+            <span class="lbl">WEATHER:</span>
+            <span class="val dim" id="weather">&#8635; LOADING...</span>
+        </div>
+        <div class="row">
+            <span class="lbl">BTC BLOCK:</span>
+            <span class="val dim" id="btc">&#8635; LOADING...</span>
+        </div>
+    </div>
+
+    <div class="footer" id="footer">Refreshes every 60s &mdash; <span id="ts">never updated</span></div>
+</div>
+
+<script>
+(function () {
+    'use strict';
+
+    // ── constants ─────────────────────────────────────────────────────────────
+    var GITEA_BASE   = 'http://143.198.27.163:3000/api/v1';
+    var REPO         = 'Timmy_Foundation/the-nexus';
+    var WEATHER_URL  = 'https://api.open-meteo.com/v1/forecast?latitude=43.2897&longitude=-72.1479&current=temperature_2m,weather_code,wind_speed_10m,cloud_cover&temperature_unit=fahrenheit&wind_speed_unit=mph&forecast_days=1';
+    var BTC_URL      = 'https://blockstream.info/api/blocks/tip/height';
+    var SOV_URL      = './sovereignty-status.json';
+    var REFRESH_MS   = 60000;
+
+    // ── helpers ───────────────────────────────────────────────────────────────
+    function el(id) { return document.getElementById(id); }
+
+    function setVal(id, text, cls) {
+        var e = el(id);
+        if (!e) return;
+        e.textContent = text;
+        e.className = 'val' + (cls ? ' ' + cls : '');
+    }
+
+    function weatherLabel(code) {
+        if (code === 0)                   return 'Clear';
+        if (code <= 2)                    return 'Partly Cloudy';
+        if (code === 3)                   return 'Overcast';
+        if (code >= 45 && code <= 48)     return 'Fog';
+        if (code >= 51 && code <= 57)     return 'Drizzle';
+        if (code >= 61 && code <= 67)     return 'Rain';
+        if (code >= 71 && code <= 77)     return 'Snow';
+        if (code >= 80 && code <= 82)     return 'Showers';
+        if (code >= 85 && code <= 86)     return 'Snow Showers';
+        if (code >= 95 && code <= 99)     return 'Thunderstorm';
+        return 'Unknown';
+    }
+
+    function relativeTime(isoStr) {
+        var diff = (Date.now() - new Date(isoStr).getTime()) / 1000;
+        if (diff < 60)    return Math.round(diff) + 's ago';
+        if (diff < 3600)  return Math.round(diff / 60) + 'm ago';
+        if (diff < 86400) return Math.round(diff / 3600) + 'h ago';
+        return Math.round(diff / 86400) + 'd ago';
+    }
+
+    function truncate(str, n) {
+        return str.length > n ? str.slice(0, n - 1) + '\u2026' : str;
+    }
+
+    // ── sovereignty ───────────────────────────────────────────────────────────
+    async function fetchSovereignty() {
+        try {
+            var r = await fetch(SOV_URL + '?_=' + Date.now());
+            if (!r.ok) throw new Error('not found');
+            var d = await r.json();
+            setVal('sov-score', (d.score || '?') + '%', 'ok');
+            setVal('sov-label', String(d.label || '?').toUpperCase(), 'ok');
+        } catch (_) {
+            // File not present yet — show honest offline state
+            setVal('sov-score', 'NO FILE', 'dim');
+            setVal('sov-label', 'AWAITING MANUAL UPDATE', 'dim');
+        }
+    }
+
+    // ── agent activity from Gitea commits ────────────────────────────────────
+    // Derives active agents from commit authors in the last 24 hours.
+    async function fetchAgents() {
+        var container = el('agents');
+        try {
+            var since = new Date(Date.now() - 24 * 3600 * 1000).toISOString();
+            var url = GITEA_BASE + '/repos/' + REPO + '/commits?limit=50&since=' + encodeURIComponent(since);
+            var r = await fetch(url);
+            if (!r.ok) throw new Error('Gitea error ' + r.status);
+            var commits = await r.json();
+
+            // Tally commits per author
+            var counts = {};
+            (commits || []).forEach(function (c) {
+                var name = (c.commit && c.commit.author && c.commit.author.name) || 'unknown';
+                counts[name] = (counts[name] || 0) + 1;
+            });
+
+            if (Object.keys(counts).length === 0) {
+                container.innerHTML = '<div class="row"><span class="lbl">NO COMMITS IN 24H</span><span class="val dim">IDLE</span></div>';
+                return;
             }
+
+            var html = '';
+            Object.keys(counts).sort().forEach(function (author) {
+                var n = counts[author];
+                html += '<div class="row">'
+                    + '<span class="lbl">' + truncate(author.toUpperCase(), 18) + ':</span>'
+                    + '<span class="val ok">' + n + ' COMMIT' + (n !== 1 ? 'S' : '') + '</span>'
+                    + '</div>';
+            });
+            container.innerHTML = html;
+        } catch (err) {
+            container.innerHTML = '<div class="row"><span class="lbl">AGENTS:</span><span class="val off">ERROR</span></div>';
         }
+    }
 
-        async function fetchAgentStatuses() {
-            try {
-                const response = await fetch(API_STATUS_FILE);
-                const data = await response.json();
-                const agentStatusesDiv = document.getElementById('agent-statuses');
-                agentStatusesDiv.innerHTML = ''; // Clear previous statuses
+    // ── recent commits ────────────────────────────────────────────────────────
+    async function fetchCommits() {
+        var container = el('commits');
+        try {
+            var url = GITEA_BASE + '/repos/' + REPO + '/commits?limit=5';
+            var r = await fetch(url);
+            if (!r.ok) throw new Error('Gitea error ' + r.status);
+            var commits = await r.json();
 
-                data.agents.forEach(agent => {
-                    const agentItem = document.createElement('div');
-                    agentItem.className = 'status-item';
-                    const statusClass = agent.status.toLowerCase(); // working, idle, dead
-                    agentItem.innerHTML = `
-                        <span class="status-label">${agent.name.toUpperCase()}:</span>
-                        <span class="status-value agent-status ${statusClass}">${agent.status.toUpperCase()}</span>
-                    `;
-                    agentStatusesDiv.appendChild(agentItem);
-                });
-            } catch (error) {
-                console.error('Error fetching agent statuses:', error);
-                const agentStatusesDiv = document.getElementById('agent-statuses');
-                agentStatusesDiv.innerHTML = '<div class="status-item"><span class="status-label">AGENTS:</span><span class="status-value agent-status dead">ERROR</span></div>';
+            if (!commits || commits.length === 0) {
+                container.innerHTML = '<div class="row"><span class="lbl">NO COMMITS</span></div>';
+                return;
             }
+
+            var html = '';
+            commits.forEach(function (c) {
+                var msg  = (c.commit && c.commit.message) ? c.commit.message.split('\n')[0] : '?';
+                var when = (c.commit && c.commit.author && c.commit.author.date)
+                    ? relativeTime(c.commit.author.date) : '?';
+                html += '<div class="row">'
+                    + '<span class="lbl">' + when + '</span>'
+                    + '<span class="val ok" title="' + msg.replace(/"/g, '&quot;') + '">' + truncate(msg, 28) + '</span>'
+                    + '</div>';
+            });
+            container.innerHTML = html;
+        } catch (_) {
+            container.innerHTML = '<div class="row"><span class="lbl">COMMITS:</span><span class="val off">ERROR</span></div>';
         }
+    }
 
-        async function fetchLastCommits() {
-            try {
-                const response = await fetch(GITEA_API_URL, {
-                    headers: {
-                        'Authorization': `token ${GITEA_TOKEN}`
-                    }
-                });
-                const commits = await response.json();
-                const lastCommitsDiv = document.getElementById('last-commits');
-                lastCommitsDiv.innerHTML = ''; // Clear previous commits
-
-                if (commits.length === 0) {
-                    lastCommitsDiv.innerHTML = '<div class="status-item"><span class="status-label">NO COMMITS</span><span class="status-value"></span></div>';
-                    return;
-                }
-
-                commits.slice(0, 5).forEach(commit => { // Display top 5 recent commits
-                    const commitItem = document.createElement('div');
-                    commitItem.className = 'status-item';
-                    const author = commit.commit.author.name;
-                    const date = new Date(commit.commit.author.date).toLocaleString();
-                    const message = commit.commit.message.split('
-')[0]; // First line of commit message
-
-                    commitItem.innerHTML = `
-                        <span class="status-label">${author}:</span>
-                        <span class="status-value" title="${message}">${date}</span>
-                    `;
-                    lastCommitsDiv.appendChild(commitItem);
-                });
-            } catch (error) {
-                console.error('Error fetching last commits:', error);
-                const lastCommitsDiv = document.getElementById('last-commits');
-                lastCommitsDiv.innerHTML = '<div class="status-item"><span class="status-label">COMMITS:</span><span class="status-value agent-status dead">ERROR</span></div>';
-            }
+    // ── weather ───────────────────────────────────────────────────────────────
+    async function fetchWeather() {
+        try {
+            var r = await fetch(WEATHER_URL);
+            if (!r.ok) throw new Error('weather error');
+            var d = await r.json();
+            var cur = d.current;
+            var cond = weatherLabel(cur.weather_code);
+            var text = Math.round(cur.temperature_2m) + '\u00b0F ' + cond + ' | Wind ' + Math.round(cur.wind_speed_10m) + ' mph';
+            setVal('weather', text, 'ok');
+        } catch (_) {
+            setVal('weather', 'OFFLINE', 'off');
         }
+    }
 
-        function updateTimestamp() {
-            document.getElementById('last-updated').textContent = 'Last Updated: ' + new Date().toLocaleString();
+    // ── bitcoin ───────────────────────────────────────────────────────────────
+    async function fetchBTC() {
+        try {
+            var r = await fetch(BTC_URL);
+            if (!r.ok) throw new Error('btc error');
+            var height = parseInt(await r.text(), 10);
+            if (isNaN(height)) throw new Error('bad value');
+            setVal('btc', '#' + height.toLocaleString(), 'ok');
+        } catch (_) {
+            setVal('btc', 'OFFLINE', 'off');
         }
+    }
 
-        async function updateStatus() {
-            await fetchSovereigntyStatus();
-            await fetchAgentStatuses();
-            await fetchLastCommits();
-            updateTimestamp();
-        }
+    // ── main refresh ─────────────────────────────────────────────────────────
+    async function refresh() {
+        await Promise.all([
+            fetchSovereignty(),
+            fetchAgents(),
+            fetchCommits(),
+            fetchWeather(),
+            fetchBTC()
+        ]);
+        el('ts').textContent = new Date().toLocaleTimeString();
+    }
 
-        // Initial load
-        updateStatus();
-
-        // Auto-refresh every 60 seconds (already set by meta tag, but this ensures data fetch)
-
-    </script>
+    // ── boot ─────────────────────────────────────────────────────────────────
+    refresh();
+    setInterval(refresh, REFRESH_MS);
+}());
+</script>
 </body>
 </html>
-- 
2.43.0

