nothumanallowed 13.5.57 → 13.5.59

package/README.md

@@ -1,6 +1,6 @@
 # NotHumanAllowed
 
-**38 specialized AI agents, 81 tools, Studio visual workflows — all local, all free.** Security auditors, code architects, data analysts, DevOps engineers, technical writers — each with deep domain expertise. Use them individually, run complex multi-agent workflows in Studio, or let them deliberate together with Parliament mode.
+**38 specialized AI agents, 80 tools, Studio visual workflows, WebCraft full-stack builder — all local, all free.** Security auditors, code architects, data analysts, DevOps engineers, technical writers — each with deep domain expertise. Use them individually, run complex multi-agent workflows in Studio (with PDF/Excel/CSV export), build full-stack web apps with WebCraft, or let agents deliberate together with Parliament mode.
 
 ## Quick Start
 
@@ -40,6 +40,83 @@ EmailAgent → WebSearchAgent → WriterAgent
 - **Parliament mode** — enable for 2+ specialist agents to cross-read and deliberate: R1 (independent), R2 (agents read each other), R3 (HERALD mediation), convergence score
 - Open `nha ui` → click **Studio** in the sidebar
 
+### Studio Export
+
+When a workflow completes, Studio provides three export formats:
+
+- **PDF** — full structured report with all agent outputs, typography, token counters
+- **Excel (XLSX)** — professional multi-sheet workbook via SheetJS: one sheet per agent, auto-detected numeric columns with formatting, alternating row colors, freeze panes, auto-column widths, index sheet with token summary. Data tables are extracted from Markdown output automatically.
+- **CSV** — all Markdown tables from the report merged into a single file
+
+Export buttons appear in the result panel and in the toolbar after each run.
+
+---
+
+## WebCraft — Full-Stack Web Apps from a Chat
+
+WebCraft is a full-stack web app builder embedded in `nha ui`. Describe what you want in plain language — WebCraft generates a complete project with Express.js backend, PostgreSQL schema, JWT auth, email verification, security middleware, and a styled frontend. Everything runs locally with a live sandbox.
+
+```
+Open nha ui → click WebCraft in the sidebar
+```
+
+### How it works
+
+1. **Describe your project** in the chat (or pick an example: MySaaS, MyShop, MyBlog, MyPortfolio...)
+2. **WebCraft generates** all files: `server/`, `public/`, `db/migrations/`, `.env.example`, `package.json`, nginx config
+3. **Click ▶ Sandbox** — runs `npm install && node server/index.js` in an isolated process, live on a local port
+4. **Chat with the agent** to modify, fix, or extend anything — the agent edits files directly on disk, you see diffs in real time
+
+### WebCraft Agent
+
+An AI assistant permanently available in the chat panel. Powered by Liara (Qwen3 32B, free) or your own API key.
+
+**What it can do:**
+- Edit files surgically (old → new string replace) or rewrite them completely
+- Read any project file for context
+- Auto-fix `MODULE_NOT_FOUND` and common require() path errors
+- Restart the sandbox after fixes
+- Process attached screenshots or PDFs (vision) to debug visual issues
+
+**Context files** (created automatically for every project, editable via sidebar):
+| File | Type | Purpose |
+|---|---|---|
+| `skills/memory.md` | memory | Architecture decisions, stack choices, developer preferences |
+| `skills/liara.md` | provider | Calibrate AI tone, code style, constraints |
+| `skills/skills.md` | skill | Reusable patterns, snippets, API integrations |
+
+Add more skill files (unlimited) for specific integrations (Stripe, email templates, etc.).
+
+### Developer Tools (sidebar toolbar)
+
+| Tool | Description |
+|---|---|
+| **Diff viewer** | After every agent edit, see before/after for each changed file — color-coded, collapsible |
+| **Syntax check** ✅ | Runs `node --check` on all JS files, reports errors instantly |
+| **Search** 🔍 | Grep across all project files — click a result to jump to that file |
+| **Snapshot** 💾 | Save a full point-in-time backup of all files. Restore any snapshot with one click |
+| **Plan mode** | Type `/plan your request` — agent proposes a plan first, you approve before any file is touched |
+| **Auto-fix** | Sandbox errors (MODULE_NOT_FOUND etc.) trigger automatic Liara fix attempts (3 free, unlimited with own key) |
+
+### Example session
+
+```
+You: "Add a contact form with SMTP email and honeypot spam protection"
+Agent: → edits server/routes/api.js (add /contact POST route)
+       → edits server/services/email.js (add sendContactEmail)
+       → edits public/index.html (add form HTML)
+       → edits public/js/main.js (add form JS with honeypot)
+       [Diff viewer shows 4 files changed]
+       [Syntax check: ✅ all files valid]
+       [Sandbox restarted automatically]
+```
+
+```
+You: "/plan refactor auth to use refresh token rotation"
+Agent: → proposes plan (3 files, 6 changes) — no edits yet
+       → you click Approve → agent executes
+```
+
 ## Daily Operations (PAO)
 
 Connect Gmail + Calendar. 5 specialist agents analyze your day.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.57",
+  "version": "13.5.59",
   "description": "NotHumanAllowed — 38 AI agents, 80 tools, Studio (visual agentic workflows). Email, calendar, browser automation, screen capture, canvas, cron/heartbeat, Alexandria E2E messaging, GitHub, Notion, Slack, voice chat, free AI (Liara), 28 languages. Zero-dependency CLI.",
   "type": "module",
   "bin": {

package/src/commands/ui.mjs

@@ -4697,6 +4697,154 @@ REGOLE CRITICHE:
         return;
       }
 
