@mahe_pkm/buzl-html-editor 0.1.0 → 0.2.1

package/dist/server.js

@@ -1,41 +1,54 @@
-require('dotenv').config({ path: process.env.BUZL_ENV_FILE || require('path').join(process.cwd(), '.env') });
-
-const express = require('express');
-const path = require('path');
-const fs = require('fs');
-const crypto = require('crypto');
-const cheerio = require('cheerio');
-const multer = require('multer');
-const Anthropic = require('@anthropic-ai/sdk');
-const { compressImage } = require('./imageOptimizer');
-
+require('dotenv').config({ path: process.env.BUZL_ENV_FILE || require('path').join(process.cwd(), '.env') });
+
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const crypto = require('crypto');
+const cheerio = require('cheerio');
+const multer = require('multer');
+const Anthropic = require('@anthropic-ai/sdk');
+const { compressImage } = require('./imageOptimizer');
+
 const app = express();
 const PORT = process.env.PORT || 4000;
 const HOST = process.env.HOST || '127.0.0.1';
-
-// Log all incoming requests to help debug asset loading issues
-app.use((req, res, next) => {
-  console.log(`[${new Date().toISOString().split('T')[1].slice(0, 8)}] 📥 ${req.method} ${req.url}`);
-  next();
-});
-
-// ─── PATHS ──────────────────────────────────────────────────────────────────
-// Package code and client website files live in separate locations.
-const ADMIN_DIR = path.join(__dirname, 'public');
-const SITE_ROOT = path.resolve(process.env.BUZL_SITE_ROOT || process.cwd());
-
-// ─── EVENT HANDLER PRESERVATION ─────────────────────────────────────────────
-// GrapeJS strips inline event handlers on getHtml(). We convert them to
-// data-ht-* attributes on load and back on save.
-const EVENT_ATTRS = ['onclick', 'onsubmit', 'onchange', 'oninput', 'onkeydown', 'onkeyup', 'onmouseover', 'onmouseout', 'onfocus', 'onblur', 'onscroll'];
-
-// Increase payload limit for saving full HTML pages (GrapeJS can produce
-// very large payloads when pages contain embedded base64 images/assets)
-app.use(express.json({ limit: '50mb' }));
-app.use(express.urlencoded({ extended: true, limit: '50mb' }));
-
-// ─── ADMIN ROUTES (must come before static serving) ─────────────────────────
-
+
+// Log all incoming requests to help debug asset loading issues
+app.use((req, res, next) => {
+  console.log(`[${new Date().toISOString().split('T')[1].slice(0, 8)}] 📥 ${req.method} ${req.url}`);
+  next();
+});
+
+// ─── PATHS ──────────────────────────────────────────────────────────────────
+// Package code and client website files live in separate locations.
+const ADMIN_DIR = path.join(__dirname, 'public');
+const SITE_ROOT = path.resolve(process.env.BUZL_SITE_ROOT || process.cwd());
+
+const PUBLIC_LIVE_EDIT_ENABLED = new Set(['127.0.0.1', 'localhost', '::1'])
+  .has(String(HOST).toLowerCase());
+const PUBLIC_EDIT_SELECTOR = [
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'li', 'a', 'button', 'summary',
+  'figcaption', 'blockquote', 'cite', 'label', 'small', 'strong', 'em',
+].join(',');
+const PUBLIC_EDIT_SESSION_TTL_MS = 2 * 60 * 60 * 1000;
+const publicEditSessions = new Map();
+const EDITABLE_EXCLUDED_DIRS = new Set([
+  'admin', 'admin1', 'new', 'node_modules', 'npm-package', '.buzl', '.backups',
+  '.git', 'tests', 'coverage', 'rollback_backups',
+]);
+
+// ─── EVENT HANDLER PRESERVATION ─────────────────────────────────────────────
+// GrapeJS strips inline event handlers on getHtml(). We convert them to
+// data-ht-* attributes on load and back on save.
+const EVENT_ATTRS = ['onclick', 'onsubmit', 'onchange', 'oninput', 'onkeydown', 'onkeyup', 'onmouseover', 'onmouseout', 'onfocus', 'onblur', 'onscroll'];
+
+// Increase payload limit for saving full HTML pages (GrapeJS can produce
+// very large payloads when pages contain embedded base64 images/assets)
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+
+// ─── ADMIN ROUTES (must come before static serving) ─────────────────────────
+
 // Serve only the editor entry page from the admin source directory. Generated
 // images have their own explicit route below; server source, package files and
 // local configuration must never be downloadable through /admin.
@@ -52,994 +65,1253 @@ app.use('/admin', (req, res, next) => {
   }
   return res.status(404).send('Not Found');
 });
