lobsterboard 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.8.0] - 2026-03-24
+
+### Added
+- **Claude Usage widget** — Real-time Claude Code subscription monitoring with 5-hour session, 7-day weekly, Opus/Sonnet limits, and extra usage tracking — thanks @JamesTsetsekas!
+- **Claude Usage standalone page** — Full-page dashboard for detailed usage analysis at `/pages/claude-usage/`
+
+### Fixed
+- **OpenClaw version detection** — Widget now correctly parses `openclaw --version` output to fix false "Update available" notifications — thanks @JamesTsetsekas!
+
+### Technical
+- Auto-refreshes expired Claude OAuth tokens via CLI
+- Reads from standard `~/.claude/.credentials.json` location
+- Comprehensive error handling for rate limits and authentication issues
+
 ## [0.7.0] - 2026-03-17
 
 ### Added

package/app.html

@@ -164,6 +164,11 @@
             <span class="widget-name">Uptime Monitor</span>
             <span class="widget-verified" title="Tested & Verified">✓</span>
           </div>
+          <div class="widget-item" draggable="true" data-widget="system-graphical">
+            <span class="widget-icon">💻</span>
+            <span class="widget-name">System (Graphical)</span>
+            <span class="widget-verified" title="Tested & Verified">✓</span>
+          </div>
         </div>
       </div>
 
@@ -742,8 +747,33 @@
     </div>
   </div>
 
