npm - squidclaw - Versions diffs - 2.8.0 → 3.1.0 - Mend

squidclaw 2.8.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/engine.js +6 -0
package/lib/features/canvas.js +228 -0
package/lib/middleware/commands.js +47 -0
package/lib/tools/dashboard-pro.js +340 -0
package/lib/tools/pptx-pro.js +686 -0
package/lib/tools/router.js +75 -26
package/package.json +1 -1

package/lib/engine.js CHANGED Viewed

@@ -228,6 +228,12 @@ export class SquidclawEngine {
       if (pending.c > 0) console.log(`  ⏰ Reminders: ${pending.c} pending`);
     } catch {}
+    // Canvas (Visual Rendering)
+    try {
+      const { Canvas } = await import('./features/canvas.js');
+      this.canvas = new Canvas(this);
+    } catch (err) { logger.error('engine', 'Canvas init failed: ' + err.message); }
     // Nodes (Paired Devices)
     try {
       const { NodeManager } = await import('./features/nodes.js');

package/lib/features/canvas.js ADDED Viewed

@@ -0,0 +1,228 @@
+/**
+ * 🦑 Canvas — Render HTML/charts as images in chat
+ * Uses Puppeteer to render HTML → screenshot → send as image
+ * Mini-apps, dashboards, visual reports
+ */
+import { logger } from '../core/logger.js';
+import { writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+export class Canvas {
+  constructor(engine) {
+    this.engine = engine;
+    this.outputDir = '/tmp/squidclaw-canvas';
+    mkdirSync(this.outputDir, { recursive: true });
+  }
+  // ── Render HTML to image ──
+  async renderHtml(html, options = {}) {
+    const puppeteer = await import('puppeteer-core');
+    const { existsSync } = await import('fs');
+    const paths = ['/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium-browser', '/usr/bin/chromium', '/snap/bin/chromium'];
+    let execPath = null;
+    for (const p of paths) { if (existsSync(p)) { execPath = p; break; } }
+    if (!execPath) throw new Error('No Chrome/Chromium found');
+    const browser = await puppeteer.default.launch({
+      executablePath: execPath,
+      headless: 'new',
+      args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu'],
+    });
+    try {
+      const page = await browser.newPage();
+      const width = options.width || 800;
+      const height = options.height || 600;
+      await page.setViewport({ width, height });
+      // Full HTML page
+      const fullHtml = html.includes('<html') ? html : `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117; color: #c9d1d9; padding: 24px; }
+    h1 { color: #58a6ff; font-size: 24px; margin-bottom: 16px; }
+    h2 { color: #58a6ff; font-size: 18px; margin: 20px 0 8px; }
+    .card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 20px; margin: 12px 0; }
+    .stat { display: inline-block; text-align: center; padding: 16px 24px; }
+    .stat-value { font-size: 36px; font-weight: bold; color: #58a6ff; }
+    .stat-label { font-size: 12px; color: #8b949e; margin-top: 4px; }
+    .grid { display: grid; gap: 12px; }
+    .grid-2 { grid-template-columns: 1fr 1fr; }
+    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
+    .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    .bar { height: 24px; border-radius: 4px; margin: 4px 0; }
+    .bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #58a6ff, #3fb950); }
+    .progress { background: #21262d; border-radius: 8px; overflow: hidden; height: 12px; margin: 6px 0; }
+    .progress-fill { height: 100%; background: linear-gradient(90deg, #58a6ff, #3fb950); border-radius: 8px; }
+    table { width: 100%; border-collapse: collapse; }
+    th { background: #161b22; color: #58a6ff; padding: 10px; text-align: left; border-bottom: 2px solid #30363d; }
+    td { padding: 10px; border-bottom: 1px solid #21262d; }
+    tr:nth-child(even) { background: #161b22; }
+    .tag { display: inline-block; background: #1f6feb33; color: #58a6ff; padding: 2px 10px; border-radius: 12px; font-size: 12px; margin: 2px; }
+    .green { color: #3fb950; } .red { color: #f85149; } .yellow { color: #d29922; }
+    .accent { color: #58a6ff; }
+  </style>
+</head>
+<body>${html}</body>
+</html>`;
+      await page.setContent(fullHtml, { waitUntil: 'networkidle0', timeout: 10000 });
+      // Auto-height if not specified
+      if (!options.height) {
+        const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
+        await page.setViewport({ width, height: Math.min(bodyHeight + 48, 2000) });
+      }
+      const screenshot = await page.screenshot({
+        type: 'png',
+        fullPage: !options.height,
+      });
+      const filename = (options.name || 'canvas_' + Date.now()) + '.png';
+      const filepath = join(this.outputDir, filename);
+      writeFileSync(filepath, screenshot);
+      logger.info('canvas', `Rendered: ${filepath} (${width}x${options.height || 'auto'})`);
+      return { buffer: screenshot, filepath, filename };
+    } finally {
+      await browser.close();
+    }
+  }
+  // ── Pre-built templates ──
+  async renderDashboard(data) {
+    const { title, stats, chart, table } = data;
+    let html = `<h1>${title || 'Dashboard'}</h1>`;
+    // Stats cards
+    if (stats && stats.length > 0) {
+      html += `<div class="card"><div class="grid grid-${Math.min(stats.length, 4)}">`;
+      for (const s of stats) {
+        html += `<div class="stat">
+          ${s.icon ? `<div style="font-size:32px;margin-bottom:4px">${s.icon}</div>` : ''}
+          <div class="stat-value" style="color:${s.color || '#58a6ff'}">${s.value}</div>
+          <div class="stat-label">${s.label}</div>
+        </div>`;
+      }
+      html += `</div></div>`;
+    }
+    // Bar chart
+    if (chart && chart.length > 0) {
+      const max = Math.max(...chart.map(c => c.value));
+      html += `<div class="card"><h2>${data.chartTitle || 'Chart'}</h2>`;
+      for (const item of chart) {
+        const pct = (item.value / max * 100).toFixed(0);
+        html += `<div style="display:flex;align-items:center;margin:8px 0">
+          <div style="width:100px;font-size:13px">${item.label}</div>
+          <div style="flex:1;background:#21262d;border-radius:4px;height:24px;overflow:hidden">
+            <div style="width:${pct}%;height:100%;background:linear-gradient(90deg,#58a6ff,#3fb950);border-radius:4px;display:flex;align-items:center;padding-left:8px">
+              <span style="font-size:11px;color:#fff;font-weight:bold">${item.value}</span>
+            </div>
+          </div>
+        </div>`;
+      }
+      html += `</div>`;
+    }
+    // Table
+    if (table && table.length > 0) {
+      html += `<div class="card"><h2>${data.tableTitle || 'Data'}</h2><table>`;
+      html += `<tr>${table[0].map(h => `<th>${h}</th>`).join('')}</tr>`;
+      for (let i = 1; i < table.length; i++) {
+        html += `<tr>${table[i].map(c => `<td>${c}</td>`).join('')}</tr>`;
+      }
+      html += `</table></div>`;
+    }
+    html += `<div style="text-align:center;margin-top:16px;font-size:11px;color:#484f58">Squidclaw AI 🦑 · ${new Date().toLocaleString()}</div>`;
+    return this.renderHtml(html, { name: 'dashboard' });
+  }
+  async renderChart(data) {
+    const { title, type, items } = data;
+    const max = Math.max(...items.map(i => i.value));
+    const colors = ['#58a6ff', '#3fb950', '#d29922', '#f85149', '#bc8cff', '#f778ba', '#a5d6ff', '#7ee787'];
+    let html = `<h1>${title || 'Chart'}</h1><div class="card" style="padding:24px">`;
+    if (type === 'pie' || type === 'doughnut') {
+      const total = items.reduce((s, i) => s + i.value, 0);
+      let rotation = 0;
+      const gradientParts = [];
+      items.forEach((item, idx) => {
+        const pct = (item.value / total * 100);
+        gradientParts.push(`${colors[idx % colors.length]} ${rotation}deg ${rotation + pct * 3.6}deg`);
+        rotation += pct * 3.6;
+      });
+      const hole = type === 'doughnut' ? 'radial-gradient(circle, #0d1117 40%, transparent 40%),' : '';
+      html += `<div style="display:flex;align-items:center;gap:32px">
+        <div style="width:200px;height:200px;border-radius:50%;background:${hole}conic-gradient(${gradientParts.join(',')})"></div>
+        <div>`;
+      items.forEach((item, idx) => {
+        html += `<div style="display:flex;align-items:center;gap:8px;margin:6px 0">
+          <div style="width:12px;height:12px;border-radius:2px;background:${colors[idx % colors.length]}"></div>
+          <span style="font-size:13px">${item.label}: <strong>${item.value}</strong> (${(item.value / total * 100).toFixed(0)}%)</span>
+        </div>`;
+      });
+      html += `</div></div>`;
+    } else {
+      // Bar chart
+      for (const item of items) {
+        const pct = (item.value / max * 100).toFixed(0);
+        const color = item.color || colors[items.indexOf(item) % colors.length];
+        html += `<div style="display:flex;align-items:center;margin:10px 0">
+          <div style="width:120px;font-size:13px;color:#8b949e">${item.label}</div>
+          <div style="flex:1;background:#21262d;border-radius:6px;height:28px;overflow:hidden">
+            <div style="width:${pct}%;height:100%;background:${color};border-radius:6px;display:flex;align-items:center;padding-left:10px">
+              <span style="font-size:12px;color:#fff;font-weight:600">${item.value}</span>
+            </div>
+          </div>
+        </div>`;
+      }
+    }
+    html += `</div>`;
+    return this.renderHtml(html, { name: 'chart' });
+  }
+  async renderReport(data) {
+    const { title, sections } = data;
+    let html = `<h1>${title || 'Report'}</h1>`;
+    for (const section of (sections || [])) {
+      html += `<div class="card"><h2>${section.title || ''}</h2>`;
+      if (section.text) html += `<p style="line-height:1.7;color:#8b949e">${section.text}</p>`;
+      if (section.bullets) {
+        html += `<ul style="list-style:none;padding:0">`;
+        section.bullets.forEach(b => {
+          html += `<li style="padding:4px 0;color:#c9d1d9">● ${b}</li>`;
+        });
+        html += `</ul>`;
+      }
+      if (section.stats) {
+        html += `<div class="grid grid-${Math.min(section.stats.length, 3)}" style="margin-top:12px">`;
+        section.stats.forEach(s => {
+          html += `<div class="stat"><div class="stat-value" style="font-size:28px">${s.value}</div><div class="stat-label">${s.label}</div></div>`;
+        });
+        html += `</div>`;
+      }
+      html += `</div>`;
+    }
+    return this.renderHtml(html, { name: 'report' });
+  }
+}

package/lib/middleware/commands.js CHANGED Viewed

@@ -145,6 +145,53 @@ export async function commandsMiddleware(ctx, next) {
     return;
   }
+  if (cmd === '/canvas') {
+    if (!ctx.engine.canvas) { await ctx.reply('❌ Canvas not available'); return; }
+    const args = msg.slice(8).trim();
+    if (!args || args === 'help') {
+      await ctx.reply('🎨 *Canvas*\n\nRender visual content as images.\n\n/canvas demo — see a sample dashboard\n\nOr ask me naturally: "Show me a dashboard of our stats" or "Make a pie chart of market share"');
+      return;
+    }
+    if (args === 'demo') {
+      try {
+        const result = await ctx.engine.canvas.renderDashboard({
+          title: 'Squidclaw Dashboard',
+          stats: [
+            { icon: '🦑', value: 'v2.8', label: 'Version', color: '#58a6ff' },
+            { icon: '⚡', value: '40+', label: 'Skills', color: '#3fb950' },
+            { icon: '🔌', value: '3', label: 'Plugins', color: '#d29922' },
+            { icon: '💬', value: '15', label: 'Middleware', color: '#bc8cff' },
+          ],
+          chartTitle: 'Feature Growth by Version',
+          chart: [
+            { label: 'v1.0', value: 20 },
+            { label: 'v1.5', value: 28 },
+            { label: 'v2.0', value: 40 },
+            { label: 'v2.5', value: 48 },
+            { label: 'v2.8', value: 55 },
+          ],
+          tableTitle: 'System Status',
+          table: [
+            ['Component', 'Status', 'Uptime'],
+            ['Telegram', '🟢 Connected', '99.9%'],
+            ['WhatsApp', '🔴 Off', '—'],
+            ['Plugins', '🟢 3 Active', '100%'],
+            ['Sandbox', '🟢 Ready', '100%'],
+            ['Nodes', '🟢 Listening', '100%'],
+          ],
+        });
+        // Send as image
+        if (ctx.platform === 'telegram' && ctx.engine.telegramManager) {
+          await ctx.engine.telegramManager.sendPhoto(ctx.agentId, ctx.contactId, { base64: result.buffer.toString('base64') }, '🎨 Squidclaw Dashboard Demo', ctx.metadata);
+        }
+      } catch (err) { await ctx.reply('❌ ' + err.message); }
+      return;
+    }
+  }
   if (cmd === '/nodes' || cmd === '/devices') {
     if (!ctx.engine.nodeManager) { await ctx.reply('❌ Nodes not available'); return; }
     const args = msg.split(/\s+/).slice(1);

package/lib/tools/dashboard-pro.js ADDED Viewed

@@ -0,0 +1,340 @@
+/**
+ * 🦑 Dashboard PRO — Professional visual dashboards
+ * Renders beautiful dashboards as images via Puppeteer
+ *
+ * Features:
+ * - Auto-layout from markdown/data
+ * - Multiple chart types (CSS-based, no Chart.js needed)
+ * - Stats cards with gradients
+ * - Tables with alternating rows
+ * - Progress bars
+ * - KPI indicators (up/down arrows)
+ * - Dark/light themes
+ * - Responsive grid
+ */
+import { mkdirSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { logger } from '../core/logger.js';
+const OUTPUT_DIR = '/tmp/squidclaw-dashboard';
+const DASH_THEMES = {
+  dark: {
+    bg: '#0d1117', card: '#161b22', border: '#30363d', text: '#c9d1d9', subtle: '#8b949e',
+    accent: '#58a6ff', accent2: '#3fb950', warning: '#d29922', danger: '#f85149',
+    gradient: 'linear-gradient(135deg, #58a6ff 0%, #3fb950 100%)',
+  },
+  light: {
+    bg: '#f6f8fa', card: '#ffffff', border: '#d0d7de', text: '#24292f', subtle: '#656d76',
+    accent: '#0969da', accent2: '#1a7f37', warning: '#9a6700', danger: '#cf222e',
+    gradient: 'linear-gradient(135deg, #0969da 0%, #1a7f37 100%)',
+  },
+  saudi: {
+    bg: '#fafdf7', card: '#ffffff', border: '#bbf7d0', text: '#14532d', subtle: '#6b7280',
+    accent: '#006c35', accent2: '#c8a951', warning: '#b8860b', danger: '#dc2626',
+    gradient: 'linear-gradient(135deg, #006c35 0%, #c8a951 100%)',
+  },
+  ocean: {
+    bg: '#0a192f', card: '#112240', border: '#1e3a5f', text: '#ccd6f6', subtle: '#8892b0',
+    accent: '#64ffda', accent2: '#5eead4', warning: '#fbbf24', danger: '#f87171',
+    gradient: 'linear-gradient(135deg, #64ffda 0%, #5eead4 100%)',
+  },
+  neon: {
+    bg: '#0a0a0a', card: '#1a1a1a', border: '#333', text: '#e0e0e0', subtle: '#888',
+    accent: '#00ff88', accent2: '#00ccff', warning: '#ffcc00', danger: '#ff3366',
+    gradient: 'linear-gradient(135deg, #00ff88 0%, #00ccff 100%)',
+  },
+};
+function buildDashboardHtml(data, theme = 'dark') {
+  const t = DASH_THEMES[theme] || DASH_THEMES.dark;
+  const chartColors = [t.accent, t.accent2, t.warning, t.danger, '#bc8cff', '#f778ba', '#a5d6ff', '#7ee787'];
+  let html = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: ${t.bg}; color: ${t.text}; padding: 28px; min-width: 900px; }
+.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid ${t.border}; }
+.header h1 { font-size: 26px; font-weight: 700; background: ${t.gradient}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.header .date { font-size: 12px; color: ${t.subtle}; }
+.grid { display: grid; gap: 16px; margin-bottom: 16px; }
+.grid-2 { grid-template-columns: 1fr 1fr; }
+.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
+.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
+.card { background: ${t.card}; border: 1px solid ${t.border}; border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
+.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: ${t.gradient}; }
+.card h3 { font-size: 13px; color: ${t.subtle}; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+/* Stats */
+.stat-card { text-align: center; padding: 24px 16px; }
+.stat-icon { font-size: 28px; margin-bottom: 8px; }
+.stat-value { font-size: 32px; font-weight: 800; background: ${t.gradient}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; }
+.stat-label { font-size: 12px; color: ${t.subtle}; margin-top: 6px; font-weight: 500; }
+.stat-change { font-size: 11px; margin-top: 4px; }
+.stat-change.up { color: ${t.accent2}; }
+.stat-change.down { color: ${t.danger}; }
+/* Bar chart */
+.bar-row { display: flex; align-items: center; margin: 8px 0; }
+.bar-label { width: 100px; font-size: 12px; color: ${t.subtle}; flex-shrink: 0; }
+.bar-track { flex: 1; height: 28px; background: ${t.bg}; border-radius: 6px; overflow: hidden; position: relative; }
+.bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; transition: width 0.5s ease; }
+.bar-value { font-size: 11px; color: #fff; font-weight: 700; }
+/* Donut chart (CSS) */
+.donut-container { display: flex; align-items: center; gap: 24px; }
+.donut { width: 160px; height: 160px; border-radius: 50%; position: relative; flex-shrink: 0; }
+.donut-hole { position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; border-radius: 50%; background: ${t.card}; display: flex; align-items: center; justify-content: center; flex-direction: column; }
+.donut-total { font-size: 22px; font-weight: 800; color: ${t.text}; }
+.donut-subtitle { font-size: 10px; color: ${t.subtle}; }
+.legend { display: flex; flex-direction: column; gap: 8px; }
+.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
+/* Table */
+table { width: 100%; border-collapse: collapse; }
+th { background: ${t.bg}; color: ${t.accent}; padding: 10px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid ${t.border}; }
+td { padding: 10px 12px; font-size: 12px; border-bottom: 1px solid ${t.border}; }
+tr:nth-child(even) { background: ${t.bg}40; }
+tr:hover { background: ${t.accent}10; }
+/* Progress */
+.progress-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
+.progress-label { width: 120px; font-size: 12px; }
+.progress-track { flex: 1; height: 10px; background: ${t.bg}; border-radius: 5px; overflow: hidden; }
+.progress-fill { height: 100%; border-radius: 5px; }
+.progress-pct { font-size: 12px; font-weight: 700; width: 40px; text-align: right; }
+/* Section */
+.section-title { font-size: 15px; font-weight: 700; color: ${t.text}; margin: 20px 0 12px; padding-left: 12px; border-left: 3px solid ${t.accent}; }
+/* Footer */
+.footer { text-align: center; margin-top: 20px; padding-top: 12px; border-top: 1px solid ${t.border}; font-size: 10px; color: ${t.subtle}; }
+</style></head><body>`;
+  // Header
+  html += `<div class="header"><h1>${data.title || 'Dashboard'}</h1><div class="date">${data.subtitle || new Date().toLocaleString()}</div></div>`;
+  // Render sections
+  for (const section of (data.sections || [])) {
+    if (section.heading) {
+      html += `<div class="section-title">${section.heading}</div>`;
+    }
+    // Stats
+    if (section.type === 'stats' && section.items) {
+      const cols = Math.min(section.items.length, 4);
+      html += `<div class="grid grid-${cols}">`;
+      for (const stat of section.items) {
+        const changeClass = stat.change ? (stat.change.startsWith('+') || stat.change.startsWith('↑') ? 'up' : 'down') : '';
+        html += `<div class="card stat-card">
+          <div class="stat-icon">${stat.icon || '📊'}</div>
+          <div class="stat-value">${stat.value}</div>
+          <div class="stat-label">${stat.label}</div>
+          ${stat.change ? `<div class="stat-change ${changeClass}">${stat.change}</div>` : ''}
+        </div>`;
+      }
+      html += `</div>`;
+    }
+    // Bar chart
+    if (section.type === 'bar' && section.items) {
+      const max = Math.max(...section.items.map(i => i.value));
+      html += `<div class="card"><h3>${section.title || 'Chart'}</h3>`;
+      section.items.forEach((item, idx) => {
+        const pct = (item.value / max * 100).toFixed(0);
+        const color = item.color || chartColors[idx % chartColors.length];
+        html += `<div class="bar-row">
+          <div class="bar-label">${item.label}</div>
+          <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${color}"><span class="bar-value">${item.value}</span></div></div>
+        </div>`;
+      });
+      html += `</div>`;
+    }
+    // Donut/Pie
+    if ((section.type === 'donut' || section.type === 'pie') && section.items) {
+      const total = section.items.reduce((s, i) => s + i.value, 0);
+      let rotation = 0;
+      const gradParts = [];
+      section.items.forEach((item, idx) => {
+        const pct = item.value / total * 360;
+        const color = item.color || chartColors[idx % chartColors.length];
+        gradParts.push(`${color} ${rotation}deg ${rotation + pct}deg`);
+        rotation += pct;
+      });
+      html += `<div class="card"><h3>${section.title || 'Distribution'}</h3>
+        <div class="donut-container">
+          <div class="donut" style="background:conic-gradient(${gradParts.join(',')})">
+            <div class="donut-hole"><div class="donut-total">${total}</div><div class="donut-subtitle">Total</div></div>
+          </div>
+          <div class="legend">`;
+      section.items.forEach((item, idx) => {
+        const color = item.color || chartColors[idx % chartColors.length];
+        html += `<div class="legend-item"><div class="legend-dot" style="background:${color}"></div>${item.label}: <strong>${item.value}</strong> (${(item.value / total * 100).toFixed(0)}%)</div>`;
+      });
+      html += `</div></div></div>`;
+    }
+    // Table
+    if (section.type === 'table' && section.rows) {
+      html += `<div class="card"><h3>${section.title || 'Data'}</h3><table>`;
+      if (section.headers) {
+        html += `<tr>${section.headers.map(h => `<th>${h}</th>`).join('')}</tr>`;
+      }
+      for (const row of section.rows) {
+        html += `<tr>${row.map(c => `<td>${c}</td>`).join('')}</tr>`;
+      }
+      html += `</table></div>`;
+    }
+    // Progress bars
+    if (section.type === 'progress' && section.items) {
+      html += `<div class="card"><h3>${section.title || 'Progress'}</h3>`;
+      section.items.forEach((item, idx) => {
+        const color = item.color || chartColors[idx % chartColors.length];
+        html += `<div class="progress-row">
+          <div class="progress-label">${item.label}</div>
+          <div class="progress-track"><div class="progress-fill" style="width:${item.value}%;background:${color}"></div></div>
+          <div class="progress-pct" style="color:${color}">${item.value}%</div>
+        </div>`;
+      });
+      html += `</div>`;
+    }
+    // Two cards side by side
+    if (section.type === 'grid-2' && section.left && section.right) {
+      html += `<div class="grid grid-2">`;
+      html += `<div class="card"><h3>${section.left.title || ''}</h3>${section.left.html || ''}</div>`;
+      html += `<div class="card"><h3>${section.right.title || ''}</h3>${section.right.html || ''}</div>`;
+      html += `</div>`;
+    }
+  }
+  // Footer
+  html += `<div class="footer">Squidclaw AI 🦑 · Generated ${new Date().toLocaleString()}</div>`;
+  html += `</body></html>`;
+  return html;
+}
+// Smart parser: markdown → dashboard data
+function parseMarkdownToDashboard(content, title) {
+  const sections = [];
+  const lines = content.split('\n').map(l => l.trim()).filter(Boolean);
+  let current = null;
+  for (const line of lines) {
+    if (line.startsWith('## ') || line.startsWith('# ')) {
+      if (current) sections.push(current);
+      current = { heading: line.replace(/^#+\s*/, ''), type: null, items: [], rows: [], headers: null, title: '' };
+      continue;
+    }
+    if (!current) current = { type: null, items: [], rows: [], headers: null, title: '' };
+    if (line.match(/^\[stats?\]/i)) { current.type = 'stats'; continue; }
+    if (line.match(/^\[bar\s*chart?\]/i) || line.match(/^\[chart\]/i)) { current.type = 'bar'; continue; }
+    if (line.match(/^\[donut|pie\]/i)) { current.type = 'donut'; continue; }
+    if (line.match(/^\[table\]/i)) { current.type = 'table'; continue; }
+    if (line.match(/^\[progress\]/i)) { current.type = 'progress'; continue; }
+    // Stats line: - icon value — label (change)
+    if ((current.type === 'stats' || !current.type) && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?)\s+(.+?)\s*[—–-]\s*(.+?)(?:\s*\((.+?)\))?$/);
+      if (m) {
+        current.type = 'stats';
+        current.items.push({ icon: m[1], value: m[2], label: m[3].trim(), change: m[4] || null });
+        continue;
+      }
+    }
+    // Chart/bar: - label: value
+    if ((current.type === 'bar' || current.type === 'donut') && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?):\s*(\d+)/);
+      if (m) { current.items.push({ label: m[1], value: parseInt(m[2]) }); continue; }
+    }
+    // Progress: - label: value%
+    if (current.type === 'progress' && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?):\s*(\d+)%?/);
+      if (m) { current.items.push({ label: m[1], value: parseInt(m[2]) }); continue; }
+    }
+    // Table
+    if (line.startsWith('|') && line.endsWith('|')) {
+      if (line.match(/^\|[\s-:|]+\|$/)) continue;
+      const cells = line.split('|').filter(c => c.trim()).map(c => c.trim());
+      if (!current.headers) { current.headers = cells; current.type = 'table'; }
+      else current.rows.push(cells);
+      continue;
+    }
+    // Auto-detect chart data from plain "- label: number"
+    if (line.startsWith('-') && !current.type) {
+      const m = line.match(/^-\s*(.+?):\s*(\d+)/);
+      if (m) { current.type = 'bar'; current.items.push({ label: m[1], value: parseInt(m[2]) }); continue; }
+    }
+  }
+  if (current) sections.push(current);
+  return { title, sections };
+}
+export async function renderDashboard(input) {
+  mkdirSync(OUTPUT_DIR, { recursive: true });
+  let data, theme;
+  if (typeof input === 'string') {
+    // Parse markdown
+    const parts = input.split('|');
+    const title = parts[0]?.trim() || 'Dashboard';
+    theme = parts[1]?.trim() || 'dark';
+    const content = parts.slice(2).join('|') || parts.slice(1).join('|');
+    data = parseMarkdownToDashboard(content, title);
+  } else {
+    data = input.data || input;
+    theme = input.theme || 'dark';
+  }
+  const dashHtml = buildDashboardHtml(data, theme);
+  // Try Puppeteer
+  try {
+    const puppeteer = await import('puppeteer-core');
+    const paths = ['/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium-browser', '/usr/bin/chromium', '/snap/bin/chromium'];
+    let execPath = null;
+    for (const p of paths) { if (existsSync(p)) { execPath = p; break; } }
+    if (execPath) {
+      const browser = await puppeteer.default.launch({
+        executablePath: execPath, headless: 'new',
+        args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
+      });
+      const page = await browser.newPage();
+      await page.setViewport({ width: 1000, height: 800 });
+      await page.setContent(dashHtml, { waitUntil: 'networkidle0', timeout: 10000 });
+      const height = await page.evaluate(() => document.body.scrollHeight);
+      await page.setViewport({ width: 1000, height: Math.min(height + 40, 3000) });
+      const screenshot = await page.screenshot({ type: 'png', fullPage: true });
+      await browser.close();
+      const filename = 'dashboard_' + Date.now() + '.png';
+      const filepath = join(OUTPUT_DIR, filename);
+      writeFileSync(filepath, screenshot);
+      logger.info('dashboard', `Rendered: ${filepath}`);
+      return { filepath, filename, buffer: screenshot, html: dashHtml };
+    }
+  } catch (err) {
+    logger.warn('dashboard', 'Puppeteer failed: ' + err.message);
+  }
+  // Fallback: save HTML
+  const filename = 'dashboard_' + Date.now() + '.html';
+  const filepath = join(OUTPUT_DIR, filename);
+  writeFileSync(filepath, dashHtml);
+  return { filepath, filename, html: dashHtml };
+}
+export { buildDashboardHtml, parseMarkdownToDashboard, DASH_THEMES };