Feat v0.6.0 cluster registry (#36)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

packages/cluster-dashboard/css/main.css

@@ -0,0 +1,100 @@
+.cluster-dashboard {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+}
+
+.cluster-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.cluster-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: var(--text-primary, #111);
+}
+
+.cluster-status {
+    font-size: 0.85rem;
+    color: var(--text-secondary, #666);
+    background: var(--bg-secondary, #f3f4f6);
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+}
+
+.cluster-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1rem;
+}
+
+.cluster-card {
+    background: var(--bg-primary, #fff);
+    border: 1px solid var(--border, #e5e7eb);
+    border-radius: 8px;
+    padding: 1.25rem;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.node-id {
+    font-weight: 600;
+    font-size: 0.9rem;
+    font-family: var(--font-mono, monospace);
+    color: var(--text-primary, #111);
+}
+
+.heartbeat-badge {
+    font-size: 0.75rem;
+    color: var(--text-secondary, #666);
+    background: var(--bg-secondary, #f3f4f6);
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+}
+
+.node-endpoint {
+    font-size: 0.8rem;
+    color: var(--text-secondary, #666);
+    margin-bottom: 0.75rem;
+    font-family: var(--font-mono, monospace);
+}
+
+.card-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+
+.stat-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--text-secondary, #999);
+}
+
+.stat-value {
+    font-size: 0.9rem;
+    font-weight: 500;
+    font-family: var(--font-mono, monospace);
+    color: var(--text-primary, #111);
+}
+
+.cluster-empty {
+    color: var(--text-secondary, #666);
+    text-align: center;
+    padding: 3rem 1rem;
+}

packages/cluster-dashboard/js/main.js

@@ -0,0 +1,124 @@
+/**
+ * Cluster Dashboard — admin surface showing registered cluster nodes.
+ *
+ * Polls GET /api/v1/admin/cluster every 10s. Renders one card per node
+ * with runtime stats from the JSONB stats column. New keys added to
+ * stats are rendered automatically — no code change required.
+ */
+(function () {
+    'use strict';
+
+    var mount = document.getElementById('extension-mount');
+    if (!mount) return;
+
+    var REFRESH_MS = 10000;
+    var timer = null;
+
+    mount.innerHTML =
+        '<div class="cluster-dashboard">' +
+            '<div class="cluster-header">' +
+                '<h1>Cluster</h1>' +
+                '<span class="cluster-status" id="clusterStatus">loading...</span>' +
+            '</div>' +
+            '<div class="cluster-grid" id="clusterGrid"></div>' +
+        '</div>';
+
+    load();
+    timer = setInterval(load, REFRESH_MS);
+
+    // Cleanup on navigation (SPA)
+    window.addEventListener('beforeunload', function () {
+        if (timer) clearInterval(timer);
+    });
+
+    function load() {
+        var api = (window.sw && window.sw.api) || (typeof API !== 'undefined' && API);
+        if (!api) return;
+        var get = api._get || api.get;
+        if (!get) return;
+        get.call(api, '/api/v1/admin/cluster').then(render).catch(function () {
+            // 404 = SQLite (no cluster route registered), or other fetch error
+            render({ data: [] });
+        });
+    }
+
+    function render(resp) {
+        var nodes = (resp && resp.data) || [];
+        var status = document.getElementById('clusterStatus');
+        var grid = document.getElementById('clusterGrid');
+
+        status.textContent = nodes.length + ' node' + (nodes.length !== 1 ? 's' : '') + ' registered';
+
+        if (nodes.length === 0) {
+            grid.innerHTML = '<p class="cluster-empty">No nodes registered. The cluster registry requires PostgreSQL — SQLite runs single-node only.</p>';
+            return;
+        }
+
+        grid.innerHTML = nodes.map(nodeCard).join('');
+    }
+
+    function nodeCard(node) {
+        var stats = {};
+        try { stats = typeof node.stats === 'string' ? JSON.parse(node.stats) : (node.stats || {}); } catch (e) { /* ignore */ }
+
+        var uptimeSec = stats.uptime_sec || 0;
+        var uptime = formatDuration(uptimeSec);
+        var heap = formatBytes(stats.heap_alloc || 0);
+        var gcPause = ((stats.gc_pause_ns || 0) / 1e6).toFixed(1) + ' ms';
+        var wsClients = stats.ws_clients != null ? stats.ws_clients : '-';
+        var goroutines = stats.goroutines != null ? stats.goroutines : '-';
+        var gcCycles = stats.gc_cycles != null ? stats.gc_cycles : '-';
+        var heartbeatAge = timeSince(node.heartbeat);
+
+        return (
+            '<div class="cluster-card">' +
+                '<div class="card-header">' +
+                    '<span class="node-id">' + esc(node.node_id) + '</span>' +
+                    '<span class="heartbeat-badge" title="Last heartbeat">' + heartbeatAge + '</span>' +
+                '</div>' +
+                (node.endpoint ? '<div class="node-endpoint">' + esc(node.endpoint) + '</div>' : '') +
+                '<div class="card-stats">' +
+                    stat('Uptime', uptime) +
+                    stat('WS Clients', wsClients) +
+                    stat('Goroutines', goroutines) +
+                    stat('Heap', heap) +
+                    stat('GC Pause', gcPause) +
+                    stat('GC Cycles', gcCycles) +
+                '</div>' +
+            '</div>'
+        );
+    }
+
+    function stat(label, value) {
+        return '<div class="stat"><span class="stat-label">' + label + '</span><span class="stat-value">' + value + '</span></div>';
+    }
+
+    function formatBytes(b) {
+        if (b < 1024) return b + ' B';
+        if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
+        return (b / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+
+    function formatDuration(sec) {
+        if (sec < 60) return Math.floor(sec) + 's';
+        if (sec < 3600) return Math.floor(sec / 60) + 'm ' + Math.floor(sec % 60) + 's';
+        var h = Math.floor(sec / 3600);
+        var m = Math.floor((sec % 3600) / 60);
+        return h + 'h ' + m + 'm';
+    }
+
+    function timeSince(iso) {
+        if (!iso) return '-';
+        var ms = Date.now() - new Date(iso).getTime();
+        if (ms < 0) ms = 0;
+        var sec = Math.floor(ms / 1000);
+        if (sec < 60) return sec + 's ago';
+        return Math.floor(sec / 60) + 'm ago';
+    }
+
+    function esc(s) {
+        var d = document.createElement('div');
+        d.appendChild(document.createTextNode(s || ''));
+        return d.innerHTML;
+    }
+})();

packages/cluster-dashboard/manifest.json

@@ -0,0 +1,13 @@
+{
+  "id": "cluster-dashboard",
+  "icon": "🔗",
+  "type": "surface",
+  "title": "Cluster",
+  "route": "/s/cluster-dashboard",
+  "auth": "admin",
+  "layout": "single",
+  "components": [],
+  "hooks": ["surface"],
+  "version": "0.6.0",
+  "description": "Cluster node registry — health, runtime stats, and peer visibility."
+}