lobsterboard 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -12,6 +12,12 @@
 - **Phosphor icon system** — themed widgets use Phosphor icons; Default theme keeps emoji
 - **Theme selector dropdown** in edit mode header
 - Theme persists to localStorage and dashboard config
+- **Themes showcase** on website and README with lightbox gallery
+
+## [0.2.6] - 2026-02-23
+
+### Fixed
+- **Version suffix comparison** — versions like `2026.2.22-2` (npm post-release patches) now correctly match GitHub tags like `v2026.2.22`, fixing false "Update available" indicators — thanks @JamesTsetsekas!
 
 ## [0.2.5] - 2026-02-19
 

package/README.md

@@ -37,9 +37,27 @@ Open **http://localhost:8080** → press **Ctrl+E** to enter edit mode → drag
 - **Custom pages** — extend your dashboard with full custom pages (notes, kanban boards, anything)
 - **Canvas sizes** — preset resolutions (1920×1080, 2560×1440, etc.) or custom sizes
 - **Live data** — system stats stream via Server-Sent Events, widgets auto-refresh
-- **Dark theme** — the only correct choice
+- **5 themes** — Default (dark), Terminal (CRT green), Feminine (pastel pink), Feminine Dark, Paper (sepia)
 - **No cloud** — everything runs locally, your data stays yours
 