-
-// Resolve public site assets when the editor canvas requests them through
-// the admin namespace.
-app.use('/admin/assets', express.static(path.join(SITE_ROOT, 'assets')));
-
-// ─── IMAGE UPLOAD (multer) ─────────────────────────────────────────────────
-// Saves uploaded images to assets/images/ with their original filename,
-// sanitised for the web and deduped with a short suffix if needed.
-
-const IMAGES_DIR = path.join(SITE_ROOT, 'assets', 'images');
-if (!fs.existsSync(IMAGES_DIR)) fs.mkdirSync(IMAGES_DIR, { recursive: true });
-const ALLOWED_IMAGE_EXTENSIONS = new Set([
-  '.png', '.jpg', '.jpeg', '.webp', '.gif', '.avif', '.tif', '.tiff', '.svg',
-]);
-
-const upload = multer({
-  storage: multer.diskStorage({
-    destination: (req, file, cb) => cb(null, IMAGES_DIR),
-    filename: (req, file, cb) => {
-      // Sanitise: lowercase, replace spaces/special chars with hyphens, keep extension
-      const ext = path.extname(file.originalname).toLowerCase();
-      let base = path.basename(file.originalname, path.extname(file.originalname))
-        .toLowerCase()
-        .replace(/[^a-z0-9_-]/g, '-')   // only safe chars
-        .replace(/-+/g, '-')             // collapse multiple hyphens
-        .replace(/^-|-$/g, '');          // trim leading/trailing hyphens
-
-      if (!base) base = 'image';
-
-      let filename = base + ext;
-      // Dedupe: append short hash if file already exists with different content
-      if (fs.existsSync(path.join(IMAGES_DIR, filename))) {
-        const hash = crypto.createHash('md5').update(Date.now().toString()).digest('hex').slice(0, 6);
-        filename = `${base}-${hash}${ext}`;
-      }
-      cb(null, filename);
-    },
-  }),
-  limits: {
-    fileSize: 20 * 1024 * 1024, // 20 MB per file
-    files: 10,
-  },
-  fileFilter: (req, file, cb) => {
-    const ext = path.extname(file.originalname).toLowerCase();
-    if (file.mimetype.startsWith('image/') && ALLOWED_IMAGE_EXTENSIONS.has(ext)) {
-      cb(null, true);
-    } else {
-      cb(new Error('Only supported image files are allowed'));
-    }
-  },
-});
-
-// GrapeJS posts files under the field name "files" (its default uploadName),
-// but the exact field name can vary between GrapeJS versions. Using upload.any()
-// ensures compatibility with any field name and both multer v1 and v2.
-app.post('/api/upload', upload.any(), async (req, res) => {
-  try {
-    const urls = [];
-
-    for (const file of req.files || []) {
-      const ext = path.extname(file.filename).toLowerCase();
-
-      // Keep vector images as SVG; normalize all raster formats to AVIF.
-      if (ext === '.svg') {
-        const svg = fs.readFileSync(file.path, 'utf8');
-        const unsafeSvg = !/<svg(?:\s|>)/i.test(svg)
-          || /<script(?:\s|>)/i.test(svg)
-          || /<foreignObject(?:\s|>)/i.test(svg)
-          || /\son[a-z]+\s*=/i.test(svg)
-          || /javascript\s*:/i.test(svg);
-        if (unsafeSvg) {
-          fs.unlinkSync(file.path);
-          throw new Error('Unsafe SVG content was rejected');
-        }
-        urls.push(`/assets/images/${file.filename}`);
-        continue;
-      }
-
-      const baseName = path.basename(file.filename, ext);
-      const contentHash = crypto.createHash('sha256')
-        .update(fs.readFileSync(file.path))
-        .digest('hex')
-        .slice(0, 8);
-      const outputStem = path.join(IMAGES_DIR, `${baseName}-${contentHash}`);
-      const existingOutput = `${outputStem}.avif`;
-      const optimized = fs.existsSync(existingOutput)
-        ? { path: existingOutput, size: fs.statSync(existingOutput).size }
-        : await compressImage(file.path, outputStem);
-
-      if (file.path !== optimized.path && fs.existsSync(file.path)) {
-        fs.unlinkSync(file.path);
-      }
-
-      urls.push(`/assets/images/${path.basename(optimized.path)}`);
-    }
-
-    console.log(`  📤  Uploaded and optimized ${urls.length} image(s): ${urls.join(', ')}`);
-    res.json({ data: urls });
-  } catch (err) {
-    for (const file of req.files || []) {
-      if (file.path && fs.existsSync(file.path)) {
-        try { fs.unlinkSync(file.path); } catch {}
-      }
-    }
-    console.error('  ❌  Upload error:', err);
-    res.status(500).json({ error: 'Upload failed', details: err.message });
-  }
-});
-
-// ─── API: AI Text Generation (chat completion via Anthropic) ────────────────
-// Forwards chat-completion requests to Anthropic Claude API.
-// Model is configurable via ANTHROPIC_MODEL env var.
-
-const AI_MODEL = process.env.ANTHROPIC_MODEL || 'claude-sonnet-4-6';
-const AI_MAX_TOKENS = parseInt(process.env.ANTHROPIC_MAX_TOKENS || '1024', 10);
-
-// Load website context from JSON (cached at startup)
-const WEBSITE_CONTEXT_PATH = process.env.BUZL_CONTEXT_FILE || path.join(SITE_ROOT, 'website_context.json');
-let siteConfig = {};
-try {
-  siteConfig = JSON.parse(fs.readFileSync(WEBSITE_CONTEXT_PATH, 'utf8'));
-} catch (err) {
-  console.warn('  ⚠️  Could not load website_context.json:', err.message);
-}
-
-// Generate system prompt from site config
-function buildSystemPrompt() {
-  const { businessCategory, purpose, name, address, tone_and_style } = siteConfig;
-  if (!businessCategory) return '';
-  return `You are a copywriting assistant for a ${businessCategory} ${purpose || 'website'} (${name || ''}, ${address || ''}). Generate concise, compelling ${purpose || 'website'} text. Return ONLY the text content — no markdown formatting, no quotes, no explanation. Match the tone and style of ${tone_and_style || 'professional copywriting'}.`;
-}
-
-app.post('/api/ai/generate-text', async (req, res) => {
-  const apiKey = process.env.ANTHROPIC_API_KEY;
-  if (!apiKey || apiKey === 'your-anthropic-api-key-here') {
-    return res.status(500).json({
-      error: 'ANTHROPIC_API_KEY not configured',
-      details: 'Please set a valid ANTHROPIC_API_KEY in .env in the website root',
-    });
-  }
-
-  const { messages, model, max_tokens, generation_context } = req.body;
-
-  if (!messages || !Array.isArray(messages) || messages.length === 0) {
-    return res.status(400).json({
-      error: 'Missing or invalid "messages" array in request body',
-    });
-  }
-
-  try {
-    const client = new Anthropic({ apiKey });
-
-    // ── Build the final messages array ──────────────────────────────────
-    // Order: [0] website context (cached), [1] generation_context, [2..] user messages
-    // Anthropic requires alternating user/assistant roles, so we insert
-    // assistant placeholders between consecutive user messages.
-
-    const finalMessages = [];
-
-    // [0] Website context with prompt caching
-    if (siteConfig.context) {
-      finalMessages.push({
-        role: 'user',
-        content: [
-          {
-            type: 'text',
-            text: `context:\n${siteConfig.context}`,
-            cache_control: { type: 'ephemeral' },
-          },
-        ],
-      });
-    }
-
-    // [1] generation_context from frontend (e.g. "Hero section title")
-    if (generation_context) {
-      // Need assistant placeholder to avoid consecutive user messages
-      finalMessages.push({ role: 'assistant', content: 'Understood. I have the website context.' });
-      finalMessages.push({
-        role: 'user',
-        content: `generation_context: ${generation_context}`,
-      });
-    }
-
-    // [2..] User messages from the frontend
-    for (const msg of messages) {
-      // Insert assistant placeholder if last message is also user role
-      if (finalMessages.length > 0 && finalMessages[finalMessages.length - 1].role === msg.role) {
-        finalMessages.push({ role: 'assistant', content: 'Understood.' });
-      }
-      finalMessages.push(msg);
-    }
-
-    const params = {
-      model: model || AI_MODEL,
-      max_tokens: max_tokens || AI_MAX_TOKENS,
-      messages: finalMessages,
-    };
-
-    // System prompt generated from website_context.json
-    const systemPrompt = buildSystemPrompt();
-    if (systemPrompt) {
-      params.system = systemPrompt;
-    }
-
-    console.log(`  🤖  AI generate-text → model: ${params.model}, messages: ${finalMessages.length}`);
-    console.log(`  📋  AI payload:`, JSON.stringify(params, null, 2));
-
-    const response = await client.messages.create(params);
-
-    // Extract text content from the response
-    const textContent = response.content
-      .filter(block => block.type === 'text')
-      .map(block => block.text)
-      .join('\n');
-
-    res.json({
-      text: textContent,
-      model: response.model,
-      usage: response.usage,
-      stop_reason: response.stop_reason,
-    });
-
-  } catch (err) {
-    console.error('  ❌  AI generation error:', err.message);
-    const status = err.status || 500;
-    res.status(status).json({
-      error: 'AI text generation failed',
-      details: err.message,
-    });
-  }
-});
-
-// ─── API: AI Image Generation (via OpenRouter) ─────────────────────────────
-
-const { createImageGenerator } = require('./imageService');
-
-// Ensure generated images directory exists
-const GENERATED_IMAGES_DIR = path.join(SITE_ROOT, '.buzl', 'generated', 'images');
-if (!fs.existsSync(GENERATED_IMAGES_DIR)) {
-  fs.mkdirSync(GENERATED_IMAGES_DIR, { recursive: true });
-}
-
-// Lazy-init the image generator (only when first request comes in)
-let imageGenerator = null;
-function getImageGenerator() {
-  if (!imageGenerator) {
-    imageGenerator = createImageGenerator();
-  }
-  return imageGenerator;
-}
-
-// Serve generated images statically
-app.use('/admin/generated', express.static(path.join(SITE_ROOT, '.buzl', 'generated')));
-
-// ─── API: AI Image Generation – Session-based Chat Threads ─────────────────
-// In-memory session store: sessionId → { generationContext, thread[], abortController? }
-const imageSessions = new Map();
-
-/**
- * Create a new image generation session.
- * POST /api/ai/image-session
- * Body: { generation_context?: string }
- * Returns: { sessionId }
- */
-app.post('/api/ai/image-session', (req, res) => {
-  const sessionId = crypto.randomUUID();
-  const { generation_context } = req.body || {};
-  imageSessions.set(sessionId, {
-    generationContext: generation_context || '',
-    thread: [],
-    abortController: null,
-  });
-  console.log(`  🆕  Image session created: ${sessionId}`);
-  res.json({ sessionId });
-});
-
-/**
- * Get session thread.
- * GET /api/ai/image-session/:id
- * Returns: { sessionId, generationContext, thread }
- */
-app.get('/api/ai/image-session/:id', (req, res) => {
-  const session = imageSessions.get(req.params.id);
-  if (!session) return res.status(404).json({ error: 'Session not found' });
-  res.json({
-    sessionId: req.params.id,
-    generationContext: session.generationContext,
-    thread: session.thread,
-  });
-});
-
-/**
- * Generate image within a session (appends to thread).
- * POST /api/ai/image-session/:id/generate
- * Body: { prompt }
- * Returns: { url, model, thread }
- */
-app.post('/api/ai/image-session/:id/generate', async (req, res) => {
-  const session = imageSessions.get(req.params.id);
-  if (!session) return res.status(404).json({ error: 'Session not found' });
-
-  const { prompt } = req.body;
-  if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
-    return res.status(400).json({ error: 'Missing or invalid "prompt" in request body' });
-  }
-
-  // Append user message to thread
-  session.thread.push({ role: 'user', text: prompt.trim(), timestamp: Date.now() });
-
-  try {
-    const gen = getImageGenerator();
-
-    // Create AbortController for this request
-    const abortController = new AbortController();
-    session.abortController = abortController;
-
-    // Build enriched prompt including full conversation history
-    const enrichedPrompt = buildSessionImagePrompt(prompt.trim(), session);
-
-    console.log(`  🖼️  AI session-generate → session: ${req.params.id}, prompt: ${prompt.substring(0, 100)}`);
-
-    const result = await gen.generate(enrichedPrompt, abortController.signal);
-    session.abortController = null;
-
-    // Save AI output as an optimized AVIF.
-    const hash = crypto.createHash('md5').update(result.imageBase64.slice(0, 2048)).digest('hex').slice(0, 10);
-    const baseName = `gen-${hash}-${Date.now()}`;
-    const outputStem = path.join(GENERATED_IMAGES_DIR, baseName);
-    const buffer = Buffer.from(result.imageBase64, 'base64');
-    const optimized = await compressImage(buffer, outputStem);
-
-    const imageUrl = `/admin/generated/images/${path.basename(optimized.path)}`;
-    console.log(`  💾  AI session image saved → ${imageUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
-
-    // Append assistant message to thread
-    session.thread.push({
-      role: 'assistant',
-      url: imageUrl,
-      model: result.model,
-      size: optimized.size,
-      timestamp: Date.now(),
-    });
-
-    res.json({
-      url: imageUrl,
-      model: result.model,
-      size: optimized.size,
-      thread: session.thread,
-    });
-
-  } catch (err) {
-    session.abortController = null;
-    if (err.message === 'Request cancelled') {
-      return res.status(499).json({ error: 'Image generation cancelled', thread: session.thread });
-    }
-    console.error(`  ❌  AI session image error: ${err.message}`);
-    // Record error in thread so user can see it
-    session.thread.push({
-      role: 'error',
-      text: err.message,
-      timestamp: Date.now(),
-    });
-    res.status(500).json({
-      error: 'AI image generation failed',
-      details: err.message,
-      thread: session.thread,
-    });
-  }
-});
-
-/**
- * Cancel in-flight generation for a session.
- * POST /api/ai/image-session/:id/cancel
- */
-app.post('/api/ai/image-session/:id/cancel', (req, res) => {
-  const session = imageSessions.get(req.params.id);
-  if (session && session.abortController) {
-    session.abortController.abort();
-    session.abortController = null;
-    console.log(`  🛑  Image session cancelled: ${req.params.id}`);
-  }
-  res.json({ cancelled: true });
-});
-
-/**
- * Delete a session.
- * DELETE /api/ai/image-session/:id
- */
-app.delete('/api/ai/image-session/:id', (req, res) => {
-  imageSessions.delete(req.params.id);
-  res.json({ deleted: true });
-});
-
-/**
- * Build an enriched image prompt that includes the full conversation history.
- * This gives the model context about what was previously requested and generated.
- */
-// Standard negative prompts to avoid common generation artefacts
-const NEGATIVE_PROMPT = [
-  'Do NOT generate multiple images, collages, split views, side-by-side comparisons, before/after, tiled images, or image grids.',
-  'Do NOT render in 3D, CGI, or unrealistic plastic-looking style.',
-  'Do NOT add text, watermarks, labels, borders, or frames to the image.',
-  'Generate exactly ONE single cohesive photographic image.',
-].join(' ');
-
-function buildSessionImagePrompt(currentPrompt, session) {
-  const parts = [];
-
-  // Site context
-  if (siteConfig.businessCategory || siteConfig.name) {
-    parts.push(`Context: This image is for a ${siteConfig.businessCategory || 'website'} called "${siteConfig.name || 'Website'}" based in ${siteConfig.city || ''}, ${siteConfig.country || ''}.`);
-  }
-  if (siteConfig.tone_and_style) {
-    parts.push(`Visual style should match: ${siteConfig.tone_and_style}.`);
-  }
-
-  // Generation context from the session (e.g. "Hero section background, 1920x600")
-  if (session.generationContext) {
-    parts.push(`Element context: ${session.generationContext}`);
-  }
-
-  // Extract aspect ratio from generation context if present
-  const arMatch = (session.generationContext || '').match(/Aspect ratio:\s*(\d+:\d+)/i);
-  if (arMatch) {
-    parts.push(`IMPORTANT: Generate the image in ${arMatch[1]} aspect ratio.`);
-  }
-
-  // Negative prompts (always included)
-  parts.push(NEGATIVE_PROMPT);
-
-  // Include prior conversation for context (skip the latest user message, we add it at the end)
-  const priorMessages = session.thread.slice(0, -1); // exclude the just-added user message
-  if (priorMessages.length > 0) {
-    const historyLines = priorMessages.map(m => {
-      if (m.role === 'user') return `User requested: "${m.text}"`;
-      if (m.role === 'assistant') return `[Image was generated successfully]`;
-      if (m.role === 'error') return `[Generation failed: ${m.text}]`;
-      return '';
-    }).filter(Boolean);
-    parts.push(`Previous conversation:\n${historyLines.join('\n')}`);
-  }
-
-  // Current request
-  parts.push(currentPrompt);
-
-  return parts.join('\n\n');
-}
-
-// ─── API: Site config (public fields only) ─────────────────────────────────
-
-app.get('/api/site-config', (req, res) => {
-  const { name, city, country, businessCategory, purpose } = siteConfig;
-  res.json({ name, city, country, businessCategory, purpose });
-});
-
-// ─── API: List editable HTML pages ──────────────────────────────────────────
-
-app.get('/api/pages', (req, res) => {
-  try {
-    const htmlFiles = sortEditablePages(findHtmlFiles(SITE_ROOT));
-    res.json({ pages: htmlFiles });
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to list pages', details: err.message });
-  }
-});
-
-// ─── API: Load a page for editing ───────────────────────────────────────────
-
-app.get('/api/pages/*', (req, res) => {
-  try {
-    const filename = decodeURIComponent(req.params[0]);
-    const filePath = resolveEditableHtmlPath(filename);
-    if (!filePath) {
-      return res.status(403).json({ error: 'Access denied' });
-    }
-
-    // Security: prevent directory traversal
-    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
-      return res.status(403).json({ error: 'Access denied' });
-    }
-
-    // Don't allow editing admin files
-    if (isInsidePath(ADMIN_DIR, filePath)) {
-      return res.status(403).json({ error: 'Cannot edit admin files' });
-    }
-
-    if (isExcludedEditablePath(filename)) {
-      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
-    }
-
-    if (!fs.existsSync(filePath)) {
-      return res.status(404).json({ error: 'File not found' });
-    }
-
-    const html = fs.readFileSync(filePath, 'utf8');
-    const $ = cheerio.load(html, { decodeEntities: false });
-
-    // Extract head content (raw) for preservation on save
-    const headContent = $('head').html() || '';
-
-    // Parse head into structured resources for GrapeJS canvas
-    const cssLinks = [];       // external stylesheet URLs
-    const scriptSrcs = [];     // external script URLs
-    const inlineStyles = [];   // inline <style> blocks
-    const inlineScripts = [];  // inline <script> blocks (e.g. Tailwind config)
-
-    $('head link[rel="stylesheet"]').each((_, el) => {
-      const href = $(el).attr('href');
-      if (href) cssLinks.push(href);
-    });
-
-    $('head script').each((_, el) => {
-      const src = $(el).attr('src');
-      const type = $(el).attr('type') || '';
-      // Skip schema.org / ld+json
-      if (type === 'application/ld+json') return;
-      if (src) {
-        scriptSrcs.push(src);
-      } else {
-        const text = $(el).html() || '';
-        // Skip GTM / analytics snippets
-        if (text.includes('googletagmanager') || text.includes('gtag(')) return;
-        if (text.trim()) inlineScripts.push(text);
-      }
-    });
-
-    $('head style').each((_, el) => {
-      const id = $(el).attr('id') || '';
-      // Skip GrapeJS injected styles (handled by GrapeJS itself)
-      if (id === 'gjs-editor-styles') return;
-      const text = $(el).html() || '';
-      if (text.trim()) inlineStyles.push(text);
-    });
-
-    // Tag <button> elements that are NOT inside a <form> so GrapeJS treats
-    // them as regular components instead of the forms-plugin "button" type.
-    // The forms plugin's button type has a destructive init() that replaces
-    // children with "Send" text when it can't find a single textnode child.
-    $('button').each((_, el) => {
-      if ($(el).closest('form').length === 0) {
-        $(el).attr('data-gjs-type', 'default');
-      }
-    });
-
-    // ── Force all <details> open so GrapeJS can see/edit answer content ─
-    // Also tag <details> and <summary> with data-gjs-type so GrapeJS uses
-    // our custom component types instead of treating them as opaque blocks.
-    $('details').each((_, el) => {
-      $(el).attr('open', '');
-      $(el).attr('data-gjs-type', 'details');
-    });
-    $('summary').each((_, el) => {
-      $(el).attr('data-gjs-type', 'summary');
-
-      // Wrap bare text nodes inside <summary> in a <span> so GrapeJS
-      // can select and inline-edit the question text. Without this,
-      // GrapeJS can't enter edit mode because the <summary> has mixed
-      // content (raw text + child SVG chevron icon).
-      const children = $(el).contents();         // includes text nodes
-      children.each((_, child) => {
-        if (child.type === 'text' && child.data.trim()) {
-          $(child).wrap('<span class="summary-text" data-gjs-editable="true"></span>');
-        }
-      });
-    });
-
-    // ── Preserve inline event handlers ──────────────────────────────────
-    // GrapeJS's getHtml() strips event handler attributes (onclick, onsubmit, etc.).
-    // Convert them to data-ht-* attributes that GrapeJS preserves, then convert
-    // them back on save. This keeps theme toggles, FAQ accordions, mobile nav,
-    // WhatsApp forms, and other interactive elements working after edit+save.
-    EVENT_ATTRS.forEach(attr => {
-      $(`body [${attr}]`).each((_, el) => {
-        const value = $(el).attr(attr);
-        if (value) {
-          $(el).attr(`data-ht-${attr}`, value);
-          $(el).removeAttr(attr);
-        }
-      });
-    });
-
-    // Strip <script> tags from body before sending to GrapeJS
-    // (GrapeJS can't handle scripts; the save endpoint re-appends
-    // the original body scripts so nothing is lost)
-    $('body > script').remove();
-
-    // Extract body content for GrapeJS editing
-    const bodyContent = $('body').html() || '';
-
-    // Extract body attributes (classes, etc.)
-    const bodyAttributes = {};
-    const bodyEl = $('body')[0];
-    if (bodyEl && bodyEl.attribs) {
-      Object.assign(bodyAttributes, bodyEl.attribs);
-    }
-
-    // Extract GrapeJS-specific CSS if previously saved
-    const gjsCss = $('style#gjs-editor-styles').html() || '';
-
-    res.json({
-      filename,
-      headContent,
-      bodyContent,
-      bodyAttributes,
-      canvasResources: {
-        cssLinks,
-        scriptSrcs,
-        inlineStyles,
-        inlineScripts,
-      },
-      gjsCss,
-    });
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to load page', details: err.message });
-  }
-});
-
-// ─── API: Save a page ───────────────────────────────────────────────────────
-
-app.post('/api/pages/*', async (req, res) => {
-  try {
-    const filename = decodeURIComponent(req.params[0]);
-    const filePath = resolveEditableHtmlPath(filename);
-    if (!filePath) {
-      return res.status(403).json({ error: 'Access denied' });
-    }
-
-    // Security: prevent directory traversal
-    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
-      return res.status(403).json({ error: 'Access denied' });
-    }
-
-    // Don't allow editing admin files
-    if (isInsidePath(ADMIN_DIR, filePath)) {
-      return res.status(403).json({ error: 'Cannot edit admin files' });
-    }
-
-    if (isExcludedEditablePath(filename)) {
-      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
-    }
-
-    if (!fs.existsSync(filePath)) {
-      return res.status(404).json({ error: 'File not found' });
-    }
-
-    const { htmlContent, cssContent } = req.body;
-
-    if (!htmlContent) {
-      return res.status(400).json({ error: 'Missing htmlContent in request body' });
-    }
-
-    // Read the original file to preserve the <head> section AND body scripts
-    const originalHtml = fs.readFileSync(filePath, 'utf8');
-    const $ = cheerio.load(originalHtml, { decodeEntities: false });
-
-    // Preserve <script> tags from the original body — GrapeJS's getHtml()
-    // strips all scripts, so we save them and re-append after replacing body.
-    const bodyScripts = [];
-    $('body > script').each((_, el) => {
-      bodyScripts.push($.html(el));
-    });
-
-    // Update body content with what GrapeJS provides
-    $('body').html(htmlContent);
-
-    // Re-append the original body scripts
-    if (bodyScripts.length > 0) {
-      $('body').append('\n' + bodyScripts.join('\n'));
-    }
-
-    // Extract base64 data URIs → save as files in assets/images/
-    const extractedCount = await extractAndSaveBase64Images($, SITE_ROOT);
-    if (extractedCount > 0) {
-      console.log(`  📦  Extracted ${extractedCount} base64 image(s) to assets/images/`);
-    }
-
-    // Strip data-gjs-type attributes that were added for the editor
-    // so the source HTML stays clean
-    $('body [data-gjs-type]').removeAttr('data-gjs-type');
-
-    // Strip public live-editor attributes/UI if a save comes from the page
-    // itself rather than the GrapeJS admin iframe.
-    $('body [data-buzl-public-editor-ui]').remove();
-    $('body [data-buzl-public-edit]').removeAttr('contenteditable spellcheck data-buzl-public-edit');
-    $('body').removeClass('buzl-public-editing overflow-hidden');
-    $('body .reveal.is-in').removeClass('is-in');
-    $('#siteHeader.shadow-lift').removeClass('shadow-lift');
-    $('#leadModal').addClass('hidden').removeClass('flex');
-    $('#mobileMenu').attr('hidden', '');
-
-    // ── Restore <details> open state ───────────────────────────────────
-    // The editor forces all <details> open for visibility. On save, the
-    // user controls the "open" attribute via the component trait. If the
-    // trait value is falsy / not present, remove the open attribute so the
-    // accordion starts collapsed. GrapeJS persists the `open` attribute
-    // in its HTML output only when the trait checkbox is checked.
-    // (No extra work needed — GrapeJS getHtml() includes open="" only
-    // when the attribute is set, so the trait already drives the output.)
-
-    // ── Restore inline event handlers ───────────────────────────────────
-    // Convert data-ht-onclick → onclick, data-ht-onsubmit → onsubmit, etc.
-    EVENT_ATTRS.forEach(attr => {
-      $(`body [data-ht-${attr}]`).each((_, el) => {
-        const value = $(el).attr(`data-ht-${attr}`);
-        if (value) {
-          $(el).attr(attr, value);
-          $(el).removeAttr(`data-ht-${attr}`);
-        }
-      });
-    });
-
-    // Remove any previously injected editor styles. Only keep genuinely custom
-    // GrapeJS CSS; its default reset belongs to the editor, not the live page.
-    $('style#gjs-editor-styles').remove();
-    if (shouldPersistGjsCss(cssContent)) {
-      $('head').append(`<style id="gjs-editor-styles">\n${cssContent}\n</style>`);
-    }
-
-    // Write the updated HTML back to the file
-    const updatedHtml = $.html();
-    writeHtmlWithBackup(filePath, updatedHtml);
-
-    res.json({ success: true, message: `Saved ${filename}` });
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to save page', details: err.message });
-  }
-});
-
-// ─── STATIC: Serve the public website from site root ────────────────────────
-
+
+// Resolve public site assets when the editor canvas requests them through
+// the admin namespace.
+app.use('/admin/assets', express.static(path.join(SITE_ROOT, 'assets')));
+
+// Runtime-only assets for editing text directly on the normal website preview.
+// They are served only by editor mode and are never written into client HTML.
+app.get('/__buzl/live-edit.js', (req, res) => {
+  if (!PUBLIC_LIVE_EDIT_ENABLED) return res.status(404).send('Not Found');
+  return res.sendFile(path.join(ADMIN_DIR, 'public-live-edit.js'));
+});
+app.get('/__buzl/live-edit.css', (req, res) => {
+  if (!PUBLIC_LIVE_EDIT_ENABLED) return res.status(404).send('Not Found');
+  return res.sendFile(path.join(ADMIN_DIR, 'public-live-edit.css'));
+});
+
+// ─── IMAGE UPLOAD (multer) ─────────────────────────────────────────────────
+// Saves uploaded images to assets/images/ with their original filename,
+// sanitised for the web and deduped with a short suffix if needed.
+
+const IMAGES_DIR = path.join(SITE_ROOT, 'assets', 'images');
+if (!fs.existsSync(IMAGES_DIR)) fs.mkdirSync(IMAGES_DIR, { recursive: true });
+const ALLOWED_IMAGE_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.webp', '.gif', '.avif', '.tif', '.tiff', '.svg',
+]);
+
+const upload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => cb(null, IMAGES_DIR),
+    filename: (req, file, cb) => {
+      // Sanitise: lowercase, replace spaces/special chars with hyphens, keep extension
+      const ext = path.extname(file.originalname).toLowerCase();
+      let base = path.basename(file.originalname, path.extname(file.originalname))
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]/g, '-')   // only safe chars
+        .replace(/-+/g, '-')             // collapse multiple hyphens
+        .replace(/^-|-$/g, '');          // trim leading/trailing hyphens
+
+      if (!base) base = 'image';
+
+      let filename = base + ext;
+      // Dedupe: append short hash if file already exists with different content
+      if (fs.existsSync(path.join(IMAGES_DIR, filename))) {
+        const hash = crypto.createHash('md5').update(Date.now().toString()).digest('hex').slice(0, 6);
+        filename = `${base}-${hash}${ext}`;
+      }
+      cb(null, filename);
+    },
+  }),
+  limits: {
+    fileSize: 20 * 1024 * 1024, // 20 MB per file
+    files: 10,
+  },
+  fileFilter: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (file.mimetype.startsWith('image/') && ALLOWED_IMAGE_EXTENSIONS.has(ext)) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only supported image files are allowed'));
+    }
+  },
+});
+
+// GrapeJS posts files under the field name "files" (its default uploadName),
+// but the exact field name can vary between GrapeJS versions. Using upload.any()
+// ensures compatibility with any field name and both multer v1 and v2.
+app.post('/api/upload', upload.any(), async (req, res) => {
+  try {
+    const urls = [];
+
+    for (const file of req.files || []) {
+      const ext = path.extname(file.filename).toLowerCase();
+
+      // Keep vector images as SVG; normalize all raster formats to AVIF.
+      if (ext === '.svg') {
+        const svg = fs.readFileSync(file.path, 'utf8');
+        const unsafeSvg = !/<svg(?:\s|>)/i.test(svg)
+          || /<script(?:\s|>)/i.test(svg)
+          || /<foreignObject(?:\s|>)/i.test(svg)
+          || /\son[a-z]+\s*=/i.test(svg)
+          || /javascript\s*:/i.test(svg);
+        if (unsafeSvg) {
+          fs.unlinkSync(file.path);
+          throw new Error('Unsafe SVG content was rejected');
+        }
+        urls.push(`/assets/images/${file.filename}`);
+        continue;
+      }
+
+      const baseName = path.basename(file.filename, ext);
+      const contentHash = crypto.createHash('sha256')
+        .update(fs.readFileSync(file.path))
+        .digest('hex')
+        .slice(0, 8);
+      const outputStem = path.join(IMAGES_DIR, `${baseName}-${contentHash}`);
+      const existingOutput = `${outputStem}.avif`;
+      const optimized = fs.existsSync(existingOutput)
+        ? { path: existingOutput, size: fs.statSync(existingOutput).size }
+        : await compressImage(file.path, outputStem);
+
+      if (file.path !== optimized.path && fs.existsSync(file.path)) {
+        fs.unlinkSync(file.path);
+      }
+
+      urls.push(`/assets/images/${path.basename(optimized.path)}`);
+    }
+
+    console.log(`  📤  Uploaded and optimized ${urls.length} image(s): ${urls.join(', ')}`);
+    res.json({ data: urls });
+  } catch (err) {
+    for (const file of req.files || []) {
+      if (file.path && fs.existsSync(file.path)) {
+        try { fs.unlinkSync(file.path); } catch {}
+      }
+    }
+    console.error('  ❌  Upload error:', err);
+    res.status(500).json({ error: 'Upload failed', details: err.message });
+  }
+});
+
+// ─── API: AI Text Generation (chat completion via Anthropic) ────────────────
+// Forwards chat-completion requests to Anthropic Claude API.
+// Model is configurable via ANTHROPIC_MODEL env var.
+
+const AI_MODEL = process.env.ANTHROPIC_MODEL || 'claude-sonnet-4-6';
+const AI_MAX_TOKENS = parseInt(process.env.ANTHROPIC_MAX_TOKENS || '1024', 10);
+
+// Load website context from JSON (cached at startup)
+const WEBSITE_CONTEXT_PATH = process.env.BUZL_CONTEXT_FILE || path.join(SITE_ROOT, 'website_context.json');
+let siteConfig = {};
+try {
+  siteConfig = JSON.parse(fs.readFileSync(WEBSITE_CONTEXT_PATH, 'utf8'));
+} catch (err) {
+  console.warn('  ⚠️  Could not load website_context.json:', err.message);
+}
+
+// Generate system prompt from site config
+function buildSystemPrompt() {
+  const { businessCategory, purpose, name, address, tone_and_style } = siteConfig;
+  if (!businessCategory) return '';
+  return `You are a copywriting assistant for a ${businessCategory} ${purpose || 'website'} (${name || ''}, ${address || ''}). Generate concise, compelling ${purpose || 'website'} text. Return ONLY the text content — no markdown formatting, no quotes, no explanation. Match the tone and style of ${tone_and_style || 'professional copywriting'}.`;
+}
+
+app.post('/api/ai/generate-text', async (req, res) => {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey || apiKey === 'your-anthropic-api-key-here') {
+    return res.status(500).json({
+      error: 'ANTHROPIC_API_KEY not configured',
+      details: 'Please set a valid ANTHROPIC_API_KEY in .env in the website root',
+    });
+  }
+
+  const { messages, model, max_tokens, generation_context } = req.body;
+
+  if (!messages || !Array.isArray(messages) || messages.length === 0) {
+    return res.status(400).json({
+      error: 'Missing or invalid "messages" array in request body',
+    });
+  }
+
+  try {
+    const client = new Anthropic({ apiKey });
+
+    // ── Build the final messages array ──────────────────────────────────
+    // Order: [0] website context (cached), [1] generation_context, [2..] user messages
+    // Anthropic requires alternating user/assistant roles, so we insert
+    // assistant placeholders between consecutive user messages.
+
+    const finalMessages = [];
+
+    // [0] Website context with prompt caching
+    if (siteConfig.context) {
+      finalMessages.push({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `context:\n${siteConfig.context}`,
+            cache_control: { type: 'ephemeral' },
+          },
+        ],
+      });
+    }
+
+    // [1] generation_context from frontend (e.g. "Hero section title")
+    if (generation_context) {
+      // Need assistant placeholder to avoid consecutive user messages
+      finalMessages.push({ role: 'assistant', content: 'Understood. I have the website context.' });
+      finalMessages.push({
+        role: 'user',
+        content: `generation_context: ${generation_context}`,
+      });
+    }
+
+    // [2..] User messages from the frontend
+    for (const msg of messages) {
+      // Insert assistant placeholder if last message is also user role
+      if (finalMessages.length > 0 && finalMessages[finalMessages.length - 1].role === msg.role) {
+        finalMessages.push({ role: 'assistant', content: 'Understood.' });
+      }
+      finalMessages.push(msg);
+    }
+
+    const params = {
+      model: model || AI_MODEL,
+      max_tokens: max_tokens || AI_MAX_TOKENS,
+      messages: finalMessages,
+    };
+
+    // System prompt generated from website_context.json
+    const systemPrompt = buildSystemPrompt();
+    if (systemPrompt) {
+      params.system = systemPrompt;
+    }
+
+    console.log(`  🤖  AI generate-text → model: ${params.model}, messages: ${finalMessages.length}`);
+    console.log(`  📋  AI payload:`, JSON.stringify(params, null, 2));
+
+    const response = await client.messages.create(params);
+
+    // Extract text content from the response
+    const textContent = response.content
+      .filter(block => block.type === 'text')
+      .map(block => block.text)
+      .join('\n');
+
+    res.json({
+      text: textContent,
+      model: response.model,
+      usage: response.usage,
+      stop_reason: response.stop_reason,
+    });
+
+  } catch (err) {
+    console.error('  ❌  AI generation error:', err.message);
+    const status = err.status || 500;
+    res.status(status).json({
+      error: 'AI text generation failed',
+      details: err.message,
+    });
+  }
+});
+
+// ─── API: AI Image Generation (via OpenRouter) ─────────────────────────────
+
+const { createImageGenerator } = require('./imageService');
+
+// Ensure generated images directory exists
+const GENERATED_IMAGES_DIR = path.join(SITE_ROOT, '.buzl', 'generated', 'images');
+if (!fs.existsSync(GENERATED_IMAGES_DIR)) {
+  fs.mkdirSync(GENERATED_IMAGES_DIR, { recursive: true });
+}
+
+// Lazy-init the image generator (only when first request comes in)
+let imageGenerator = null;
+function getImageGenerator() {
+  if (!imageGenerator) {
+    imageGenerator = createImageGenerator();
+  }
+  return imageGenerator;
+}
+
+// Serve generated images statically
+app.use('/admin/generated', express.static(path.join(SITE_ROOT, '.buzl', 'generated')));
+
+// ─── API: AI Image Generation – Session-based Chat Threads ─────────────────
+// In-memory session store: sessionId → { generationContext, thread[], abortController? }
+const imageSessions = new Map();
+
+/**
+ * Create a new image generation session.
+ * POST /api/ai/image-session
+ * Body: { generation_context?: string }
+ * Returns: { sessionId }
+ */
+app.post('/api/ai/image-session', (req, res) => {
+  const sessionId = crypto.randomUUID();
+  const { generation_context } = req.body || {};
+  imageSessions.set(sessionId, {
+    generationContext: generation_context || '',
+    thread: [],
+    abortController: null,
+  });
+  console.log(`  🆕  Image session created: ${sessionId}`);
+  res.json({ sessionId });
+});
+
+/**
+ * Get session thread.
+ * GET /api/ai/image-session/:id
+ * Returns: { sessionId, generationContext, thread }
+ */
+app.get('/api/ai/image-session/:id', (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+  res.json({
+    sessionId: req.params.id,
+    generationContext: session.generationContext,
+    thread: session.thread,
+  });
+});
+
+/**
+ * Generate image within a session (appends to thread).
+ * POST /api/ai/image-session/:id/generate
+ * Body: { prompt }
+ * Returns: { url, model, thread }
+ */
+app.post('/api/ai/image-session/:id/generate', async (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+
+  const { prompt } = req.body;
+  if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
+    return res.status(400).json({ error: 'Missing or invalid "prompt" in request body' });
+  }
+
+  // Append user message to thread
+  session.thread.push({ role: 'user', text: prompt.trim(), timestamp: Date.now() });
+
+  try {
+    const gen = getImageGenerator();
+
+    // Create AbortController for this request
+    const abortController = new AbortController();
+    session.abortController = abortController;
+
+    // Build enriched prompt including full conversation history
+    const enrichedPrompt = buildSessionImagePrompt(prompt.trim(), session);
+
+    console.log(`  🖼️  AI session-generate → session: ${req.params.id}, prompt: ${prompt.substring(0, 100)}`);
+
+    const result = await gen.generate(enrichedPrompt, abortController.signal);
+    session.abortController = null;
+
+    // Save AI output as an optimized AVIF.
+    const hash = crypto.createHash('md5').update(result.imageBase64.slice(0, 2048)).digest('hex').slice(0, 10);
+    const baseName = `gen-${hash}-${Date.now()}`;
+    const outputStem = path.join(GENERATED_IMAGES_DIR, baseName);
+    const buffer = Buffer.from(result.imageBase64, 'base64');
+    const optimized = await compressImage(buffer, outputStem);
+
+    const imageUrl = `/admin/generated/images/${path.basename(optimized.path)}`;
+    console.log(`  💾  AI session image saved → ${imageUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
+
+    // Append assistant message to thread
+    session.thread.push({
+      role: 'assistant',
+      url: imageUrl,
+      model: result.model,
+      size: optimized.size,
+      timestamp: Date.now(),
+    });
+
+    res.json({
+      url: imageUrl,
+      model: result.model,
+      size: optimized.size,
+      thread: session.thread,
+    });
+
+  } catch (err) {
+    session.abortController = null;
+    if (err.message === 'Request cancelled') {
+      return res.status(499).json({ error: 'Image generation cancelled', thread: session.thread });
+    }
+    console.error(`  ❌  AI session image error: ${err.message}`);
+    // Record error in thread so user can see it
+    session.thread.push({
+      role: 'error',
+      text: err.message,
+      timestamp: Date.now(),
+    });
+    res.status(500).json({
+      error: 'AI image generation failed',
+      details: err.message,
+      thread: session.thread,
+    });
+  }
+});
+
+/**
+ * Cancel in-flight generation for a session.
+ * POST /api/ai/image-session/:id/cancel
+ */
+app.post('/api/ai/image-session/:id/cancel', (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (session && session.abortController) {
+    session.abortController.abort();
+    session.abortController = null;
+    console.log(`  🛑  Image session cancelled: ${req.params.id}`);
+  }
+  res.json({ cancelled: true });
+});
+
+/**
+ * Delete a session.
+ * DELETE /api/ai/image-session/:id
+ */
+app.delete('/api/ai/image-session/:id', (req, res) => {
+  imageSessions.delete(req.params.id);
+  res.json({ deleted: true });
+});
+
+/**
+ * Build an enriched image prompt that includes the full conversation history.
+ * This gives the model context about what was previously requested and generated.
+ */
+// Standard negative prompts to avoid common generation artefacts
+const NEGATIVE_PROMPT = [
+  'Do NOT generate multiple images, collages, split views, side-by-side comparisons, before/after, tiled images, or image grids.',
+  'Do NOT render in 3D, CGI, or unrealistic plastic-looking style.',
+  'Do NOT add text, watermarks, labels, borders, or frames to the image.',
+  'Generate exactly ONE single cohesive photographic image.',
+].join(' ');
+
+function buildSessionImagePrompt(currentPrompt, session) {
+  const parts = [];
+
+  // Site context
+  if (siteConfig.businessCategory || siteConfig.name) {
+    parts.push(`Context: This image is for a ${siteConfig.businessCategory || 'website'} called "${siteConfig.name || 'Website'}" based in ${siteConfig.city || ''}, ${siteConfig.country || ''}.`);
+  }
+  if (siteConfig.tone_and_style) {
+    parts.push(`Visual style should match: ${siteConfig.tone_and_style}.`);
+  }
+
+  // Generation context from the session (e.g. "Hero section background, 1920x600")
+  if (session.generationContext) {
+    parts.push(`Element context: ${session.generationContext}`);
+  }
+
+  // Extract aspect ratio from generation context if present
+  const arMatch = (session.generationContext || '').match(/Aspect ratio:\s*(\d+:\d+)/i);
+  if (arMatch) {
+    parts.push(`IMPORTANT: Generate the image in ${arMatch[1]} aspect ratio.`);
+  }
+
+  // Negative prompts (always included)
+  parts.push(NEGATIVE_PROMPT);
+
+  // Include prior conversation for context (skip the latest user message, we add it at the end)
+  const priorMessages = session.thread.slice(0, -1); // exclude the just-added user message
+  if (priorMessages.length > 0) {
+    const historyLines = priorMessages.map(m => {
+      if (m.role === 'user') return `User requested: "${m.text}"`;
+      if (m.role === 'assistant') return `[Image was generated successfully]`;
+      if (m.role === 'error') return `[Generation failed: ${m.text}]`;
+      return '';
+    }).filter(Boolean);
+    parts.push(`Previous conversation:\n${historyLines.join('\n')}`);
+  }
+
+  // Current request
+  parts.push(currentPrompt);
+
+  return parts.join('\n\n');
+}
+
+// ─── API: Site config (public fields only) ─────────────────────────────────
+
+app.get('/api/site-config', (req, res) => {
+  const { name, city, country, businessCategory, purpose } = siteConfig;
+  res.json({ name, city, country, businessCategory, purpose });
+});
+
+// ─── API: List editable HTML pages ──────────────────────────────────────────
+
+app.get('/api/pages', (req, res) => {
+  try {
+    const htmlFiles = sortEditablePages(findHtmlFiles(SITE_ROOT));
+    res.json({ pages: htmlFiles });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to list pages', details: err.message });
+  }
+});
+
+// ─── API: Load a page for editing ───────────────────────────────────────────
+
+app.get('/api/pages/*', (req, res) => {
+  try {
+    const filename = decodeURIComponent(req.params[0]);
+    const filePath = resolveEditableHtmlPath(filename);
+    if (!filePath) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Security: prevent directory traversal
+    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Don't allow editing admin files
+    if (isInsidePath(ADMIN_DIR, filePath)) {
+      return res.status(403).json({ error: 'Cannot edit admin files' });
+    }
+
+    if (isExcludedEditablePath(filename)) {
+      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
+    }
+
+    if (!fs.existsSync(filePath)) {
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    const html = fs.readFileSync(filePath, 'utf8');
+    const $ = cheerio.load(html, { decodeEntities: false });
+
+    // Extract head content (raw) for preservation on save
+    const headContent = $('head').html() || '';
+
+    // Parse head into structured resources for GrapeJS canvas
+    const cssLinks = [];       // external stylesheet URLs
+    const scriptSrcs = [];     // external script URLs
+    const inlineStyles = [];   // inline <style> blocks
+    const inlineScripts = [];  // inline <script> blocks (e.g. Tailwind config)
+
+    $('head link[rel="stylesheet"]').each((_, el) => {
+      const href = $(el).attr('href');
+      if (href) cssLinks.push(href);
+    });
+
+    $('head script').each((_, el) => {
+      const src = $(el).attr('src');
+      const type = $(el).attr('type') || '';
+      // Skip schema.org / ld+json
+      if (type === 'application/ld+json') return;
+      if (src) {
+        scriptSrcs.push(src);
+      } else {
+        const text = $(el).html() || '';
+        // Skip GTM / analytics snippets
+        if (text.includes('googletagmanager') || text.includes('gtag(')) return;
+        if (text.trim()) inlineScripts.push(text);
+      }
+    });
+
+    $('head style').each((_, el) => {
+      const id = $(el).attr('id') || '';
+      // Skip GrapeJS injected styles (handled by GrapeJS itself)
+      if (id === 'gjs-editor-styles') return;
+      const text = $(el).html() || '';
+      if (text.trim()) inlineStyles.push(text);
+    });
+
+    // Tag <button> elements that are NOT inside a <form> so GrapeJS treats
+    // them as regular components instead of the forms-plugin "button" type.
+    // The forms plugin's button type has a destructive init() that replaces
+    // children with "Send" text when it can't find a single textnode child.
+    $('button').each((_, el) => {
+      if ($(el).closest('form').length === 0) {
+        $(el).attr('data-gjs-type', 'default');
+      }
+    });
+
+    // ── Force all <details> open so GrapeJS can see/edit answer content ─
+    // Also tag <details> and <summary> with data-gjs-type so GrapeJS uses
+    // our custom component types instead of treating them as opaque blocks.
+    $('details').each((_, el) => {
+      $(el).attr('open', '');
+      $(el).attr('data-gjs-type', 'details');
+    });
+    $('summary').each((_, el) => {
+      $(el).attr('data-gjs-type', 'summary');
+
+      // Wrap bare text nodes inside <summary> in a <span> so GrapeJS
+      // can select and inline-edit the question text. Without this,
+      // GrapeJS can't enter edit mode because the <summary> has mixed
+      // content (raw text + child SVG chevron icon).
+      const children = $(el).contents();         // includes text nodes
+      children.each((_, child) => {
+        if (child.type === 'text' && child.data.trim()) {
+          $(child).wrap('<span class="summary-text" data-gjs-editable="true"></span>');
+        }
+      });
+    });
+
+    // ── Preserve inline event handlers ──────────────────────────────────
+    // GrapeJS's getHtml() strips event handler attributes (onclick, onsubmit, etc.).
+    // Convert them to data-ht-* attributes that GrapeJS preserves, then convert
+    // them back on save. This keeps theme toggles, FAQ accordions, mobile nav,
+    // WhatsApp forms, and other interactive elements working after edit+save.
+    EVENT_ATTRS.forEach(attr => {
+      $(`body [${attr}]`).each((_, el) => {
+        const value = $(el).attr(attr);
+        if (value) {
+          $(el).attr(`data-ht-${attr}`, value);
+          $(el).removeAttr(attr);
+        }
+      });
+    });
+
+    // Strip <script> tags from body before sending to GrapeJS
+    // (GrapeJS can't handle scripts; the save endpoint re-appends
+    // the original body scripts so nothing is lost)
+    $('body > script').remove();
+
+    // Extract body content for GrapeJS editing
+    const bodyContent = $('body').html() || '';
+
+    // Extract body attributes (classes, etc.)
+    const bodyAttributes = {};
+    const bodyEl = $('body')[0];
+    if (bodyEl && bodyEl.attribs) {
+      Object.assign(bodyAttributes, bodyEl.attribs);
+    }
+
+    // Extract GrapeJS-specific CSS if previously saved
+    const gjsCss = $('style#gjs-editor-styles').html() || '';
+
+    res.json({
+      filename,
+      headContent,
+      bodyContent,
+      bodyAttributes,
+      canvasResources: {
+        cssLinks,
+        scriptSrcs,
+        inlineStyles,
+        inlineScripts,
+      },
+      gjsCss,
+    });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to load page', details: err.message });
+  }
+});
+
+// ─── API: Save a page ───────────────────────────────────────────────────────
+
+app.post('/api/pages/*', async (req, res) => {
+  try {
+    const filename = decodeURIComponent(req.params[0]);
+    const filePath = resolveEditableHtmlPath(filename);
+    if (!filePath) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Security: prevent directory traversal
+    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Don't allow editing admin files
+    if (isInsidePath(ADMIN_DIR, filePath)) {
+      return res.status(403).json({ error: 'Cannot edit admin files' });
+    }
+
+    if (isExcludedEditablePath(filename)) {
+      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
+    }
+
+    if (!fs.existsSync(filePath)) {
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    const { htmlContent, cssContent } = req.body;
+
+    if (!htmlContent) {
+      return res.status(400).json({ error: 'Missing htmlContent in request body' });
+    }
+
+    // Read the original file to preserve the <head> section AND body scripts
+    const originalHtml = fs.readFileSync(filePath, 'utf8');
+    const $ = cheerio.load(originalHtml, { decodeEntities: false });
+
+    // Preserve <script> tags from the original body — GrapeJS's getHtml()
+    // strips all scripts, so we save them and re-append after replacing body.
+    const bodyScripts = [];
+    $('body > script').each((_, el) => {
+      bodyScripts.push($.html(el));
+    });
+
+    // Update body content with what GrapeJS provides
+    $('body').html(htmlContent);
+
+    // Re-append the original body scripts
+    if (bodyScripts.length > 0) {
+      $('body').append('\n' + bodyScripts.join('\n'));
+    }
+
+    // Extract base64 data URIs → save as files in assets/images/
+    const extractedCount = await extractAndSaveBase64Images($, SITE_ROOT);
+    if (extractedCount > 0) {
+      console.log(`  📦  Extracted ${extractedCount} base64 image(s) to assets/images/`);
+    }
+
+    // Strip data-gjs-type attributes that were added for the editor
+    // so the source HTML stays clean
+    $('body [data-gjs-type]').removeAttr('data-gjs-type');
+
+    // Strip public live-editor attributes/UI if a save comes from the page
+    // itself rather than the GrapeJS admin iframe.
+    $('body [data-buzl-public-editor-ui]').remove();
+    $('body [data-buzl-public-edit]').removeAttr('contenteditable spellcheck data-buzl-public-edit');
+    $('body').removeClass('buzl-public-editing overflow-hidden');
+    $('body .reveal.is-in').removeClass('is-in');
+    $('#siteHeader.shadow-lift').removeClass('shadow-lift');
+    $('#leadModal').addClass('hidden').removeClass('flex');
+    $('#mobileMenu').attr('hidden', '');
+
+    // ── Restore <details> open state ───────────────────────────────────
+    // The editor forces all <details> open for visibility. On save, the
+    // user controls the "open" attribute via the component trait. If the
+    // trait value is falsy / not present, remove the open attribute so the
+    // accordion starts collapsed. GrapeJS persists the `open` attribute
+    // in its HTML output only when the trait checkbox is checked.
+    // (No extra work needed — GrapeJS getHtml() includes open="" only
+    // when the attribute is set, so the trait already drives the output.)
+
+    // ── Restore inline event handlers ───────────────────────────────────
+    // Convert data-ht-onclick → onclick, data-ht-onsubmit → onsubmit, etc.
+    EVENT_ATTRS.forEach(attr => {
+      $(`body [data-ht-${attr}]`).each((_, el) => {
+        const value = $(el).attr(`data-ht-${attr}`);
+        if (value) {
+          $(el).attr(attr, value);
+          $(el).removeAttr(`data-ht-${attr}`);
+        }
+      });
+    });
+
+    // Remove any previously injected editor styles. Only keep genuinely custom
+    // GrapeJS CSS; its default reset belongs to the editor, not the live page.
+    $('style#gjs-editor-styles').remove();
+    if (shouldPersistGjsCss(cssContent)) {
+      $('head').append(`<style id="gjs-editor-styles">\n${cssContent}\n</style>`);
+    }
+
+    // Write the updated HTML back to the file
+    const updatedHtml = $.html();
+    writeHtmlWithBackup(filePath, updatedHtml);
+
+    res.json({ success: true, message: `Saved ${filename}` });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to save page', details: err.message });
+  }
+});
+
+// ─── PUBLIC PREVIEW LIVE EDIT ───────────────────────────────────────────────
+
+app.post('/__buzl/live-edit/save', (req, res) => {
+  try {
+    if (!PUBLIC_LIVE_EDIT_ENABLED || !isLoopbackRequest(req) || !hasSameOrigin(req)) {
+      return res.status(403).json({ error: 'Preview editing is available only on this computer' });
+    }
+
+    const pageToken = typeof req.body?.pageToken === 'string' ? req.body.pageToken : '';
+    const changes = Array.isArray(req.body?.changes) ? req.body.changes : [];
+    const session = publicEditSessions.get(pageToken);
+    if (!session || Date.now() - session.createdAt > PUBLIC_EDIT_SESSION_TTL_MS) {
+      publicEditSessions.delete(pageToken);
+      return res.status(409).json({ error: 'This editing session expired. Reload the page and try again.' });
+    }
+    if (!changes.length || changes.length > 250) {
+      return res.status(400).json({ error: 'Provide between 1 and 250 text changes' });
+    }
+    if (!isInsidePath(SITE_ROOT, session.filePath) || isExcludedEditablePath(session.relativePath)) {
+      return res.status(403).json({ error: 'This page cannot be edited' });
+    }
+
+    const originalHtml = fs.readFileSync(session.filePath, 'utf8');
+    const currentRevision = hashText(originalHtml);
+    if (currentRevision !== session.revision) {
+      return res.status(409).json({
+        error: 'This page changed after it was opened. Reload before saving to avoid overwriting newer work.',
+      });
+    }
+
+    const $ = cheerio.load(originalHtml, { decodeEntities: false });
+    const candidates = collectPublicEditCandidates($);
+    const usedKeys = new Set();
+    const savedChanges = [];
+
+    for (const change of changes) {
+      const key = String(change?.key ?? '');
+      if (!/^\d+$/.test(key) || usedKeys.has(key)) {
+        return res.status(400).json({ error: 'Invalid or duplicate editable element identifier' });
+      }
+      const index = Number(key);
+      const element = candidates[index];
+      if (!element) return res.status(409).json({ error: 'The page structure changed. Reload and try again.' });
+      if (typeof change.html !== 'string' || change.html.length > 20000) {
+        return res.status(400).json({ error: 'Edited text is too large' });
+      }
+      usedKeys.add(key);
+      const sanitizedHtml = sanitizePublicEditHtml(change.html);
+      $(element).html(sanitizedHtml);
+      savedChanges.push({ key, html: sanitizedHtml });
+    }
+
+    removePublicEditArtifacts($);
+    const updatedHtml = $.html();
+    writePublicHtmlWithBackup(session.filePath, updatedHtml);
+    session.revision = hashText(updatedHtml);
+    session.createdAt = Date.now();
+    res.json({
+      success: true,
+      savedCount: changes.length,
+      savedChanges,
+      page: session.relativePath,
+    });
+  } catch (err) {
+    console.error('  ❌  Preview Live Edit save error:', err);
+    res.status(500).json({ error: 'Failed to save preview edits', details: err.message });
+  }
+});
+
+// ─── STATIC: Serve the public website from site root ────────────────────────
+
 // Unknown API paths must not fall through to similarly named files in the
 // public website folder.
 app.use('/api', (req, res) => {
   res.status(404).json({ error: 'API endpoint not found' });
 });
 
-// Block private development files before public static serving.
-app.use((req, res, next) => {
-  let decodedPath;
-  try {
-    decodedPath = decodeURIComponent(req.path).replace(/\\/g, '/');
-  } catch {
-    return res.status(400).send('Bad Request');
-  }
-  const segments = decodedPath.toLowerCase().split('/').filter(Boolean);
-  const blockedSegments = new Set(['admin', 'node_modules', '.git', '.buzl', 'tests', 'coverage']);
-  const blockedFiles = new Set(['.env', '.env.example', '.env_example', 'package.json', 'package-lock.json', 'server.js']);
-  const filename = segments[segments.length - 1] || '';
-  if (segments.some((segment) => segment.startsWith('.') || blockedSegments.has(segment))
-    || blockedFiles.has(filename)
-    || /\.(?:cmd|bat|sh|log|md|test\.js)$/.test(filename)) {
-    return res.status(404).send('Not Found');
-  }
-  return next();
-});
-
+// Serve HTML through an in-memory transform so the local preview receives its
+// edit toolbar and temporary element identifiers. The source file on disk is
+// not changed until the user explicitly presses Save.
+app.get('*', (req, res, next) => {
+  if (!PUBLIC_LIVE_EDIT_ENABLED || req.path.startsWith('/admin') || req.path.startsWith('/__buzl')) {
+    return next();
+  }
+  const resolved = resolvePublicHtmlPath(req.path);
+  if (!resolved) return next();
+
+  try {
+    const originalHtml = fs.readFileSync(resolved.filePath, 'utf8');
+    const prepared = preparePublicPreviewHtml(originalHtml, resolved.filePath, resolved.relativePath);
+    res.set('Cache-Control', 'no-store');
+    res.type('html').send(prepared);
+  } catch (err) {
+    console.error('  ❌  Preview preparation error:', err);
+    res.status(500).send('Could not prepare this page for preview');
+  }
+});
+
+// Block private development files before public static serving.
+app.use((req, res, next) => {
+  let decodedPath;
+  try {
+    decodedPath = decodeURIComponent(req.path).replace(/\\/g, '/');
+  } catch {
+    return res.status(400).send('Bad Request');
+  }
+  const segments = decodedPath.toLowerCase().split('/').filter(Boolean);
+  const blockedSegments = new Set(['admin', 'node_modules', 'npm-package', '.git', '.buzl', 'tests', 'coverage', 'rollback_backups', '__buzl']);
+  const blockedFiles = new Set(['.env', '.env.example', '.env_example', 'package.json', 'package-lock.json', 'server.js']);
+  const filename = segments[segments.length - 1] || '';
+  if (segments.some((segment) => segment.startsWith('.') || blockedSegments.has(segment))
+    || blockedFiles.has(filename)
+    || /\.(?:cmd|bat|sh|log|md|test\.js)$/.test(filename)) {
+    return res.status(404).send('Not Found');
+  }
+  return next();
+});
+
 app.use(express.static(SITE_ROOT, {
-  index: 'index.html',
-  extensions: ['html']
-}));
-
-// ─── HELPERS ────────────────────────────────────────────────────────────────
-
-// ── Extract base64 data URIs from HTML, save as files, update src ───────────
-// Scans all <img> and elements with style background-image for data: URIs.
-// Saves each unique image to assets/images/ and replaces the data URI with
-// the relative file path.
-function resolveEditableHtmlPath(filename) {
-  const candidate = path.resolve(SITE_ROOT, filename);
-  if (!candidate.toLowerCase().endsWith('.html') || !isInsidePath(SITE_ROOT, candidate)) return null;
-  try {
-    const realRoot = fs.realpathSync(SITE_ROOT);
-    const realCandidate = fs.realpathSync(candidate);
-    return isInsidePath(realRoot, realCandidate) ? realCandidate : null;
-  } catch {
-    return candidate;
-  }
-}
-
-function writeHtmlWithBackup(filePath, html) {
-  const relative = path.relative(SITE_ROOT, filePath);
-  const stamp = new Date().toISOString().replace(/[:.]/g, '-');
-  const backupDir = path.join(SITE_ROOT, '.buzl', 'backups', path.dirname(relative));
-  const parsed = path.parse(filePath);
-  const backupPath = path.join(backupDir, parsed.name + '-' + stamp + parsed.ext);
-  const temporaryPath = filePath + '.buzl-' + process.pid + '-' + Date.now() + '.tmp';
-  fs.mkdirSync(backupDir, { recursive: true });
-  fs.copyFileSync(filePath, backupPath);
-  try {
-    fs.writeFileSync(temporaryPath, html, 'utf8');
-    fs.renameSync(temporaryPath, filePath);
-  } finally {
-    if (fs.existsSync(temporaryPath)) fs.unlinkSync(temporaryPath);
-  }
-}
-
-function shouldPersistGjsCss(cssContent) {
-  if (!cssContent || !cssContent.trim()) return false;
-
-  const normalized = cssContent
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    .replace(/\s+/g, ' ')
-    .replace(/\s*([{}:;,])\s*/g, '$1')
-    .trim();
-
-  return normalized !== '*{box-sizing:border-box;}body{margin:0;}';
-}
-
-const MIME_TO_EXT = {
-  'image/png': '.png',
-  'image/jpeg': '.jpg',
-  'image/jpg': '.jpg',
-  'image/gif': '.gif',
-  'image/webp': '.webp',
-  'image/svg+xml': '.svg',
-  'image/avif': '.avif',
-};
-
-async function extractAndSaveBase64Images($, siteRoot) {
-  const imagesDir = path.join(siteRoot, 'assets', 'images');
-
-  // Ensure the directory exists
-  if (!fs.existsSync(imagesDir)) {
-    fs.mkdirSync(imagesDir, { recursive: true });
-  }
-
-  // Track data-hash → filename so duplicate images reuse the same file
-  const saved = new Map();
-  let count = 0;
-
-  // Regex to match data:image URIs (works for src attributes and CSS urls)
-  const dataUriRegex = /^data:(image\/[a-zA-Z+]+);base64,(.+)$/s;
-
-  // 1. Process <img> tags with data: src
-  const imageElements = $('img[src^="data:image"]').toArray();
-  for (const el of imageElements) {
-    const src = $(el).attr('src');
-    const match = src.match(dataUriRegex);
-    if (!match) continue;
-
-    const mimeType = match[1];
-    const base64Data = match[2];
-
-    // Try to derive a meaningful filename from alt, title, or data-filename
-    const nameHint = $(el).attr('data-filename')
-      || $(el).attr('alt')
-      || $(el).attr('title')
-      || '';
-
-    const filePath = await saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint);
-    if (filePath) {
-      $(el).attr('src', filePath);
-      count++;
-    }
-  }
-
-  // 2. Process any element with inline style containing base64 background-image
-  const styleElements = $('[style*="data:image"]').toArray();
-  for (const el of styleElements) {
-    let style = $(el).attr('style');
-    if (!style) continue;
-
-    const matches = [...style.matchAll(/url\(\s*['"]?(data:(image\/[a-zA-Z+]+);base64,([^'")\s]+))['"]?\s*\)/g)];
-    for (const match of matches) {
-      const filePath = await saveBase64Image(match[3], match[2], imagesDir, saved);
-      if (!filePath) continue;
-      style = style.replace(match[0], `url('${filePath}')`);
-      count++;
-    }
-    $(el).attr('style', style);
-  }
-
-  return count;
-}
-
-async function saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint = '') {
-  // Create a short hash of the content for dedup
-  const hash = crypto.createHash('md5').update(base64Data.slice(0, 2048)).digest('hex').slice(0, 8);
-
-  if (saved.has(hash)) {
-    return saved.get(hash);
-  }
-
-  // Try to build a meaningful filename from the hint
-  let baseName = '';
-  if (nameHint) {
-    baseName = nameHint.replace(/\.[a-zA-Z]{2,5}$/, '');
-    baseName = baseName
-      .toLowerCase()
-      .replace(/[^a-z0-9_-]/g, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '');
-  }
-
-  if (!baseName) baseName = 'img';
-
-  // Include the content hash even when a human-friendly hint exists so two
-  // different images with the same alt text never overwrite or reuse one file.
-  const outputName = `${baseName}-${hash}`;
-  const outputStem = path.join(imagesDir, outputName);
-  const avifPath = `${outputStem}.avif`;
-  const avifUrl = `/assets/images/${outputName}.avif`;
-
-  if (fs.existsSync(avifPath)) {
-    saved.set(hash, avifUrl);
-    return avifUrl;
-  }
-
-  const buffer = Buffer.from(base64Data, 'base64');
-  try {
-    const optimized = await compressImage(buffer, outputStem);
-    const optimizedUrl = `/assets/images/${path.basename(optimized.path)}`;
-    console.log(`  💾  Saved optimized base64 image → ${optimizedUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
-    saved.set(hash, optimizedUrl);
-    return optimizedUrl;
-  } catch (err) {
-    // Preserve valid source data if Sharp cannot convert a supported edge case.
-    const fallbackExt = MIME_TO_EXT[mimeType] || '.png';
-    const fallbackName = `${outputName}${fallbackExt}`;
-    const fallbackPath = path.join(imagesDir, fallbackName);
-    if (!fs.existsSync(fallbackPath)) fs.writeFileSync(fallbackPath, buffer);
-    const fallbackUrl = `/assets/images/${fallbackName}`;
-    console.warn(`  ⚠️  AVIF conversion failed; kept original image → ${fallbackUrl}: ${err.message}`);
-    saved.set(hash, fallbackUrl);
-    return fallbackUrl;
-  }
-}
-
-function findHtmlFiles(dir, base = '') {
-  const results = [];
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  const skipDirs = new Set([
-    'admin',
-    'admin1',
-    'new',
-    'node_modules',
-    '.backups',
-    '.git',
-    'tests',
-  ]);
-
-  for (const entry of entries) {
-    const relPath = base ? `${base}/${entry.name}` : entry.name;
-
-    // Skip admin tools, duplicate exported copies, dependencies, backups, and tests.
-    if (skipDirs.has(entry.name)) {
-      continue;
-    }
-    if (entry.name.startsWith('.')) continue;
-    if (entry.name.startsWith('_backups')) continue;
-
-    if (entry.isDirectory()) {
-      results.push(...findHtmlFiles(path.join(dir, entry.name), relPath));
-    } else if (entry.isFile() && entry.name.endsWith('.html')) {
-      results.push(relPath);
-    }
-  }
-
-  return results;
-}
-
-function sortEditablePages(pages) {
-  return pages.sort((a, b) => {
-    if (a === 'index.html') return -1;
-    if (b === 'index.html') return 1;
-    return a.localeCompare(b);
-  });
-}
-
-function isExcludedEditablePath(filename) {
-  const firstSegment = filename.replace(/\\/g, '/').split('/')[0];
-  return ['admin', 'admin1', 'new', 'node_modules', 'tests'].includes(firstSegment);
-}
-
-function isInsidePath(parentDir, targetPath) {
-  const relative = path.relative(parentDir, targetPath);
-  return relative === '' || (!!relative && !relative.startsWith('..') && !path.isAbsolute(relative));
-}
-
-// ─── START ──────────────────────────────────────────────────────────────────
-
-// Only start the server when run directly (not when required by tests)
-if (require.main === module) {
+  index: 'index.html',
+  extensions: ['html']
+}));
+
+// ─── HELPERS ────────────────────────────────────────────────────────────────
+
+function hashText(value) {
+  return crypto.createHash('sha256').update(value).digest('hex');
+}
+
+function isLoopbackRequest(req) {
+  const address = String(req.socket?.remoteAddress || '').toLowerCase();
+  return address === '127.0.0.1' || address === '::1' || address === '::ffff:127.0.0.1';
+}
+
+function hasSameOrigin(req) {
+  const origin = req.get('origin');
+  if (!origin) return true;
+  try {
+    return new URL(origin).host === req.get('host');
+  } catch {
+    return false;
+  }
+}
+
+function removePublicEditArtifacts($) {
+  $('[data-buzl-public-editor-ui]').remove();
+  $('[data-buzl-live-edit-runtime]').remove();
+  $('[data-buzl-public-edit-key]').removeAttr(
+    'data-buzl-public-edit-key data-buzl-public-edit contenteditable spellcheck',
+  );
+  $('body').removeClass('buzl-public-editing');
+}
+
+function collectPublicEditCandidates($) {
+  const candidates = [];
+  $(PUBLIC_EDIT_SELECTOR).each((_, element) => {
+    const target = $(element);
+    const text = target.text();
+    if (!text || !text.trim()) return;
+    if (target.closest('svg, [aria-hidden="true"], script, style, noscript, input, textarea, select').length) {
+      return;
+    }
+
+    candidates.push(element);
+  });
+  const candidateSet = new Set(candidates);
+  return candidates.filter((element) => !$(element).find('*').toArray()
+    .some((descendant) => candidateSet.has(descendant)));
+}
+
+function sanitizePublicEditHtml(value) {
+  const fragment = cheerio.load(
+    `<div data-buzl-sanitize-root>${String(value)}</div>`,
+    { decodeEntities: false },
+    false,
+  );
+  const root = fragment('[data-buzl-sanitize-root]');
+  root.find('script, style, iframe, object, embed, form, input, textarea, select, option, button, link, meta')
+    .remove();
+
+  const allowedTags = new Set(['br', 'strong', 'b', 'em', 'i', 'u', 's', 'sub', 'sup', 'span']);
+  root.find('*').toArray().reverse().forEach((element) => {
+    const tagName = String(element.tagName || element.name || '').toLowerCase();
+    if (!allowedTags.has(tagName)) {
+      fragment(element).replaceWith(fragment(element).text());
+      return;
+    }
+    for (const attribute of Object.keys(element.attribs || {})) {
+      fragment(element).removeAttr(attribute);
+    }
+  });
+  return root.html() || '';
+}
+
+function cleanupPublicEditSessions() {
+  const cutoff = Date.now() - PUBLIC_EDIT_SESSION_TTL_MS;
+  for (const [token, session] of publicEditSessions) {
+    if (session.createdAt < cutoff) publicEditSessions.delete(token);
+  }
+  while (publicEditSessions.size > 500) {
+    publicEditSessions.delete(publicEditSessions.keys().next().value);
+  }
+}
+
+function preparePublicPreviewHtml(originalHtml, filePath, relativePath) {
+  cleanupPublicEditSessions();
+  const $ = cheerio.load(originalHtml, { decodeEntities: false });
+  removePublicEditArtifacts($);
+  const candidates = collectPublicEditCandidates($);
+  candidates.forEach((element, index) => {
+    $(element).attr('data-buzl-public-edit-key', String(index));
+  });
+
+  const pageToken = crypto.randomBytes(24).toString('base64url');
+  publicEditSessions.set(pageToken, {
+    createdAt: Date.now(),
+    filePath,
+    relativePath,
+    revision: hashText(originalHtml),
+  });
+
+  $('head').append('<link rel="stylesheet" href="/__buzl/live-edit.css" data-buzl-public-editor-ui="true">');
+  const runtime = $('<script></script>')
+    .attr('defer', '')
+    .attr('src', '/__buzl/live-edit.js')
+    .attr('data-buzl-live-edit-runtime', 'true')
+    .attr('data-buzl-public-editor-ui', 'true')
+    .attr('data-buzl-page-token', pageToken)
+    .attr('data-buzl-page-path', relativePath);
+  $('body').append(runtime);
+  return $.html();
+}
+
+function resolvePublicHtmlPath(requestPath) {
+  let decoded;
+  try {
+    decoded = decodeURIComponent(requestPath);
+  } catch {
+    return null;
+  }
+  if (decoded.includes('\0')) return null;
+
+  const rootPath = path.resolve(SITE_ROOT);
+  let candidate = path.resolve(rootPath, `.${decoded.replace(/\\/g, '/')}`);
+  if (!isInsidePath(rootPath, candidate)) return null;
+
+  let stats = null;
+  try { stats = fs.statSync(candidate); } catch {}
+  if (stats?.isDirectory()) {
+    candidate = path.join(candidate, 'index.html');
+    try { stats = fs.statSync(candidate); } catch { stats = null; }
+  }
+  if (!stats && !path.extname(candidate)) {
+    candidate = `${candidate}.html`;
+    try { stats = fs.statSync(candidate); } catch { stats = null; }
+  }
+  if (!stats?.isFile() || path.extname(candidate).toLowerCase() !== '.html') return null;
+
+  const relativePath = path.relative(rootPath, candidate).replace(/\\/g, '/');
+  if (isExcludedEditablePath(relativePath)) return null;
+  try {
+    const realRoot = fs.realpathSync(rootPath);
+    const realCandidate = fs.realpathSync(candidate);
+    if (!isInsidePath(realRoot, realCandidate)) return null;
+    return { filePath: realCandidate, relativePath };
+  } catch {
+    return null;
+  }
+}
+
+function writePublicHtmlWithBackup(filePath, html) {
+  const relative = path.relative(SITE_ROOT, filePath);
+  const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const backupDir = path.join(SITE_ROOT, '.buzl', 'backups', path.dirname(relative));
+  const parsed = path.parse(filePath);
+  const backupPath = path.join(backupDir, `${parsed.name}-${stamp}${parsed.ext}`);
+  const temporaryPath = `${filePath}.buzl-${process.pid}-${Date.now()}.tmp`;
+  fs.mkdirSync(backupDir, { recursive: true });
+  fs.copyFileSync(filePath, backupPath);
+  try {
+    fs.writeFileSync(temporaryPath, html, 'utf8');
+    fs.renameSync(temporaryPath, filePath);
+  } finally {
+    if (fs.existsSync(temporaryPath)) fs.unlinkSync(temporaryPath);
+  }
+}
+
+// ── Extract base64 data URIs from HTML, save as files, update src ───────────
+// Scans all <img> and elements with style background-image for data: URIs.
+// Saves each unique image to assets/images/ and replaces the data URI with
+// the relative file path.
+function resolveEditableHtmlPath(filename) {
+  const candidate = path.resolve(SITE_ROOT, filename);
+  if (!candidate.toLowerCase().endsWith('.html') || !isInsidePath(SITE_ROOT, candidate)) return null;
+  try {
+    const realRoot = fs.realpathSync(SITE_ROOT);
+    const realCandidate = fs.realpathSync(candidate);
+    return isInsidePath(realRoot, realCandidate) ? realCandidate : null;
+  } catch {
+    return candidate;
+  }
+}
+
+function writeHtmlWithBackup(filePath, html) {
+  const relative = path.relative(SITE_ROOT, filePath);
+  const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const backupDir = path.join(SITE_ROOT, '.buzl', 'backups', path.dirname(relative));
+  const parsed = path.parse(filePath);
+  const backupPath = path.join(backupDir, parsed.name + '-' + stamp + parsed.ext);
+  const temporaryPath = filePath + '.buzl-' + process.pid + '-' + Date.now() + '.tmp';
+  fs.mkdirSync(backupDir, { recursive: true });
+  fs.copyFileSync(filePath, backupPath);
+  try {
+    fs.writeFileSync(temporaryPath, html, 'utf8');
+    fs.renameSync(temporaryPath, filePath);
+  } finally {
+    if (fs.existsSync(temporaryPath)) fs.unlinkSync(temporaryPath);
+  }
+}
+
+function shouldPersistGjsCss(cssContent) {
+  if (!cssContent || !cssContent.trim()) return false;
+
+  const normalized = cssContent
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\s+/g, ' ')
+    .replace(/\s*([{}:;,])\s*/g, '$1')
+    .trim();
+
+  return normalized !== '*{box-sizing:border-box;}body{margin:0;}';
+}
+
+const MIME_TO_EXT = {
+  'image/png': '.png',
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+  'image/svg+xml': '.svg',
+  'image/avif': '.avif',
+};
+
+async function extractAndSaveBase64Images($, siteRoot) {
+  const imagesDir = path.join(siteRoot, 'assets', 'images');
+
+  // Ensure the directory exists
+  if (!fs.existsSync(imagesDir)) {
+    fs.mkdirSync(imagesDir, { recursive: true });
+  }
+
+  // Track data-hash → filename so duplicate images reuse the same file
+  const saved = new Map();
+  let count = 0;
+
+  // Regex to match data:image URIs (works for src attributes and CSS urls)
+  const dataUriRegex = /^data:(image\/[a-zA-Z+]+);base64,(.+)$/s;
+
+  // 1. Process <img> tags with data: src
+  const imageElements = $('img[src^="data:image"]').toArray();
+  for (const el of imageElements) {
+    const src = $(el).attr('src');
+    const match = src.match(dataUriRegex);
+    if (!match) continue;
+
+    const mimeType = match[1];
+    const base64Data = match[2];
+
+    // Try to derive a meaningful filename from alt, title, or data-filename
+    const nameHint = $(el).attr('data-filename')
+      || $(el).attr('alt')
+      || $(el).attr('title')
+      || '';
+
+    const filePath = await saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint);
+    if (filePath) {
+      $(el).attr('src', filePath);
+      count++;
+    }
+  }
+
+  // 2. Process any element with inline style containing base64 background-image
+  const styleElements = $('[style*="data:image"]').toArray();
+  for (const el of styleElements) {
+    let style = $(el).attr('style');
+    if (!style) continue;
+
+    const matches = [...style.matchAll(/url\(\s*['"]?(data:(image\/[a-zA-Z+]+);base64,([^'")\s]+))['"]?\s*\)/g)];
+    for (const match of matches) {
+      const filePath = await saveBase64Image(match[3], match[2], imagesDir, saved);
+      if (!filePath) continue;
+      style = style.replace(match[0], `url('${filePath}')`);
+      count++;
+    }
+    $(el).attr('style', style);
+  }
+
+  return count;
+}
+
+async function saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint = '') {
+  // Create a short hash of the content for dedup
+  const hash = crypto.createHash('md5').update(base64Data.slice(0, 2048)).digest('hex').slice(0, 8);
+
+  if (saved.has(hash)) {
+    return saved.get(hash);
+  }
+
+  // Try to build a meaningful filename from the hint
+  let baseName = '';
+  if (nameHint) {
+    baseName = nameHint.replace(/\.[a-zA-Z]{2,5}$/, '');
+    baseName = baseName
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
+  if (!baseName) baseName = 'img';
+
+  // Include the content hash even when a human-friendly hint exists so two
+  // different images with the same alt text never overwrite or reuse one file.
+  const outputName = `${baseName}-${hash}`;
+  const outputStem = path.join(imagesDir, outputName);
+  const avifPath = `${outputStem}.avif`;
+  const avifUrl = `/assets/images/${outputName}.avif`;
+
+  if (fs.existsSync(avifPath)) {
+    saved.set(hash, avifUrl);
+    return avifUrl;
+  }
+
+  const buffer = Buffer.from(base64Data, 'base64');
+  try {
+    const optimized = await compressImage(buffer, outputStem);
+    const optimizedUrl = `/assets/images/${path.basename(optimized.path)}`;
+    console.log(`  💾  Saved optimized base64 image → ${optimizedUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
+    saved.set(hash, optimizedUrl);
+    return optimizedUrl;
+  } catch (err) {
+    // Preserve valid source data if Sharp cannot convert a supported edge case.
+    const fallbackExt = MIME_TO_EXT[mimeType] || '.png';
+    const fallbackName = `${outputName}${fallbackExt}`;
+    const fallbackPath = path.join(imagesDir, fallbackName);
+    if (!fs.existsSync(fallbackPath)) fs.writeFileSync(fallbackPath, buffer);
+    const fallbackUrl = `/assets/images/${fallbackName}`;
+    console.warn(`  ⚠️  AVIF conversion failed; kept original image → ${fallbackUrl}: ${err.message}`);
+    saved.set(hash, fallbackUrl);
+    return fallbackUrl;
+  }
+}
+
+function findHtmlFiles(dir, base = '') {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const relPath = base ? `${base}/${entry.name}` : entry.name;
+
+    // Skip admin tools, duplicate exported copies, dependencies, backups, and tests.
+    if (EDITABLE_EXCLUDED_DIRS.has(entry.name.toLowerCase())) {
+      continue;
+    }
+    if (entry.name.startsWith('.')) continue;
+    if (entry.name.startsWith('_backups')) continue;
+
+    if (entry.isDirectory()) {
+      results.push(...findHtmlFiles(path.join(dir, entry.name), relPath));
+    } else if (entry.isFile() && entry.name.endsWith('.html')) {
+      results.push(relPath);
+    }
+  }
+
+  return results;
+}
+
+function sortEditablePages(pages) {
+  return pages.sort((a, b) => {
+    if (a === 'index.html') return -1;
+    if (b === 'index.html') return 1;
+    return a.localeCompare(b);
+  });
+}
+
+function isExcludedEditablePath(filename) {
+  const segments = filename.replace(/\\/g, '/').split('/').filter(Boolean);
+  return segments.some((segment) => {
+    const normalized = segment.toLowerCase();
+    return normalized.startsWith('.')
+      || normalized.startsWith('_backups')
+      || EDITABLE_EXCLUDED_DIRS.has(normalized);
+  });
+}
+
+function isInsidePath(parentDir, targetPath) {
+  const relative = path.relative(parentDir, targetPath);
+  return relative === '' || (!!relative && !relative.startsWith('..') && !path.isAbsolute(relative));
+}
+
+// ─── START ──────────────────────────────────────────────────────────────────
+
+// Only start the server when run directly (not when required by tests)
+if (require.main === module) {
   app.listen(PORT, HOST, () => {
-    console.log(`\n  🌐  ${siteConfig.name || 'Website'}:  http://localhost:${PORT}`);
-    console.log(`  ✏️   GrapeJS Admin editor: http://localhost:${PORT}/admin`);
-    console.log(`\n  Press Ctrl+C to stop.\n`);
-  });
-}
-
-module.exports = app;
+    console.log(`\n  🌐  ${siteConfig.name || 'Website'}:  http://localhost:${PORT}`);
+    console.log(`  ✏️   GrapeJS Admin editor: http://localhost:${PORT}/admin`);
+    console.log(`\n  Press Ctrl+C to stop.\n`);
+  });
+}
+
+module.exports = app;