nothumanallowed 13.5.42 → 13.5.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.42",
+  "version": "13.5.43",
   "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

@@ -3865,6 +3865,264 @@ ${completedHeadings ? `## SECTIONS ALREADY WRITTEN (headings only):\n${completed
         return;
       }
 
+      // ── WebCraft Sandbox — fullstack preview in ~/.nha/webcraft/<project> ──
+      // POST /api/studio/webcraft/sandbox/start  { projectName, files[] }
+      //   → SSE stream with log lines, ends with { type:'ready', port, dir }
+      // DELETE /api/studio/webcraft/sandbox  → kill running sandbox process
+      if (pathname === '/api/studio/webcraft/sandbox/start' && method === 'POST') {
+        const body = await parseBody(req, 8 * 1024 * 1024); // 8MB max
+        const projName = (body.projectName || 'webcraft-sandbox').replace(/[^a-zA-Z0-9_-]/g, '-');
+        const files = body.files || [];
+        if (!files.length) { sendJSON(res, 400, { error: 'no files' }); return; }
+
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+          'Access-Control-Allow-Origin': '*',
+        });
+        const sendLog = (msg) => res.write(`data: ${JSON.stringify({ type: 'log', msg })}\n\n`);
+        const sendReady = (port, dir) => res.write(`data: ${JSON.stringify({ type: 'ready', port, dir })}\n\n`);
+        const sendError = (msg) => res.write(`data: ${JSON.stringify({ type: 'error', msg })}\n\n`);
+
+        try {
+          // Kill previous sandbox if running
+          if (global._wcSandboxProc) {
+            try { global._wcSandboxProc.kill('SIGTERM'); } catch(_) {}
+            global._wcSandboxProc = null;
+          }
+
+          const sandboxDir = path.join(os.homedir(), '.nha', 'webcraft', projName);
+          sendLog(`📁 Percorso sandbox: ${sandboxDir}`);
+          fs.mkdirSync(sandboxDir, { recursive: true });
+
+          // Write all generated files
+          sendLog(`📝 Scrittura di ${files.length} file...`);
+          for (const f of files) {
+            const filePath = path.join(sandboxDir, f.name);
+            fs.mkdirSync(path.dirname(filePath), { recursive: true });
+            fs.writeFileSync(filePath, f.content, 'utf8');
+            sendLog(`   ✓ ${f.name}`);
+          }
+
+          // Inject sandbox db shim — replaces pg with in-memory SQLite-like store
+          const dbShim = `
+// NHA WebCraft Sandbox DB Shim
+// Replaces pg.Pool with a simple in-memory store so the sandbox runs without PostgreSQL.
+// For production, delete this file and restore server/db.js to use pg.Pool.
+const crypto = require('crypto');
+const tables = {};
+function ensureTable(t) { if (!tables[t]) tables[t] = []; }
+function matchesWhere(row, where) {
+  if (!where) return true;
+  return Object.keys(where).every(k => row[k] == where[k]);
+}
+const pool = {
+  query: async function(text, params) {
+    // Parse very simple SQL patterns for auth routes
+    const t = text.trim();
+    const ins = t.match(/^INSERT INTO (\\w+)\\s*\\(([^)]+)\\)/i);
+    if (ins) {
+      const tbl = ins[1]; ensureTable(tbl);
+      const cols = ins[2].split(',').map(c=>c.trim());
+      const row = { id: crypto.randomUUID() };
+      cols.forEach((c,i)=>{ row[c] = params?params[i]:null; });
+      row.created_at = new Date().toISOString();
+      row.updated_at = new Date().toISOString();
+      tables[tbl].push(row);
+      return { rows: [row], rowCount: 1 };
+    }
+    const sel = t.match(/^SELECT (.+) FROM (\\w+)/i);
+    if (sel) {
+      const tbl = sel[2]; ensureTable(tbl);
+      const whereM = t.match(/WHERE (.+?)(?:LIMIT|ORDER|$)/i);
+      let rows = tables[tbl];
+      if (whereM && params) {
+        // Simple $1 = value matching
+        let idx = 0;
+        const conds = whereM[1].split(/AND/i).map(c=>c.trim());
+        const where = {};
+        conds.forEach(c=>{
+          const m = c.match(/(\\w+)\\s*=\\s*\\$\\d+/i);
+          if (m) { where[m[1]] = params[idx++]; }
+        });
+        rows = rows.filter(r=>matchesWhere(r,where));
+      }
+      const lim = t.match(/LIMIT (\\d+)/i);
+      if (lim) rows = rows.slice(0, parseInt(lim[1]));
+      return { rows, rowCount: rows.length };
+    }
+    const upd = t.match(/^UPDATE (\\w+) SET (.+?) WHERE/i);
+    if (upd) {
+      const tbl = upd[1]; ensureTable(tbl);
+      const whereM = t.match(/WHERE (.+?)(?:RETURNING|$)/i);
+      let updated = [];
+      tables[tbl] = tables[tbl].map(row=>{
+        let match = true;
+        if (whereM && params) {
+          const conds = whereM[1].split(/AND/i).map(c=>c.trim());
+          let idx = params.length - conds.length;
+          conds.forEach(c=>{
+            const m = c.match(/(\\w+)\\s*=\\s*\\$\\d+/i);
+            if (m && params[idx] !== undefined) match = match && (row[m[1]] == params[idx++]);
+          });
+        }
+        if (match) { row.updated_at = new Date().toISOString(); updated.push(row); }
+        return row;
+      });
+      return { rows: updated, rowCount: updated.length };
+    }
+    const del = t.match(/^DELETE FROM (\\w+)/i);
+    if (del) {
+      const tbl = del[1]; ensureTable(tbl);
+      tables[tbl] = [];
+      return { rows: [], rowCount: 0 };
+    }
+    return { rows: [], rowCount: 0 };
+  },
+  connect: async function() { return { query: pool.query, release: ()=>{} }; }
+};
+pool.query.bind(pool);
+async function query(text, params) { return pool.query(text, params); }
+async function transaction(cb) {
+  const client = await pool.connect();
+  try { const r = await cb(client); client.release(); return r; }
+  catch(e) { client.release(); throw e; }
+}
+module.exports = { pool, query, transaction };
+`;
+          fs.writeFileSync(path.join(sandboxDir, 'server', 'db.js'), dbShim, 'utf8');
+          sendLog('🔧 DB shim iniettato (in-memory, no PostgreSQL richiesto)');
+
+          // Patch package.json to remove pg, add only what's needed
+          const pkgPath = path.join(sandboxDir, 'package.json');
+          let pkg = {};
+          try { pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')); } catch(_) {}
+          if (!pkg.dependencies) pkg.dependencies = {};
+          delete pkg.dependencies.pg;
+          // Ensure essentials
+          pkg.dependencies.express = pkg.dependencies.express || '^4.19.0';
+          pkg.dependencies.bcryptjs = pkg.dependencies.bcryptjs || '^2.4.3';
+          pkg.dependencies.jsonwebtoken = pkg.dependencies.jsonwebtoken || '^9.0.0';
+          pkg.dependencies.helmet = pkg.dependencies.helmet || '^7.0.0';
+          pkg.dependencies['express-rate-limit'] = pkg.dependencies['express-rate-limit'] || '^7.0.0';
+          pkg.dependencies.cors = pkg.dependencies.cors || '^2.8.5';
+          pkg.dependencies.dotenv = pkg.dependencies.dotenv || '^16.0.0';
+          pkg.dependencies.nodemailer = pkg.dependencies.nodemailer || '^6.9.0';
+          pkg.dependencies['express-validator'] = pkg.dependencies['express-validator'] || '^7.0.0';
+          delete pkg.dependencies.ioredis;
+          pkg.scripts = pkg.scripts || {};
+          pkg.scripts.start = 'node server/index.js';
+          fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), 'utf8');
+          sendLog('📦 package.json ottimizzato per sandbox (rimosso pg, redis)');
+
+          // Create minimal .env for sandbox
+          const envContent = [
+            'PORT=0',
+            'NODE_ENV=development',
+            `JWT_SECRET=nha-sandbox-${crypto.randomBytes(16).toString('hex')}`,
+            `JWT_REFRESH_SECRET=nha-sandbox-ref-${crypto.randomBytes(16).toString('hex')}`,
+            'CORS_ORIGIN=*',
+            `BASE_URL=http://localhost`,
+            'SMTP_HOST=localhost',
+            'SMTP_PORT=25',
+            'SMTP_USER=sandbox',
+            'SMTP_PASS=sandbox',
+            'SMTP_FROM=sandbox@localhost',
+          ].join('\n');
+          fs.writeFileSync(path.join(sandboxDir, '.env'), envContent, 'utf8');
+          sendLog('⚙️  .env sandbox creato');
+
+          sendLog('');
+          sendLog('📦 Dipendenze che verranno installate:');
+          const deps = Object.keys(pkg.dependencies);
+          deps.forEach(d => sendLog(`   • ${d}@${pkg.dependencies[d]}`));
+          sendLog(`   Percorso: ${sandboxDir}/node_modules`);
+          sendLog('');
+          sendLog('⏳ npm install in corso...');
+
+          // npm install
+          await new Promise((resolve, reject) => {
+            const npm = exec(`npm install --prefer-offline 2>&1`, { cwd: sandboxDir, timeout: 120000 }, (err, stdout) => {
+              if (err) { sendLog('❌ npm install fallito: ' + err.message); reject(err); }
+              else { resolve(); }
+            });
+            npm.stdout && npm.stdout.on('data', d => { const line = d.toString().trim(); if (line) sendLog('  ' + line); });
+          });
+          sendLog('✅ npm install completato');
+
+          // Find free port
+          const freePort = await new Promise(resolve => {
+            const srv = (await import('net')).default.createServer();
+            srv.listen(0, '127.0.0.1', () => { const p = srv.address().port; srv.close(() => resolve(p)); });
+          });
+
+          // Patch PORT in .env
+          fs.writeFileSync(path.join(sandboxDir, '.env'), envContent.replace('PORT=0', `PORT=${freePort}`), 'utf8');
+
+          sendLog(`🚀 Avvio server sandbox su porta ${freePort}...`);
+
+          // Spawn sandbox server
+          const { spawn } = await import('child_process');
+          const proc = spawn('node', ['server/index.js'], {
+            cwd: sandboxDir,
+            env: { ...process.env, PORT: String(freePort), NODE_ENV: 'development' },
+            stdio: ['ignore', 'pipe', 'pipe'],
+          });
+          global._wcSandboxProc = proc;
+          global._wcSandboxPort = freePort;
+          global._wcSandboxDir = sandboxDir;
+
+          proc.stdout.on('data', d => { const l = d.toString().trim(); if (l) sendLog('  [server] ' + l); });
+          proc.stderr.on('data', d => { const l = d.toString().trim(); if (l) sendLog('  [server] ' + l); });
+
+          // Wait for server to be ready (max 10s)
+          await new Promise((resolve, reject) => {
+            let attempts = 0;
+            const tryConnect = () => {
+              import('net').then(({ default: net }) => {
+                const s = net.createConnection(freePort, '127.0.0.1');
+                s.on('connect', () => { s.destroy(); resolve(); });
+                s.on('error', () => {
+                  s.destroy();
+                  if (++attempts > 20) reject(new Error('Server non risponde dopo 10s'));
+                  else setTimeout(tryConnect, 500);
+                });
+              });
+            };
+            setTimeout(tryConnect, 1000);
+          });
+
+          sendLog(`✅ Sandbox pronta!`);
+          sendReady(freePort, sandboxDir);
+        } catch (e) {
+          sendError(e.message);
+        }
+        res.end();
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      if (pathname === '/api/studio/webcraft/sandbox' && method === 'DELETE') {
+        if (global._wcSandboxProc) {
+          try { global._wcSandboxProc.kill('SIGTERM'); } catch(_) {}
+          global._wcSandboxProc = null;
+        }
+        sendJSON(res, 200, { ok: true });
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
+      if (pathname === '/api/studio/webcraft/sandbox/status' && method === 'GET') {
+        sendJSON(res, 200, {
+          running: !!global._wcSandboxProc,
+          port: global._wcSandboxPort || null,
+          dir: global._wcSandboxDir || null,
+        });
+        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.42';
+export const VERSION = '13.5.43';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -3148,6 +3148,7 @@ var I18N = {
     wc_download:'Download Archive', wc_describe_first:'Please describe your project first.',
     wc_no_files:'Describe your project and click Generate',
     wc_examples_label:'Examples',
+    wc_sandbox_start:'Launch Sandbox',
   },
   it: {
     chat:'Chat', studio:'Studio', settings:'Impostazioni', agents:'Agenti',
@@ -3184,6 +3185,7 @@ var I18N = {
     wc_download:'Scarica archivio', wc_describe_first:'Descrivi prima il tuo progetto.',
     wc_no_files:'Descrivi il progetto e clicca Genera',
     wc_examples_label:'Esempi',
+    wc_sandbox_start:'Avvia Sandbox',
   },
   es: {
     chat:'Chat', studio:'Studio', settings:'Configuración', agents:'Agentes',
@@ -3219,6 +3221,7 @@ var I18N = {
     wc_download:'Descargar archivo', wc_describe_first:'Por favor describe tu proyecto primero.',
     wc_no_files:'Describe el proyecto y haz clic en Generar',
     wc_examples_label:'Ejemplos',
+    wc_sandbox_start:'Iniciar Sandbox',
   },
   fr: {
     chat:'Chat', studio:'Studio', settings:'Paramètres', agents:'Agents',
@@ -3254,6 +3257,7 @@ var I18N = {
     wc_download:'T\u00e9l\u00e9charger archive', wc_describe_first:'Veuillez d\u00e9crire votre projet.',
     wc_no_files:'D\u00e9crivez le projet et cliquez sur G\u00e9n\u00e9rer',
     wc_examples_label:'Exemples',
+    wc_sandbox_start:'Lancer Sandbox',
   },
   de: {
     chat:'Chat', studio:'Studio', settings:'Einstellungen', agents:'Agenten',
@@ -3289,6 +3293,7 @@ var I18N = {
     wc_download:'Archiv herunterladen', wc_describe_first:'Bitte beschreibe zuerst dein Projekt.',
     wc_no_files:'Beschreibe das Projekt und klicke auf Generieren',
     wc_examples_label:'Beispiele',
+    wc_sandbox_start:'Sandbox starten',
   },
 };
 // Fallback to 'en' for unmapped languages
@@ -6212,8 +6217,17 @@ var wcState = {
   generatedFiles: [],   // [{name, content, lang}]
   activeFile: 0,
   running: false,
-  projectName: ''
+  projectName: '',
+  rightTab: 'files',    // 'files' | 'preview'
+  sandbox: {
+    running: false,
+    port: null,
+    dir: null,
+    logs: [],
+    error: null
+  }
 };
+var wcRightTab = 'files';
 
 function wcEsc(s){return s?String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'):''}
 
@@ -6312,14 +6326,20 @@ function renderWebCraft(el) {
           '</button>' +
 
           (wcState.generatedFiles.length > 0 ?
-            '<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>' : '') +
+            '<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>' +
+            '<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>' +
 
-        // RIGHT: file viewer
+        // RIGHT: tabs — Files | Preview
         '<div style="flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;height:calc(100vh - 120px);overflow:hidden">' +
-          fileTabsHtml +
-          codeHtml +
+          // Tab bar — use named functions to avoid quoting issues
+          '<div style="display:flex;border-bottom:1px solid var(--border);flex-shrink:0">' +
+            '<button onclick="wcTabFiles()" style="padding:8px 16px;background:'+(wcRightTab==='preview'?'transparent':'var(--bg3)')+';border:none;border-right:1px solid var(--border);color:'+(wcRightTab==='preview'?'var(--dim)':'var(--text)')+';font-size:11px;font-weight:600;cursor:pointer">&#128196; File</button>' +
+            '<button onclick="wcTabPreview()" style="padding:8px 16px;background:'+(wcRightTab==='preview'?'var(--bg3)':'transparent')+';border:none;color:'+(wcRightTab==='preview'?'var(--text)':'var(--dim)')+';font-size:11px;font-weight:600;cursor:pointer">&#127760; Sandbox</button>' +
+          '</div>' +
+          (wcRightTab === 'preview' ? wcSandboxPanelHtml() : (fileTabsHtml + codeHtml)) +
         '</div>' +
 
       '</div>' +
@@ -6341,6 +6361,9 @@ function wcPickExample(i) {
   wcState.description = ex.desc;
   renderWebCraft(document.getElementById('content'));
 }
+function wcTabFiles() { wcRightTab = 'files'; renderWebCraft(document.getElementById('content')); }
+function wcTabPreview() { wcRightTab = 'preview'; renderWebCraft(document.getElementById('content')); }
+function wcOpenSandbox() { if (wcState.sandbox.port) window.open('http://127.0.0.1:' + wcState.sandbox.port, '_blank'); }
 function wcUpdateField(i, val) { wcState.authFields[i].label = val; }
 function wcUpdateFieldType(i, t) { wcState.authFields[i].type = t; }
 function wcToggleRequired(i, v) { wcState.authFields[i].required = v; }
@@ -6402,6 +6425,7 @@ async function wcGenerate() {
     { name: 'server/middleware/sentinel.js', lang: 'javascript', prompt: 'Generate server/middleware/sentinel.js: a lightweight WAF middleware for Express. Check request for: SQL injection patterns (UNION SELECT, DROP TABLE, etc.), XSS patterns (<script, javascript:, onerror=), path traversal (../), oversized payloads (>100KB body). Rate limit by IP using an in-memory sliding window (fallback when Redis unavailable). Log blocked requests with IP, method, path, reason to stderr. Export sentinelMiddleware(req, res, next).' },
     { name: 'server/services/cache.js',     lang: 'javascript', prompt: 'Generate server/services/cache.js: Redis/Dragonfly client using ioredis. Connect to REDIS_URL from env. Export: get(key), set(key, value, ttlSeconds), del(key), exists(key). Add circuit breaker pattern: if Redis fails 3+ times in 30s, switch to in-memory LRU fallback (Map with max 1000 entries, LRU eviction). Reconnect Redis in background every 60s. Log circuit state changes. This makes the app resilient when Redis is down.' },
     { name: 'README.md',              lang: 'markdown',   prompt: 'Generate README.md for "'+projName+'": project description, tech stack (Express, PostgreSQL with circuit breaker, Redis/Dragonfly with LRU fallback, JWT auth, Nodemailer SMTP + SendGrid fallback, Sentinel WAF, BEM CSS), folder structure, setup instructions (clone, npm install, copy .env.example to .env, run migrations with psql, optional: start Redis/Dragonfly, npm run dev), environment variables table (including REDIS_URL), API endpoints table, security notes, email configuration guide.' },
+    { name: 'nginx.conf',             lang: 'nginx',      prompt: 'Generate a production-ready nginx.conf for "'+projName+'" running as an Express app on localhost:3000. Include: HTTPS with TLS 1.2/1.3 only, strong cipher suites, HSTS (max-age=31536000; includeSubDomains; preload), X-Frame-Options DENY, X-Content-Type-Options nosniff, Referrer-Policy strict-origin-when-cross-origin, Permissions-Policy (geolocation=(), microphone=(), camera=()), Content-Security-Policy (default-src self, script-src self, style-src self unsafe-inline, img-src self data:, connect-src self, frame-src none, object-src none), rate limiting (limit_req_zone 10r/s burst 20), gzip compression, proxy_pass to http://127.0.0.1:3000 with correct headers (X-Real-IP, X-Forwarded-For, X-Forwarded-Proto), static files served directly from public/ with long cache headers, Certbot/ACME path. Use server_name example.com with a TODO comment. Security rating: A+ on securityheaders.com.' },
   ];
 
   // Filter by selected blocks
@@ -6455,6 +6479,116 @@ async function wcCallLLM(sys, user) {
   return (d && (d.text || d.content || d.result)) || '';
 }
 
+function wcSandboxPanelHtml() {
+  var sb = wcState.sandbox;
+  if (!wcState.generatedFiles.length) {
+    return '<div style="display:flex;align-items:center;justify-content:center;flex:1;color:var(--dim);font-size:13px">Genera prima il progetto</div>';
+  }
+  var logsHtml = sb.logs.length
+    ? '<div id="wcSbLogs" style="flex:1;overflow-y:auto;padding:10px 14px;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--dim)">' +
+        sb.logs.map(function(l){ return '<div>'+wcEsc(l)+'</div>'; }).join('') +
+      '</div>'
+    : '<div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px">Premi "Avvia Sandbox" per avviare il server locale</div>';
+
+  if (sb.port && !sb.running) {
+    // Server ready — show iframe
+    return '<div style="display:flex;flex-direction:column;flex:1;min-height:0">' +
+      '<div style="display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0">' +
+        '<span style="font-size:11px;color:var(--dim);font-family:var(--mono)">http://127.0.0.1:'+sb.port+'</span>' +
+        '<span style="font-size:10px;color:var(--dim)">&#8212; ' + wcEsc(sb.dir || '') + '</span>' +
+        '<button onclick="wcStopSandbox()" style="margin-left:auto;padding:3px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;color:var(--red);font-size:11px;cursor:pointer">&#9632; Ferma</button>' +
+        '<button onclick="wcOpenSandbox()" style="padding:3px 10px;background:var(--green3);border:none;border-radius:5px;color:var(--bg);font-size:11px;cursor:pointer;font-weight:700">&#8599; Apri</button>' +
+      '</div>' +
+      '<iframe src="http://127.0.0.1:'+sb.port+'" style="flex:1;border:none;width:100%;background:#fff" sandbox="allow-scripts allow-forms allow-same-origin allow-popups"></iframe>' +
+    '</div>';
+  }
+
+  return '<div style="display:flex;flex-direction:column;flex:1;min-height:0">' +
+    // Info bar
+    (!sb.running && !sb.port ? '<div style="padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;font-size:11px;color:var(--dim);line-height:1.6">' +
+      '<div style="font-weight:700;color:var(--text);margin-bottom:4px">Sandbox locale — cosa succede quando avvii:</div>' +
+      '<div>&#8226; I file vengono scritti in <span style="font-family:var(--mono);color:var(--green)">~/.nha/webcraft/'+(wcState.projectName||'project')+'</span></div>' +
+      '<div>&#8226; npm install delle dipendenze nella stessa cartella (nessuna installazione globale)</div>' +
+      '<div>&#8226; Il server Express parte su una porta locale casuale (es. 45123)</div>' +
+      '<div>&#8226; Il DB usa un in-memory store (nessun PostgreSQL richiesto)</div>' +
+      '<div>&#8226; I dati sandbox sono temporanei e si azzerano al riavvio</div>' +
+      '<div style="margin-top:6px;color:var(--amber)">&#9888; Sandbox solo locale — nessun dato esce dal tuo Mac</div>' +
+    '</div>' : '') +
+    logsHtml +
+    (sb.error ? '<div style="padding:8px 14px;color:var(--red);font-size:11px;font-family:var(--mono);flex-shrink:0">&#10060; '+wcEsc(sb.error)+'</div>' : '') +
+  '</div>';
+}
+
+async function wcStartSandbox() {
+  if (wcState.sandbox.running) return;
+  wcState.sandbox = { running: true, port: null, dir: null, logs: [], error: null };
+  wcState.rightTab = 'preview';
+  wcRightTab = 'preview';
+  renderWebCraft(document.getElementById('content'));
+
+  try {
+    var r = await fetch(API + '/api/studio/webcraft/sandbox/start', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({
+        projectName: wcState.projectName || 'webcraft-sandbox',
+        files: wcState.generatedFiles
+      })
+    });
+    if (!r.ok || !r.body) throw new Error('Sandbox error ' + r.status);
+    var reader = r.body.getReader();
+    var dec = new TextDecoder();
+    var buf = '';
+    while (true) {
+      var chunk = await reader.read();
+      if (chunk.done) break;
+      buf += dec.decode(chunk.value, {stream: true});
+      var _dbl = String.fromCharCode(10)+String.fromCharCode(10);
+      var parts = buf.split(_dbl);
+      buf = parts.pop();
+      for (var i = 0; i < parts.length; i++) {
+        var line = parts[i].trim();
+        if (!line.startsWith('data:')) continue;
+        try {
+          var evt = JSON.parse(line.slice(5).trim());
+          if (evt.type === 'log') {
+            wcState.sandbox.logs.push(evt.msg);
+            // Live update logs only (avoid full re-render on every line)
+            var logsEl = document.getElementById('wcSbLogs');
+            if (logsEl) {
+              var d = document.createElement('div');
+              d.textContent = evt.msg;
+              logsEl.appendChild(d);
+              logsEl.scrollTop = logsEl.scrollHeight;
+            } else {
+              renderWebCraft(document.getElementById('content'));
+            }
+          } else if (evt.type === 'ready') {
+            wcState.sandbox.running = false;
+            wcState.sandbox.port = evt.port;
+            wcState.sandbox.dir = evt.dir;
+            renderWebCraft(document.getElementById('content'));
+          } else if (evt.type === 'error') {
+            wcState.sandbox.running = false;
+            wcState.sandbox.error = evt.msg;
+            renderWebCraft(document.getElementById('content'));
+          }
+        } catch(_) {}
+      }
+    }
+  } catch(e) {
+    wcState.sandbox.running = false;
+    wcState.sandbox.error = e.message;
+    renderWebCraft(document.getElementById('content'));
+  }
+}
+
+async function wcStopSandbox() {
+  await fetch(API + '/api/studio/webcraft/sandbox', {method:'DELETE'});
+  wcState.sandbox = { running: false, port: null, dir: null, logs: [], error: null };
+  renderWebCraft(document.getElementById('content'));
+}
+
 function wcDownloadZip() {
   if (!wcState.generatedFiles.length) return;
   // Build a real ZIP file (PKZIP format, stored/no compression) — zero dependencies