lobsterboard 0.1.0

package/dist/lobsterboard.umd.js

@@ -0,0 +1,1219 @@
+/*!
+ * LobsterBoard v0.1.0
+ * Dashboard builder with customizable widgets
+ * https://github.com/curbob/LobsterBoard
+ * @license MIT
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LobsterBoard = {}));
+})(this, (function (exports) { 'use strict';
+
+  /**
+   * LobsterBoard - Widget Definitions
+   * Each widget defines its default size, properties, and generated code
+   * 
+   * @module lobsterboard/widgets
+   */
+
+  const WIDGETS = {
+    // ─────────────────────────────────────────────
+    // SMALL CARDS (KPI style)
+    // ─────────────────────────────────────────────
+    
+    'weather': {
+      name: 'Local Weather',
+      icon: '🌡️',
+      category: 'small',
+      description: 'Shows current weather for a single location using wttr.in (no API key needed).',
+      defaultWidth: 200,
+      defaultHeight: 120,
+      hasApiKey: false,
+      properties: {
+        title: 'Local Weather',
+        location: 'Atlanta',
+        units: 'F',
+        refreshInterval: 600
+      },
+      preview: `<div style="text-align:center;padding:8px;">
+      <div style="font-size:24px;">72°F</div>
+      <div style="font-size:11px;color:#8b949e;">Atlanta</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">🌡️ ${props.title || 'Local Weather'}</span>
+        </div>
+        <div class="dash-card-body" style="display:flex;align-items:center;justify-content:center;gap:10px;">
+          <span id="${props.id}-icon" style="font-size:24px;">🌡️</span>
+          <div>
+            <div class="kpi-value blue" id="${props.id}-value">—</div>
+            <div class="kpi-label" id="${props.id}-label">${props.location || 'Location'}</div>
+          </div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Weather Widget: ${props.id} (uses free wttr.in API - no key needed)
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const location = encodeURIComponent('${props.location || 'Atlanta'}');
+          const res = await fetch('https://wttr.in/' + location + '?format=j1');
+          const data = await res.json();
+          const current = data.current_condition[0];
+          const temp = '${props.units}' === 'C' ? current.temp_C : current.temp_F;
+          const unit = '${props.units}' === 'C' ? '°C' : '°F';
+          document.getElementById('${props.id}-value').textContent = temp + unit;
+          document.getElementById('${props.id}-label').textContent = current.weatherDesc[0].value;
+          const code = parseInt(current.weatherCode);
+          let icon = '🌡️';
+          if (code === 113) icon = '☀️';
+          else if (code === 116 || code === 119) icon = '⛅';
+          else if (code >= 176 && code <= 359) icon = '🌧️';
+          else if (code >= 368 && code <= 395) icon = '❄️';
+          document.getElementById('${props.id}-icon').textContent = icon;
+        } catch (e) {
+          console.error('Weather widget error:', e);
+          document.getElementById('${props.id}-value').textContent = '—';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 600) * 1000});
+    `
+    },
+
+    'clock': {
+      name: 'Clock',
+      icon: '🕐',
+      category: 'small',
+      description: 'Simple digital clock. Supports 12h or 24h format.',
+      defaultWidth: 200,
+      defaultHeight: 120,
+      hasApiKey: false,
+      properties: {
+        title: 'Clock',
+        timezone: 'local',
+        format24h: false
+      },
+      preview: `<div style="text-align:center;padding:8px;">
+      <div style="font-size:24px;">3:45 PM</div>
+      <div style="font-size:11px;color:#8b949e;">Wed, Feb 5</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">🕐 ${props.title || 'Clock'}</span>
+        </div>
+        <div class="dash-card-body" style="display:flex;flex-direction:column;align-items:center;justify-content:center;">
+          <div class="kpi-value" id="${props.id}-time">—</div>
+          <div class="kpi-label" id="${props.id}-date">—</div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Clock Widget: ${props.id}
+      function updateClock_${props.id.replace(/-/g, '_')}() {
+        const now = new Date();
+        const timeEl = document.getElementById('${props.id}-time');
+        const dateEl = document.getElementById('${props.id}-date');
+        const opts = { hour: 'numeric', minute: '2-digit', hour12: ${!props.format24h} };
+        timeEl.textContent = now.toLocaleTimeString('en-US', opts);
+        dateEl.textContent = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+      }
+      updateClock_${props.id.replace(/-/g, '_')}();
+      setInterval(updateClock_${props.id.replace(/-/g, '_')}, 1000);
+    `
+    },
+
+    'auth-status': {
+      name: 'Auth Status',
+      icon: '🔐',
+      category: 'small',
+      description: 'Shows if OpenClaw is using Anthropic Max subscription (green) or API key fallback (yellow).',
+      defaultWidth: 180,
+      defaultHeight: 100,
+      hasApiKey: true,
+      apiKeyName: 'OPENCLAW_API',
+      properties: {
+        title: 'Auth Type',
+        endpoint: '/api/status',
+        refreshInterval: 30
+      },
+      preview: `<div style="text-align:center;padding:8px;">
+      <div style="width:10px;height:10px;background:#3fb950;border-radius:50%;margin:0 auto 4px;"></div>
+      <div style="font-size:13px;">OAuth</div>
+      <div style="font-size:11px;color:#8b949e;">Auth</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">🔐 ${props.title || 'Auth Type'}</span>
+        </div>
+        <div class="dash-card-body" style="display:flex;align-items:center;justify-content:center;gap:10px;">
+          <div class="kpi-indicator" id="${props.id}-dot"></div>
+          <div class="kpi-value" id="${props.id}-value">—</div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Auth Status Widget: ${props.id}
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const res = await fetch('${props.endpoint || '/api/status'}');
+          const json = await res.json();
+          const data = json.data || json;
+          const dot = document.getElementById('${props.id}-dot');
+          const val = document.getElementById('${props.id}-value');
+          val.textContent = data.authMode === 'oauth' ? 'Subscription' : 'API';
+          dot.className = 'kpi-indicator ' + (data.authMode === 'oauth' ? 'green' : 'yellow');
+        } catch (e) {
+          console.error('Auth status widget error:', e);
+          document.getElementById('${props.id}-value').textContent = '—';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 30) * 1000});
+    `
+    },
+
+    'session-count': {
+      name: 'Active Sessions',
+      icon: '💬',
+      category: 'small',
+      description: 'Shows count of active OpenClaw sessions.',
+      defaultWidth: 160,
+      defaultHeight: 100,
+      hasApiKey: true,
+      apiKeyName: 'OPENCLAW_API',
+      properties: {
+        title: 'Sessions',
+        endpoint: '/api/sessions',
+        refreshInterval: 30
+      },
+      preview: `<div style="text-align:center;padding:8px;">
+      <div style="font-size:28px;color:#58a6ff;">3</div>
+      <div style="font-size:11px;color:#8b949e;">Active</div>
+    </div>`,
+      generateHtml: (props) => `
+      <div class="kpi-card kpi-sm" id="widget-${props.id}">
+        <div class="kpi-icon">💬</div>
+        <div class="kpi-data">
+          <div class="kpi-value blue" id="${props.id}-count">—</div>
+          <div class="kpi-label">Active</div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Session Count Widget: ${props.id}
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const res = await fetch('${props.endpoint || '/api/sessions'}');
+          const json = await res.json();
+          const data = json.data || json;
+          document.getElementById('${props.id}-count').textContent = data.active || data.length || 0;
+        } catch (e) {
+          document.getElementById('${props.id}-count').textContent = '—';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 30) * 1000});
+    `
+    },
+
+    // ─────────────────────────────────────────────
+    // LARGE CARDS (Content)
+    // ─────────────────────────────────────────────
+
+    'activity-list': {
+      name: 'Activity List',
+      icon: '📋',
+      category: 'large',
+      description: 'Shows recent OpenClaw activity from /api/activity endpoint.',
+      defaultWidth: 400,
+      defaultHeight: 300,
+      hasApiKey: true,
+      apiKeyName: 'OPENCLAW_API',
+      properties: {
+        title: 'Today',
+        endpoint: '/api/activity',
+        maxItems: 10,
+        refreshInterval: 60
+      },
+      preview: `<div style="padding:4px;font-size:11px;color:#8b949e;">
+      <div>• Meeting at 2pm</div>
+      <div>• Review PR #42</div>
+      <div>• Deploy v1.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">📋 ${props.title || 'Today'}</span>
+          <span class="dash-card-badge" id="${props.id}-badge">—</span>
+        </div>
+        <div class="dash-card-body compact-list" id="${props.id}-list">
+          <div class="list-item">• Team standup at 10am</div>
+          <div class="list-item">• Review PR #42</div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Activity List Widget: ${props.id}
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const res = await fetch('${props.endpoint || '/api/activity'}');
+          const json = await res.json();
+          const data = json.data || json;
+          const list = document.getElementById('${props.id}-list');
+          const badge = document.getElementById('${props.id}-badge');
+          const items = data.items || [];
+          list.innerHTML = items.slice(0, ${props.maxItems || 10}).map(item => 
+            '<div class="list-item">' + item.text + '</div>'
+          ).join('');
+          badge.textContent = items.length + ' items';
+        } catch (e) {
+          console.error('Activity list widget error:', e);
+          document.getElementById('${props.id}-list').innerHTML = '<div class="list-item">—</div>';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 60) * 1000});
+    `
+    },
+
+    'cron-jobs': {
+      name: 'Cron Jobs',
+      icon: '⏰',
+      category: 'large',
+      description: 'Lists scheduled cron jobs from OpenClaw /api/cron endpoint.',
+      defaultWidth: 400,
+      defaultHeight: 250,
+      hasApiKey: true,
+      apiKeyName: 'OPENCLAW_API',
+      properties: {
+        title: 'Cron',
+        endpoint: '/api/cron',
+        refreshInterval: 30
+      },
+      preview: `<div style="padding:4px;font-size:11px;color:#8b949e;">
+      <div>⏰ Daily backup - 2am</div>
+      <div>⏰ Sync data - */5 *</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">⏰ ${props.title || 'Cron'}</span>
+          <span class="dash-card-badge" id="${props.id}-badge">—</span>
+        </div>
+        <div class="dash-card-body" id="${props.id}-list">
+          <div class="cron-item"><span class="cron-name">Daily backup</span><span class="cron-next">2:00 AM</span></div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // Cron Jobs Widget: ${props.id}
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const res = await fetch('${props.endpoint || '/api/cron'}');
+          const json = await res.json();
+          const data = json.data || json;
+          const list = document.getElementById('${props.id}-list');
+          const badge = document.getElementById('${props.id}-badge');
+          const jobs = data.jobs || [];
+          list.innerHTML = jobs.map(job => 
+            '<div class="cron-item"><span class="cron-name">' + job.name + '</span><span class="cron-next">' + job.next + '</span></div>'
+          ).join('');
+          badge.textContent = jobs.length + ' jobs';
+        } catch (e) {
+          console.error('Cron jobs widget error:', e);
+          document.getElementById('${props.id}-list').innerHTML = '<div class="cron-item"><span class="cron-name">—</span></div>';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 30) * 1000});
+    `
+    },
+
+    'system-log': {
+      name: 'System Log',
+      icon: '🔧',
+      category: 'large',
+      description: 'Shows recent system logs from OpenClaw /api/logs endpoint.',
+      defaultWidth: 500,
+      defaultHeight: 400,
+      hasApiKey: true,
+      apiKeyName: 'OPENCLAW_API',
+      properties: {
+        title: 'System Log',
+        endpoint: '/api/logs',
+        maxLines: 50,
+        refreshInterval: 10
+      },
+      preview: `<div style="padding:4px;font-size:10px;font-family:monospace;color:#8b949e;">
+      <div>[INFO] System started</div>
+      <div>[DEBUG] Loading config</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">🔧 ${props.title || 'System Log'}</span>
+          <span class="dash-card-badge" id="${props.id}-badge">—</span>
+        </div>
+        <div class="dash-card-body compact-list syslog-scroll" id="${props.id}-log">
+          <div class="log-line">[INFO] System started successfully</div>
+        </div>
+      </div>`,
+      generateJs: (props) => `
+      // System Log Widget: ${props.id}
+      async function update_${props.id.replace(/-/g, '_')}() {
+        try {
+          const res = await fetch('${props.endpoint || '/api/logs'}');
+          const json = await res.json();
+          const data = json.data || json;
+          const log = document.getElementById('${props.id}-log');
+          const badge = document.getElementById('${props.id}-badge');
+          const lines = data.lines || [];
+          log.innerHTML = lines.slice(-${props.maxLines || 50}).map(line => 
+            '<div class="log-line">' + line + '</div>'
+          ).join('');
+          badge.textContent = lines.length + ' lines';
+          log.scrollTop = log.scrollHeight;
+        } catch (e) {
+          console.error('System log widget error:', e);
+          document.getElementById('${props.id}-log').innerHTML = '<div class="log-line">—</div>';
+        }
+      }
+      update_${props.id.replace(/-/g, '_')}();
+      setInterval(update_${props.id.replace(/-/g, '_')}, ${(props.refreshInterval || 10) * 1000});
+    `
+    },
+
+    // ─────────────────────────────────────────────
+    // BARS
+    // ─────────────────────────────────────────────
+
+    'topbar': {
+      name: 'Top Nav Bar',
+      icon: '🔝',
+      category: 'bar',
+      description: 'Navigation bar with clock, weather, and system stats.',
+      defaultWidth: 1920,
+      defaultHeight: 48,
+      hasApiKey: false,
+      properties: {
+        title: 'OpenClaw',
+        links: 'Dashboard,Activity,Settings'
+      },
+      preview: `<div style="background:#161b22;padding:8px;font-size:11px;display:flex;gap:12px;">
+      <span>🤖 OpenClaw</span>
+      <span style="color:#58a6ff;">Dashboard</span>
+    </div>`,
+      generateHtml: (props) => `
+      <nav class="topbar" id="widget-${props.id}">
+        <div class="topbar-left">
+          <span class="topbar-brand">🤖 ${props.title || 'OpenClaw'}</span>
+          ${(props.links || 'Dashboard').split(',').map((link, i) => 
+            `<a href="#" class="topbar-link${i === 0 ? ' active' : ''}">${link.trim()}</a>`
+          ).join('')}
+        </div>
+        <div class="topbar-right">
+          <span class="topbar-meta" id="${props.id}-refresh">—</span>
+          <button class="topbar-refresh" onclick="location.reload()" title="Refresh">↻</button>
+        </div>
+      </nav>`,
+      generateJs: (props) => `
+      // Top Bar Widget: ${props.id}
+      document.getElementById('${props.id}-refresh').textContent = 
+        new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+    `
+    }
+  };
+
+  // Helper to get widget categories
+  function getWidgetCategories() {
+    const categories = {};
+    for (const [key, widget] of Object.entries(WIDGETS)) {
+      const cat = widget.category || 'other';
+      if (!categories[cat]) categories[cat] = [];
+      categories[cat].push({ key, ...widget });
+    }
+    return categories;
+  }
+
+  // Helper to get widget by type
+  function getWidget(type) {
+    return WIDGETS[type] || null;
+  }
+
+  // Helper to list all widget types
+  function getWidgetTypes() {
+    return Object.keys(WIDGETS);
+  }
+
+  /**
+   * LobsterBoard - Dashboard Builder Core
+   * Provides utilities for generating dashboard HTML, CSS, and JS
+   * 
+   * @module lobsterboard/builder
+   */
+
+
+  // ─────────────────────────────────────────────
+  // SECURITY HELPERS
+  // ─────────────────────────────────────────────
+
+  /**
+   * Escape HTML to prevent XSS attacks
+   * @param {string} str - String to escape
+   * @returns {string} Escaped string
+   */
+  function escapeHtml(str) {
+    if (!str) return '';
+    if (typeof document !== 'undefined') {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+    // Fallback for Node.js
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  // ─────────────────────────────────────────────
+  // HTML PROCESSING
+  // ─────────────────────────────────────────────
+
+  /**
+   * Process widget HTML to conditionally remove header
+   * @param {string} html - Widget HTML
+   * @param {boolean} showHeader - Whether to show the header
+   * @returns {string} Processed HTML
+   */
+  function processWidgetHtml(html, showHeader) {
+    if (showHeader !== false) return html;
+    const headerRegex = /<div\s+class="dash-card-head"[^>]*>[\s\S]*?<\/div>/i;
+    return html.replace(headerRegex, '');
+  }
+
+  // ─────────────────────────────────────────────
+  // CSS GENERATION
+  // ─────────────────────────────────────────────
+
+  /**
+   * Generate the base dashboard CSS
+   * @returns {string} CSS styles
+   */
+  function generateDashboardCss() {
+    return `/* LobsterBoard Dashboard - Generated Styles */
+
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #21262d;
+  --bg-hover: #30363d;
+  --border: #30363d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent-blue: #58a6ff;
+  --accent-green: #3fb950;
+  --accent-orange: #d29922;
+  --accent-red: #f85149;
+  --accent-purple: #a371f7;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+}
+
+.dashboard {
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.widget-container {
+  overflow: hidden;
+}
+
+/* KPI Cards */
+.kpi-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+}
+
+.kpi-sm {
+  padding: 12px;
+}
+
+.kpi-icon {
+  font-size: 24px;
+}
+
+.kpi-data {
+  flex: 1;
+}
+
+.kpi-value {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.kpi-value.blue { color: var(--accent-blue); }
+.kpi-value.green { color: var(--accent-green); }
+.kpi-value.orange { color: var(--accent-orange); }
+.kpi-value.red { color: var(--accent-red); }
+
+.kpi-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.kpi-indicator {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.kpi-indicator.green { background: var(--accent-green); }
+.kpi-indicator.yellow { background: var(--accent-orange); }
+.kpi-indicator.red { background: var(--accent-red); }
+
+/* Dash Cards */
+.dash-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dash-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+
+.dash-card-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.dash-card-badge {
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: var(--bg-primary);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.dash-card-body {
+  flex: 1;
+  padding: 12px 16px;
+  overflow-y: auto;
+}
+
+.compact-list {
+  font-size: 12px;
+}
+
+.syslog-scroll {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 11px;
+}
+
+/* Top Bar */
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  height: 100%;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.topbar-brand {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.topbar-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.topbar-link:hover,
+.topbar-link.active {
+  color: var(--accent-blue);
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.topbar-refresh {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* List Items */
+.list-item {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.cron-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.cron-name {
+  color: var(--text-primary);
+}
+
+.cron-next {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.log-line {
+  padding: 2px 0;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
+}
+
+/* Weather */
+.weather-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.weather-row:last-child {
+  border-bottom: none;
+}
+
+.weather-icon {
+  font-size: 18px;
+}
+
+.weather-loc {
+  flex: 1;
+  color: var(--text-primary);
+}
+
+.weather-temp {
+  font-weight: 600;
+  color: var(--accent-blue);
+}
+
+/* Utilities */
+.loading-sm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.spinner-sm {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--bg-tertiary);
+  border-top-color: var(--accent-blue);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.error {
+  color: var(--accent-red);
+  padding: 10px;
+  text-align: center;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+}
+
+/* Post-Export Edit Mode */
+.edit-mode .widget-container {
+  cursor: move;
+  outline: 2px dashed #3b82f6;
+  outline-offset: -2px;
+}
+
+.edit-mode .widget-container:hover {
+  outline-color: #60a5fa;
+}
+
+.edit-mode .widget-container.dragging {
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.resize-handle-edit {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  background: #3b82f6;
+  border-radius: 2px 0 0 0;
+  z-index: 10;
+}
+
+.edit-mode .resize-handle-edit {
+  display: block;
+}
+
+#edit-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  padding: 8px 16px;
+  background: #1e293b;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+#edit-toggle:hover {
+  background: #334155;
+}
+
+#edit-toggle.active {
+  background: #3b82f6;
+}
+`;
+  }
+
+  // ─────────────────────────────────────────────
+  // JS GENERATION
+  // ─────────────────────────────────────────────
+
+  /**
+   * Generate the post-export edit mode JS
+   * @returns {string} JavaScript code
+   */
+  function generateEditJs() {
+    return `
+// ─────────────────────────────────────────────
+// POST-EXPORT LAYOUT EDITING
+// ─────────────────────────────────────────────
+
+(function() {
+  const STORAGE_KEY = 'lobsterboard-layout';
+  const GRID_SIZE = 20;
+  const MIN_WIDTH = 100;
+  const MIN_HEIGHT = 60;
+  
+  let editMode = false;
+  let activeWidget = null;
+  let startX, startY, origLeft, origTop, origWidth, origHeight;
+  let isResizing = false;
+
+  document.addEventListener('DOMContentLoaded', initEditMode);
+
+  function initEditMode() {
+    const btn = document.createElement('button');
+    btn.id = 'edit-toggle';
+    btn.textContent = '✏️ Edit Layout';
+    btn.onclick = toggleEditMode;
+    document.body.appendChild(btn);
+    document.querySelectorAll('.widget-container').forEach(initWidget);
+    loadPositions();
+  }
+
+  function initWidget(widget) {
+    const handle = document.createElement('div');
+    handle.className = 'resize-handle-edit';
+    widget.appendChild(handle);
+    widget.addEventListener('mousedown', onWidgetMouseDown);
+    handle.addEventListener('mousedown', onResizeMouseDown);
+  }
+
+  function toggleEditMode() {
+    editMode = !editMode;
+    document.body.classList.toggle('edit-mode', editMode);
+    document.getElementById('edit-toggle').classList.toggle('active', editMode);
+    document.getElementById('edit-toggle').textContent = editMode ? '💾 Save Layout' : '✏️ Edit Layout';
+    if (!editMode) savePositions();
+  }
+
+  function onWidgetMouseDown(e) {
+    if (!editMode) return;
+    if (e.target.classList.contains('resize-handle-edit')) return;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    activeWidget = e.currentTarget;
+    isResizing = false;
+    startX = e.clientX;
+    startY = e.clientY;
+    origLeft = activeWidget.offsetLeft;
+    origTop = activeWidget.offsetTop;
+    activeWidget.classList.add('dragging');
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+
+  function onResizeMouseDown(e) {
+    if (!editMode) return;
+    e.preventDefault();
+    e.stopPropagation();
+    activeWidget = e.target.parentElement;
+    isResizing = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    origWidth = activeWidget.offsetWidth;
+    origHeight = activeWidget.offsetHeight;
+    activeWidget.classList.add('dragging');
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+
+  function onMouseMove(e) {
+    if (!activeWidget) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    if (isResizing) {
+      activeWidget.style.width = Math.max(MIN_WIDTH, origWidth + dx) + 'px';
+      activeWidget.style.height = Math.max(MIN_HEIGHT, origHeight + dy) + 'px';
+    } else {
+      activeWidget.style.left = Math.max(0, origLeft + dx) + 'px';
+      activeWidget.style.top = Math.max(0, origTop + dy) + 'px';
+    }
+  }
+
+  function onMouseUp() {
+    if (!activeWidget) return;
+    if (isResizing) {
+      activeWidget.style.width = snapToGrid(activeWidget.offsetWidth) + 'px';
+      activeWidget.style.height = snapToGrid(activeWidget.offsetHeight) + 'px';
+    } else {
+      activeWidget.style.left = snapToGrid(activeWidget.offsetLeft) + 'px';
+      activeWidget.style.top = snapToGrid(activeWidget.offsetTop) + 'px';
+    }
+    activeWidget.classList.remove('dragging');
+    activeWidget = null;
+    isResizing = false;
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+
+  function snapToGrid(value) {
+    return Math.round(value / GRID_SIZE) * GRID_SIZE;
+  }
+
+  function savePositions() {
+    const positions = {};
+    document.querySelectorAll('.widget-container').forEach(widget => {
+      const id = widget.dataset.widgetId;
+      if (id) {
+        positions[id] = {
+          left: widget.offsetLeft,
+          top: widget.offsetTop,
+          width: widget.offsetWidth,
+          height: widget.offsetHeight
+        };
+      }
+    });
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+    } catch (e) {}
+  }
+
+  function loadPositions() {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (!saved) return;
+      const positions = JSON.parse(saved);
+      document.querySelectorAll('.widget-container').forEach(widget => {
+        const id = widget.dataset.widgetId;
+        const pos = positions[id];
+        if (pos) {
+          widget.style.left = pos.left + 'px';
+          widget.style.top = pos.top + 'px';
+          widget.style.width = pos.width + 'px';
+          widget.style.height = pos.height + 'px';
+        }
+      });
+    } catch (e) {}
+  }
+})();
+`;
+  }
+
+  // ─────────────────────────────────────────────
+  // DASHBOARD GENERATION
+  // ─────────────────────────────────────────────
+
+  /**
+   * Generate widget HTML for a widget configuration
+   * @param {Object} widget - Widget configuration
+   * @returns {string} Widget HTML
+   */
+  function generateWidgetHtml(widget) {
+    const template = WIDGETS[widget.type];
+    if (!template) return '';
+
+    const props = { ...widget.properties, id: widget.id };
+    let html = processWidgetHtml(template.generateHtml(props), widget.properties.showHeader);
+
+    return `
+    <div class="widget-container" data-widget-id="${widget.id}" style="position:absolute;left:${widget.x}px;top:${widget.y}px;width:${widget.width}px;height:${widget.height}px;">
+      ${html}
+    </div>`;
+  }
+
+  /**
+   * Generate widget JavaScript for a widget configuration
+   * @param {Object} widget - Widget configuration
+   * @returns {string} Widget JavaScript
+   */
+  function generateWidgetJs(widget) {
+    const template = WIDGETS[widget.type];
+    if (!template || !template.generateJs) return '';
+
+    const props = { ...widget.properties, id: widget.id };
+    return template.generateJs(props);
+  }
+
+  /**
+   * Generate complete dashboard HTML
+   * @param {Object} config - Dashboard configuration
+   * @param {Object} config.canvas - Canvas dimensions { width, height }
+   * @param {Array} config.widgets - Array of widget configurations
+   * @returns {string} Complete HTML document
+   */
+  function generateDashboardHtml(config) {
+    const { canvas, widgets } = config;
+    const widgetHtml = widgets.map(generateWidgetHtml).join('\n');
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>My LobsterBoard Dashboard</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <main class="dashboard" style="width:${canvas.width}px;height:${canvas.height}px;position:relative;">
+    ${widgetHtml}
+  </main>
+  <script src="js/dashboard.js"></script>
+</body>
+</html>`;
+  }
+
+  /**
+   * Generate complete dashboard JavaScript
+   * @param {Array} widgets - Array of widget configurations
+   * @returns {string} Complete JavaScript
+   */
+  function generateDashboardJs(widgets) {
+    const widgetJs = widgets.map(generateWidgetJs).filter(Boolean).join('\n\n');
+    const editJs = generateEditJs();
+
+    return `/**
+ * LobsterBoard Dashboard - Generated JavaScript
+ * Replace YOUR_*_API_KEY placeholders with your actual API keys
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Dashboard loaded');
+});
+
+${widgetJs}
+
+${editJs}
+`;
+  }
+
+  /**
+   * Generate README for exported dashboard
+   * @param {Array} widgets - Array of widget configurations
+   * @returns {string} README markdown
+   */
+  function generateReadme(widgets) {
+    const apiKeys = [];
+    const needsOpenClaw = widgets.some(w => 
+      ['openclaw-release', 'auth-status', 'activity-list', 'cron-jobs', 'system-log', 'session-count', 'token-gauge'].includes(w.type)
+    );
+    
+    widgets.forEach(widget => {
+      const template = WIDGETS[widget.type];
+      if (template?.hasApiKey && template.apiKeyName) {
+        if (!apiKeys.includes(template.apiKeyName)) {
+          apiKeys.push(template.apiKeyName);
+        }
+      }
+    });
+
+    return `# LobsterBoard Dashboard
+
+This dashboard was generated with LobsterBoard Dashboard Builder.
+
+## Quick Start
+
+${needsOpenClaw ? `### Running with OpenClaw widgets
+
+Your dashboard includes widgets that connect to OpenClaw. Run the included server:
+
+\`\`\`bash
+node server.js
+\`\`\`
+
+Open http://localhost:8080 in your browser.
+` : ''}
+### Static mode
+
+Open \`index.html\` directly in a browser.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| \`index.html\` | Dashboard page |
+| \`css/style.css\` | Styles |
+| \`js/dashboard.js\` | Widget logic |
+| \`server.js\` | Server with OpenClaw API proxy |
+
+${apiKeys.length > 0 ? `## API Keys
+
+Edit \`js/dashboard.js\` and replace these placeholders:
+${apiKeys.map(key => `- \`YOUR_${key}\``).join('\n')}
+` : ''}
+
+---
+
+Generated with LobsterBoard - https://github.com/curbob/LobsterBoard
+`;
+  }
+
+  var builder = {
+    escapeHtml,
+    processWidgetHtml,
+    generateDashboardCss,
+    generateEditJs,
+    generateWidgetHtml,
+    generateWidgetJs,
+    generateDashboardHtml,
+    generateDashboardJs,
+    generateReadme
+  };
+
+  /**
+   * LobsterBoard - Dashboard Builder Library
+   * 
+   * A library for building and generating dashboard configurations
+   * with customizable widgets.
+   * 
+   * @module lobsterboard
+   * @example
+   * // ESM
+   * import { WIDGETS, generateDashboardHtml, generateDashboardCss } from 'lobsterboard';
+   * 
+   * // CommonJS
+   * const { WIDGETS, generateDashboardHtml } = require('lobsterboard');
+   * 
+   * // Browser (UMD)
+   * <script src="https://unpkg.com/lobsterboard"></script>
+   * const { WIDGETS } = LobsterBoard;
+   */
+
+
+  // Version (will be replaced during build)
+  const VERSION = '0.1.0';
+
+  // Default export for convenience
+  var index = {
+    VERSION,
+    WIDGETS,
+    ...builder
+  };
+
+  exports.VERSION = VERSION;
+  exports.WIDGETS = WIDGETS;
+  exports.default = index;
+  exports.escapeHtml = escapeHtml;
+  exports.generateDashboardCss = generateDashboardCss;
+  exports.generateDashboardHtml = generateDashboardHtml;
+  exports.generateDashboardJs = generateDashboardJs;
+  exports.generateEditJs = generateEditJs;
+  exports.generateReadme = generateReadme;
+  exports.generateWidgetHtml = generateWidgetHtml;
+  exports.generateWidgetJs = generateWidgetJs;
+  exports.getWidget = getWidget;
+  exports.getWidgetCategories = getWidgetCategories;
+  exports.getWidgetTypes = getWidgetTypes;
+  exports.processWidgetHtml = processWidgetHtml;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=lobsterboard.umd.js.map