lobsterboard 0.3.2 → 0.4.0

package/app.html

@@ -223,9 +223,60 @@
       <div class="widget-section">
         <h4>🤖 AI / LLM</h4>
         <div class="widget-list">
-          <div class="widget-item" draggable="true" data-widget="ai-usage-claude">
+          <div class="widget-item" draggable="true" data-widget="ai-usage">
+            <span class="widget-icon">🤖</span>
+            <span class="widget-name">AI Usage</span>
+            <span class="widget-verified" title="Tested & Verified">✓</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="claude-code">
             <span class="widget-icon">🟣</span>
-            <span class="widget-name">Claude Usage</span>
+            <span class="widget-name">Claude Code</span>
+            <span class="widget-verified" title="Tested & Verified">✓</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="codex-cli">
+            <span class="widget-icon">🟢</span>
+            <span class="widget-name">Codex CLI</span>
+            <span class="widget-verified" title="Tested & Verified">✓</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="github-copilot">
+            <span class="widget-icon">⚫</span>
+            <span class="widget-name">GitHub Copilot</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="cursor">
+            <span class="widget-icon">🔵</span>
+            <span class="widget-name">Cursor</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="gemini-cli">
+            <span class="widget-icon">🔷</span>
+            <span class="widget-name">Gemini CLI</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="amp-code">
+            <span class="widget-icon">⚡</span>
+            <span class="widget-name">Amp Code</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="factory">
+            <span class="widget-icon">🏭</span>
+            <span class="widget-name">Factory</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="kimi-code">
+            <span class="widget-icon">🌙</span>
+            <span class="widget-name">Kimi Code</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="jetbrains-ai">
+            <span class="widget-icon">🧠</span>
+            <span class="widget-name">JetBrains AI</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="minimax">
+            <span class="widget-icon">🔶</span>
+            <span class="widget-name">MiniMax</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="zai">
+            <span class="widget-icon">🇿</span>
+            <span class="widget-name">Z.ai</span>
+          </div>
+          <div class="widget-item" draggable="true" data-widget="antigravity-local">
+            <span class="widget-icon">🪐</span>
+            <span class="widget-name">Antigravity</span>
           </div>
           <div class="widget-item" draggable="true" data-widget="ai-cost-tracker">
             <span class="widget-icon">💰</span>

package/dist/lobsterboard.css

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

package/dist/lobsterboard.esm.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.3.2
+ * LobsterBoard v0.4.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.3.2
+ * LobsterBoard v0.4.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.3.2
+ * LobsterBoard v0.4.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.3.2
+ * LobsterBoard v0.4.0
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/js/builder.js