+## Themes
+
+LobsterBoard ships with 5 built-in themes. Switch themes from the dropdown in edit mode — your choice persists across sessions.
+
+| Default | Terminal | Paper |
+|---------|----------|-------|
+| ![Default](site-assets/themes/theme-default.png) | ![Terminal](site-assets/themes/theme-terminal.png) | ![Paper](site-assets/themes/theme-paper.png) |
+
+| Feminine | Feminine Dark |
+|----------|---------------|
+| ![Feminine](site-assets/themes/theme-feminine.png) | ![Feminine Dark](site-assets/themes/theme-feminine-dark.png) |
+
+- **Default** — dark theme with emoji icons (the classic look)
+- **Terminal** — green CRT aesthetic with scanlines and Phosphor icons
+- **Paper** — warm cream/sepia tones, serif fonts, vintage feel
+- **Feminine** — soft pink and lavender pastels with subtle glows
+- **Feminine Dark** — pink/purple accents on a dark background
+
 ## Configuration
 
 ```bash

package/dist/lobsterboard.css

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

package/dist/lobsterboard.esm.js

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

package/dist/lobsterboard.umd.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.3.1
+ * LobsterBoard v0.3.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.3.1
+ * LobsterBoard v0.3.3
  * 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', () => {
@@ -155,7 +162,7 @@
         tplGrid.style.display = '';
         loadTemplates();
       } else {
-        alert('❌ ' + (data.error || 'Delete failed'));
+        alert('❌ ' + (data.error || data.message || 'Delete failed'));
       }
     } catch (e) {
       alert('❌ Delete failed: ' + e.message);
@@ -187,7 +194,7 @@
         alert(`✅ ${data.message}\n\nReloading dashboard...`);
         location.reload();
       } else {
-        alert('❌ ' + (data.error || 'Import failed'));
+        alert('❌ ' + (data.error || data.message || 'Import failed'));
       }
     } catch (e) {
       alert('❌ Import failed: ' + e.message);
@@ -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';
     }

package/js/widgets.js

@@ -3,6 +3,29 @@
  * Each widget defines its default size, properties, and generated code
  */
 
+// ─────────────────────────────────────────────
+// Security helpers (available to generated widget scripts via window)
+// ─────────────────────────────────────────────
+
+function _escHtmlGlobal(str) {
+  if (str == null) return '';
+  const div = document.createElement('div');
+  div.textContent = String(str);
+  return div.innerHTML;
+}
+window._esc = _escHtmlGlobal;
+
+function _isSafeUrl(url) {
+  if (!url) return false;
+  try {
+    const u = new URL(url);
+    return u.protocol === 'https:' || u.protocol === 'http:';
+  } catch (e) {
+    return false;
+  }
+}
+window._isSafeUrl = _isSafeUrl;
+
 // ─────────────────────────────────────────────
 // Icon System - Themeable widget icons
 // ─────────────────────────────────────────────
@@ -287,8 +310,8 @@ const WIDGETS = {
           }
         }));
         
-        container.innerHTML = results.map(r => 
-          '<div class="weather-row"><span class="weather-icon lb-icon" data-icon="' + r.iconId + '">' + r.emoji + '</span><span class="weather-loc">' + r.loc + '</span><span class="weather-temp">' + r.temp + unitSymbol + '</span></div>'
+        container.innerHTML = results.map(r =>
+          '<div class="weather-row"><span class="weather-icon lb-icon" data-icon="' + _esc(r.iconId) + '">' + _esc(r.emoji) + '</span><span class="weather-loc">' + _esc(r.loc) + '</span><span class="weather-temp">' + _esc(r.temp) + _esc(unitSymbol) + '</span></div>'
         ).join('');
       }
       update_${props.id.replace(/-/g, '_')}();
@@ -746,11 +769,11 @@ const WIDGETS = {
           const fs = 'calc(12px * var(--font-scale, 1))';
           list.innerHTML = activities.slice(0, ${props.maxItems || 10}).map(a => {
             const icon = a.status === 'ok' ? '✓' : a.status === 'error' ? '❌' : '';
-            const text = (a.text || '').replace(/</g, '&lt;');
-            const source = (a.source || '').replace(/</g, '&lt;');
+            const text = _esc(a.text || '');
+            const source = _esc(a.source || '');
             return '<div style="display:flex;align-items:flex-start;justify-content:space-between;padding:4px 0;border-bottom:1px solid #30363d;font-size:' + fs + ';">' +
-              '<div style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + (a.icon || '') + ' ' + text + '</div>' +
-              '<div style="flex-shrink:0;font-size:0.85em;color:#8b949e;margin-left:8px;">' + icon + ' ' + source + '</div>' +
+              '<div style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + _esc(a.icon || '') + ' ' + text + '</div>' +
+              '<div style="flex-shrink:0;font-size:0.85em;color:#8b949e;margin-left:8px;">' + _esc(icon) + ' ' + source + '</div>' +
             '</div>';
           }).join('');
         } catch (e) { console.error('Today widget error:', e); }
@@ -815,12 +838,12 @@ const WIDGETS = {
             const lastRun = job.lastRun ? new Date(job.lastRun).toLocaleTimeString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : 'Never';
             const statusBadge = job.lastStatus ? (job.lastStatus === 'ok' ? '✓' : '✗') : '';
             return '<div class="cron-item" style="display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--border,#30363d);font-size:calc(13px * var(--font-scale, 1));">' +
-              '<span style="flex-shrink:0;">' + statusDot + '</span>' +
+              '<span style="flex-shrink:0;">' + _esc(statusDot) + '</span>' +
               '<div style="flex:1;min-width:0;">' +
-                '<div style="font-weight:500;">' + job.name + '</div>' +
+                '<div style="font-weight:500;">' + _esc(job.name) + '</div>' +
               '</div>' +
               '<div style="text-align:right;font-size:0.8em;opacity:0.6;flex-shrink:0;">' +
-                '<div>' + statusBadge + ' ' + lastRun + '</div>' +
+                '<div>' + _esc(statusBadge) + ' ' + _esc(lastRun) + '</div>' +
               '</div>' +
             '</div>';
           }).join('');
@@ -2788,12 +2811,12 @@ const WIDGETS = {
         container.style.display = 'grid';
         container.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
         container.style.gap = '4px';
-        container.innerHTML = links.map(link => {
+        container.innerHTML = links.filter(link => _isSafeUrl(link.url)).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:6px 4px;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--border);overflow:hidden;">' +
+          const favicon = 'https://www.google.com/s2/favicons?sz=32&domain=' + _esc(domain);
+          return '<a href="' + _esc(link.url) + '" class="quick-link" target="_blank" rel="noopener noreferrer" 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>' +
+            '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + _esc(link.name) + '</span>' +
           '</a>';
         }).join('');
       })();
@@ -2823,7 +2846,7 @@ const WIDGETS = {
           <span class="dash-card-title">${renderIcon('embed')} ${props.title || 'Embed'}</span>
         </div>
         <div class="dash-card-body" style="padding:0;overflow:hidden;">
-          <iframe src="${props.embedUrl || 'about:blank'}" style="width:100%;height:100%;border:none;" ${props.allowFullscreen ? 'allowfullscreen' : ''}></iframe>
+          <iframe src="${_isSafeUrl(props.embedUrl) ? props.embedUrl : 'about:blank'}" style="width:100%;height:100%;border:none;" ${props.allowFullscreen ? 'allowfullscreen' : ''}></iframe>
         </div>
       </div>`,
     generateJs: (props) => `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobsterboard",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Self-hosted drag-and-drop dashboard builder with 50 widgets, template gallery, and custom pages. Works standalone or with OpenClaw.",
   "keywords": [
     "dashboard",
@@ -63,6 +63,8 @@
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
     "prebuild": "rm -rf dist",
+    "start": "node server.cjs",
+    "dev": "node server.cjs",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -71,7 +73,7 @@
     "rollup-plugin-copy": "^3.5.0"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=16.0.0 <23.0.0"
   },
   "dependencies": {
     "systeminformation": "^5.30.7"

package/server.cjs

@@ -298,10 +298,78 @@ const AUTH_FILE = path.join(__dirname, 'auth.json');
 const SECRETS_FILE = path.join(__dirname, 'secrets.json');
 
 // ─────────────────────────────────────────────
-// Security helpers
+// Server-side Session Authentication
 // ─────────────────────────────────────────────
 const crypto = require('crypto');
 
+const DASHBOARD_PASSWORD = process.env.DASHBOARD_PASSWORD || null;
+const SESSION_TTL_MS = (parseInt(process.env.SESSION_TTL_HOURS) || 24) * 60 * 60 * 1000;
+
+// In-memory session store: token -> expiresAt timestamp
+const sessions = new Map();
+
+// Rate limit store: ip -> { count, resetAt }
+const loginAttempts = new Map();
+const MAX_LOGIN_ATTEMPTS = 5;
+const LOCKOUT_MS = 15 * 60 * 1000;
+
+function generateSessionToken() {
+  return crypto.randomBytes(32).toString('hex'); // 64-char hex
+}
+
+function createSession() {
+  const token = generateSessionToken();
+  sessions.set(token, Date.now() + SESSION_TTL_MS);
+  return token;
+}
+
+function isValidSession(token) {
+  if (!token || !/^[a-f0-9]{64}$/.test(token)) return false;
+  const exp = sessions.get(token);
+  if (!exp) return false;
+  if (Date.now() > exp) { sessions.delete(token); return false; }
+  return true;
+}
+
+function getSessionCookie(req) {
+  const cookie = req.headers.cookie || '';
+  const match = cookie.match(/(?:^|;\s*)lb_session=([a-f0-9]{64})/);
+  return match ? match[1] : null;
+}
+
+function checkPassword(input) {
+  if (!DASHBOARD_PASSWORD || !input) return false;
+  // HMAC both inputs so timingSafeEqual always compares equal-length buffers
+  const inputHash = crypto.createHmac('sha256', 'lb-session-auth').update(String(input)).digest();
+  const correctHash = crypto.createHmac('sha256', 'lb-session-auth').update(DASHBOARD_PASSWORD).digest();
+  return crypto.timingSafeEqual(inputHash, correctHash);
+}
+
+function isRateLimited(ip) {
+  const entry = loginAttempts.get(ip);
+  if (!entry) return false;
+  if (Date.now() > entry.resetAt) { loginAttempts.delete(ip); return false; }
+  return entry.count >= MAX_LOGIN_ATTEMPTS;
+}
+
+function recordFailedAttempt(ip) {
+  const entry = loginAttempts.get(ip) || { count: 0, resetAt: Date.now() + LOCKOUT_MS };
+  entry.count++;
+  loginAttempts.set(ip, entry);
+}
+
+// Clean expired sessions every hour
+setInterval(() => {
+  const now = Date.now();
+  for (const [token, exp] of sessions) {
+    if (now > exp) sessions.delete(token);
+  }
+}, 60 * 60 * 1000);
+
+// ─────────────────────────────────────────────
+// Security helpers
+// ─────────────────────────────────────────────
+
 function hashPin(pin) {
   return crypto.createHash('sha256').update(pin).digest('hex');
 }
@@ -487,6 +555,77 @@ const server = http.createServer(async (req, res) => {
   const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
   const pathname = parsedUrl.pathname;
 
+  // ── Auth: serve login page (always accessible) ──
+  if (req.method === 'GET' && pathname === '/login') {
+    const loginPath = path.join(__dirname, 'login.html');
+    fs.readFile(loginPath, (err, data) => {
+      if (err) { sendResponse(res, 404, 'text/plain', 'Login page not found'); return; }
+      sendResponse(res, 200, 'text/html', data);
+    });
+    return;
+  }
+
+  // ── Auth: login action ──
+  if (req.method === 'POST' && pathname === '/api/auth/login') {
+    if (!DASHBOARD_PASSWORD) {
+      sendJson(res, 200, { status: 'ok', redirect: '/' });
+      return;
+    }
+    const ip = req.socket.remoteAddress || 'unknown';
+    if (isRateLimited(ip)) {
+      sendJson(res, 429, { error: 'Too many failed attempts. Try again in 15 minutes.' });
+      return;
+    }
+    let body = '';
+    req.on('data', c => { body += c; if (body.length > 4096) req.destroy(); });
+    req.on('end', () => {
+      try {
+        const { password } = JSON.parse(body);
+        if (checkPassword(password)) {
+          const token = createSession();
+          const cookieOpts = `Path=/; HttpOnly; SameSite=Strict; Max-Age=${SESSION_TTL_MS / 1000}`;
+          res.writeHead(200, {
+            'Content-Type': 'application/json',
+            'Set-Cookie': `lb_session=${token}; ${cookieOpts}`
+          });
+          res.end(JSON.stringify({ status: 'ok', redirect: '/' }));
+        } else {
+          recordFailedAttempt(ip);
+          sendJson(res, 401, { error: 'Invalid password' });
+        }
+      } catch (e) {
+        sendJson(res, 400, { error: 'Invalid request' });
+      }
+    });
+    return;
+  }
+
+  // ── Auth: logout ──
+  if (req.method === 'POST' && pathname === '/api/auth/logout') {
+    const token = getSessionCookie(req);
+    if (token) sessions.delete(token);
+    res.writeHead(302, {
+      'Set-Cookie': 'lb_session=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0',
+      'Location': '/login'
+    });
+    res.end();
+    return;
+  }
+
+  // ── Auth: enforce session for all other routes ──
+  if (DASHBOARD_PASSWORD) {
+    const token = getSessionCookie(req);
+    if (!isValidSession(token)) {
+      if (pathname.startsWith('/api/')) {
+        sendJson(res, 401, { status: 'error', message: 'Not authenticated' });
+      } else {
+        res.writeHead(302, { 'Location': '/login' });
+        res.end();
+      }
+      return;
+    }
+  }
+
   // CORS preflight for /config
   if (req.method === 'OPTIONS' && pathname === '/config') {
     res.writeHead(204, {
@@ -1458,12 +1597,25 @@ const server = http.createServer(async (req, res) => {
     req.on('end', () => {
       try {
         const { id, mode } = JSON.parse(body);
+        if (!id) { sendJson(res, 400, { error: 'Missing template id' }); return; }
+        if (!mode) { sendJson(res, 400, { error: 'Missing import mode' }); return; }
+        
         const tplConfigPath = path.join(TEMPLATES_DIR, id, 'config.json');
-        if (!fs.existsSync(tplConfigPath)) { sendJson(res, 404, { error: 'Template not found' }); return; }
-        const tplConfig = JSON.parse(fs.readFileSync(tplConfigPath, 'utf8'));
+        if (!fs.existsSync(tplConfigPath)) { sendJson(res, 404, { error: `Template "${id}" not found` }); return; }
+        
+        let tplConfig;
+        try {
+          tplConfig = JSON.parse(fs.readFileSync(tplConfigPath, 'utf8'));
+        } catch (parseErr) {
+          sendJson(res, 500, { error: `Template config is invalid JSON: ${parseErr.message}` }); return;
+        }
 
         if (mode === 'replace') {
-          fs.writeFileSync(CONFIG_FILE, JSON.stringify(tplConfig, null, 2));
+          try {
+            fs.writeFileSync(CONFIG_FILE, JSON.stringify(tplConfig, null, 2));
+          } catch (writeErr) {
+            sendJson(res, 500, { error: `Failed to write config: ${writeErr.message}` }); return;
+          }
           sendJson(res, 200, { status: 'success', message: 'Template imported (replace)' });
         } else if (mode === 'merge') {
           let currentConfig = { canvas: { width: 1920, height: 1080 }, widgets: [] };
@@ -1481,12 +1633,16 @@ const server = http.createServer(async (req, res) => {
             y: (w.y || 0) + offset
           }));
           currentConfig.widgets = [...(currentConfig.widgets || []), ...newWidgets];
-          fs.writeFileSync(CONFIG_FILE, JSON.stringify(currentConfig, null, 2));
+          try {
+            fs.writeFileSync(CONFIG_FILE, JSON.stringify(currentConfig, null, 2));
+          } catch (writeErr) {
+            sendJson(res, 500, { error: `Failed to write config: ${writeErr.message}` }); return;
+          }
           sendJson(res, 200, { status: 'success', message: `Merged ${newWidgets.length} widgets` });
         } else {
           sendJson(res, 400, { error: 'Invalid mode. Use "replace" or "merge"' });
         }
-      } catch (e) { sendError(res, e.message); }
+      } catch (e) { sendJson(res, 500, { error: `Import error: ${e.message}` }); }
     });
     return;
   }
@@ -1711,8 +1867,13 @@ process.on('SIGTERM', () => server.close(() => process.exit(0)));
 process.on('SIGINT', () => server.close(() => process.exit(0)));
 
 server.listen(PORT, HOST, () => {
+  const authStatus = DASHBOARD_PASSWORD
+    ? '   Password auth: ENABLED (DASHBOARD_PASSWORD is set)'
+    : '   Password auth: DISABLED — set DASHBOARD_PASSWORD=yourpassword to enable';
   console.log(`
-🦞 LobsterBoard Builder Server running at http://${HOST}:${PORT}
+LobsterBoard Builder Server running at http://${HOST}:${PORT}
+
+${authStatus}
 
    Press Ctrl+C to stop
 `);