lobsterboard 0.1.2 → 0.1.3

package/README.md

@@ -4,6 +4,8 @@ A self-hosted, drag-and-drop dashboard builder with live system monitoring, dark
 
 ![LobsterBoard](lobsterboard-logo-final.png)
 
+![LobsterBoard Dashboard Example](screenshot.jpg)
+
 ## Quick Start
 
 ### Option A: npm install

package/dist/lobsterboard.css

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

package/dist/lobsterboard.esm.js

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

package/dist/lobsterboard.esm.min.js

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

package/dist/lobsterboard.umd.js

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

package/dist/lobsterboard.umd.min.js

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

package/js/builder.js

@@ -433,7 +433,7 @@ function createWidget(type, x, y) {
     y: Math.max(0, Math.round(y - template.defaultHeight / 2)),
     width: template.defaultWidth,
     height: template.defaultHeight,
-    properties: { ...template.properties }
+    properties: JSON.parse(JSON.stringify(template.properties))
   };
 
   // Snap to grid (20px)

package/js/widgets.js

@@ -550,8 +550,7 @@ const WIDGETS = {
     description: 'Lists scheduled cron jobs from OpenClaw /api/cron endpoint.',
     defaultWidth: 400,
     defaultHeight: 250,
-    hasApiKey: true,
-    apiKeyName: 'OPENCLAW_API',
+    hasApiKey: false,
     properties: {
       title: 'Cron',
       endpoint: '/api/cron',
@@ -625,8 +624,7 @@ const WIDGETS = {
     description: 'Shows recent system logs from OpenClaw /api/system-log endpoint.',
     defaultWidth: 500,
     defaultHeight: 400,
-    hasApiKey: true,
-    apiKeyName: 'OPENCLAW_API',
+    hasApiKey: false,
     properties: {
       title: 'System Log',
       endpoint: '/api/system-log',
@@ -663,7 +661,7 @@ const WIDGETS = {
       }
       async function update_${props.id.replace(/-/g, '_')}() {
         try {
-          const res = await fetch('${props.endpoint || '/api/system-log'}');
+          const res = await fetch('${props.endpoint || '/api/system-log'}?max=${props.maxLines || 50}');
           const json = await res.json();
           // Handle both new format (json.entries) and old format (json.lines)
           let entries = json.entries || [];
@@ -2384,6 +2382,7 @@ const WIDGETS = {
     hasApiKey: false,
     properties: {
       title: 'Quick Links',
+      columns: 1,
       links: []
     },
     preview: `<div style="padding:4px;font-size:11px;">
@@ -2413,12 +2412,16 @@ const WIDGETS = {
           return;
         }
         
+        const cols = ${props.columns || 1};
+        container.style.display = 'grid';
+        container.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
+        container.style.gap = '4px';
         container.innerHTML = links.map(link => {
           const domain = new URL(link.url).hostname;
           const favicon = 'https://www.google.com/s2/favicons?sz=32&domain=' + domain;
-          return '<a href="' + link.url + '" class="quick-link" target="_blank" style="display:flex;align-items:center;gap:8px;padding:8px 0;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--border);">' +
-            '<img src="' + favicon + '" style="width:16px;height:16px;" onerror="this.style.display=\\'none\\'">' +
-            '<span>' + link.name + '</span>' +
+          return '<a href="' + link.url + '" class="quick-link" target="_blank" style="display:flex;align-items:center;gap:8px;padding:6px 4px;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--border);overflow:hidden;">' +
+            '<img src="' + favicon + '" style="width:16px;height:16px;flex-shrink:0;" onerror="this.style.display=\\'none\\'">' +
+            '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + link.name + '</span>' +
           '</a>';
         }).join('');
       })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobsterboard",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Dashboard builder library with customizable widgets for creating beautiful monitoring dashboards",
   "keywords": [
     "dashboard",

package/server.cjs

@@ -327,8 +327,9 @@ const server = http.createServer((req, res) => {
         return;
       }
       const content = fs.readFileSync(logPath, 'utf8');
+      const maxLines = Math.min(Math.max(parseInt(parsedUrl.searchParams.get('max')) || 50, 1), 200);
       const lines = content.split('\n').filter(l => l.trim());
-      const entries = lines.slice(-50).reverse().map(line => {
+      const entries = lines.slice(-maxLines).reverse().map(line => {
         let level = 'INFO';
         let category = 'system';
         if (/\b(error|fatal)\b/i.test(line)) level = 'ERROR';