@@ -3290,32 +3290,35 @@ async function openDirBrowser(startDir) {
   try {
     const res = await fetch('/api/browse-dirs?dir=' + encodeURIComponent(dir));
     const data = await res.json();
-    if (data.status !== 'ok') { browser.innerHTML = `<span style="color:#f85149;">${data.message}</span>`; return; }
-    let html = `<div style="margin-bottom:6px;color:var(--text-secondary);font-size:11px;word-break:break-all;">${data.path}</div>`;
+    if (data.status !== 'ok') { browser.innerHTML = `<span style="color:#f85149;">${escapeHtml(data.message)}</span>`; return; }
+    let html = `<div style="margin-bottom:6px;color:var(--text-secondary);font-size:11px;word-break:break-all;">${escapeHtml(data.path)}</div>`;
     if (data.imageCount > 0) {
-      html += `<div style="margin-bottom:6px;padding:4px 8px;background:var(--bg-secondary);border-radius:4px;color:#3fb950;font-size:11px;">📷 ${data.imageCount} image${data.imageCount !== 1 ? 's' : ''} in this folder</div>`;
+      html += `<div style="margin-bottom:6px;padding:4px 8px;background:var(--bg-secondary);border-radius:4px;color:#3fb950;font-size:11px;">📷 ${escapeHtml(String(data.imageCount))} image${data.imageCount !== 1 ? 's' : ''} in this folder</div>`;
     }
     // Up one level
     const parent = data.path.replace(/\/[^/]+\/?$/, '') || '/';
     if (data.path !== parent) {
-      html += `<div class="dir-entry" data-path="${parent}" style="cursor:pointer;padding:3px 6px;border-radius:4px;color:var(--text-primary);" onmouseover="this.style.background='var(--bg-secondary)'" onmouseout="this.style.background='none'">📁 ..</div>`;
+      html += `<div class="dir-entry" data-path="${escapeHtml(parent)}" style="cursor:pointer;padding:3px 6px;border-radius:4px;color:var(--text-primary);" onmouseover="this.style.background='var(--bg-secondary)'" onmouseout="this.style.background='none'">📁 ..</div>`;
     }
     for (const d of data.dirs) {
       const full = data.path + '/' + d;
-      html += `<div class="dir-entry" data-path="${full}" style="cursor:pointer;padding:3px 6px;border-radius:4px;color:var(--text-primary);" onmouseover="this.style.background='var(--bg-secondary)'" onmouseout="this.style.background='none'">📁 ${d}</div>`;
+      html += `<div class="dir-entry" data-path="${escapeHtml(full)}" style="cursor:pointer;padding:3px 6px;border-radius:4px;color:var(--text-primary);" onmouseover="this.style.background='var(--bg-secondary)'" onmouseout="this.style.background='none'">📁 ${escapeHtml(d)}</div>`;
     }
     if (data.dirs.length === 0 && data.imageCount === 0) {
       html += `<div style="color:var(--text-muted);font-size:11px;padding:4px;">Empty directory</div>`;
     }
     html += `<div style="margin-top:8px;display:flex;gap:4px;">`;
-    html += `<button type="button" onclick="selectDir('${data.path.replace(/'/g, "\\'")}')" style="flex:1;padding:4px 8px;background:var(--accent-blue);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;">✓ Select this folder</button>`;
+    html += `<button type="button" style="flex:1;padding:4px 8px;background:var(--accent-blue);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px;">✓ Select this folder</button>`;
     html += `<button type="button" onclick="document.getElementById('dir-browser').style.display='none'" style="padding:4px 8px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:11px;">Cancel</button>`;
     html += `</div>`;
     browser.innerHTML = html;
+    // Attach select button handler safely (avoid inline onclick with path data)
+    const selectBtn = browser.querySelector('button');
+    if (selectBtn) selectBtn.addEventListener('click', () => selectDir(data.path));
     browser.querySelectorAll('.dir-entry').forEach(el => {
       el.addEventListener('click', () => openDirBrowser(el.dataset.path));
     });
-  } catch (e) { browser.innerHTML = `<span style="color:#f85149;">Error: ${e.message}</span>`; }
+  } catch (e) { browser.innerHTML = `<span style="color:#f85149;">Error: ${escapeHtml(e.message)}</span>`; }
 }
 
 function selectDir(dirPath) {

package/js/templates.js

@@ -2,6 +2,13 @@
  * LobsterBoard Template Gallery System
  */
 (function() {
+  function _esc(str) {
+    if (str == null) return '';
+    const div = document.createElement('div');
+    div.textContent = String(str);
+    return div.innerHTML;
+  }
+
   const galleryModal = document.getElementById('template-gallery-modal');
   const exportModal = document.getElementById('template-export-modal');
   const tplGrid = document.getElementById('tpl-grid');
@@ -88,19 +95,19 @@
       return;
     }
     tplGrid.innerHTML = templates.map(t => `
-      <div class="tpl-card" data-id="${t.id}">
+      <div class="tpl-card" data-id="${_esc(t.id)}">
         <div class="tpl-card-img">
-          <img src="/api/templates/${t.id}/preview" alt="${t.name}" onerror="this.parentElement.innerHTML='<div class=\\'tpl-no-preview\\'>🦞</div>'">
+          <img src="/api/templates/${_esc(t.id)}/preview" alt="${_esc(t.name)}" onerror="this.parentElement.innerHTML='<div class=\\'tpl-no-preview\\'>🦞</div>'">
         </div>
         <div class="tpl-card-body">
-          <h3>${t.name}</h3>
-          <p>${t.description || ''}</p>
+          <h3>${_esc(t.name)}</h3>
+          <p>${_esc(t.description || '')}</p>
           <div class="tpl-card-meta">
-            <span>${t.widgetCount || 0} widgets</span>
-            <span>${t.canvasSize || ''}</span>
+            <span>${_esc(String(t.widgetCount || 0))} widgets</span>
+            <span>${_esc(t.canvasSize || '')}</span>
           </div>
-          ${(t.widgetTypes || []).length ? `<div style="margin-top:4px;font-size:10px;color:var(--text-muted);">${t.widgetTypes.slice(0,6).map(w => (w.icon || '') + ' ' + w.name).join(' · ')}${t.widgetTypes.length > 6 ? ' · +' + (t.widgetTypes.length - 6) + ' more' : ''}</div>` : ''}
-          <div class="tpl-card-tags">${(t.tags || []).map(tag => `<span class="tpl-tag">${tag}</span>`).join('')}</div>
+          ${(t.widgetTypes || []).length ? `<div style="margin-top:4px;font-size:10px;color:var(--text-muted);">${t.widgetTypes.slice(0,6).map(w => _esc((w.icon || '') + ' ' + w.name)).join(' · ')}${t.widgetTypes.length > 6 ? ' · +' + (t.widgetTypes.length - 6) + ' more' : ''}</div>` : ''}
+          <div class="tpl-card-tags">${(t.tags || []).map(tag => `<span class="tpl-tag">${_esc(tag)}</span>`).join('')}</div>
         </div>
       </div>
     `).join('');
@@ -122,13 +129,13 @@
     document.getElementById('tpl-detail-name').textContent = selectedTemplate.name;
     document.getElementById('tpl-detail-desc').textContent = selectedTemplate.description || '';
     document.getElementById('tpl-detail-meta').innerHTML = `
-      <div><strong>Author:</strong> ${selectedTemplate.author || 'anonymous'}</div>
-      <div><strong>Canvas:</strong> ${selectedTemplate.canvasSize || 'unknown'}</div>
-      <div><strong>Widgets:</strong> ${selectedTemplate.widgetCount || 0}</div>
-      ${(selectedTemplate.requiresSetup || []).length ? `<div><strong>Requires:</strong> ${selectedTemplate.requiresSetup.join(', ')}</div>` : ''}
-      ${(selectedTemplate.widgetTypes || []).length ? `<div style="margin-top:8px;"><strong>Widget Types:</strong><div style="margin-top:4px;">${selectedTemplate.widgetTypes.map(w => `<span style="display:inline-block;padding:2px 8px;margin:2px;background:var(--bg-tertiary);border-radius:4px;font-size:11px;">${w.icon || ''} ${w.name}${w.count > 1 ? ' ×' + w.count : ''}</span>`).join('')}</div></div>` : ''}
+      <div><strong>Author:</strong> ${_esc(selectedTemplate.author || 'anonymous')}</div>
+      <div><strong>Canvas:</strong> ${_esc(selectedTemplate.canvasSize || 'unknown')}</div>
+      <div><strong>Widgets:</strong> ${_esc(String(selectedTemplate.widgetCount || 0))}</div>
+      ${(selectedTemplate.requiresSetup || []).length ? `<div><strong>Requires:</strong> ${(selectedTemplate.requiresSetup || []).map(s => _esc(s)).join(', ')}</div>` : ''}
+      ${(selectedTemplate.widgetTypes || []).length ? `<div style="margin-top:8px;"><strong>Widget Types:</strong><div style="margin-top:4px;">${selectedTemplate.widgetTypes.map(w => `<span style="display:inline-block;padding:2px 8px;margin:2px;background:var(--bg-tertiary);border-radius:4px;font-size:11px;">${_esc((w.icon || '') + ' ' + w.name)}${w.count > 1 ? ' ×' + _esc(String(w.count)) : ''}</span>`).join('')}</div></div>` : ''}
     `;
-    document.getElementById('tpl-detail-tags').innerHTML = (selectedTemplate.tags || []).map(t => `<span class="tpl-tag">${t}</span>`).join('');
+    document.getElementById('tpl-detail-tags').innerHTML = (selectedTemplate.tags || []).map(t => `<span class="tpl-tag">${_esc(t)}</span>`).join('');
   }
 
   document.getElementById('tpl-back').addEventListener('click', () => {
@@ -267,16 +274,16 @@
             body: JSON.stringify({ data: screenshotData })
           });
         }
-        resultEl.innerHTML = `✅ Template exported as <strong>${data.id}</strong>${screenshotData ? '<br>Screenshot captured!' : '<br>⚠️ No screenshot (auto-capture failed).'}`;
+        resultEl.innerHTML = `✅ Template exported as <strong>${_esc(data.id)}</strong>${screenshotData ? '<br>Screenshot captured!' : '<br>⚠️ No screenshot (auto-capture failed).'}`;
         resultEl.className = 'tpl-export-result tpl-export-success';
       } else {
-        resultEl.innerHTML = `❌ ${data.error || 'Export failed'}`;
+        resultEl.innerHTML = `❌ ${_esc(data.error || 'Export failed')}`;
         resultEl.className = 'tpl-export-result tpl-export-error';
       }
       resultEl.style.display = 'block';
     } catch (e) {
       const resultEl = document.getElementById('tpl-export-result');
-      resultEl.innerHTML = `❌ Export failed: ${e.message}`;
+      resultEl.innerHTML = `❌ Export failed: ${_esc(e.message)}`;
       resultEl.className = 'tpl-export-result tpl-export-error';
       resultEl.style.display = 'block';
     }