npm - squidclaw - Versions diffs - 2.7.0 → 3.0.0 - Mend

squidclaw 2.7.0 → 3.0.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 (6) hide show

package/lib/engine.js +16 -0
package/lib/features/canvas.js +228 -0
package/lib/features/nodes.js +315 -0
package/lib/middleware/commands.js +95 -0
package/lib/tools/router.js +136 -0
package/package.json +2 -1

package/lib/engine.js CHANGED Viewed

@@ -228,6 +228,22 @@ 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');
+      this.nodeManager = new NodeManager(this);
+      await this.nodeManager.startServer(9501);
+      const nodeCount = this.nodeManager.list('*').length;
+      if (nodeCount > 0) console.log('  📡 Nodes: ' + nodeCount + ' registered');
+      else console.log('  📡 Nodes: ws://0.0.0.0:9501');
+    } catch (err) { logger.error('engine', 'Nodes init failed: ' + err.message); }
     // Sandbox
     try {
       const { Sandbox } = await import('./features/sandbox.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/features/nodes.js ADDED Viewed

@@ -0,0 +1,315 @@
+/**
+ * 🦑 Nodes — Paired Devices
+ * Connect phones, PCs, servers, IoT devices
+ * Real-time control via WebSocket
+ *
+ * Pairing: token-based (generate token → enter on device)
+ * Communication: WebSocket (ws://host:9501)
+ * Commands: camera, screen, location, run, notify, status
+ */
+import { logger } from '../core/logger.js';
+import crypto from 'crypto';
+import { getHome } from '../core/config.js';
+export class NodeManager {
+  constructor(engine) {
+    this.engine = engine;
+    this.nodes = new Map();      // nodeId -> { info, ws, status, lastSeen }
+    this.pendingPairs = new Map(); // token -> { agentId, createdAt, name }
+    this.wsServer = null;
+    this._initDb();
+  }
+  _initDb() {
+    this.engine.storage.db.exec(`
+      CREATE TABLE IF NOT EXISTS nodes (
+        id TEXT PRIMARY KEY,
+        agent_id TEXT NOT NULL,
+        name TEXT NOT NULL,
+        type TEXT DEFAULT 'generic',
+        platform TEXT DEFAULT 'unknown',
+        capabilities TEXT DEFAULT '[]',
+        paired_at TEXT DEFAULT (datetime('now')),
+        last_seen TEXT,
+        status TEXT DEFAULT 'offline',
+        metadata TEXT DEFAULT '{}'
+      )
+    `);
+  }
+  // ── WebSocket Server ──
+  async startServer(port = 9501) {
+    try {
+      const { WebSocketServer } = await import('ws');
+      this.wsServer = new WebSocketServer({ port, path: '/nodes' });
+      this.wsServer.on('connection', (ws, req) => {
+        let nodeId = null;
+        ws.on('message', (data) => {
+          try {
+            const msg = JSON.parse(data.toString());
+            this._handleMessage(ws, msg).then(id => {
+              if (id) nodeId = id;
+            });
+          } catch (err) {
+            ws.send(JSON.stringify({ type: 'error', message: 'Invalid message' }));
+          }
+        });
+        ws.on('close', () => {
+          if (nodeId) {
+            const node = this.nodes.get(nodeId);
+            if (node) {
+              node.status = 'offline';
+              node.ws = null;
+              this.engine.storage.db.prepare("UPDATE nodes SET status = 'offline' WHERE id = ?").run(nodeId);
+              logger.info('nodes', `Node disconnected: ${node.info?.name || nodeId}`);
+            }
+          }
+        });
+        ws.on('error', () => {});
+        // Send hello
+        ws.send(JSON.stringify({ type: 'hello', message: 'Squidclaw Node Server 🦑' }));
+      });
+      // Load existing nodes from DB
+      const dbNodes = this.engine.storage.db.prepare('SELECT * FROM nodes').all();
+      for (const n of dbNodes) {
+        this.nodes.set(n.id, {
+          info: n,
+          ws: null,
+          status: 'offline',
+          lastSeen: n.last_seen,
+          pendingCommands: new Map(),
+        });
+      }
+      logger.info('nodes', `WebSocket server on port ${port} (${dbNodes.length} registered nodes)`);
+      return true;
+    } catch (err) {
+      logger.error('nodes', `Server failed: ${err.message}`);
+      return false;
+    }
+  }
+  // ── Message Handler ──
+  async _handleMessage(ws, msg) {
+    const { type } = msg;
+    // Pairing
+    if (type === 'pair') {
+      return this._handlePair(ws, msg);
+    }
+    // Auth (reconnect with nodeId)
+    if (type === 'auth') {
+      const node = this.nodes.get(msg.nodeId);
+      if (!node) {
+        ws.send(JSON.stringify({ type: 'error', message: 'Unknown node' }));
+        return null;
+      }
+      node.ws = ws;
+      node.status = 'online';
+      node.lastSeen = new Date().toISOString();
+      this.engine.storage.db.prepare("UPDATE nodes SET status = 'online', last_seen = datetime('now') WHERE id = ?").run(msg.nodeId);
+      ws.send(JSON.stringify({ type: 'auth_ok', nodeId: msg.nodeId }));
+      logger.info('nodes', `Node reconnected: ${node.info.name}`);
+      return msg.nodeId;
+    }
+    // Command response
+    if (type === 'response') {
+      const node = this.nodes.get(msg.nodeId);
+      if (node) {
+        const pending = node.pendingCommands?.get(msg.commandId);
+        if (pending) {
+          pending.resolve(msg.data);
+          node.pendingCommands.delete(msg.commandId);
+        }
+      }
+      return msg.nodeId;
+    }
+    // Status update
+    if (type === 'status') {
+      const node = this.nodes.get(msg.nodeId);
+      if (node) {
+        node.lastSeen = new Date().toISOString();
+        if (msg.data) {
+          node.info = { ...node.info, ...msg.data };
+        }
+        this.engine.storage.db.prepare("UPDATE nodes SET last_seen = datetime('now') WHERE id = ?").run(msg.nodeId);
+      }
+      return msg.nodeId;
+    }
+    return null;
+  }
+  // ── Pairing ──
+  _handlePair(ws, msg) {
+    const token = msg.token;
+    const pending = this.pendingPairs.get(token);
+    if (!pending) {
+      ws.send(JSON.stringify({ type: 'pair_error', message: 'Invalid or expired token' }));
+      return null;
+    }
+    const nodeId = 'node_' + crypto.randomBytes(4).toString('hex');
+    // Register node
+    const info = {
+      id: nodeId,
+      agent_id: pending.agentId,
+      name: pending.name || msg.name || 'Device',
+      type: msg.deviceType || 'generic',
+      platform: msg.platform || 'unknown',
+      capabilities: JSON.stringify(msg.capabilities || []),
+    };
+    this.engine.storage.db.prepare(
+      'INSERT INTO nodes (id, agent_id, name, type, platform, capabilities, status) VALUES (?, ?, ?, ?, ?, ?, ?)'
+    ).run(info.id, info.agent_id, info.name, info.type, info.platform, info.capabilities, 'online');
+    this.nodes.set(nodeId, {
+      info,
+      ws,
+      status: 'online',
+      lastSeen: new Date().toISOString(),
+      pendingCommands: new Map(),
+    });
+    this.pendingPairs.delete(token);
+    ws.send(JSON.stringify({ type: 'paired', nodeId, name: info.name }));
+    logger.info('nodes', `New node paired: ${info.name} (${nodeId}) type=${info.type}`);
+    return nodeId;
+  }
+  // ── Generate pairing token ──
+  generatePairToken(agentId, name = 'Device') {
+    const token = crypto.randomBytes(3).toString('hex').toUpperCase(); // 6-char code
+    this.pendingPairs.set(token, {
+      agentId,
+      name,
+      createdAt: Date.now(),
+    });
+    // Expire after 5 minutes
+    setTimeout(() => this.pendingPairs.delete(token), 300000);
+    return token;
+  }
+  // ── Send command to node ──
+  async sendCommand(nodeId, command, data = {}, timeout = 30000) {
+    const node = this.nodes.get(nodeId);
+    if (!node) throw new Error('Node not found: ' + nodeId);
+    if (!node.ws || node.status !== 'online') throw new Error('Node offline: ' + (node.info?.name || nodeId));
+    const commandId = 'cmd_' + Date.now().toString(36);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        node.pendingCommands?.delete(commandId);
+        reject(new Error('Command timeout'));
+      }, timeout);
+      node.pendingCommands = node.pendingCommands || new Map();
+      node.pendingCommands.set(commandId, {
+        resolve: (data) => { clearTimeout(timer); resolve(data); },
+      });
+      node.ws.send(JSON.stringify({
+        type: 'command',
+        commandId,
+        command,
+        data,
+      }));
+    });
+  }
+  // ── High-level commands ──
+  async camera(nodeId, options = {}) {
+    return this.sendCommand(nodeId, 'camera', {
+      facing: options.facing || 'back',
+      ...options,
+    });
+  }
+  async screenshot(nodeId) {
+    return this.sendCommand(nodeId, 'screenshot');
+  }
+  async location(nodeId) {
+    return this.sendCommand(nodeId, 'location');
+  }
+  async notify(nodeId, title, body) {
+    return this.sendCommand(nodeId, 'notify', { title, body });
+  }
+  async run(nodeId, command) {
+    return this.sendCommand(nodeId, 'run', { command }, 60000);
+  }
+  async screenRecord(nodeId, durationMs = 10000) {
+    return this.sendCommand(nodeId, 'screen_record', { durationMs }, durationMs + 10000);
+  }
+  // ── List/Status ──
+  list(agentId) {
+    return this.engine.storage.db.prepare(
+      'SELECT * FROM nodes WHERE agent_id = ? ORDER BY name'
+    ).all(agentId).map(n => {
+      const live = this.nodes.get(n.id);
+      return {
+        ...n,
+        capabilities: JSON.parse(n.capabilities || '[]'),
+        status: live?.status || 'offline',
+        lastSeen: live?.lastSeen || n.last_seen,
+      };
+    });
+  }
+  getNode(nodeId) {
+    const db = this.engine.storage.db.prepare('SELECT * FROM nodes WHERE id = ?').get(nodeId);
+    if (!db) return null;
+    const live = this.nodes.get(nodeId);
+    return { ...db, status: live?.status || 'offline', capabilities: JSON.parse(db.capabilities || '[]') };
+  }
+  removeNode(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (node?.ws) {
+      node.ws.send(JSON.stringify({ type: 'unpaired' }));
+      node.ws.close();
+    }
+    this.nodes.delete(nodeId);
+    this.engine.storage.db.prepare('DELETE FROM nodes WHERE id = ?').run(nodeId);
+    logger.info('nodes', `Removed node: ${nodeId}`);
+  }
+  // ── Cleanup ──
+  stop() {
+    if (this.wsServer) {
+      this.wsServer.close();
+      logger.info('nodes', 'WebSocket server stopped');
+    }
+  }
+}

