squidclaw 3.1.0 → 3.2.0

package/lib/ai/gateway.js

@@ -4,6 +4,7 @@
  */
 
 import { logger } from '../core/logger.js';
+import { getRouteForTask } from './smart-router.js';
 import { MODEL_MAP, MODEL_PRICING } from '../core/config.js';
 
 export class AIGateway {
@@ -27,7 +28,13 @@ export class AIGateway {
    * Send a chat completion request with auto-fallback
    */
   async chat(messages, options = {}) {
-    const model = options.model || this.config.ai?.defaultModel;
+    // Smart routing: use best model for the task
+    let routedModel = options.model;
+    if (!routedModel && options.taskHint) {
+      const route = getRouteForTask(options.taskHint, options.toolName, this.config);
+      if (route) routedModel = route.model;
+    }
+    const model = routedModel || this.config.ai?.defaultModel;
     const fallbackChain = options.fallbackChain || this.config.ai?.fallbackChain || [];
     const modelsToTry = [model, ...fallbackChain].filter(Boolean);
 

package/lib/ai/smart-router.js

@@ -0,0 +1,77 @@
+/**
+ * 🦑 Smart AI Router
+ * Routes to the best model based on task type
+ * 
+ * - Creative content (PPT, reports, stories) → Gemini (free + creative)
+ * - Conversation, reasoning → Claude (smart)
+ * - Quick tasks, translations → Flash models (fast + cheap)
+ * - Code, analysis → Claude or GPT-4o
+ */
+
+import { logger } from '../core/logger.js';
+
+const TASK_ROUTES = {
+  // Creative content → Gemini
+  presentation: { provider: 'google', model: 'gemini-2.5-flash', reason: 'creative content' },
+  pptx: { provider: 'google', model: 'gemini-2.5-flash', reason: 'presentation' },
+  dashboard: { provider: 'google', model: 'gemini-2.5-flash', reason: 'visual content' },
+  report: { provider: 'google', model: 'gemini-2.5-flash', reason: 'report generation' },
+  story: { provider: 'google', model: 'gemini-2.5-flash', reason: 'creative writing' },
+  article: { provider: 'google', model: 'gemini-2.5-flash', reason: 'article writing' },
+  email_draft: { provider: 'google', model: 'gemini-2.5-flash', reason: 'email draft' },
+  excel: { provider: 'google', model: 'gemini-2.5-flash', reason: 'data generation' },
+  pdf: { provider: 'google', model: 'gemini-2.5-flash', reason: 'document' },
+  
+  // Quick tasks → Flash (fast)
+  translate: { provider: 'google', model: 'gemini-2.0-flash', reason: 'translation' },
+  summarize: { provider: 'google', model: 'gemini-2.0-flash', reason: 'summarization' },
+  weather: { provider: 'google', model: 'gemini-2.0-flash', reason: 'simple lookup' },
+  
+  // Default stays on primary model
+};
+
+// Detect task type from message + tool context
+function detectTask(message, toolName) {
+  const lower = (message || '').toLowerCase();
+  
+  // Explicit tool-based routing
+  if (toolName) {
+    if (['pptx', 'pptx_slides', 'pptx_pro', 'presentation', 'powerpoint'].includes(toolName)) return 'presentation';
+    if (['dashboard', 'canvas_dashboard'].includes(toolName)) return 'dashboard';
+    if (['excel', 'xlsx'].includes(toolName)) return 'excel';
+    if (['pdf'].includes(toolName)) return 'pdf';
+    if (['translate'].includes(toolName)) return 'translate';
+  }
+  
+  // Message-based detection
+  if (lower.match(/\b(presentation|ppt|powerpoint|slides|عرض تقديمي|شرائح)\b/)) return 'presentation';
+  if (lower.match(/\b(dashboard|لوحة)\b/)) return 'dashboard';
+  if (lower.match(/\b(report|تقرير)\b/)) return 'report';
+  if (lower.match(/\b(story|قصة|حكاية)\b/)) return 'story';
+  if (lower.match(/\b(article|مقال)\b/)) return 'article';
+  if (lower.match(/\b(translate|ترجم)\b/)) return 'translate';
+  if (lower.match(/\b(summarize|summary|لخص|ملخص)\b/)) return 'summarize';
+  if (lower.match(/\b(excel|spreadsheet|جدول)\b/)) return 'excel';
+  
+  return null; // Use default model
+}
+
+export function getRouteForTask(message, toolName, config) {
+  const task = detectTask(message, toolName);
+  if (!task) return null;
+  
+  const route = TASK_ROUTES[task];
+  if (!route) return null;
+  
+  // Check if provider is available
+  const providers = config?.ai?.providers || {};
+  if (!providers[route.provider]?.key) {
+    logger.debug('smart-router', `${route.provider} not available for ${task}, using default`);
+    return null;
+  }
+  
+  logger.info('smart-router', `Routing "${task}" → ${route.provider}/${route.model} (${route.reason})`);
+  return { provider: route.provider, model: route.model, task, reason: route.reason };
+}
+
+export { detectTask, TASK_ROUTES };

package/lib/tools/router.js

@@ -382,10 +382,12 @@ export class ToolRouter {
         case 'pptx_slides':
         case 'pptx_pro':
         case 'powerpoint':
+        case 'slides':
         case 'presentation': {
           try {
-            const { generatePresentation } = await import('./pptx-pro.js');
-            const parts = toolArg.split('|');
+            const { generateSlides } = await import('./slides-engine.js');
+            const unescaped = toolArg.replace(/\\n/g, '\n').replace(/\\t/g, '\t');
+            const parts = unescaped.split('|');
             let title, theme, content;
             if (parts.length >= 3) {
               title = parts[0].trim();
@@ -396,22 +398,23 @@ export class ToolRouter {
               content = parts[1];
               theme = 'executive';
             } else {
-              const firstH = toolArg.match(/^#\s+(.+)/m);
+              const firstH = unescaped.match(/^#\s+(.+)/m);
               title = firstH ? firstH[1] : 'Presentation';
-              content = toolArg;
+              content = unescaped;
               theme = 'executive';
             }
-            const result = await generatePresentation({ title, theme, content });
+            const result = await generateSlides({ title, theme, content });
             return {
               toolUsed: true,
               toolName: 'pptx',
-              toolResult: 'PowerPoint created: ' + result.filename + ' (' + result.slides + ' slides, types: ' + result.types.join(', ') + ')',
+              toolResult: 'Presentation created: ' + result.filename + ' (' + result.slides + ' slides, ' + result.images + ' photos, types: ' + result.types.join(', ') + ')',
               filePath: result.filepath,
               fileName: result.filename,
               cleanResponse
             };
           } catch (err) {
-            toolResult = 'PowerPoint failed: ' + err.message;
+            toolResult = 'Slides failed: ' + err.message;
+            logger.error('tools', 'Slides error: ' + err.stack);
           }
           break;
         }
@@ -709,7 +712,7 @@ export class ToolRouter {
         case 'dashboard': {
           try {
             const { renderDashboard } = await import('./dashboard-pro.js');
-            const result = await renderDashboard(toolArg);
+            const result = await renderDashboard(toolArg.replace(/\\n/g, '\n').replace(/\\t/g, '\t'));
             if (result.buffer) {
               return { toolUsed: true, toolName: 'dashboard', toolResult: 'Dashboard rendered', imageBase64: result.buffer.toString('base64'), mimeType: 'image/png', cleanResponse };
             } else {

package/lib/tools/slides-engine.js

@@ -0,0 +1,660 @@
+/**
+ * 🦑 Slides Engine v2 — Genspark-style
+ * 
+ * Flow:
+ * 1. AI generates structured slide data (JSON or markdown)
+ * 2. Engine fetches real images from Unsplash/Pexels
+ * 3. Renders as HTML slides (Reveal.js-style)
+ * 4. Screenshots each slide via Puppeteer
+ * 5. Assembles into PPTX (image-per-slide) or PDF
+ * 6. Optionally serves as web presentation via API
+ * 
+ * Result: Professional slides with real photos, proper typography, smooth gradients
+ */
+
+import PptxGenJS from 'pptxgenjs';
+import { mkdirSync, writeFileSync, readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { logger } from '../core/logger.js';
+
+const OUTPUT_DIR = '/tmp/squidclaw-slides';
+const CACHE_DIR = '/tmp/squidclaw-slides/cache';
+
+// ── Image fetcher (Unsplash free API) ──
+
+async function fetchImage(query, width = 1200, height = 800) {
+  try {
+    // Unsplash Source (no API key needed, direct redirect)
+    const url = `https://source.unsplash.com/${width}x${height}/?${encodeURIComponent(query)}`;
+    const resp = await fetch(url, { redirect: 'follow', signal: AbortSignal.timeout(8000) });
+    if (resp.ok) {
+      const buffer = Buffer.from(await resp.arrayBuffer());
+      if (buffer.length > 5000) { // Valid image
+        const cached = join(CACHE_DIR, query.replace(/[^a-z0-9]/gi, '_').slice(0, 30) + '.jpg');
+        writeFileSync(cached, buffer);
+        return { buffer, url: resp.url, cached };
+      }
+    }
+  } catch {}
+  
+  // Fallback: Picsum (always works, random quality images)
+  try {
+    const url = `https://picsum.photos/${width}/${height}`;
+    const resp = await fetch(url, { redirect: 'follow', signal: AbortSignal.timeout(5000) });
+    if (resp.ok) {
+      const buffer = Buffer.from(await resp.arrayBuffer());
+      return { buffer, url: resp.url };
+    }
+  } catch {}
+  
+  return null;
+}
+
+// ── Slide Templates (HTML) ──
+
+const CSS_BASE = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+.slide {
+  width: 1280px; height: 720px;
+  position: relative; overflow: hidden;
+  font-family: 'Inter', -apple-system, sans-serif;
+}
+
+/* Dark gradient overlay for text readability on images */
+.overlay {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 1;
+}
+.overlay-dark { background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%); }
+.overlay-left { background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 55%, transparent 100%); }
+.overlay-bottom { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); }
+.overlay-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+.overlay-saudi { background: linear-gradient(135deg, rgba(0,108,53,0.92) 0%, rgba(0,77,37,0.85) 100%); }
+.overlay-ocean { background: linear-gradient(135deg, rgba(10,25,47,0.95) 0%, rgba(17,34,64,0.9) 100%); }
+.overlay-fire { background: linear-gradient(135deg, rgba(139,0,0,0.9) 0%, rgba(26,0,0,0.85) 100%); }
+
+.bg-image {
+  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+  object-fit: cover; z-index: 0;
+}
+
+.content { position: relative; z-index: 2; padding: 60px; height: 100%; display: flex; flex-direction: column; }
+.content-split { display: flex; height: 100%; }
+.content-left { width: 55%; padding: 60px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
+.content-right { width: 45%; position: relative; }
+.content-right img { width: 100%; height: 100%; object-fit: cover; }
+
+/* Typography */
+.title-xl { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -1px; }
+.title-lg { font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 700; color: #fff; line-height: 1.15; }
+.title-md { font-size: 28px; font-weight: 700; color: #fff; }
+.subtitle { font-size: 18px; color: rgba(255,255,255,0.7); margin-top: 16px; line-height: 1.6; font-weight: 300; }
+.label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; }
+.accent-line { width: 60px; height: 4px; background: linear-gradient(90deg, #58a6ff, #3fb950); border-radius: 2px; margin: 20px 0; }
+.accent-line-gold { background: linear-gradient(90deg, #c8a951, #daa520); }
+
+/* Stats Grid */
+.stats-grid { display: grid; gap: 20px; margin-top: 30px; }
+.stats-grid-2 { grid-template-columns: 1fr 1fr; }
+.stats-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
+.stats-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
+.stat-card {
+  background: rgba(255,255,255,0.08); backdrop-filter: blur(20px);
+  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
+  padding: 24px; text-align: center;
+}
+.stat-icon { font-size: 28px; margin-bottom: 8px; }
+.stat-value { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #58a6ff, #3fb950); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 500; }
+.stat-change { font-size: 11px; margin-top: 4px; }
+.stat-up { color: #3fb950; }
+.stat-down { color: #f85149; }
+
+/* Bullets */
+.bullets { list-style: none; margin-top: 24px; }
+.bullets li { display: flex; align-items: flex-start; gap: 14px; margin: 14px 0; font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.5; }
+.bullet-dot { width: 8px; height: 8px; border-radius: 50%; background: #58a6ff; margin-top: 7px; flex-shrink: 0; }
+.bullet-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(88,166,255,0.2); color: #58a6ff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
+
+/* Table */
+.slide-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; border-radius: 12px; overflow: hidden; }
+.slide-table th { background: rgba(88,166,255,0.15); color: #58a6ff; padding: 14px 18px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
+.slide-table td { padding: 12px 18px; font-size: 14px; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.06); }
+.slide-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
+
+/* Bar chart */
+.bar-chart { margin-top: 20px; }
+.bar-row { display: flex; align-items: center; margin: 10px 0; }
+.bar-label { width: 110px; font-size: 13px; color: rgba(255,255,255,0.7); flex-shrink: 0; }
+.bar-track { flex: 1; height: 32px; background: rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; }
+.bar-fill { height: 100%; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; }
+.bar-value { font-size: 12px; color: #fff; font-weight: 700; }
+
+/* Donut */
+.donut-wrap { display: flex; align-items: center; gap: 32px; margin-top: 20px; }
+.donut-circle { width: 180px; height: 180px; border-radius: 50%; position: relative; flex-shrink: 0; }
+.donut-hole { position: absolute; top: 18%; left: 18%; width: 64%; height: 64%; border-radius: 50%; background: rgba(13,17,23,0.95); display: flex; align-items: center; justify-content: center; flex-direction: column; }
+.donut-total { font-size: 24px; font-weight: 800; color: #fff; }
+.donut-sub { font-size: 10px; color: rgba(255,255,255,0.5); }
+.legend { display: flex; flex-direction: column; gap: 10px; }
+.legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.8); }
+.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
+
+/* Timeline */
+.timeline { margin-top: 30px; position: relative; padding-left: 30px; }
+.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #58a6ff, #3fb950); }
+.timeline-item { position: relative; margin: 24px 0; }
+.timeline-dot { position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #58a6ff; border: 3px solid #0d1117; }
+.timeline-year { font-size: 13px; font-weight: 700; color: #58a6ff; }
+.timeline-title { font-size: 16px; font-weight: 600; color: #fff; margin-top: 2px; }
+.timeline-desc { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; line-height: 1.4; }
+
+/* Quote */
+.quote-mark { font-family: 'Playfair Display', serif; font-size: 120px; color: rgba(88,166,255,0.2); line-height: 0.8; position: absolute; top: 40px; left: 50px; }
+.quote-text { font-family: 'Playfair Display', serif; font-size: 28px; color: #fff; line-height: 1.5; font-style: italic; max-width: 800px; }
+.quote-author { font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 24px; }
+
+/* Progress */
+.progress-list { margin-top: 20px; }
+.progress-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
+.progress-label { width: 140px; font-size: 13px; color: rgba(255,255,255,0.7); }
+.progress-track { flex: 1; height: 12px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; }
+.progress-fill { height: 100%; border-radius: 6px; }
+.progress-pct { font-size: 13px; font-weight: 700; width: 45px; text-align: right; }
+
+/* Footer */
+.slide-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 60px; display: flex; justify-content: space-between; align-items: center; z-index: 3; background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent); }
+.slide-footer span { font-size: 10px; color: rgba(255,255,255,0.35); }
+
+/* Comparison */
+.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
+.compare-card { background: rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; border: 1px solid rgba(255,255,255,0.08); }
+.compare-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
+`;
+
+// ── Chart Colors ──
+const COLORS = ['#58a6ff', '#3fb950', '#d29922', '#f85149', '#bc8cff', '#f778ba', '#a5d6ff', '#7ee787'];
+const GRADIENTS = [
+  'linear-gradient(135deg, #58a6ff, #3fb950)',
+  'linear-gradient(135deg, #f85149, #d29922)',
+  'linear-gradient(135deg, #bc8cff, #f778ba)',
+  'linear-gradient(135deg, #3fb950, #58a6ff)',
+  'linear-gradient(135deg, #d29922, #f85149)',
+  'linear-gradient(135deg, #a5d6ff, #58a6ff)',
+];
+
+// ── Overlay picker by theme ──
+function getOverlay(theme) {
+  const map = { saudi: 'overlay-saudi', ocean: 'overlay-ocean', fire: 'overlay-fire', gradient: 'overlay-gradient' };
+  return map[theme] || 'overlay-dark';
+}
+function getAccentLine(theme) {
+  return theme === 'saudi' ? 'accent-line accent-line-gold' : 'accent-line';
+}
+
+// ── Parse markdown to structured slide data ──
+
+function parseToSlides(content) {
+  const slides = [];
+  const lines = content.split('\n');
+  let current = null;
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line) continue;
+
+    if (line.startsWith('## ') || line.startsWith('# ')) {
+      if (current) slides.push(current);
+      current = { 
+        title: line.replace(/^#+\s*/, '').replace(/\*\*/g, ''),
+        type: 'content', imageQuery: '', stats: [], table: [], chart: [],
+        bullets: [], timeline: [], quote: null, quoteAuthor: null,
+        progress: [], comparison: [], body: [],
+      };
+      // Auto image query from title
+      current.imageQuery = current.title.toLowerCase().replace(/[^a-z\s]/g, '').trim();
+      continue;
+    }
+
+    if (!current) {
+      current = { title: '', type: 'content', imageQuery: 'abstract technology', stats: [], table: [], chart: [], bullets: [], timeline: [], quote: null, quoteAuthor: null, progress: [], comparison: [], body: [] };
+    }
+
+    // Section markers
+    if (line.match(/^\[stats?\]/i)) { current.type = 'stats'; continue; }
+    if (line.match(/^\[chart\]/i) || line.match(/^\[bar\]/i)) { current.type = 'chart'; continue; }
+    if (line.match(/^\[donut\]/i) || line.match(/^\[pie\]/i)) { current.type = 'donut'; continue; }
+    if (line.match(/^\[table\]/i)) { current.type = 'table'; continue; }
+    if (line.match(/^\[timeline\]/i)) { current.type = 'timeline'; continue; }
+    if (line.match(/^\[progress\]/i)) { current.type = 'progress'; continue; }
+    if (line.match(/^\[compare\]/i) || line.match(/^\[comparison\]/i)) { current.type = 'comparison'; continue; }
+    if (line.match(/^\[quote\]/i)) { current.type = 'quote'; continue; }
+    if (line.match(/^\[image:\s*(.+?)\]/i)) { current.imageQuery = line.match(/\[image:\s*(.+?)\]/i)[1]; continue; }
+
+    // Stats: - icon value — label (change)
+    if (current.type === 'stats' && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?)\s+(.+?)\s*[—–-]\s*(.+?)(?:\s*\((.+?)\))?$/);
+      if (m) { current.stats.push({ icon: m[1], value: m[2], label: m[3].trim(), change: m[4] || null }); continue; }
+    }
+
+    // Table
+    if (line.startsWith('|') && line.endsWith('|')) {
+      if (line.match(/^\|[\s-:|]+\|$/)) continue;
+      current.table.push(line.split('|').filter(c => c.trim()).map(c => c.trim()));
+      if (current.type === 'content') current.type = 'table';
+      continue;
+    }
+
+    // Chart: - label: value
+    if ((current.type === 'chart' || current.type === 'donut') && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?):\s*(\d+)/);
+      if (m) { current.chart.push({ label: m[1].trim(), value: parseInt(m[2]) }); continue; }
+    }
+
+    // Progress: - label: value%
+    if (current.type === 'progress' && line.startsWith('-')) {
+      const m = line.match(/^-\s*(.+?):\s*(\d+)%?/);
+      if (m) { current.progress.push({ label: m[1].trim(), value: parseInt(m[2]) }); continue; }
+    }
+
+    // Timeline: N. Title — desc
+    if (current.type === 'timeline' && line.match(/^\d+\./)) {
+      const m = line.match(/^(\d+)\.\s*\*?\*?(.+?)\*?\*?\s*[—–-]\s*(.+)/);
+      if (m) { current.timeline.push({ year: m[1], title: m[2].trim(), desc: m[3].trim() }); continue; }
+    }
+
+    // Quote
+    if (line.startsWith('>') || current.type === 'quote') {
+      const q = line.replace(/^>\s*/, '').replace(/\*\*/g, '');
+      if (q.startsWith('—') || q.startsWith('- ')) {
+        current.quoteAuthor = q.replace(/^[—-]\s*/, '');
+      } else {
+        current.quote = (current.quote || '') + q + ' ';
+      }
+      current.type = 'quote';
+      continue;
+    }
+
+    // Bullets
+    if (line.startsWith('-') || line.startsWith('•') || line.startsWith('*')) {
+      const b = line.replace(/^[-•*]\s*/, '').replace(/\*\*/g, '');
+      current.bullets.push(b);
+      continue;
+    }
+
+    current.body.push(line.replace(/\*\*/g, ''));
+  }
+  if (current) slides.push(current);
+
+  // Auto-type detection
+  for (const s of slides) {
+    if (s.stats.length >= 2 && s.type === 'content') s.type = 'stats';
+    if (s.table.length >= 2 && s.type === 'content') s.type = 'table';
+    if (s.chart.length >= 2 && s.type === 'content') s.type = 'chart';
+    if (s.timeline.length >= 2 && s.type === 'content') s.type = 'timeline';
+    if (s.progress.length >= 2 && s.type === 'content') s.type = 'progress';
+    if (s.quote && s.type === 'content') s.type = 'quote';
+    if (s.bullets.length >= 2 && s.type === 'content') s.type = 'bullets';
+  }
+
+  return slides;
+}
+
+// ── HTML Renderers ──
+
+function renderTitleSlide(title, subtitle, theme, imgB64) {
+  const overlay = getOverlay(theme);
+  return `<div class="slide">
+    ${imgB64 ? `<img class="bg-image" src="data:image/jpeg;base64,${imgB64}" />` : ''}
+    <div class="overlay overlay-left"></div>
+    <div class="content" style="justify-content:center">
+      <div class="label">PRESENTATION</div>
+      <div class="title-xl">${title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      ${subtitle ? `<div class="subtitle">${subtitle}</div>` : ''}
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span></span></div>
+  </div>`;
+}
+
+function renderStatsSlide(slide, theme, num, total, imgB64) {
+  const cols = Math.min(slide.stats.length, 4);
+  const statsHtml = slide.stats.map(s => {
+    const changeHtml = s.change ? `<div class="stat-change ${s.change.includes('+') || s.change.includes('↑') ? 'stat-up' : 'stat-down'}">${s.change}</div>` : '';
+    return `<div class="stat-card"><div class="stat-icon">${s.icon}</div><div class="stat-value">${s.value}</div><div class="stat-label">${s.label}</div>${changeHtml}</div>`;
+  }).join('');
+
+  return `<div class="slide">
+    ${imgB64 ? `<img class="bg-image" src="data:image/jpeg;base64,${imgB64}" />` : ''}
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">KEY METRICS</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <div class="stats-grid stats-grid-${cols}" style="flex:1;align-content:center">${statsHtml}</div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderBulletsSlide(slide, theme, num, total, imgB64) {
+  // Split layout: text left, image right
+  if (imgB64) {
+    const bulletsHtml = slide.bullets.map((b, i) => `<li><div class="bullet-num">${i + 1}</div><span>${b}</span></li>`).join('');
+    return `<div class="slide">
+      <div class="content-split">
+        <div class="content-left">
+          <div class="label">OVERVIEW</div>
+          <div class="title-lg">${slide.title}</div>
+          <div class="${getAccentLine(theme)}"></div>
+          <ul class="bullets">${bulletsHtml}</ul>
+        </div>
+        <div class="content-right"><img src="data:image/jpeg;base64,${imgB64}" /></div>
+      </div>
+      <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+    </div>`;
+  }
+
+  const bulletsHtml = slide.bullets.map(b => `<li><div class="bullet-dot"></div><span>${b}</span></li>`).join('');
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">OVERVIEW</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <ul class="bullets">${bulletsHtml}</ul>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderTableSlide(slide, theme, num, total) {
+  if (slide.table.length < 2) return '';
+  const headers = slide.table[0];
+  const rows = slide.table.slice(1);
+  const headerHtml = headers.map(h => `<th>${h}</th>`).join('');
+  const rowsHtml = rows.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('');
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">DATA</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <table class="slide-table"><thead><tr>${headerHtml}</tr></thead><tbody>${rowsHtml}</tbody></table>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderChartSlide(slide, theme, num, total) {
+  const max = Math.max(...slide.chart.map(i => i.value));
+  const barsHtml = slide.chart.map((item, idx) => {
+    const pct = (item.value / max * 100).toFixed(0);
+    const gradient = GRADIENTS[idx % GRADIENTS.length];
+    return `<div class="bar-row"><div class="bar-label">${item.label}</div><div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${gradient}"><span class="bar-value">${item.value}</span></div></div></div>`;
+  }).join('');
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">ANALYSIS</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <div class="bar-chart">${barsHtml}</div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderDonutSlide(slide, theme, num, total) {
+  const items = slide.chart;
+  const chartTotal = items.reduce((s, i) => s + i.value, 0);
+  let rotation = 0;
+  const gradParts = [];
+  items.forEach((item, idx) => {
+    const deg = item.value / chartTotal * 360;
+    gradParts.push(`${COLORS[idx % COLORS.length]} ${rotation}deg ${rotation + deg}deg`);
+    rotation += deg;
+  });
+  const legendHtml = items.map((item, idx) =>
+    `<div class="legend-item"><div class="legend-dot" style="background:${COLORS[idx % COLORS.length]}"></div>${item.label}: <strong>${item.value}</strong> (${(item.value / chartTotal * 100).toFixed(0)}%)</div>`
+  ).join('');
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">DISTRIBUTION</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <div class="donut-wrap">
+        <div class="donut-circle" style="background:conic-gradient(${gradParts.join(',')})">
+          <div class="donut-hole"><div class="donut-total">${chartTotal}</div><div class="donut-sub">Total</div></div>
+        </div>
+        <div class="legend">${legendHtml}</div>
+      </div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderTimelineSlide(slide, theme, num, total) {
+  const itemsHtml = slide.timeline.map(t =>
+    `<div class="timeline-item"><div class="timeline-dot"></div><div class="timeline-year">${t.year}</div><div class="timeline-title">${t.title}</div><div class="timeline-desc">${t.desc}</div></div>`
+  ).join('');
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">TIMELINE</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <div class="timeline">${itemsHtml}</div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderQuoteSlide(slide, theme, num, total, imgB64) {
+  return `<div class="slide">
+    ${imgB64 ? `<img class="bg-image" src="data:image/jpeg;base64,${imgB64}" />` : ''}
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content" style="justify-content:center;align-items:center">
+      <div class="quote-mark">"</div>
+      <div class="quote-text" style="margin-top:40px">${(slide.quote || '').trim()}</div>
+      ${slide.quoteAuthor ? `<div class="quote-author">— ${slide.quoteAuthor}</div>` : ''}
+      <div class="${getAccentLine(theme)}" style="margin-top:30px"></div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderProgressSlide(slide, theme, num, total) {
+  const itemsHtml = slide.progress.map((item, idx) => {
+    const color = COLORS[idx % COLORS.length];
+    return `<div class="progress-row"><div class="progress-label">${item.label}</div><div class="progress-track"><div class="progress-fill" style="width:${item.value}%;background:${GRADIENTS[idx % GRADIENTS.length]}"></div></div><div class="progress-pct" style="color:${color}">${item.value}%</div></div>`;
+  }).join('');
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="label">PROGRESS</div>
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      <div class="progress-list">${itemsHtml}</div>
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderContentSlide(slide, theme, num, total, imgB64) {
+  const bodyHtml = slide.body.map(t => `<p style="font-size:16px;color:rgba(255,255,255,0.8);line-height:1.7;margin:8px 0">${t}</p>`).join('');
+  
+  if (imgB64) {
+    return `<div class="slide">
+      <div class="content-split">
+        <div class="content-left">
+          <div class="title-lg">${slide.title}</div>
+          <div class="${getAccentLine(theme)}"></div>
+          ${bodyHtml}
+          ${slide.bullets.length ? `<ul class="bullets">${slide.bullets.map(b => `<li><div class="bullet-dot"></div><span>${b}</span></li>`).join('')}</ul>` : ''}
+        </div>
+        <div class="content-right"><img src="data:image/jpeg;base64,${imgB64}" /></div>
+      </div>
+      <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+    </div>`;
+  }
+
+  return `<div class="slide">
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content">
+      <div class="title-lg">${slide.title}</div>
+      <div class="${getAccentLine(theme)}"></div>
+      ${bodyHtml}
+      ${slide.bullets.length ? `<ul class="bullets">${slide.bullets.map(b => `<li><div class="bullet-dot"></div><span>${b}</span></li>`).join('')}</ul>` : ''}
+    </div>
+    <div class="slide-footer"><span>Squidclaw AI 🦑</span><span>${num} / ${total}</span></div>
+  </div>`;
+}
+
+function renderThankYouSlide(theme, brand, imgB64) {
+  return `<div class="slide">
+    ${imgB64 ? `<img class="bg-image" src="data:image/jpeg;base64,${imgB64}" />` : ''}
+    <div class="overlay ${getOverlay(theme)}"></div>
+    <div class="content" style="justify-content:center;align-items:center">
+      <div class="title-xl">Thank You</div>
+      <div class="${getAccentLine(theme)}" style="width:80px;margin:30px auto"></div>
+      <div class="subtitle" style="text-align:center">Created with ${brand || 'Squidclaw AI 🦑'}</div>
+    </div>
+  </div>`;
+}
+
+// ── Main Export ──
+
+export async function generateSlides(input) {
+  mkdirSync(OUTPUT_DIR, { recursive: true });
+  mkdirSync(CACHE_DIR, { recursive: true });
+
+  const { title = 'Presentation', subtitle = '', content = '', theme = 'executive', brand = 'Squidclaw AI 🦑' } =
+    typeof input === 'string' ? { content: input, title: 'Presentation' } : input;
+
+  const slides = parseToSlides(content);
+  const totalSlides = slides.length + 2; // + title + thank you
+
+  logger.info('slides-engine', `Generating ${totalSlides} slides, theme: ${theme}`);
+
+  // Fetch images in parallel (title + content slides that benefit from images)
+  const imageSlideTypes = ['content', 'bullets', 'quote'];
+  const imageQueries = [
+    title.toLowerCase().replace(/[^a-z\s]/g, '').trim() || 'presentation business',
+    ...slides.filter(s => imageSlideTypes.includes(s.type)).map(s => s.imageQuery || s.title.toLowerCase()),
+    'thank you success',
+  ];
+
+  // Fetch up to 6 images (title + 4 content + thank you)
+  const imagePromises = imageQueries.slice(0, 6).map(q => fetchImage(q));
+  const images = await Promise.allSettled(imagePromises);
+  const imageBuffers = images.map(r => r.status === 'fulfilled' && r.value ? r.value.buffer.toString('base64') : null);
+
+  // Build HTML for each slide
+  const slideHtmls = [];
+  let imgIdx = 1; // 0 = title
+
+  // Title slide
+  slideHtmls.push(renderTitleSlide(title, subtitle || new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }), theme, imageBuffers[0]));
+
+  // Content slides
+  for (let i = 0; i < slides.length; i++) {
+    const s = slides[i];
+    const num = i + 2;
+    const needsImage = imageSlideTypes.includes(s.type);
+    const img = needsImage && imgIdx < imageBuffers.length ? imageBuffers[imgIdx++] : null;
+
+    switch (s.type) {
+      case 'stats': slideHtmls.push(renderStatsSlide(s, theme, num, totalSlides, img)); break;
+      case 'bullets': slideHtmls.push(renderBulletsSlide(s, theme, num, totalSlides, img)); break;
+      case 'table': slideHtmls.push(renderTableSlide(s, theme, num, totalSlides)); break;
+      case 'chart': slideHtmls.push(renderChartSlide(s, theme, num, totalSlides)); break;
+      case 'donut': slideHtmls.push(renderDonutSlide(s, theme, num, totalSlides)); break;
+      case 'timeline': slideHtmls.push(renderTimelineSlide(s, theme, num, totalSlides)); break;
+      case 'quote': slideHtmls.push(renderQuoteSlide(s, theme, num, totalSlides, img)); break;
+      case 'progress': slideHtmls.push(renderProgressSlide(s, theme, num, totalSlides)); break;
+      default: slideHtmls.push(renderContentSlide(s, theme, num, totalSlides, img)); break;
+    }
+  }
+
+  // Thank you slide
+  slideHtmls.push(renderThankYouSlide(theme, brand, imageBuffers[imageBuffers.length - 1]));
+
+  // Render each slide via Puppeteer → screenshot → assemble PPTX
+  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) 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', '--font-render-hinting=none'],
+  });
+
+  const pptx = new PptxGenJS();
+  pptx.layout = 'LAYOUT_WIDE';
+  pptx.author = brand;
+  pptx.title = title;
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1280, height: 720 });
+
+  for (let i = 0; i < slideHtmls.length; i++) {
+    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>${CSS_BASE}</style></head><body style="margin:0;padding:0;background:#000">${slideHtmls[i]}</body></html>`;
+    
+    await page.setContent(html, { waitUntil: 'networkidle0', timeout: 15000 });
+    // Wait for fonts to load
+    await page.evaluate(() => document.fonts.ready);
+    await new Promise(r => setTimeout(r, 300));
+    
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 95 });
+    
+    // Add as full-bleed image slide
+    const slide = pptx.addSlide();
+    const imgB64 = screenshot.toString('base64');
+    slide.addImage({
+      data: `image/jpeg;base64,${imgB64}`,
+      x: 0, y: 0, w: '100%', h: '100%',
+    });
+
+    logger.debug('slides-engine', `Slide ${i + 1}/${slideHtmls.length} rendered`);
+  }
+
+  await browser.close();
+
+  // Save PPTX
+  const filename = title.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s+/g, '_').slice(0, 50) + '.pptx';
+  const filepath = join(OUTPUT_DIR, filename);
+  await pptx.writeFile({ fileName: filepath });
+
+  // Also save HTML version for web viewing
+  const webHtml = `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>${title}</title>
+<style>${CSS_BASE}
+body { background: #000; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; }
+.slide { flex-shrink: 0; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
+</style></head><body>${slideHtmls.join('\n')}</body></html>`;
+  const htmlPath = filepath.replace('.pptx', '.html');
+  writeFileSync(htmlPath, webHtml);
+
+  logger.info('slides-engine', `Done: ${filepath} (${slideHtmls.length} slides)`);
+
+  return {
+    filepath, filename,
+    htmlPath,
+    slides: slideHtmls.length,
+    types: [...new Set(slides.map(s => s.type))],
+    images: imageBuffers.filter(Boolean).length,
+  };
+}
+
+export { parseToSlides, fetchImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squidclaw",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "🦑 AI agent platform — human-like agents for WhatsApp, Telegram & more",
   "main": "lib/engine.js",
   "bin": {