lobsterboard 0.4.1 → 0.5.0

package/README.md

@@ -58,6 +58,44 @@ LobsterBoard ships with 5 built-in themes. Switch themes from the dropdown in ed
 - **Feminine** — soft pink and lavender pastels with subtle glows
 - **Feminine Dark** — pink/purple accents on a dark background
 
+## Remote Server Monitoring
+
+Monitor multiple servers from a single dashboard using [lobsterboard-agent](https://www.npmjs.com/package/lobsterboard-agent).
+
+### Setup Remote Server
+
+On your VPS/remote server:
+
+```bash
+npm install -g lobsterboard-agent
+lobsterboard-agent init     # Generates API key - save it!
+lobsterboard-agent serve    # Starts on port 9090
+```
+
+### Add to LobsterBoard
+
+1. Click **🖥️ Servers** in the header
+2. Enter server name, URL (`http://your-server-ip:9090`), and API key
+3. Click **Test Connection** to verify
+4. Add widgets (Uptime Monitor, Docker, CPU/Memory, etc.)
+5. Select your remote server from the **Server** dropdown in widget properties
+
+### Supported Widgets
+
+These widgets support remote server data:
+
+| Widget | What It Shows |
+|--------|---------------|
+| **Uptime Monitor** | System uptime, CPU, memory |
+| **CPU / Memory** | CPU usage + RAM usage |
+| **Disk Usage** | Disk space with ring chart |
+| **Network Speed** | Upload/download throughput |
+| **Docker Containers** | Container list and status |
+
+### Multi-Server Dashboard
+
+Add multiple widgets and select different servers for each — monitor your entire infrastructure from one dashboard.
+
 ## Configuration
 
 ```bash

package/app.html

@@ -76,6 +76,7 @@
       <input type="number" id="custom-height" placeholder="Height" style="display:none; width:80px;">
     </div>
     <div class="header-right">
+      <button class="btn btn-secondary" id="btn-servers">🖥️ Servers</button>
       <button class="btn btn-secondary" id="btn-security">🔒 Security</button>
       <button class="btn btn-secondary" id="btn-templates">📋 Templates</button>
       <button class="btn btn-secondary" id="btn-export-template">📦 Export Template</button>
@@ -685,6 +686,14 @@
           <div id="dir-browser" style="display:none;margin-top:8px;max-height:200px;overflow-y:auto;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:12px;">
           </div>
         </div>
+        <div class="prop-group" id="prop-server-group" style="display:none;">
+          <label>Server</label>
+          <select id="prop-server">
+            <option value="local">Local</option>
+            <!-- Remote servers populated dynamically -->
+          </select>
+          <small style="color:#8b949e;margin-top:4px;display:block;">Select data source for this widget</small>
+        </div>
         <div class="prop-group">
           <label>Refresh Interval (sec)</label>
           <input type="number" id="prop-refresh" placeholder="60" min="0">
@@ -973,6 +982,35 @@
     </div>
   </div>
 
+  <!-- Servers Settings Modal -->
+  <div id="servers-modal" class="pin-modal-overlay" style="display:none;">
+    <div class="pin-modal" style="max-width:500px;">
+      <h3>🖥️ Remote Servers</h3>
+      <p style="color:#8b949e;font-size:12px;margin:0 0 16px;">
+        Connect to remote servers running <a href="https://www.npmjs.com/package/lobsterboard-agent" target="_blank" style="color:#58a6ff;">lobsterboard-agent</a>
+      </p>
+      <div id="servers-list" style="margin-bottom:16px;">
+        <!-- Server list will be populated here -->
+      </div>
+      <div class="server-add-form" style="background:var(--bg-tertiary);padding:12px;border-radius:6px;">
+        <h4 style="margin:0 0 12px;font-size:14px;">➕ Add Server</h4>
+        <div style="display:flex;flex-direction:column;gap:8px;">
+          <input type="text" id="server-name" placeholder="Server Name (e.g., Production VPS)" class="tpl-input" style="font-size:13px;">
+          <input type="text" id="server-url" placeholder="URL (e.g., http://192.168.1.100:9090)" class="tpl-input" style="font-size:13px;">
+          <input type="password" id="server-apikey" placeholder="API Key (from lobsterboard-agent show-key)" class="tpl-input" style="font-size:13px;">
+          <div style="display:flex;gap:8px;margin-top:4px;">
+            <button class="btn btn-primary btn-sm" id="server-add-btn">Add Server</button>
+            <button class="btn btn-secondary btn-sm" id="server-test-btn">Test Connection</button>
+          </div>
+          <div id="server-add-result" style="font-size:12px;margin-top:4px;"></div>
+        </div>
+      </div>
+      <div style="margin-top:16px;text-align:right;">
+        <button class="btn btn-secondary" id="servers-close">Close</button>
+      </div>
+    </div>
+  </div>
+
   <script src="js/templates.js"></script>
 </body>
 </html>

package/dist/lobsterboard.css

@@ -1,4 +1,4 @@
-/* LobsterBoard v0.4.1 - Dashboard Styles */
+/* LobsterBoard v0.5.0 - Dashboard Styles */
 /* LobsterBoard Dashboard - Generated Styles */
 
 :root {

package/dist/lobsterboard.esm.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.4.1
+ * LobsterBoard v0.5.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.4.1
+ * LobsterBoard v0.5.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.4.1
+ * LobsterBoard v0.5.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.4.1
+ * LobsterBoard v0.5.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/js/builder.js

@@ -624,8 +624,172 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
   });
+
+  // Servers modal
+  document.getElementById('btn-servers').addEventListener('click', openServersModal);
+  document.getElementById('servers-close').addEventListener('click', () => {
+    document.getElementById('servers-modal').style.display = 'none';
+  });
+  document.getElementById('server-add-btn').addEventListener('click', addServer);
+  document.getElementById('server-test-btn').addEventListener('click', testServerConnection);
 });
 
+async function openServersModal() {
+  document.getElementById('servers-modal').style.display = 'flex';
+  await loadServersList();
+}
+
+async function loadServersList() {
+  const container = document.getElementById('servers-list');
+  try {
+    const res = await fetch('/api/servers');
+    const data = await res.json();
+    if (!data.servers || data.servers.length === 0) {
+      container.innerHTML = '<p style="color:#8b949e;font-size:13px;">No servers configured. Add one below.</p>';
+      return;
+    }
+    container.innerHTML = data.servers.map(s => `
+      <div class="server-item" style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-tertiary);border-radius:6px;margin-bottom:8px;">
+        <div>
+          <strong style="font-size:13px;">${_escHtml(s.name)}</strong>
+          ${s.type === 'local' ? '<span style="color:#8b949e;font-size:11px;margin-left:8px;">(built-in)</span>' : `<span style="color:#8b949e;font-size:11px;margin-left:8px;">${_escHtml(s.url || '')}</span>`}
+        </div>
+        <div style="display:flex;gap:6px;">
+          ${s.type !== 'local' ? `
+            <button class="btn btn-sm btn-secondary" onclick="testServer('${s.id}')">Test</button>
+            <button class="btn btn-sm btn-danger" onclick="deleteServer('${s.id}')">Delete</button>
+          ` : '<span style="color:#3fb950;font-size:12px;">✓ Local</span>'}
+        </div>
+      </div>
+    `).join('');
+  } catch (e) {
+    container.innerHTML = '<p style="color:#f85149;">Failed to load servers</p>';
+  }
+}
+
+async function addServer() {
+  const name = document.getElementById('server-name').value.trim();
+  const url = document.getElementById('server-url').value.trim();
+  const apiKey = document.getElementById('server-apikey').value.trim();
+  const resultEl = document.getElementById('server-add-result');
+  
+  if (!name || !url || !apiKey) {
+    resultEl.innerHTML = '<span style="color:#f85149;">All fields are required</span>';
+    return;
+  }
+  
+  try {
+    const res = await fetch('/api/servers', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, url, apiKey })
+    });
+    const data = await res.json();
+    if (data.status === 'success') {
+      resultEl.innerHTML = '<span style="color:#3fb950;">✓ Server added</span>';
+      document.getElementById('server-name').value = '';
+      document.getElementById('server-url').value = '';
+      document.getElementById('server-apikey').value = '';
+      invalidateServerCache();
+      await loadServersList();
+    } else {
+      resultEl.innerHTML = `<span style="color:#f85149;">${_escHtml(data.error || 'Failed to add')}</span>`;
+    }
+  } catch (e) {
+    resultEl.innerHTML = '<span style="color:#f85149;">Network error</span>';
+  }
+}
+
+async function testServerConnection() {
+  const url = document.getElementById('server-url').value.trim();
+  const apiKey = document.getElementById('server-apikey').value.trim();
+  const resultEl = document.getElementById('server-add-result');
+  
+  if (!url || !apiKey) {
+    resultEl.innerHTML = '<span style="color:#f85149;">URL and API Key required</span>';
+    return;
+  }
+  
+  resultEl.innerHTML = '<span style="color:#8b949e;">Testing...</span>';
+  try {
+    const res = await fetch(url + '/health', {
+      headers: { 'X-API-Key': apiKey },
+      signal: AbortSignal.timeout(5000)
+    });
+    if (res.ok) {
+      const data = await res.json();
+      resultEl.innerHTML = `<span style="color:#3fb950;">✓ Connected to ${_escHtml(data.serverName || 'server')}</span>`;
+    } else {
+      resultEl.innerHTML = `<span style="color:#f85149;">HTTP ${res.status}</span>`;
+    }
+  } catch (e) {
+    resultEl.innerHTML = `<span style="color:#f85149;">Connection failed: ${_escHtml(e.message)}</span>`;
+  }
+}
+
+async function testServer(id) {
+  try {
+    const res = await fetch(`/api/servers/${id}/test`, { method: 'POST' });
+    const data = await res.json();
+    if (data.status === 'ok') {
+      alert(`✓ Connected to ${data.serverName || 'server'}`);
+    } else {
+      alert(`Connection failed: ${data.message || 'Unknown error'}`);
+    }
+  } catch (e) {
+    alert('Network error');
+  }
+}
+
+async function deleteServer(id) {
+  if (!confirm('Delete this server?')) return;
+  try {
+    const res = await fetch(`/api/servers/${id}`, { method: 'DELETE' });
+    const data = await res.json();
+    if (data.status === 'success') {
+      invalidateServerCache();
+      await loadServersList();
+    } else {
+      alert(data.error || 'Failed to delete');
+    }
+  } catch (e) {
+    alert('Network error');
+  }
+}
+
+function _escHtml(str) {
+  if (!str) return '';
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// Server dropdown for system widgets
+let _cachedServers = null;
+async function populateServerDropdown(selectedValue) {
+  const select = document.getElementById('prop-server');
+  if (!select) return;
+  
+  // Fetch servers if not cached
+  if (!_cachedServers) {
+    try {
+      const res = await fetch('/api/servers');
+      const data = await res.json();
+      _cachedServers = data.servers || [];
+    } catch (e) {
+      _cachedServers = [{ id: 'local', name: 'Local', type: 'local' }];
+    }
+  }
+  
+  // Populate dropdown
+  select.innerHTML = _cachedServers.map(s => 
+    `<option value="${_escHtml(s.id)}"${s.id === selectedValue ? ' selected' : ''}>${_escHtml(s.name)}</option>`
+  ).join('');
+}
+
+// Invalidate server cache when servers are added/deleted
+function invalidateServerCache() {
+  _cachedServers = null;
+}
+
 function initCanvas() {
   const canvas = document.getElementById('canvas');
   updateCanvasSize();
@@ -1083,6 +1247,9 @@ function initProperties() {
   document.getElementById('prop-api-key').addEventListener('input', onPropertyChange);
   document.getElementById('prop-api-key-value').addEventListener('input', onPropertyChange);
   document.getElementById('prop-endpoint').addEventListener('input', onPropertyChange);
+  if (document.getElementById('prop-server')) {
+    document.getElementById('prop-server').addEventListener('change', onPropertyChange);
+  }
   if (document.getElementById('prop-directorypath')) {
     document.getElementById('prop-directorypath').addEventListener('input', onPropertyChange);
     document.getElementById('btn-browse-dir').addEventListener('click', () => openDirBrowser());
@@ -1166,6 +1333,7 @@ function showProperties(widget) {
   // Hide all optional groups first
   document.getElementById('prop-api-group').style.display = 'none';
   document.getElementById('prop-endpoint-group').style.display = 'none';
+  if (document.getElementById('prop-server-group')) document.getElementById('prop-server-group').style.display = 'none';
   if (document.getElementById('prop-directorypath-group')) document.getElementById('prop-directorypath-group').style.display = 'none';
   document.getElementById('prop-location-group').style.display = 'none';
   document.getElementById('prop-locations-group').style.display = 'none';
@@ -1378,6 +1546,16 @@ function showProperties(widget) {
     document.getElementById('prop-endpoint').value = widget.properties.endpoint || '';
   }
 
+  // Show server dropdown for system widgets
+  const systemWidgets = ['uptime-monitor', 'docker-containers', 'disk-usage', 'network-speed', 'cpu-memory'];
+  const serverGroup = document.getElementById('prop-server-group');
+  if (serverGroup && systemWidgets.includes(widget.type)) {
+    serverGroup.style.display = 'block';
+    populateServerDropdown(widget.properties.server || 'local');
+  } else if (serverGroup) {
+    serverGroup.style.display = 'none';
+  }
+
   document.getElementById('prop-refresh').value = widget.properties.refreshInterval || 60;
 
   // Widget font scale (per-widget override)
@@ -1414,7 +1592,7 @@ function showProperties(widget) {
 
 // Properties already handled by hardcoded UI groups
 const HANDLED_PROPS = new Set([
-  'title', 'showHeader', 'refreshInterval', 'endpoint',
+  'title', 'showHeader', 'refreshInterval', 'endpoint', 'server', 'path',
   'fontSize', 'fontColor', 'textAlign', 'fontWeight',
   'showBorder', 'lineColor', 'lineThickness', 'columns', 'feedUrl', 'layout',
   'location', 'locations', 'units', 'format24h',
@@ -1777,6 +1955,9 @@ function onPropertyChange(e) {
     case 'prop-endpoint':
       widget.properties.endpoint = e.target.value;
       break;
+    case 'prop-server':
+      widget.properties.server = e.target.value;
+      break;
     case 'prop-directorypath':
       widget.properties.directoryPath = e.target.value;
       break;

package/js/widgets.js

@@ -161,6 +161,109 @@ function onSystemStats(callback) {
   }
 }
 
+// ─────────────────────────────────────────────
+// Remote server polling for system stats
+// ─────────────────────────────────────────────
+const _remotePollers = {}; // serverId -> { interval, callbacks, lastData, errors, lastSuccess }
+
+function onRemoteStats(serverId, callback, refreshMs = 10000) {
+  if (!_remotePollers[serverId]) {
+    _remotePollers[serverId] = { 
+      callbacks: [], 
+      interval: null, 
+      lastData: null,
+      errors: 0,
+      lastSuccess: null,
+      offline: false
+    };
+    
+    const poll = async () => {
+      const poller = _remotePollers[serverId];
+      try {
+        const res = await fetch(`/api/servers/${serverId}/stats`, {
+          signal: AbortSignal.timeout(10000) // 10s timeout
+        });
+        if (res.ok) {
+          const data = await res.json();
+          const normalized = _normalizeRemoteStats(data);
+          poller.lastData = normalized;
+          poller.errors = 0;
+          poller.lastSuccess = Date.now();
+          poller.offline = false;
+          poller.callbacks.forEach(cb => cb(normalized));
+        } else {
+          throw new Error(`HTTP ${res.status}`);
+        }
+      } catch (e) {
+        poller.errors++;
+        console.warn(`Remote stats error (${serverId}, attempt ${poller.errors}):`, e.message);
+        
+        // After 3 consecutive failures, mark as offline and notify widgets
+        if (poller.errors >= 3 && !poller.offline) {
+          poller.offline = true;
+          const offlineData = {
+            _offline: true,
+            _error: e.message,
+            _lastSuccess: poller.lastSuccess,
+            _serverId: serverId
+          };
+          poller.callbacks.forEach(cb => cb(offlineData));
+        }
+      }
+    };
+    
+    poll(); // Initial fetch
+    _remotePollers[serverId].interval = setInterval(poll, refreshMs);
+  }
+  
+  _remotePollers[serverId].callbacks.push(callback);
+  
+  // If we have cached data, call immediately
+  if (_remotePollers[serverId].lastData) {
+    callback(_remotePollers[serverId].lastData);
+  }
+}
+
+// Normalize remote agent stats to match local SSE format
+function _normalizeRemoteStats(data) {
+  return {
+    uptime: data.uptime,
+    cpu: data.cpu ? {
+      currentLoad: data.cpu.usage || 0,
+      cores: data.cpu.cores || 0,
+    } : null,
+    memory: data.memory ? {
+      total: data.memory.total || 0,
+      active: data.memory.used || 0,
+      available: data.memory.available || 0,
+    } : null,
+    disk: data.disk ? [{
+      mount: data.disk.mount || '/',
+      size: data.disk.total || 0,
+      used: data.disk.used || 0,
+    }] : null,
+    network: data.network ? [{
+      rx_sec: data.network.rxSec || 0,
+      tx_sec: data.network.txSec || 0,
+    }] : null,
+    docker: data.docker,
+    openclaw: data.openclaw,
+    serverName: data.serverName,
+    _remote: true,
+  };
+}
+
+// Unified stats function: local or remote
+function onStats(serverId, callback, refreshMs = 10000) {
+  if (!serverId || serverId === 'local') {
+    onSystemStats(callback);
+  } else {
+    onRemoteStats(serverId, callback, refreshMs);
+  }
+}
+
+window.onStats = onStats;
+
 function _formatBytes(bytes, decimals = 1) {
   if (bytes === 0 || bytes == null) return '0 B';
   const k = 1024;
@@ -2106,13 +2209,13 @@ const WIDGETS = {
     name: 'CPU / Memory',
     icon: '💻',
     category: 'small',
-    description: 'Shows CPU and memory usage. Requires system stats API.',
+    description: 'Shows CPU and memory usage. Supports remote servers via lobsterboard-agent.',
     defaultWidth: 200,
     defaultHeight: 120,
     hasApiKey: false,
     properties: {
       title: 'System',
-      endpoint: '/api/system',
+      server: 'local',
       refreshInterval: 5
     },
     preview: `<div style="padding:8px;font-size:11px;">