package/lib/middleware/commands.js CHANGED Viewed

@@ -145,6 +145,101 @@ 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);
+    const sub = args[0];
+    if (!sub || sub === 'list') {
+      const nodes = ctx.engine.nodeManager.list(ctx.agentId);
+      if (nodes.length === 0) {
+        await ctx.reply('📡 No paired devices\n\nUse /nodes pair <name> to add one');
+        return;
+      }
+      const lines = nodes.map(n =>
+        (n.status === 'online' ? '🟢' : '🔴') + ' *' + n.name + '* (' + n.type + ')\n   ' + n.platform + ' · ' + n.id
+      );
+      await ctx.reply('📡 *Paired Devices*\n\n' + lines.join('\n\n'));
+      return;
+    }
+    if (sub === 'pair') {
+      const name = args.slice(1).join(' ') || 'My Device';
+      const token = ctx.engine.nodeManager.generatePairToken(ctx.agentId, name);
+      await ctx.reply('📡 *Pair: ' + name + '*\n\nCode: `' + token + '`\n\nEnter this on the device.\nExpires in 5 minutes.\n\nWebSocket: ws://' + (ctx.engine.config.api?.host || '0.0.0.0') + ':9501/nodes');
+      return;
+    }
+    if (sub === 'remove') {
+      const id = args[1];
+      if (!id) { await ctx.reply('Usage: /nodes remove <id>'); return; }
+      ctx.engine.nodeManager.removeNode(id);
+      await ctx.reply('✅ Device removed');
+      return;
+    }
+    if (sub === 'notify') {
+      const id = args[1];
+      const message = args.slice(2).join(' ');
+      if (!id || !message) { await ctx.reply('Usage: /nodes notify <id> <message>'); return; }
+      try {
+        await ctx.engine.nodeManager.notify(id, 'Squidclaw', message);
+        await ctx.reply('📨 Notification sent');
+      } catch (err) { await ctx.reply('❌ ' + err.message); }
+      return;
+    }
+    await ctx.reply('📡 *Node Commands*\n\n/nodes — list devices\n/nodes pair <name> — generate pairing code\n/nodes remove <id> — unpair\n/nodes notify <id> <msg> — send notification');
+    return;
+  }
   if (cmd === '/sandbox') {
     if (!ctx.engine.sandbox) { await ctx.reply('❌ Sandbox not available'); return; }
     const args = msg.slice(9).trim();

package/lib/tools/router.js CHANGED Viewed

@@ -169,6 +169,34 @@ export class ToolRouter {
       '---TOOL:handoff:reason---',
       'Transfer the conversation to a human agent. Use when you cannot help further.');
+    tools.push('', '### Render Dashboard (sends as image!)',
+      '---TOOL:canvas_dashboard:title|stat_json|chart_json---',
+      'Render a visual dashboard and send as image. Use JSON for data.',
+      'Simple format: ---TOOL:canvas_dashboard:Title|icon:value:label,icon:value:label|label:value,label:value---',
+      '', '### Render Chart (sends as image!)',
+      '---TOOL:canvas_chart:title|type|label:value,label:value---',
+      'Render a chart (bar, pie, doughnut) as image. Separate items with commas.',
+      '', '### Render Custom HTML (sends as image!)',
+      '---TOOL:canvas_html:html content---',
+      'Render any HTML as an image. Built-in dark theme CSS with cards, grids, stats, tables.');
+    tools.push('', '### Pair Device',
+      '---TOOL:node_pair:device name---',
+      'Generate a pairing code for a new device (phone, PC, server).',
+      '', '### List Devices',
+      '---TOOL:node_list:all---',
+      'Show all paired devices and their status.',
+      '', '### Send to Device',
+      '---TOOL:node_cmd:node_id|command|data---',
+      'Send a command to a paired device. Commands: camera, screenshot, location, notify, run.',
+      'Example: ---TOOL:node_cmd:node_abc123|notify|Meeting in 5 minutes!---',
+      '', '### Device Camera',
+      '---TOOL:node_camera:node_id---',
+      'Take a photo from a paired device camera.',
+      '', '### Device Location',
+      '---TOOL:node_location:node_id---',
+      'Get GPS location of a paired device.');
     tools.push('', '### Run JavaScript (Sandboxed)',
       '---TOOL:js:console.log(2 + 2)---',
       'Execute JavaScript in a secure VM sandbox. No network, no filesystem, no require. Safe for math, logic, data processing.',
@@ -680,6 +708,114 @@ export class ToolRouter {
           }
           break;
         }
+        case 'canvas_dashboard': {
+          if (!this._engine?.canvas) { toolResult = 'Canvas not available'; break; }
+          try {
+            const parts = toolArg.split('|');
+            const title = parts[0]?.trim() || 'Dashboard';
+            // Parse stats: icon:value:label,icon:value:label
+            const stats = [];
+            if (parts[1]) {
+              parts[1].split(',').forEach(s => {
+                const [icon, value, label] = s.trim().split(':');
+                if (value) stats.push({ icon: icon || '', value: value || '', label: label || '' });
+              });
+            }
+            // Parse chart: label:value,label:value
+            const chart = [];
+            if (parts[2]) {
+              parts[2].split(',').forEach(c => {
+                const [label, value] = c.trim().split(':');
+                if (value) chart.push({ label: label || '', value: parseInt(value) || 0 });
+              });
+            }
+            const result = await this._engine.canvas.renderDashboard({ title, stats, chart });
+            return { toolUsed: true, toolName: 'canvas', toolResult: 'Dashboard rendered', imageBase64: result.buffer.toString('base64'), mimeType: 'image/png', cleanResponse };
+          } catch (err) { toolResult = 'Canvas failed: ' + err.message; }
+          break;
+        }
+        case 'canvas_chart': {
+          if (!this._engine?.canvas) { toolResult = 'Canvas not available'; break; }
+          try {
+            const parts = toolArg.split('|');
+            const title = parts[0]?.trim() || 'Chart';
+            const type = parts[1]?.trim() || 'bar';
+            const items = [];
+            if (parts[2]) {
+              parts[2].split(',').forEach(c => {
+                const [label, value] = c.trim().split(':');
+                if (value) items.push({ label: label || '', value: parseInt(value) || 0 });
+              });
+            }
+            const result = await this._engine.canvas.renderChart({ title, type, items });
+            return { toolUsed: true, toolName: 'canvas', toolResult: 'Chart rendered', imageBase64: result.buffer.toString('base64'), mimeType: 'image/png', cleanResponse };
+          } catch (err) { toolResult = 'Canvas failed: ' + err.message; }
+          break;
+        }
+        case 'canvas_html':
+        case 'canvas_render':
+        case 'canvas': {
+          if (!this._engine?.canvas) { toolResult = 'Canvas not available'; break; }
+          try {
+            const result = await this._engine.canvas.renderHtml(toolArg);
+            return { toolUsed: true, toolName: 'canvas', toolResult: 'Rendered', imageBase64: result.buffer.toString('base64'), mimeType: 'image/png', cleanResponse };
+          } catch (err) { toolResult = 'Canvas failed: ' + err.message; }
+          break;
+        }
+        case 'node_pair': {
+          if (!this._engine?.nodeManager) { toolResult = 'Nodes not available'; break; }
+          const token = this._engine.nodeManager.generatePairToken(agentId, toolArg || 'Device');
+          toolResult = '📡 Pairing code: *' + token + '*\n\nEnter this code on the device to pair.\nExpires in 5 minutes.\n\nConnect to: ws://<server>:9501/nodes';
+          break;
+        }
+        case 'node_list': {
+          if (!this._engine?.nodeManager) { toolResult = 'Nodes not available'; break; }
+          const nodes = this._engine.nodeManager.list(agentId);
+          if (nodes.length === 0) { toolResult = 'No paired devices. Use node_pair to add one.'; break; }
+          toolResult = nodes.map(n =>
+            (n.status === 'online' ? '🟢' : '🔴') + ' ' + n.name + ' (' + n.type + ')\n   ID: ' + n.id + '\n   Platform: ' + n.platform + '\n   Last seen: ' + (n.lastSeen || 'never')
+          ).join('\n\n');
+          break;
+        }
+        case 'node_cmd': {
+          if (!this._engine?.nodeManager) { toolResult = 'Nodes not available'; break; }
+          try {
+            const parts = toolArg.split('|').map(p => p.trim());
+            const [nodeId, command, ...dataParts] = parts;
+            const data = dataParts.join('|');
+            if (command === 'notify') {
+              await this._engine.nodeManager.notify(nodeId, 'Squidclaw', data);
+              toolResult = '📨 Notification sent to device';
+            } else if (command === 'run') {
+              const result = await this._engine.nodeManager.run(nodeId, data);
+              toolResult = 'Output: ' + JSON.stringify(result);
+            } else {
+              const result = await this._engine.nodeManager.sendCommand(nodeId, command, { data });
+              toolResult = JSON.stringify(result);
+            }
+          } catch (err) { toolResult = 'Failed: ' + err.message; }
+          break;
+        }
+        case 'node_camera': {
+          if (!this._engine?.nodeManager) { toolResult = 'Nodes not available'; break; }
+          try {
+            const result = await this._engine.nodeManager.camera(toolArg.trim());
+            toolResult = 'Camera captured: ' + JSON.stringify(result);
+          } catch (err) { toolResult = 'Failed: ' + err.message; }
+          break;
+        }
+        case 'node_location': {
+          if (!this._engine?.nodeManager) { toolResult = 'Nodes not available'; break; }
+          try {
+            const result = await this._engine.nodeManager.location(toolArg.trim());
+            toolResult = 'Location: ' + JSON.stringify(result);
+          } catch (err) { toolResult = 'Failed: ' + err.message; }
+          break;
+        }
         case 'sandbox_info': {
           if (this._engine?.sandbox) {
             const stats = this._engine.sandbox.getStats();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "squidclaw",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "description": "🦑 AI agent platform — human-like agents for WhatsApp, Telegram & more",
   "main": "lib/engine.js",
   "bin": {
@@ -56,6 +56,7 @@
     "qrcode-terminal": "^0.12.0",
     "sharp": "^0.34.5",
     "undici": "^7.22.0",
+    "ws": "^8.19.0",
     "yaml": "^2.8.2",
     "zod": "^4.3.6"
   }