+      // POST /api/studio/webcraft/snapshot  { projectName } → { ok, snapshot }
+      // Creates a timestamped snapshot of all project files (excludes node_modules)
+      if (pathname === '/api/studio/webcraft/snapshot' && method === 'POST') {
+        const body = await parseBody(req);
+        const projName = (body.projectName || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        if (!projName) { sendJSON(res, 400, { error: 'projectName required' }); return; }
+        const projDir = path.join(os.homedir(), '.nha', 'webcraft', projName);
+        const snapDir = path.join(projDir, '.snapshots');
+        if (!fs.existsSync(snapDir)) fs.mkdirSync(snapDir, { recursive: true });
+        const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+        const snapPath = path.join(snapDir, ts + '.json');
+        const snapshot = {};
+        const walkSnap = (dir, base) => {
+          for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+            if (entry.name === 'node_modules' || entry.name === '.snapshots' || entry.name.startsWith('.')) continue;
+            const rel = base ? base + '/' + entry.name : entry.name;
+            if (entry.isDirectory()) { walkSnap(path.join(dir, entry.name), rel); }
+            else {
+              try { snapshot[rel] = fs.readFileSync(path.join(dir, entry.name), 'utf8'); } catch(_) {}
+            }
+          }
+        };
+        walkSnap(projDir, '');
+        fs.writeFileSync(snapPath, JSON.stringify({ ts, files: snapshot }), 'utf8');
+        // Keep only last 10 snapshots
+        const allSnaps = fs.readdirSync(snapDir).filter(f => f.endsWith('.json')).sort();
+        if (allSnaps.length > 10) {
+          for (const old of allSnaps.slice(0, allSnaps.length - 10)) {
+            try { fs.unlinkSync(path.join(snapDir, old)); } catch(_) {}
+          }
+        }
+        sendJSON(res, 200, { ok: true, snapshot: ts, fileCount: Object.keys(snapshot).length });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      // GET /api/studio/webcraft/snapshots/:name → { snapshots: [{ts, fileCount}] }
+      if (pathname.startsWith('/api/studio/webcraft/snapshots/') && method === 'GET') {
+        const projName = decodeURIComponent(pathname.replace('/api/studio/webcraft/snapshots/', '')).replace(/[^a-zA-Z0-9_-]/g, '');
+        const snapDir = path.join(os.homedir(), '.nha', 'webcraft', projName, '.snapshots');
+        if (!fs.existsSync(snapDir)) { sendJSON(res, 200, { snapshots: [] }); return; }
+        const snaps = fs.readdirSync(snapDir).filter(f => f.endsWith('.json')).sort().reverse().map(f => {
+          try {
+            const data = JSON.parse(fs.readFileSync(path.join(snapDir, f), 'utf8'));
+            return { ts: data.ts, fileCount: Object.keys(data.files || {}).length };
+          } catch(_) { return null; }
+        }).filter(Boolean);
+        sendJSON(res, 200, { snapshots: snaps });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      // POST /api/studio/webcraft/restore  { projectName, ts } → { ok, restored }
+      if (pathname === '/api/studio/webcraft/restore' && method === 'POST') {
+        const body = await parseBody(req);
+        const projName = (body.projectName || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        const ts = (body.ts || '').replace(/[^0-9T\-]/g, '');
+        if (!projName || !ts) { sendJSON(res, 400, { error: 'projectName and ts required' }); return; }
+        const snapPath = path.join(os.homedir(), '.nha', 'webcraft', projName, '.snapshots', ts + '.json');
+        if (!fs.existsSync(snapPath)) { sendJSON(res, 404, { error: 'snapshot not found' }); return; }
+        const data = JSON.parse(fs.readFileSync(snapPath, 'utf8'));
+        const projDir = path.join(os.homedir(), '.nha', 'webcraft', projName);
+        let restored = 0;
+        for (const [rel, content] of Object.entries(data.files || {})) {
+          const fp = path.join(projDir, rel);
+          fs.mkdirSync(path.dirname(fp), { recursive: true });
+          fs.writeFileSync(fp, content, 'utf8');
+          restored++;
+        }
+        sendJSON(res, 200, { ok: true, restored });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      // POST /api/studio/webcraft/syntax-check  { projectName } → { results: [{file, ok, error}] }
+      if (pathname === '/api/studio/webcraft/syntax-check' && method === 'POST') {
+        const body = await parseBody(req);
+        const projName = (body.projectName || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        if (!projName) { sendJSON(res, 400, { error: 'projectName required' }); return; }
+        const projDir = path.join(os.homedir(), '.nha', 'webcraft', projName);
+        const { execFile } = await import('child_process');
+        const { promisify } = await import('util');
+        const execFileAsync = promisify(execFile);
+        const jsFiles = [];
+        const walkJs = (dir, base) => {
+          if (!fs.existsSync(dir)) return;
+          for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+            if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+            const rel = base ? base + '/' + entry.name : entry.name;
+            if (entry.isDirectory()) { walkJs(path.join(dir, entry.name), rel); }
+            else if (entry.name.endsWith('.js') || entry.name.endsWith('.mjs')) { jsFiles.push(rel); }
+          }
+        };
+        walkJs(projDir, '');
+        const results = [];
+        for (const rel of jsFiles) {
+          const fp = path.join(projDir, rel);
+          try {
+            await execFileAsync(process.execPath, ['--check', fp], { timeout: 5000 });
+            results.push({ file: rel, ok: true });
+          } catch(e) {
+            const errMsg = (e.stderr || e.message || '').split('\n')[0].replace(fp, rel);
+            results.push({ file: rel, ok: false, error: errMsg });
+          }
+        }
+        sendJSON(res, 200, { results });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      // POST /api/studio/webcraft/grep  { projectName, query } → { matches: [{file, line, lineNum, match}] }
+      if (pathname === '/api/studio/webcraft/grep' && method === 'POST') {
+        const body = await parseBody(req);
+        const projName = (body.projectName || '').replace(/[^a-zA-Z0-9_-]/g, '');
+        const query = (body.query || '').slice(0, 200);
+        if (!projName || !query) { sendJSON(res, 400, { error: 'projectName and query required' }); return; }
+        const projDir = path.join(os.homedir(), '.nha', 'webcraft', projName);
+        const matches = [];
+        let queryRe;
+        try { queryRe = new RegExp(query, 'gi'); } catch(_) { queryRe = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'); }
+        const walkGrep = (dir, base) => {
+          if (!fs.existsSync(dir)) return;
+          for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+            if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+            const rel = base ? base + '/' + entry.name : entry.name;
+            if (entry.isDirectory()) { walkGrep(path.join(dir, entry.name), rel); }
+            else {
+              const ext = entry.name.split('.').pop();
+              if (!['js','mjs','ts','html','css','json','md','sql','env','conf'].includes(ext)) continue;
+              try {
+                const lines = fs.readFileSync(path.join(dir, entry.name), 'utf8').split('\n');
+                lines.forEach((line, idx) => {
+                  queryRe.lastIndex = 0;
+                  if (queryRe.test(line)) {
+                    matches.push({ file: rel, lineNum: idx + 1, line: line.trim().slice(0, 200) });
+                    if (matches.length >= 100) return;
+                  }
+                });
+              } catch(_) {}
+            }
+          }
+        };
+        walkGrep(projDir, '');
+        sendJSON(res, 200, { matches: matches.slice(0, 100) });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
       // ── Studio: Parliament deliberation (SSE streaming) ──────────────────
       // Implements the Legion DeliberationEngine protocol adapted for Studio:
       // Round 1 outputs already exist (from normal workflow steps).

package/src/constants.mjs

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export const VERSION = '13.5.57';
+export const VERSION = '13.5.59';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -4586,6 +4586,286 @@ function downloadStudioPDF() {
   doGeneratePdf();
 }
 
+// ── Studio Export: CSV ────────────────────────────────────────────────────────
+function extractMarkdownTables(md) {
+  var NL = String.fromCharCode(10);
+  var lines = md.split(NL);
+  var tables = [];
+  var current = null;
+  for (var i = 0; i < lines.length; i++) {
+    var l = lines[i].trim();
+    if (l.charAt(0) === '|' && l.lastIndexOf('|') > 0) {
+      if (/^\|[\s\-|:]+\|$/.test(l)) { continue; } // separator
+      var cells = l.split('|').slice(1,-1).map(function(c){ return c.trim(); });
+      if (!current) { current = { headers: cells, rows: [] }; }
+      else { current.rows.push(cells); }
+    } else {
+      if (current && current.rows.length > 0) { tables.push(current); }
+      current = null;
+    }
+  }
+  if (current && current.rows.length > 0) tables.push(current);
+  return tables;
+}
+
+function tableToCsvString(table) {
+  var NL = String.fromCharCode(10);
+  function escCell(v) {
+    if (v === undefined || v === null) return '';
+    var s = String(v).replace(new RegExp('"', 'g'), '""');
+    if (s.indexOf(',') >= 0 || s.indexOf('"') >= 0 || s.indexOf(NL) >= 0) return '"' + s + '"';
+    return s;
+  }
+  var rows = [table.headers].concat(table.rows);
+  return rows.map(function(r){ return r.map(escCell).join(','); }).join(NL);
+}
+
+function downloadStudioCSV() {
+  var nodes = (studioState.nodes || []).filter(function(n){ return n.output && n.output !== '(no output)'; });
+  var allTables = [];
+  nodes.forEach(function(n) {
+    var tbls = extractMarkdownTables(n.output || '');
+    tbls.forEach(function(t, i){ allTables.push({ agent: (n.label||n.agent), idx: i+1, table: t }); });
+  });
+  // Also check synthesis result
+  if (studioState.result) {
+    var tbls2 = extractMarkdownTables(studioState.result);
+    tbls2.forEach(function(t, i){ allTables.push({ agent: 'Synthesis', idx: i+1, table: t }); });
+  }
+  if (allTables.length === 0) { alert('Nessuna tabella trovata nel report. Chiedi agli agenti di produrre dati in formato tabella Markdown.'); return; }
+  var NL = String.fromCharCode(10);
+  var csvParts = allTables.map(function(entry) {
+    return '# ' + entry.agent + (allTables.length > 1 ? ' — Tabella ' + entry.idx : '') + NL + tableToCsvString(entry.table);
+  });
+  var csv = csvParts.join(NL + NL);
+  var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  var fname = (studioState.task || 'NHA-Studio').slice(0,50).replace(/[^a-z0-9\s]/gi,'').trim().replace(/\s+/g,'-') + '.csv';
+  var a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = fname;
+  a.click();
+}
+
+// ── Studio Export: Excel (XLSX via SheetJS) ───────────────────────────────────
+var _xlsxLoaded = false;
+var _xlsxLoading = false;
+
+function loadXLSX(cb) {
+  if (_xlsxLoaded && window.XLSX) { cb(); return; }
+  if (_xlsxLoading) { setTimeout(function(){ loadXLSX(cb); }, 200); return; }
+  _xlsxLoading = true;
+  var s = document.createElement('script');
+  s.src = 'https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js';
+  s.onload = function() { _xlsxLoaded = true; _xlsxLoading = false; cb(); };
+  s.onerror = function() { _xlsxLoading = false; alert('Errore caricamento SheetJS. Controlla la connessione.'); };
+  document.head.appendChild(s);
+}
+
+function downloadStudioXLSX() {
+  loadXLSX(function() { _doGenerateXLSX(); });
+}
+
+function _doGenerateXLSX() {
+  var XLSX = window.XLSX;
+  if (!XLSX) { alert('SheetJS non disponibile.'); return; }
+
+  var nodes = (studioState.nodes || []).filter(function(n){ return n.output && n.output !== '(no output)' && n.agent !== 'CanvasAgent'; });
+  var task = studioState.task || 'NHA Studio Report';
+  var today = new Date();
+  var dateStr = today.toLocaleDateString('it-IT');
+  var wb = XLSX.utils.book_new();
+
+  // ── ACCENT COLORS per agente ──────────────────────────────────────────────
+  var AGENT_COLORS = ['4F46E5','0891B2','059669','D97706','DC2626','7C3AED','0284C7','BE185D','0D9488','CA8A04'];
+
+  // ── Helper: cell style fabbrica ──────────────────────────────────────────
+  function headerStyle(hexFg) {
+    return {
+      font: { bold: true, color: { rgb: 'FFFFFF' }, sz: 11, name: 'Calibri' },
+      fill: { patternType: 'solid', fgColor: { rgb: hexFg || '4F46E5' } },
+      alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
+      border: {
+        top:    { style: 'thin', color: { rgb: 'CCCCCC' } },
+        bottom: { style: 'thin', color: { rgb: 'CCCCCC' } },
+        left:   { style: 'thin', color: { rgb: 'CCCCCC' } },
+        right:  { style: 'thin', color: { rgb: 'CCCCCC' } }
+      }
+    };
+  }
+  function dataStyle(even) {
+    return {
+      font: { sz: 10, name: 'Calibri' },
+      fill: even ? { patternType: 'solid', fgColor: { rgb: 'F3F4F6' } } : { patternType: 'none' },
+      alignment: { vertical: 'center', wrapText: true },
+      border: {
+        top:    { style: 'hair', color: { rgb: 'E5E7EB' } },
+        bottom: { style: 'hair', color: { rgb: 'E5E7EB' } },
+        left:   { style: 'hair', color: { rgb: 'E5E7EB' } },
+        right:  { style: 'hair', color: { rgb: 'E5E7EB' } }
+      }
+    };
+  }
+  function titleStyle(hex) {
+    return {
+      font: { bold: true, sz: 14, name: 'Calibri', color: { rgb: hex || '4F46E5' } },
+      fill: { patternType: 'solid', fgColor: { rgb: 'F8F9FC' } },
+      alignment: { horizontal: 'left', vertical: 'center' }
+    };
+  }
+  function metaStyle() {
+    return { font: { sz: 10, italic: true, color: { rgb: '6B7280' }, name: 'Calibri' } };
+  }
+
+  // ── Helper: parse numeric value ───────────────────────────────────────────
+  function parseNum(v) {
+    var s = String(v).replace(/[€$£%,\s]/g,'').trim();
+    var n = parseFloat(s);
+    return isNaN(n) ? null : n;
+  }
+
+  // ── Helper: aggiunge un foglio tabella da markdown ────────────────────────
+  function addTableSheet(sheetName, agentLabel, tables, colorHex) {
+    var ws = {};
+    var maxCol = 0;
+    var rowNum = 0;
+
+    // Title row
+    ws['A' + (rowNum+1)] = { v: agentLabel, t: 's', s: titleStyle(colorHex) };
+    rowNum++;
+    // Meta row
+    ws['A' + (rowNum+1)] = { v: 'Generato da NHA Studio il ' + dateStr, t: 's', s: metaStyle() };
+    ws['B' + (rowNum+1)] = { v: 'Task: ' + task.slice(0,80), t: 's', s: metaStyle() };
+    rowNum++;
+    rowNum++; // blank
+
+    tables.forEach(function(table, ti) {
+      if (tables.length > 1) {
+        ws['A' + (rowNum+1)] = { v: 'Tabella ' + (ti+1), t: 's', s: { font: { bold: true, sz: 11, name: 'Calibri', color: { rgb: colorHex } } } };
+        rowNum++;
+      }
+      // Detect numeric columns
+      var isNumericCol = table.headers.map(function(_, ci) {
+        return table.rows.every(function(r){ return r[ci] === undefined || r[ci] === '' || parseNum(r[ci]) !== null; });
+      });
+      // Header row
+      var colCount = table.headers.length;
+      table.headers.forEach(function(h, ci) {
+        var col = String.fromCharCode(65 + ci);
+        ws[col + (rowNum+1)] = { v: h, t: 's', s: headerStyle(colorHex) };
+        if (ci > maxCol) maxCol = ci;
+      });
+      rowNum++;
+      // Data rows
+      table.rows.forEach(function(row, ri) {
+        row.forEach(function(cell, ci) {
+          var col = String.fromCharCode(65 + ci);
+          var num = isNumericCol[ci] ? parseNum(cell) : null;
+          var addr = col + (rowNum+1);
+          if (num !== null && cell !== '') {
+            ws[addr] = { v: num, t: 'n', z: num % 1 !== 0 ? '#,##0.00' : '#,##0', s: dataStyle(ri % 2 === 0) };
+          } else {
+            ws[addr] = { v: cell || '', t: 's', s: dataStyle(ri % 2 === 0) };
+          }
+        });
+        rowNum++;
+      });
+      rowNum++; // blank between tables
+    });
+
+    // Set sheet range
+    var lastCol = String.fromCharCode(65 + maxCol);
+    ws['!ref'] = 'A1:' + lastCol + (rowNum + 1);
+
+    // Column widths (auto-estimate from content)
+    var colWidths = [];
+    for (var ci = 0; ci <= maxCol; ci++) {
+      var maxW = 12;
+      tables.forEach(function(table) {
+        if (table.headers[ci]) maxW = Math.max(maxW, table.headers[ci].length + 2);
+        table.rows.forEach(function(r){ if (r[ci]) maxW = Math.max(maxW, Math.min(String(r[ci]).length + 2, 50)); });
+      });
+      colWidths.push({ wch: maxW });
+    }
+    ws['!cols'] = colWidths;
+
+    // Row heights
+    var rowH = [];
+    for (var ri2 = 0; ri2 < rowNum; ri2++) rowH.push({ hpt: ri2 < 3 ? 22 : 18 });
+    ws['!rows'] = rowH;
+
+    // Freeze top rows (title + meta + header row of first table)
+    ws['!freeze'] = { xSplit: 0, ySplit: 4, topLeftCell: 'A5' };
+
+    XLSX.utils.book_append_sheet(wb, ws, sheetName.slice(0,31));
+  }
+
+  // ── Foglio INDICE ─────────────────────────────────────────────────────────
+  var wsIdx = {};
+  wsIdx['A1'] = { v: 'NHA Studio Report', t: 's', s: titleStyle('4F46E5') };
+  wsIdx['A2'] = { v: task, t: 's', s: { font: { sz: 12, name: 'Calibri', bold: true } } };
+  wsIdx['A3'] = { v: 'Generato il ' + dateStr + ' con NHA Studio', t: 's', s: metaStyle() };
+  wsIdx['A5'] = { v: 'Agente', t: 's', s: headerStyle('4F46E5') };
+  wsIdx['B5'] = { v: 'Tabelle', t: 's', s: headerStyle('4F46E5') };
+  wsIdx['C5'] = { v: 'Token In', t: 's', s: headerStyle('4F46E5') };
+  wsIdx['D5'] = { v: 'Token Out', t: 's', s: headerStyle('4F46E5') };
+  var idxRow = 5;
+  var hasAnyTable = false;
+  nodes.forEach(function(n, ni) {
+    var tables = extractMarkdownTables(n.output || '');
+    if (tables.length > 0) hasAnyTable = true;
+    idxRow++;
+    var co = AGENT_COLORS[ni % AGENT_COLORS.length];
+    wsIdx['A' + idxRow] = { v: (n.label||n.agent), t: 's', s: dataStyle(ni % 2 === 0) };
+    wsIdx['B' + idxRow] = { v: tables.length, t: 'n', s: dataStyle(ni % 2 === 0) };
+    wsIdx['C' + idxRow] = { v: n.tokensIn || 0, t: 'n', z: '#,##0', s: dataStyle(ni % 2 === 0) };
+    wsIdx['D' + idxRow] = { v: n.tokensOut || 0, t: 'n', z: '#,##0', s: dataStyle(ni % 2 === 0) };
+  });
+  wsIdx['!ref'] = 'A1:D' + (idxRow + 1);
+  wsIdx['!cols'] = [{ wch: 28 }, { wch: 10 }, { wch: 12 }, { wch: 12 }];
+  XLSX.utils.book_append_sheet(wb, wsIdx, 'Indice');
+
+  // ── Un foglio per ogni agente con tabelle ─────────────────────────────────
+  var sheetCount = 0;
+  nodes.forEach(function(n, ni) {
+    var tables = extractMarkdownTables(n.output || '');
+    if (tables.length === 0) return;
+    var colorHex = AGENT_COLORS[ni % AGENT_COLORS.length];
+    var sheetName = (n.label || n.agent).slice(0,28);
+    addTableSheet(sheetName, n.label || n.agent, tables, colorHex);
+    sheetCount++;
+  });
+
+  // ── Foglio Risultato Finale (testo libero come tabella a singola colonna) ──
+  if (studioState.result) {
+    var synTables = extractMarkdownTables(studioState.result);
+    if (synTables.length > 0) {
+      addTableSheet('Sintesi', 'Sintesi Finale', synTables, '059669');
+      sheetCount++;
+    } else {
+      // Export free text as single-column sheet with line-by-line rows
+      var wsText = {};
+      wsText['A1'] = { v: 'Sintesi Finale', t: 's', s: titleStyle('059669') };
+      wsText['A2'] = { v: task.slice(0,80), t: 's', s: metaStyle() };
+      var NL5 = String.fromCharCode(10);
+      var lines = (studioState.result || '').split(NL5);
+      lines.forEach(function(line, li) {
+        wsText['A' + (li+4)] = { v: line.replace(new RegExp('[*_#]','g'), '').replace(new RegExp(String.fromCharCode(96),'g'), ''), t: 's', s: dataStyle(li % 2 === 0) };
+      });
+      wsText['!ref'] = 'A1:A' + (lines.length + 4);
+      wsText['!cols'] = [{ wch: 90 }];
+      XLSX.utils.book_append_sheet(wb, wsText, 'Sintesi');
+    }
+  }
+
+  if (sheetCount === 0 && !studioState.result) {
+    alert('Nessuna tabella trovata. Chiedi agli agenti di produrre dati in formato tabella Markdown per generare Excel.');
+    return;
+  }
+
+  var fname = task.slice(0,50).replace(/[^a-z0-9\s]/gi,'').trim().replace(/\s+/g,'-') + '-NHAStudio.xlsx';
+  XLSX.writeFile(wb, fname, { bookType: 'xlsx', type: 'binary', cellStyles: true });
+}
+
 function renderStudioResult() {
   var el = document.getElementById('studioResult');
   if (!el) return;
@@ -4598,14 +4878,19 @@ function renderStudioResult() {
   var tokLine = (studioTokens && (studioTokens.in > 0 || studioTokens.out > 0))
     ? '<div style="margin-top:8px;font-size:11px;color:var(--dim);font-family:var(--mono)">&#x2B06; ' + (studioTokens.in||0).toLocaleString() + ' token in &nbsp;&#x2B07; ' + (studioTokens.out||0).toLocaleString() + ' token out &nbsp;&#x2022;&nbsp; <strong style="color:var(--green)">' + ((studioTokens.in||0)+(studioTokens.out||0)).toLocaleString() + '</strong> totale</div>'
     : '';
-  var dlBtn = '<div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap">' +
-    '<button onclick="downloadStudioPDF()" title="Genera e scarica il report come PDF" style="display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.3px;box-shadow:0 2px 8px rgba(79,70,229,.35)">&#x2913; Download PDF</button>' +
-    '<span style="font-size:11px;color:var(--dim)">Scarica il report completo come file PDF</span>' +
+  var dlBtn = '<div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap">' +
+    '<button onclick="downloadStudioPDF()" title="Report completo come PDF" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(79,70,229,.35)">&#x2913; PDF</button>' +
+    '<button onclick="downloadStudioXLSX()" title="Esporta tabelle come Excel professionale (SheetJS)" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#059669,#047857);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(5,150,105,.35)">&#x1f4ca; Excel</button>' +
+    '<button onclick="downloadStudioCSV()" title="Esporta tabelle come CSV" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#0891b2,#0369a1);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(8,145,178,.35)">&#x1f4cb; CSV</button>' +
     '</div>';
   el.innerHTML = '<div class="studio-result__title">&#10003; ' + t('workflow_complete') + '</div>' + body + tokLine + dlBtn;
-  // Show/hide inline PDF button in the prompt bar
+  // Show/hide inline export buttons in the prompt bar
   var inlinePdfBtn = document.getElementById('studioInlinePdfBtn');
   if (inlinePdfBtn) inlinePdfBtn.style.display = 'inline-flex';
+  var inlineXlsxBtn = document.getElementById('studioInlineXlsxBtn');
+  if (inlineXlsxBtn) inlineXlsxBtn.style.display = 'inline-flex';
+  var inlineCsvBtn = document.getElementById('studioInlineCsvBtn');
+  if (inlineCsvBtn) inlineCsvBtn.style.display = 'inline-flex';
   // Update canvas button style: bright green when canvas exists, dimmed otherwise
   var canvasBtn = document.getElementById('studioCanvasBtn');
   if (canvasBtn) {
@@ -5962,7 +6247,9 @@ function renderStudio(el) {
               '<button onclick="document.getElementById(\\x27studioFileInput\\x27).click()" title="Attach PDF or image" style="padding:8px 10px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;font-size:15px" ' + (studioState.running ? 'disabled' : '') + '>&#128206;</button>' +
               '<button id="studioRunBtn" class="studio-run-btn" onclick="runStudio()" style="flex:1" ' + (studioState.running ? 'disabled' : '') + '>' + t('run') + '</button>' +
               '<button id="studioStopBtn" onclick="stopStudio()" title="' + t('stop') + '" style="padding:8px 14px;background:#7f1d1d;border:1px solid #ef4444;border-radius:8px;color:#ef4444;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;' + (studioState.running ? '' : 'display:none') + '">&#9632; ' + t('stop') + '</button>' +
-              '<button id="studioInlinePdfBtn" onclick="downloadStudioPDF()" title="Genera e scarica il report come PDF" style="display:' + (studioState.result ? 'inline-flex' : 'none') + ';align-items:center;gap:5px;padding:8px 12px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(79,70,229,.35)">&#x2913; PDF</button>' +
+              '<button id="studioInlinePdfBtn" onclick="downloadStudioPDF()" title="Download PDF" style="display:' + (studioState.result ? 'inline-flex' : 'none') + ';align-items:center;gap:5px;padding:8px 12px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(79,70,229,.35)">&#x2913; PDF</button>' +
+              '<button id="studioInlineXlsxBtn" onclick="downloadStudioXLSX()" title="Export Excel" style="display:' + (studioState.result ? 'inline-flex' : 'none') + ';align-items:center;gap:5px;padding:8px 12px;background:linear-gradient(135deg,#059669,#047857);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(5,150,105,.35)">&#x1f4ca; Excel</button>' +
+              '<button id="studioInlineCsvBtn" onclick="downloadStudioCSV()" title="Export CSV" style="display:' + (studioState.result ? 'inline-flex' : 'none') + ';align-items:center;gap:5px;padding:8px 10px;background:linear-gradient(135deg,#0891b2,#0369a1);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(8,145,178,.35)">CSV</button>' +
               '<button onclick="studioReset()" title="' + t('reset') + '" style="padding:8px 12px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;font-size:16px;line-height:1" ' + (studioState.running ? 'disabled' : '') + '>&#8635;</button>' +
             '</div>' +
           '</div>' +
@@ -6252,6 +6539,13 @@ var wcChatRunning = false;
 var wcChatAttachments = []; // [{name, mimeType, base64, size}]
 var _wcAutoFixAttempts = 0;
 var _wcAutoFixTimer = null;
+var _wcPlanPending = null;   // null | { plan: string, message: string } — plan mode waiting for approval
+var _wcDiffQueue = [];       // [{file, before, after}] diffs from last agent run
+var _wcGrepOpen = false;     // grep panel visible
+var _wcGrepQuery = '';
+var _wcGrepResults = [];
+var _wcSyntaxResults = [];   // [{file, ok, error}]
+var _wcSnapshots = [];       // [{ts, fileCount}]
 // Skills state
 var wcSkills = [];          // [{name, content, type}] type: 'skill'|'memory'|'provider'
 var wcSkillModal = null;    // null | {mode:'edit'|'new', idx:number|null, name, content, type, generating}
@@ -6348,11 +6642,17 @@ function renderWebCraft(el) {
           '<div style="font-size:9px;color:var(--dim);margin-top:4px">'+t('wc_required_hint')+'</div>' +
         '</div>' +
         wcSkillsPanelHtml() +
+        wcSnapshotsPanelHtml() +
         (wcState.running ?
           '<div style="width:100%;padding:11px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--dim);font-size:12px;text-align:center">&#9203; '+t('wc_generating')+'...</div>'
         : '') +
         (wcState.generatedFiles.length > 0 && !wcState.running ?
-          '<button onclick="wcDownloadZip()" style="width:100%;padding:10px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:12px;font-weight:600;cursor:pointer">&#8681; '+t('wc_download')+'</button>' +
+          '<div style="display:flex;gap:6px;flex-wrap:wrap">' +
+            '<button onclick="wcDownloadZip()" style="flex:1;padding:9px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:11px;font-weight:600;cursor:pointer">&#8681; ZIP</button>' +
+            '<button onclick="wcRunSyntaxCheck()" title="Controlla errori sintassi JS" style="padding:9px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--dim);font-size:11px;cursor:pointer" title="Syntax check">&#9989;</button>' +
+            '<button onclick="wcToggleGrep()" title="Cerca nel codice" style="padding:9px 10px;background:'+(_wcGrepOpen?'var(--greendim)':'var(--bg3)')+';border:1px solid '+(_wcGrepOpen?'var(--green3)':'var(--border2)')+';border-radius:8px;color:'+(_wcGrepOpen?'var(--green)':'var(--dim)')+';font-size:11px;cursor:pointer">&#128269;</button>' +
+            '<button onclick="wcManualSnapshot()" title="Salva snapshot" style="padding:9px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--dim);font-size:11px;cursor:pointer">&#128190;</button>' +
+          '</div>' +
           '<button onclick="wcStartSandbox()" id="wcSandboxBtn" style="width:100%;padding:10px;background:var(--bg3);border:1px solid var(--green3);border-radius:8px;color:var(--green);font-size:12px;font-weight:600;cursor:pointer">&#9654; '+t('wc_sandbox_start')+'</button>'
         : '') +
       '</div>' +
@@ -6372,6 +6672,9 @@ function renderWebCraft(el) {
       '<div style="flex:1;min-height:0;overflow:hidden">' +
         (wcMainTab === 'projects' ? wcProjectsPanelHtml() : editorHtml) +
       '</div>' +
+      (wcMainTab !== 'projects' ? wcPlanBannerHtml() : '') +
+      (wcMainTab !== 'projects' ? wcGrepPanelHtml() : '') +
+      (wcMainTab !== 'projects' ? wcDiffPanelHtml() : '') +
       wcChatPanelHtml() +
     '</div>' +
     wcSkillModalHtml();
@@ -6671,6 +6974,14 @@ function wcChatPanelHtml() {
           msg.attachments.map(function(a){ return '<span style="background:var(--bg3);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;font-size:10px;color:var(--dim)">&#128206; '+wcEsc(a.name)+'</span>'; }).join('') +
         '</div>';
       }
+    } else if (msg.role === 'system') {
+      // System messages: compact notices (snapshot, syntax check, etc.)
+      messagesHtml += '<div style="margin:2px 12px;padding:4px 10px;background:var(--bg3);border-left:2px solid var(--border2);border-radius:4px;font-size:10px;color:var(--dim)">' + (msg.text||'') + '</div>';
+      if (msg.syntaxErrors && msg.syntaxErrors.length) {
+        messagesHtml += '<div style="margin:2px 12px">' + msg.syntaxErrors.map(function(e2){
+          return '<div style="font-size:10px;font-family:var(--mono);color:#f87171;padding:2px 0">&#10005; ' + wcEsc(e2.file) + ': ' + wcEsc(e2.error) + '</div>';
+        }).join('') + '</div>';
+      }
     } else {
       var toolBadges = (msg.tools || []).map(function(tool){
         var icon = tool.op === 'edit' ? '&#9998;' : (tool.op === 'write' ? '&#10133;' : '&#128065;');
@@ -6713,9 +7024,9 @@ function wcChatPanelHtml() {
       '</div>'
     : '<div style="padding:4px 12px 0;font-size:10px;color:var(--dim)">&#128196; <strong style="color:var(--green)">'+wcEsc(wcState.projectName)+'</strong> &mdash; scrivi per modificare o migliorare il progetto</div>';
 
-  return '<div style="border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;display:flex;flex-direction:column">' +
+  return '<div style="border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;display:flex;flex-direction:column;min-height:220px">' +
     // Messages
-    '<div id="wcChatMessages" style="max-height:160px;overflow-y:auto;padding:6px 0">' +
+    '<div id="wcChatMessages" style="max-height:240px;overflow-y:auto;padding:6px 0">' +
       messagesHtml +
     '</div>' +
     // Attachments
@@ -6728,7 +7039,7 @@ function wcChatPanelHtml() {
         '&#128206;' +
         '<input type="file" id="wcFileInput" multiple accept="image/*,.pdf" style="display:none" onchange="wcHandleFileAttach(this)">' +
       '</label>' +
-      '<textarea id="wcChatInput" rows="2" placeholder="'+placeholder+'" '+(inputDisabled?'disabled':'')+' style="flex:1;padding:8px 10px;font-size:12px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);resize:none;line-height:1.5;font-family:inherit" onkeydown="wcChatKeydown(event)"></textarea>' +
+      '<textarea id="wcChatInput" rows="4" placeholder="'+placeholder+'" '+(inputDisabled?'disabled':'')+' style="flex:1;padding:8px 10px;font-size:12px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);resize:vertical;min-height:80px;line-height:1.5;font-family:inherit" onkeydown="wcChatKeydown(event)"></textarea>' +
       '<button onclick="wcChatSend()" '+(inputDisabled?'disabled':'')+' style="padding:8px 14px;background:var(--green3);border:none;border-radius:8px;color:var(--bg);font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;height:38px">'+sendBtnLabel+'</button>' +
     '</div>' +
   '</div>';
@@ -6777,23 +7088,60 @@ async function wcChatSend() {
 
   if (!msg && wcChatAttachments.length === 0) return;
   if (wcChatRunning || wcState.running) return;
+  if (inputEl) inputEl.value = '';
+
+  // Plan mode: if message starts with "/plan " or contains "plan:" keyword, ask agent for plan first
+  var planMode = msg.toLowerCase().startsWith('/plan ') || msg.toLowerCase().startsWith('piano: ');
+  if (planMode) {
+    var planMsg = msg.replace(new RegExp('^/plan[ ]*', 'i'),'').replace(new RegExp('^piano:[ ]*', 'i'),'');
+    wcChat.push({ role: 'user', text: msg });
+    renderWebCraft(document.getElementById('content'));
+    // Ask agent to produce only a plan, no edits
+    await wcExecuteAgentCall(
+      '[MODALITA PIANO] Descrivi in dettaglio cosa modificheresti per: "' + planMsg + '". ' +
+      'Elenca i file che toccheresti e cosa faresti in ciascuno. NON applicare nessuna modifica ancora. ' +
+      'Rispondi con il piano in bullet list.',
+      false, planMsg
+    );
+    return;
+  }
 
   var attachCopy = wcChatAttachments.slice();
   wcChatAttachments = [];
-  wcChatRunning = true;
   wcChat.push({ role: 'user', text: msg, attachments: attachCopy });
-  if (inputEl) inputEl.value = '';
   renderWebCraft(document.getElementById('content'));
   wcScrollChatToBottom();
 
+  // Auto-snapshot before first agent call in a session
+  if (_wcAutoFixAttempts === 0 && wcChat.filter(function(c){ return c.role==='user'; }).length === 1) {
+    wcTakeSnapshot().then(function(ts) {
+      if (ts) wcChat.push({ role: 'system', text: '&#128190; Snapshot automatico salvato (' + ts.slice(0,16).replace('T',' ') + ')' });
+      renderWebCraft(document.getElementById('content'));
+    });
+  }
+
+  await wcExecuteAgentCall(msg, false, null, attachCopy);
+}
+
+// Core agent call — separated so plan mode and normal mode share the same SSE pipeline
+async function wcExecuteAgentCall(message, isPlanExec, planOrigMsg, attachments) {
+  if (wcChatRunning) return;
+  wcChatRunning = true;
+  renderWebCraft(document.getElementById('content'));
+
+  // Track file state BEFORE edits for diff
+  var filesBefore = {};
+  wcState.generatedFiles.forEach(function(f) { filesBefore[f.name] = f.content; });
+  _wcDiffQueue = [];
+
   try {
     var r = await fetch(API + '/api/studio/webcraft/agent', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         projectName: wcState.projectName,
-        message: msg,
-        attachments: attachCopy.map(function(a){ return { name: a.name, mimeType: a.mimeType, base64: a.base64 }; })
+        message: message,
+        attachments: (attachments || []).map(function(a){ return { name: a.name, mimeType: a.mimeType, base64: a.base64 }; })
       })
     });
 
@@ -6811,6 +7159,7 @@ async function wcChatSend() {
     var reader2 = r.body.getReader();
     var dec = new TextDecoder();
     var buf = '';
+    var anyEdits = false;
     while (true) {
       var res = await reader2.read();
       if (res.done) break;
@@ -6829,16 +7178,32 @@ async function wcChatSend() {
             wcScrollChatToBottom();
           } else if (ev.type === 'tool') {
             agentMsg.tools.push({ op: ev.op, path: ev.path, result: ev.result });
-            // Update file in generatedFiles if edited/written
             if ((ev.op === 'edit' || ev.op === 'write') && ev.result === 'ok') {
-              // Reload file from server via projects/load (simplified: mark for reload)
+              anyEdits = true;
               wcChat[wcChat.length-1] = agentMsg;
               renderWebCraft(document.getElementById('content'));
             }
           } else if (ev.type === 'done') {
+            // Plan mode: detect if response is a plan (no tool edits), show approval banner
+            if (planOrigMsg && !anyEdits) {
+              _wcPlanPending = { plan: agentMsg.text, originalMessage: planOrigMsg };
+            }
             wcChatRunning = false;
-            if (ev.changed) { wcReloadProjectFiles(); }
-            // Persist chat to disk
+            if (ev.changed) {
+              // Build diffs before reloading
+              var changedFiles = (agentMsg.tools || []).filter(function(t2){ return t2.op === 'edit' || t2.op === 'write'; }).map(function(t2){ return t2.path; });
+              await wcReloadProjectFiles();
+              // Build diffs from before/after
+              changedFiles.forEach(function(fname) {
+                var after = wcState.generatedFiles.find(function(f){ return f.name === fname; });
+                if (after) _wcDiffQueue.push({ file: fname, before: filesBefore[fname] || '', after: after.content });
+              });
+              // Auto syntax-check after edits
+              if (changedFiles.some(function(f){ return f.endsWith('.js') || f.endsWith('.mjs'); })) {
+                setTimeout(wcRunSyntaxCheck, 500);
+              }
+            }
+            // Persist chat
             fetch(API + '/api/studio/webcraft/projects/chat/save', {
               method: 'POST',
               headers: {'Content-Type':'application/json'},
@@ -7033,6 +7398,218 @@ function wcAddField() {
 }
 function wcSetFile(i) { wcState.activeFile = i; renderWebCraft(document.getElementById('content')); }
 
+// ── WebCraft: Diff Viewer ─────────────────────────────────────────────────────
+function wcDiffLines(before, after) {
+  var NL = String.fromCharCode(10);
+  var bLines = (before || '').split(NL);
+  var aLines = (after  || '').split(NL);
+  var html = '';
+  var maxLen = Math.max(bLines.length, aLines.length);
+  var bi = 0, ai = 0;
+  while (bi < bLines.length || ai < aLines.length) {
+    var bL = bLines[bi], aL = aLines[ai];
+    if (bL === aL) {
+      html += '<div style="font-family:var(--mono);font-size:10px;padding:1px 8px;color:var(--dim);white-space:pre-wrap">&nbsp;' + wcEsc(bL||'') + '</div>';
+      bi++; ai++;
+    } else if (bi >= bLines.length) {
+      html += '<div style="font-family:var(--mono);font-size:10px;padding:1px 8px;background:#0a3a1a;color:#4ade80;white-space:pre-wrap">+' + wcEsc(aL||'') + '</div>';
+      ai++;
+    } else if (ai >= aLines.length) {
+      html += '<div style="font-family:var(--mono);font-size:10px;padding:1px 8px;background:#3a0a0a;color:#f87171;white-space:pre-wrap">-' + wcEsc(bL||'') + '</div>';
+      bi++;
+    } else {
+      html += '<div style="font-family:var(--mono);font-size:10px;padding:1px 8px;background:#3a0a0a;color:#f87171;white-space:pre-wrap">-' + wcEsc(bL||'') + '</div>';
+      html += '<div style="font-family:var(--mono);font-size:10px;padding:1px 8px;background:#0a3a1a;color:#4ade80;white-space:pre-wrap">+' + wcEsc(aL||'') + '</div>';
+      bi++; ai++;
+    }
+    if (bi > maxLen + 50 && ai > maxLen + 50) break; // safety
+  }
+  return html;
+}
+
+function wcDiffPanelHtml() {
+  if (_wcDiffQueue.length === 0) return '';
+  var items = _wcDiffQueue.map(function(d, di) {
+    var addedLines = (d.after||'').split(String.fromCharCode(10)).length - (d.before||'').split(String.fromCharCode(10)).length;
+    var sign = addedLines >= 0 ? '+' : '';
+    return '<details style="border:1px solid var(--border);border-radius:6px;margin-bottom:6px;background:var(--bg3)">' +
+      '<summary style="padding:7px 10px;cursor:pointer;font-size:11px;font-family:var(--mono);color:var(--text);list-style:none;display:flex;align-items:center;gap:8px">' +
+        '<span style="color:var(--green);font-size:10px">&#9650;</span>' +
+        '<span style="flex:1">' + wcEsc(d.file) + '</span>' +
+        '<span style="color:' + (addedLines >= 0 ? '#4ade80' : '#f87171') + ';font-size:10px">' + sign + addedLines + ' linee</span>' +
+      '</summary>' +
+      '<div style="max-height:200px;overflow-y:auto;border-top:1px solid var(--border)">' + wcDiffLines(d.before, d.after) + '</div>' +
+    '</details>';
+  }).join('');
+  return '<div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:8px">' +
+    '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">' +
+      '<div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px">&#128268; Diff — ' + _wcDiffQueue.length + ' file modificati</div>' +
+      '<button onclick="wcClearDiff()" style="font-size:10px;background:none;border:none;color:var(--dim);cursor:pointer">&#10005; Chiudi</button>' +
+    '</div>' +
+    items +
+  '</div>';
+}
+
+// ── WebCraft: Snapshot / Rollback ─────────────────────────────────────────────
+async function wcManualSnapshot() {
+  var ts = await wcTakeSnapshot();
+  if (ts) {
+    wcChat.push({ role: 'system', text: '&#128190; Snapshot salvato (' + ts.slice(0,16).replace('T',' ') + ')' });
+    await wcLoadSnapshots();
+    renderWebCraft(document.getElementById('content'));
+  }
+}
+
+async function wcTakeSnapshot() {
+  if (!wcState.projectName) return null;
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/snapshot', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ projectName: wcState.projectName })
+    });
+    if (r.ok) { var d = await r.json(); return d.snapshot; }
+  } catch(_) {}
+  return null;
+}
+
+async function wcLoadSnapshots() {
+  if (!wcState.projectName) return;
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/snapshots/' + encodeURIComponent(wcState.projectName));
+    if (r.ok) { var d = await r.json(); _wcSnapshots = d.snapshots || []; renderWebCraft(document.getElementById('content')); }
+  } catch(_) {}
+}
+
+async function wcRestoreSnapshot(ts) {
+  if (!confirm('Ripristinare lo snapshot del ' + ts.replace('T',' ').replace(/-/g,':').slice(0,16) + '? I file attuali verranno sovrascritti.')) return;
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/restore', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ projectName: wcState.projectName, ts: ts })
+    });
+    if (r.ok) {
+      wcChat.push({ role: 'agent', text: 'Snapshot ripristinato (' + ts + '). Ricarico i file...' });
+      await wcReloadProjectFiles();
+    }
+  } catch(_) {}
+}
+
+function wcSnapshotsPanelHtml() {
+  if (_wcSnapshots.length === 0) return '';
+  return '<div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px">' +
+    '<div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px">&#128190; Snapshot</div>' +
+    _wcSnapshots.slice(0,5).map(function(s) {
+      var label = s.ts.replace('T',' ').replace(/-/g,':').slice(0,16);
+      return '<div style="display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--border);font-size:10px">' +
+        '<span style="flex:1;color:var(--dim);font-family:var(--mono)">' + label + '</span>' +
+        '<span style="color:var(--dim)">' + s.fileCount + 'f</span>' +
+        '<button onclick="wcRestoreSnapshot(' + JSON.stringify(s.ts) + ')" style="padding:2px 8px;background:var(--bg3);border:1px solid var(--border2);border-radius:4px;color:var(--dim);font-size:10px;cursor:pointer">&#8635;</button>' +
+      '</div>';
+    }).join('') +
+  '</div>';
+}
+
+// ── WebCraft: Syntax Check ────────────────────────────────────────────────────
+async function wcRunSyntaxCheck() {
+  if (!wcState.projectName) return;
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/syntax-check', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ projectName: wcState.projectName })
+    });
+    if (r.ok) {
+      var d = await r.json();
+      _wcSyntaxResults = d.results || [];
+      var errors = _wcSyntaxResults.filter(function(x){ return !x.ok; });
+      if (errors.length > 0) {
+        wcChat.push({ role: 'system', text: '&#9888; Syntax check: ' + errors.length + ' errore/i trovato/i. Clicca "Fix" per correggere automaticamente.', syntaxErrors: errors });
+      } else {
+        wcChat.push({ role: 'system', text: '&#10003; Syntax check: tutti i file JS sono validi.' });
+      }
+      renderWebCraft(document.getElementById('content'));
+      wcScrollChatToBottom();
+    }
+  } catch(_) {}
+}
+
+// ── WebCraft: Grep / Search ───────────────────────────────────────────────────
+async function wcRunGrep() {
+  var el = document.getElementById('wcGrepInput');
+  var q = el ? el.value.trim() : _wcGrepQuery;
+  if (!q || !wcState.projectName) return;
+  _wcGrepQuery = q;
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/grep', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ projectName: wcState.projectName, query: q })
+    });
+    if (r.ok) { var d = await r.json(); _wcGrepResults = d.matches || []; renderWebCraft(document.getElementById('content')); }
+  } catch(_) {}
+}
+
+function wcGrepPanelHtml() {
+  if (!_wcGrepOpen) return '';
+  var resultsHtml = _wcGrepResults.length > 0
+    ? _wcGrepResults.map(function(m) {
+        return '<div style="padding:4px 8px;border-bottom:1px solid var(--border);cursor:pointer" onclick="wcJumpToFile(' + JSON.stringify(m.file) + ')">' +
+          '<span style="font-size:10px;color:var(--green);font-family:var(--mono)">' + wcEsc(m.file) + ':' + m.lineNum + '</span>' +
+          '<pre style="margin:2px 0 0;font-size:10px;color:var(--text);white-space:pre-wrap;overflow:hidden;max-height:30px">' + wcEsc(m.line) + '</pre>' +
+        '</div>';
+      }).join('')
+    : '<div style="font-size:11px;color:var(--dim);padding:8px">Nessun risultato.</div>';
+  return '<div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:8px">' +
+    '<div style="display:flex;gap:6px;margin-bottom:8px">' +
+      '<input id="wcGrepInput" value="'+wcEsc(_wcGrepQuery)+'" placeholder="Cerca nel codice..." onkeydown="wcGrepKeydown(event)" style="flex:1;padding:6px 10px;font-size:12px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:var(--mono)">' +
+      '<button onclick="wcRunGrep()" style="padding:6px 12px;background:var(--green3);border:none;border-radius:6px;color:var(--bg);font-size:11px;font-weight:700;cursor:pointer">&#128269;</button>' +
+      '<button onclick="wcCloseGrep()" style="padding:6px 8px;background:none;border:1px solid var(--border);border-radius:6px;color:var(--dim);cursor:pointer">&times;</button>' +
+    '</div>' +
+    (_wcGrepResults.length > 0 ? '<div style="font-size:9px;color:var(--dim);margin-bottom:4px">' + _wcGrepResults.length + ' risultati</div>' : '') +
+    '<div style="max-height:200px;overflow-y:auto">' + resultsHtml + '</div>' +
+  '</div>';
+}
+
+function wcClearDiff() { _wcDiffQueue = []; renderWebCraft(document.getElementById('content')); }
+function wcCloseGrep() { _wcGrepOpen = false; renderWebCraft(document.getElementById('content')); }
+function wcGrepKeydown(e) { if (e.key === 'Enter') wcRunGrep(); }
+
+function wcJumpToFile(fname) {
+  var idx = wcState.generatedFiles.findIndex(function(f){ return f.name === fname; });
+  if (idx >= 0) { wcState.activeFile = idx; wcRightTab = 'files'; renderWebCraft(document.getElementById('content')); }
+}
+
+function wcToggleGrep() { _wcGrepOpen = !_wcGrepOpen; renderWebCraft(document.getElementById('content')); }
+
+// ── WebCraft: Plan Mode ───────────────────────────────────────────────────────
+function wcPlanBannerHtml() {
+  if (!_wcPlanPending) return '';
+  return '<div style="background:#1a2a1a;border:1px solid var(--green3);border-radius:10px;padding:14px;margin-bottom:8px">' +
+    '<div style="font-size:11px;font-weight:700;color:var(--green);margin-bottom:8px">&#128204; Piano proposto — approva per eseguire</div>' +
+    '<pre style="font-size:11px;color:var(--text);white-space:pre-wrap;margin:0 0 10px;max-height:120px;overflow-y:auto;font-family:var(--mono)">' + wcEsc(_wcPlanPending.plan) + '</pre>' +
+    '<div style="display:flex;gap:8px">' +
+      '<button onclick="wcApprovePlan()" style="padding:7px 18px;background:var(--green3);border:none;border-radius:7px;color:var(--bg);font-size:12px;font-weight:700;cursor:pointer">&#10003; Esegui</button>' +
+      '<button onclick="wcRejectPlan()" style="padding:7px 14px;background:none;border:1px solid var(--border2);border-radius:7px;color:var(--dim);font-size:12px;cursor:pointer">&#10005; Annulla</button>' +
+    '</div>' +
+  '</div>';
+}
+
+async function wcApprovePlan() {
+  if (!_wcPlanPending) return;
+  var msg = _wcPlanPending.originalMessage;
+  _wcPlanPending = null;
+  await wcExecuteAgentCall(msg + String.fromCharCode(10) + '[Piano approvato — procedi con le modifiche]', false);
+}
+
+function wcRejectPlan() {
+  wcChat.push({ role: 'agent', text: 'Piano annullato. Dimmi se vuoi modificare la richiesta.' });
+  _wcPlanPending = null;
+  renderWebCraft(document.getElementById('content'));
+  wcScrollChatToBottom();
+}
+
 async function wcGenerate() {
   if (wcState.running) return;
   var desc = wcState.description;
@@ -7332,6 +7909,20 @@ async function wcStartSandbox() {
             wcState.sandbox.running = false;
             wcState.sandbox.error = evt.msg;
             renderWebCraft(document.getElementById('content'));
+            // Auto-fix: try to detect MODULE_NOT_FOUND in crash message and fix it
+            var errMsg = evt.msg || '';
+            var modMatch = errMsg.match(new RegExp("Cannot find module '([^']+)'")) ||
+                           errMsg.match(new RegExp('Cannot find module "([^"]+)"'));
+            if (modMatch && _wcAutoFixAttempts < 3) {
+              _wcAutoFixAttempts++;
+              wcTriggerAutoFix(modMatch[1]);
+            } else if (errMsg && !modMatch && _wcAutoFixAttempts < 3) {
+              // Generic crash: post error to chat so agent can see it
+              _wcAutoFixAttempts++;
+              wcChat.push({ role: 'system', text: '&#10060; Errore sandbox: ' + errMsg });
+              renderWebCraft(document.getElementById('content'));
+              wcScrollChatToBottom();
+            }
           }
         } catch(_) {}
       }