@@ -2130,8 +2233,14 @@ const WIDGETS = {
         </div>
       </div>`,
     generateJs: (props) => `
-      // CPU/Memory Widget: ${props.id} — live via SSE
-      onSystemStats(function(data) {
+      // CPU/Memory Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
+      onStats('${props.server || 'local'}', function(data) {
+        // Handle offline state
+        if (data._offline) {
+          document.getElementById('${props.id}-cpu').textContent = '⚠️';
+          document.getElementById('${props.id}-mem').textContent = 'offline';
+          return;
+        }
         if (data.cpu) {
           document.getElementById('${props.id}-cpu').textContent = data.cpu.currentLoad.toFixed(0) + '%';
         }
@@ -2140,7 +2249,7 @@ const WIDGETS = {
           const total = (data.memory.total / (1024*1024*1024)).toFixed(1);
           document.getElementById('${props.id}-mem').textContent = used + ' / ' + total + ' GB';
         }
-      });
+      }, ${(props.refreshInterval || 5) * 1000});
     `
   },
 
@@ -2148,14 +2257,14 @@ const WIDGETS = {
     name: 'Disk Usage',
     icon: '💾',
     category: 'small',
-    description: 'Shows disk space usage. Requires system stats API.',
+    description: 'Shows disk space usage. Supports remote servers via lobsterboard-agent.',
     defaultWidth: 160,
     defaultHeight: 100,
     hasApiKey: false,
     properties: {
       title: 'Disk',
+      server: 'local',
       path: '/',
-      endpoint: '/api/disk',
       refreshInterval: 60
     },
     preview: `<div style="text-align:center;padding:8px;">
@@ -2183,20 +2292,35 @@ const WIDGETS = {
         </div>
       </div>`,
     generateJs: (props) => `
-      // Disk Usage Widget: ${props.id} — live via SSE
-      onSystemStats(function(data) {
-        if (!data.disk || data.disk.length === 0) return;
-        // Find the configured mount or default to first/root
-        const targetMount = '${props.path || '/'}';
-        const d = data.disk.find(x => x.mount === targetMount) || data.disk[0];
-        const pct = d.use || 0;
+      // Disk Usage Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
+      onStats('${props.server || 'local'}', function(data) {
+        // Handle offline state
+        if (data._offline) {
+          document.getElementById('${props.id}-pct').textContent = '⚠️';
+          document.getElementById('${props.id}-size').textContent = 'offline';
+          document.getElementById('${props.id}-ring').style.strokeDashoffset = 125.66;
+          return;
+        }
+        
+        // Handle both local (array) and remote (object) disk data
+        let d;
+        if (Array.isArray(data.disk)) {
+          if (data.disk.length === 0) return;
+          const targetMount = '${props.path || '/'}';
+          d = data.disk.find(x => x.mount === targetMount) || data.disk[0];
+        } else if (data.disk) {
+          d = data.disk;
+        } else {
+          return;
+        }
+        const pct = d.use || d.percent || 0;
         const circumference = 125.66;
         document.getElementById('${props.id}-ring').style.strokeDashoffset = circumference - (pct / 100) * circumference;
         document.getElementById('${props.id}-pct').textContent = Math.round(pct) + '%';
-        const usedGB = (d.used / (1024*1024*1024)).toFixed(1);
-        const totalGB = (d.size / (1024*1024*1024)).toFixed(0);
+        const usedGB = ((d.used || 0) / (1024*1024*1024)).toFixed(1);
+        const totalGB = ((d.size || d.total || 0) / (1024*1024*1024)).toFixed(0);
         document.getElementById('${props.id}-size').textContent = usedGB + ' / ' + totalGB + ' GB';
-      });
+      }, ${(props.refreshInterval || 60) * 1000});
     `
   },
 
@@ -2204,34 +2328,44 @@ const WIDGETS = {
     name: 'Uptime Monitor',
     icon: '📡',
     category: 'large',
-    description: 'Shows service uptime. Requires uptime monitoring backend.',
+    description: 'Shows system uptime, CPU, and memory. Supports remote servers via lobsterboard-agent.',
     defaultWidth: 350,
     defaultHeight: 220,
     hasApiKey: false,
     properties: {
       title: 'Uptime',
-      services: 'Website,API,Database',
+      server: 'local',
       refreshInterval: 30
     },
     preview: `<div style="padding:4px;font-size:11px;">
-      <div>🟢 Website — 99.9%</div>
-      <div>🟢 API — 100%</div>
-      <div>🟡 Database — 98.2%</div>
+      <div>🟢 System — 5d 12h</div>
+      <div>🟢 CPU — 12.5%</div>
+      <div>🟢 Memory — 45.2%</div>
     </div>`,
     generateHtml: (props) => `
       <div class="dash-card" id="widget-${props.id}" style="height:100%;">
         <div class="dash-card-head">
           <span class="dash-card-title">${renderIcon('uptime')} ${props.title || 'Uptime'}</span>
+          ${props.server && props.server !== 'local' ? `<span class="dash-card-badge" style="font-size:10px;">🌐</span>` : ''}
         </div>
         <div class="dash-card-body" id="${props.id}-services">
           <div class="uptime-row" style="color:var(--text-muted);justify-content:center;">Loading...</div>
         </div>
       </div>`,
     generateJs: (props) => `
-      // Uptime Monitor Widget: ${props.id} — live via SSE
-      onSystemStats(function(data) {
-        if (data.uptime == null) return;
+      // Uptime Monitor Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
+      onStats('${props.server || 'local'}', function(data) {
         const container = document.getElementById('${props.id}-services');
+        
+        // Handle offline state
+        if (data._offline) {
+          const lastSeen = data._lastSuccess ? new Date(data._lastSuccess).toLocaleTimeString() : 'never';
+          container.innerHTML = '<div class="uptime-row" style="color:#f85149;justify-content:center;">⚠️ Connection lost</div>' +
+            '<div class="uptime-row" style="opacity:0.6;font-size:11px;justify-content:center;">Last: ' + lastSeen + '</div>';
+          return;
+        }
+        
+        if (data.uptime == null) return;
         const secs = data.uptime;
         const d = Math.floor(secs / 86400);
         const h = Math.floor((secs % 86400) / 3600);
@@ -2248,8 +2382,11 @@ const WIDGETS = {
           const memPct = ((data.memory.active / data.memory.total) * 100).toFixed(1);
           html += '<div class="uptime-row"><span>' + window.renderIcon('memory') + ' Memory</span><span class="uptime-pct">' + memPct + '%</span></div>';
         }
+        if (data.serverName && data._remote) {
+          html += '<div class="uptime-row" style="opacity:0.6;font-size:11px;"><span>📡 ' + data.serverName + '</span></div>';
+        }
         container.innerHTML = html;
-      });
+      }, ${(props.refreshInterval || 30) * 1000});
     `
   },
 
@@ -2257,13 +2394,13 @@ const WIDGETS = {
     name: 'Docker Containers',
     icon: '🐳',
     category: 'large',
-    description: 'Lists Docker containers with status. Requires Docker API proxy.',
+    description: 'Lists Docker containers with status. Supports remote servers via lobsterboard-agent.',
     defaultWidth: 380,
     defaultHeight: 250,
     hasApiKey: false,
     properties: {
       title: 'Containers',
-      endpoint: '/api/docker',
+      server: 'local',
       refreshInterval: 10
     },
     preview: `<div style="padding:4px;font-size:11px;">
@@ -2282,23 +2419,35 @@ const WIDGETS = {
         </div>
       </div>`,
     generateJs: (props) => `
-      // Docker Containers Widget: ${props.id} — live via SSE
-      onSystemStats(function(data) {
+      // Docker Containers Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
+      onStats('${props.server || 'local'}', function(data) {
         const list = document.getElementById('${props.id}-list');
         const badge = document.getElementById('${props.id}-badge');
-        if (!data.docker || data.docker.length === 0) {
-          list.innerHTML = '<div class="docker-row" style="color:var(--text-muted);">No containers found</div>';
-          badge.textContent = '0';
+        
+        // Handle offline state
+        if (data._offline) {
+          list.innerHTML = '<div class="docker-row" style="color:#f85149;">⚠️ Connection lost</div>';
+          badge.textContent = '—';
           return;
         }
-        const containers = data.docker;
+        
+        // Handle remote docker data structure
+        const dockerData = data._remote && data.docker?.containers ? data.docker.containers : data.docker;
+        if (!dockerData || dockerData.length === 0) {
+          const msg = data._remote && data.docker?.available === false ? 'Docker not available' : 'No containers found';
+          list.innerHTML = '<div class="docker-row" style="color:var(--text-muted);">' + msg + '</div>';
+          badge.textContent = data._remote && data.docker ? (data.docker.running || 0) + '/' + (data.docker.total || 0) : '0';
+          return;
+        }
+        const containers = dockerData;
         list.innerHTML = containers.map(function(c) {
-          const icon = c.state === 'running' ? '🟢' : '🔴';
+          const running = c.state === 'running' || c.running === true;
+          const icon = running ? '🟢' : '🔴';
           const name = (c.name || '').replace(/^\\//, '');
           return '<div class="docker-row">' + icon + ' ' + name + '<span class="docker-status">' + (c.state || c.status || '—') + '</span></div>';
         }).join('');
-        badge.textContent = containers.length;
-      });
+        badge.textContent = data._remote && data.docker ? (data.docker.running || 0) + '/' + (data.docker.total || 0) : containers.length;
+      }, ${(props.refreshInterval || 10) * 1000});
     `
   },
 
@@ -2306,18 +2455,18 @@ const WIDGETS = {
     name: 'Network Speed',
     icon: '🌐',
     category: 'small',
-    description: 'Shows real-time network activity (upload/download throughput). Updates every 2 seconds.',
+    description: 'Shows real-time network activity. Supports remote servers via lobsterboard-agent.',
     defaultWidth: 200,
     defaultHeight: 100,
     hasApiKey: false,
     properties: {
       title: 'Network',
-      endpoint: '/api/network',
-      refreshInterval: 2
+      server: 'local',
+      refreshInterval: 5
     },
     preview: `<div style="padding:8px;font-size:11px;">
-      <div>↓ <span style="color:#3fb950;">45 Mbps</span></div>
-      <div>↑ <span style="color:#58a6ff;">12 Mbps</span></div>
+      <div>↓ <span style="color:#3fb950;">45 KB/s</span></div>
+      <div>↑ <span style="color:#58a6ff;">12 KB/s</span></div>
     </div>`,
     generateHtml: (props) => `
       <div class="dash-card" id="widget-${props.id}" style="height:100%;">
@@ -2330,26 +2479,38 @@ const WIDGETS = {
         </div>
       </div>`,
     generateJs: (props) => `
-      // Network Speed Widget: ${props.id} — live via SSE
+      // Network Speed Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
       function _fmtRate(bytes) {
         if (bytes == null || bytes < 0) return '0 B/s';
         if (bytes < 1024) return bytes.toFixed(0) + ' B/s';
         if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB/s';
         return (bytes / (1024 * 1024)).toFixed(1) + ' MB/s';
       }
-      onSystemStats(function(data) {
+      onStats('${props.server || 'local'}', function(data) {
+        // Handle offline state
+        if (data._offline) {
+          document.getElementById('${props.id}-down').textContent = '⚠️';
+          document.getElementById('${props.id}-up').textContent = 'offline';
+          return;
+        }
+        
         if (!data.network || data.network.length === 0) return;
-        // Sum all interfaces or pick the first non-loopback
+        // Handle both local (array) and remote (object) formats
         let rx = 0, tx = 0;
-        data.network.forEach(function(n) {
-          if (n.iface !== 'lo' && n.iface !== 'lo0') {
-            rx += (n.rx_sec || 0);
-            tx += (n.tx_sec || 0);
-          }
-        });
+        if (Array.isArray(data.network)) {
+          data.network.forEach(function(n) {
+            if (n.iface !== 'lo' && n.iface !== 'lo0') {
+              rx += (n.rx_sec || 0);
+              tx += (n.tx_sec || 0);
+            }
+          });
+        } else {
+          rx = data.network.rx_sec || data.network.rxSec || 0;
+          tx = data.network.tx_sec || data.network.txSec || 0;
+        }
         document.getElementById('${props.id}-down').textContent = _fmtRate(rx);
         document.getElementById('${props.id}-up').textContent = _fmtRate(tx);
-      });
+      }, ${(props.refreshInterval || 5) * 1000});
     `
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobsterboard",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Self-hosted drag-and-drop dashboard builder with 50 widgets, template gallery, and custom pages. Works standalone or with OpenClaw.",
   "keywords": [
     "dashboard",

package/server.cjs

@@ -1817,6 +1817,141 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
+  // ─────────────────────────────────────────────
+  // Server Profiles API (for remote LobsterBoard Agent connections)
+  // ─────────────────────────────────────────────
+  const SERVERS_FILE = path.join(__dirname, 'data', 'servers.json');
+  
+  function loadServers() {
+    try {
+      if (fs.existsSync(SERVERS_FILE)) {
+        return JSON.parse(fs.readFileSync(SERVERS_FILE, 'utf8'));
+      }
+    } catch (e) { /* ignore */ }
+    return [{ id: 'local', name: 'Local', type: 'local' }];
+  }
+  
+  function saveServers(servers) {
+    fs.mkdirSync(path.dirname(SERVERS_FILE), { recursive: true });
+    fs.writeFileSync(SERVERS_FILE, JSON.stringify(servers, null, 2));
+  }
+
+  // GET /api/servers - List all servers
+  if (req.method === 'GET' && pathname === '/api/servers') {
+    const servers = loadServers();
+    // Mask API keys for security
+    const masked = servers.map(s => ({
+      ...s,
+      apiKey: s.apiKey ? s.apiKey.slice(0, 10) + '...' : undefined
+    }));
+    sendJson(res, 200, { servers: masked });
+    return;
+  }
+
+  // POST /api/servers - Add a server
+  if (req.method === 'POST' && pathname === '/api/servers') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { name, url, apiKey } = JSON.parse(body);
+        if (!name || !url || !apiKey) {
+          return sendJson(res, 400, { error: 'name, url, and apiKey required' });
+        }
+        const servers = loadServers();
+        const id = name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+        if (servers.find(s => s.id === id)) {
+          return sendJson(res, 400, { error: 'Server with this name already exists' });
+        }
+        servers.push({ id, name, url, apiKey, type: 'remote' });
+        saveServers(servers);
+        sendJson(res, 200, { status: 'success', id });
+      } catch (e) {
+        sendJson(res, 400, { error: e.message });
+      }
+    });
+    return;
+  }
+
+  // PUT /api/servers/:id - Update a server
+  if (req.method === 'PUT' && pathname.startsWith('/api/servers/')) {
+    const id = pathname.split('/')[3];
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const updates = JSON.parse(body);
+        const servers = loadServers();
+        const idx = servers.findIndex(s => s.id === id);
+        if (idx === -1) return sendJson(res, 404, { error: 'Server not found' });
+        if (id === 'local') return sendJson(res, 400, { error: 'Cannot modify local server' });
+        servers[idx] = { ...servers[idx], ...updates, id }; // Don't allow id change
+        saveServers(servers);
+        sendJson(res, 200, { status: 'success' });
+      } catch (e) {
+        sendJson(res, 400, { error: e.message });
+      }
+    });
+    return;
+  }
+
+  // DELETE /api/servers/:id - Delete a server
+  if (req.method === 'DELETE' && pathname.startsWith('/api/servers/')) {
+    const id = pathname.split('/')[3];
+    if (id === 'local') return sendJson(res, 400, { error: 'Cannot delete local server' });
+    const servers = loadServers();
+    const filtered = servers.filter(s => s.id !== id);
+    if (filtered.length === servers.length) {
+      return sendJson(res, 404, { error: 'Server not found' });
+    }
+    saveServers(filtered);
+    sendJson(res, 200, { status: 'success' });
+    return;
+  }
+
+  // POST /api/servers/:id/test - Test connection to a server
+  if (req.method === 'POST' && pathname.match(/^\/api\/servers\/[^/]+\/test$/)) {
+    const id = pathname.split('/')[3];
+    const servers = loadServers();
+    const server = servers.find(s => s.id === id);
+    if (!server) return sendJson(res, 404, { error: 'Server not found' });
+    if (server.type === 'local') {
+      return sendJson(res, 200, { status: 'ok', message: 'Local server' });
+    }
+    // Test remote connection
+    fetch(server.url + '/health', {
+      headers: { 'X-API-Key': server.apiKey },
+      signal: AbortSignal.timeout(5000),
+    })
+      .then(r => r.json())
+      .then(data => sendJson(res, 200, { status: 'ok', serverName: data.serverName }))
+      .catch(e => sendJson(res, 200, { status: 'error', message: e.message }));
+    return;
+  }
+
+  // GET /api/servers/:id/stats - Fetch stats from a remote server
+  if (req.method === 'GET' && pathname.match(/^\/api\/servers\/[^/]+\/stats$/)) {
+    const id = pathname.split('/')[3];
+    const servers = loadServers();
+    const server = servers.find(s => s.id === id);
+    if (!server) return sendJson(res, 404, { error: 'Server not found' });
+    if (server.type === 'local') {
+      return sendJson(res, 400, { error: 'Use /api/stats/stream for local' });
+    }
+    // Fetch from remote agent
+    fetch(server.url + '/stats', {
+      headers: { 'X-API-Key': server.apiKey },
+      signal: AbortSignal.timeout(10000),
+    })
+      .then(r => {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+      .then(data => sendJson(res, 200, data))
+      .catch(e => sendJson(res, 500, { error: e.message }));
+    return;
+  }
+
   // GET /config - Load dashboard configuration
   if (req.method === 'GET' && pathname === '/config') {
     fs.readFile(CONFIG_FILE, 'utf8', (err, data) => {