-  <script src="js/widgets.js"></script>
-  <script src="js/builder.js"></script>
+  <!-- Widget modules (shared first, then index, then categories) -->
+  <script src="js/widgets/shared/helpers.js"></script>
+  <script src="js/widgets/shared/icons.js"></script>
+  <script src="js/widgets/shared/stats.js"></script>
+  <script src="js/widgets/index.js"></script>
+  <script src="js/widgets/weather.js"></script>
+  <script src="js/widgets/system.js"></script>
+  <script src="js/widgets/ai-tools.js"></script>
+  <script src="js/widgets/media.js"></script>
+  <script src="js/widgets/productivity.js"></script>
+  <script src="js/widgets/time.js"></script>
+  <script src="js/widgets/layout.js"></script>
+  <script src="js/widgets/releases.js"></script>
+  <script src="js/widgets/misc.js"></script>
+  <!-- Editor modules (order matters: state first, index last) -->
+  <script src="js/editor/state.js"></script>
+  <script src="js/editor/canvas.js"></script>
+  <script src="js/editor/auth.js"></script>
+  <script src="js/editor/config.js"></script>
+  <script src="js/editor/servers.js"></script>
+  <script src="js/editor/drag-drop.js"></script>
+  <script src="js/editor/widgets.js"></script>
+  <script src="js/editor/properties.js"></script>
+  <script src="js/editor/controls.js"></script>
+  <script src="js/editor/export.js"></script>
+  <script src="js/editor/modals.js"></script>
+  <script src="js/editor/index.js"></script>
   <script>
     // Load page links into nav
     fetch('/api/pages').then(r => r.json()).then(pages => {

package/css/builder.css

@@ -535,6 +535,48 @@ body {
   color: var(--text-primary);
 }
 
+/* System Graphical Widget */
+.placed-widget .system-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.placed-widget .metric-label {
+  font-size: calc(11px * var(--font-scale));
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.placed-widget .progress-ring-container {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placed-widget .progress-ring {
+  width: 100%;
+  height: 100%;
+}
+
+.placed-widget .progress-ring-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: calc(12px * var(--font-scale));
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+  line-height: 1;
+}
+
 /* Dash Cards */
 .placed-widget .dash-card {
   background: var(--bg-secondary);

package/dist/lobsterboard.css

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

package/dist/lobsterboard.esm.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.7.0
+ * LobsterBoard v0.8.1
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT
@@ -477,6 +477,148 @@ const WIDGETS = {
       document.getElementById('${props.id}-refresh').textContent = 
         new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
     `
+  },
+
+  'system-graphical': {
+    name: 'System (Graphical)',
+    icon: '💻',
+    category: 'system',
+    description: 'Graphical CPU and Memory usage with circular progress rings. Supports remote servers via lobsterboard-agent.',
+    defaultWidth: 240,
+    defaultHeight: 140,
+    hasApiKey: false,
+    properties: {
+      title: 'System',
+      server: 'local',
+      refreshInterval: 5,
+      showPercentages: true,
+      showLabels: true
+    },
+    preview: `<div style="display:flex;align-items:center;justify-content:space-around;padding:8px;">
+      <div style="position:relative;width:50px;height:50px;">
+        <svg viewBox="0 0 48 48" style="width:100%;height:100%;transform:rotate(-90deg);">
+          <circle cx="24" cy="24" r="18" fill="none" stroke="#30363d" stroke-width="4"/>
+          <circle cx="24" cy="24" r="18" fill="none" stroke="#58a6ff" stroke-width="4"
+            stroke-dasharray="113" stroke-dashoffset="85" stroke-linecap="round"/>
+        </svg>
+        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:600;color:#58a6ff;">25%</div>
+      </div>
+      <div style="position:relative;width:50px;height:50px;">
+        <svg viewBox="0 0 48 48" style="width:100%;height:100%;transform:rotate(-90deg);">
+          <circle cx="24" cy="24" r="18" fill="none" stroke="#30363d" stroke-width="4"/>
+          <circle cx="24" cy="24" r="18" fill="none" stroke="#3fb950" stroke-width="4"
+            stroke-dasharray="113" stroke-dashoffset="68" stroke-linecap="round"/>
+        </svg>
+        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:600;color:#3fb950;">40%</div>
+      </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('cpu')} ${props.title || 'System'}</span>
+          ${props.server && props.server !== 'local' ? `<span class="dash-card-badge" style="font-size:10px;">🌐</span>` : ''}
+        </div>
+        <div class="dash-card-body" style="display:flex;align-items:center;justify-content:space-around;padding:12px;">
+          <div class="system-metric">
+            ${props.showLabels ? '<div class="metric-label">CPU</div>' : ''}
+            <div class="progress-ring-container">
+              <svg class="progress-ring" viewBox="0 0 48 48">
+                <circle cx="24" cy="24" r="18" fill="none" stroke="var(--bg-tertiary)" stroke-width="4"/>
+                <circle id="${props.id}-cpu-ring" cx="24" cy="24" r="18" fill="none" stroke="#58a6ff" stroke-width="4"
+                  stroke-dasharray="113.1" stroke-dashoffset="113.1" stroke-linecap="round"
+                  style="transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease; transform: rotate(-90deg); transform-origin: 50% 50%;"/>
+              </svg>
+              <div class="progress-ring-text">
+                <span id="${props.id}-cpu-pct" ${props.showPercentages ? '' : 'style="display:none;"'}>—</span>
+                <span id="${props.id}-cpu-icon" ${props.showPercentages ? 'style="display:none;"' : ''}>💻</span>
+              </div>
+            </div>
+          </div>
+          <div class="system-metric">
+            ${props.showLabels ? '<div class="metric-label">MEM</div>' : ''}
+            <div class="progress-ring-container">
+              <svg class="progress-ring" viewBox="0 0 48 48">
+                <circle cx="24" cy="24" r="18" fill="none" stroke="var(--bg-tertiary)" stroke-width="4"/>
+                <circle id="${props.id}-mem-ring" cx="24" cy="24" r="18" fill="none" stroke="#3fb950" stroke-width="4"
+                  stroke-dasharray="113.1" stroke-dashoffset="113.1" stroke-linecap="round"
+                  style="transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease; transform: rotate(-90deg); transform-origin: 50% 50%;"/>
+              </svg>
+              <div class="progress-ring-text">
+                <span id="${props.id}-mem-pct" ${props.showPercentages ? '' : 'style="display:none;"'}>—</span>
+                <span id="${props.id}-mem-icon" ${props.showPercentages ? 'style="display:none;"' : ''}>🧠</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>`,
+    generateJs: (props) => `
+      // System (Graphical) Widget: ${props.id} — ${props.server === 'local' ? 'local SSE' : 'remote: ' + props.server}
+      
+      function getUsageColor(percentage) {
+        if (percentage >= 90) return '#f85149'; // Red for critical
+        if (percentage >= 75) return '#d29922'; // Yellow for warning
+        if (percentage >= 50) return '#58a6ff'; // Blue for moderate
+        return '#3fb950'; // Green for good
+      }
+      
+      function updateProgressRing(ringId, percentage, textId) {
+        const ring = document.getElementById(ringId);
+        const text = document.getElementById(textId);
+        if (!ring || !text) return;
+        
+        const normalizedPct = Math.max(0, Math.min(100, percentage || 0));
+        const circumference = 113.1; // 2 * π * 18
+        const offset = circumference - (normalizedPct / 100 * circumference);
+        const color = getUsageColor(normalizedPct);
+        
+        ring.style.strokeDashoffset = offset;
+        ring.style.stroke = color;
+        text.textContent = Math.round(normalizedPct) + '%';
+        text.style.color = color;
+      }
+      
+      onStats('${props.server || 'local'}', function(data) {
+        // Handle offline state
+        if (data._offline) {
+          document.getElementById('${props.id}-cpu-pct').textContent = '⚠️';
+          document.getElementById('${props.id}-mem-pct').textContent = '⚠️';
+          document.getElementById('${props.id}-cpu-ring').style.strokeDashoffset = '113.1';
+          document.getElementById('${props.id}-mem-ring').style.strokeDashoffset = '113.1';
+          return;
+        }
+        
+        // Update CPU ring
+        if (data.cpu && data.cpu.currentLoad != null) {
+          updateProgressRing('${props.id}-cpu-ring', data.cpu.currentLoad, '${props.id}-cpu-pct');
+        }
+        
+        // Update Memory ring  
+        if (data.memory && data.memory.total && data.memory.active != null) {
+          const memoryPct = (data.memory.active / data.memory.total) * 100;
+          updateProgressRing('${props.id}-mem-ring', memoryPct, '${props.id}-mem-pct');
+        }
+      }, ${(props.refreshInterval || 5) * 1000});
+    `
+  },
+
+  'claude-usage': {
+    name: 'Claude Usage',
+    icon: '🤖',
+    category: 'large',
+    description: 'Real-time Claude Code subscription usage (5h session, 7d weekly, Opus, Sonnet limits). Reads credentials from ~/.claude.',
+    defaultWidth: 380,
+    defaultHeight: 260,
+    hasApiKey: false,
+    properties: { title: 'Claude Usage', refreshInterval: 120 },
+    preview: `<div style="padding:8px;font-size:11px;"><div><b>5h Session</b> 28%</div><div><b>7d Weekly</b> 31%</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 || 'Claude Usage'}</span><span id="${props.id}-sub" style="font-size:10px;color:#8b949e;margin-left:auto;"></span></div><div class="dash-card-body" id="${props.id}-body" style="padding:8px 12px;overflow-y:auto;"><div style="color:#8b949e;text-align:center;">Loading...</div></div></div>`,
+    generateJs: (props) => `
+      function barColor(pct) { return pct >= 80 ? '#f85149' : pct >= 50 ? '#d29922' : '#3fb950'; }
+      function timeLeft(iso) { if (!iso) return ''; const ms = new Date(iso) - Date.now(); if (ms <= 0) return 'now'; const h = Math.floor(ms/3600000), m = Math.floor((ms%3600000)/60000); return h > 0 ? h+'h '+m+'m' : m+'m'; }
+      function usageBar(label, pct, resetIso) { const p = Math.min(100,Math.max(0,pct||0)), c = barColor(p), reset = resetIso ? '<span style="color:#8b949e;font-size:10px;">resets '+timeLeft(resetIso)+'</span>' : ''; return '<div style="margin-bottom:10px;"><div style="display:flex;justify-content:space-between;margin-bottom:3px;"><span style="font-weight:600;font-size:12px;">'+label+'</span><span style="font-size:13px;font-weight:700;color:'+c+';">'+p.toFixed(0)+'%</span></div><div style="background:#21262d;border-radius:4px;height:8px;overflow:hidden;"><div style="width:'+p+'%;height:100%;background:'+c+';border-radius:4px;transition:width .5s;"></div></div>'+(reset?'<div style="text-align:right;margin-top:2px;">'+reset+'</div>':'')+'</div>'; }
+      async function update_${props.id.replace(/-/g,'_')}() { const body = document.getElementById('${props.id}-body'); const subEl = document.getElementById('${props.id}-sub'); try { const res = await fetch('/api/pages/claude-usage/usage'); const d = await res.json(); if (d.error) { body.innerHTML='<div style="color:#f85149;">'+d.error+'</div>'; return; } if (subEl) { subEl.textContent = {max:'Max (5×)',pro:'Pro',free:'Free'}[d.subscription]||d.subscription||''; } let html=''; if(d.five_hour) html+=usageBar('5h Session',d.five_hour.utilization,d.five_hour.resets_at); if(d.seven_day) html+=usageBar('7d Weekly',d.seven_day.utilization,d.seven_day.resets_at); if(d.seven_day_opus) html+=usageBar('Opus (7d)',d.seven_day_opus.utilization,d.seven_day_opus.resets_at); if(d.seven_day_sonnet&&d.seven_day_sonnet.utilization>0) html+=usageBar('Sonnet (7d)',d.seven_day_sonnet.utilization,d.seven_day_sonnet.resets_at); if(d.extra_usage&&d.extra_usage.is_enabled){const used=(d.extra_usage.used_credits/100).toFixed(2),limit=d.extra_usage.monthly_limit>0?(d.extra_usage.monthly_limit/100).toFixed(2):'∞';html+='<div style="margin-top:4px;padding-top:6px;border-top:1px solid #30363d;"><div style="display:flex;justify-content:space-between;font-size:11px;"><span style="color:#8b949e;">Extra Usage</span><span style="font-weight:600;">$'+used+' / $'+limit+'</span></div></div>';} if(!html) html='<div style="color:#8b949e;">No usage data</div>'; body.innerHTML=html; } catch(e) { console.error('Claude usage error:',e); body.innerHTML='<div style="color:#f85149;">Failed to load</div>'; } }
+      update_${props.id.replace(/-/g,'_')}(); setInterval(update_${props.id.replace(/-/g,'_')}, ${(props.refreshInterval||120)*1000});
+    `
   }
 };