feat(dev): add live-reload dev server with Juice CSS inlining

- tools/server/: Node.js dev server (Express + WebSocket + fs.watch)
  Watches themes/ for .tmpl changes, rebuilds via Go preview command,
  applies Juice CSS inlining for email client compatibility, pushes
  live reload to browser via WebSocket.
- tools/cli/dev.go: 'go run . dev' subcommand — starts Node.js server
  with automatic npm install, initial preview generation, and
  Ctrl+C graceful shutdown.
- tools/tools.go: register dev command in CLI app.
- .gitignore: add node_modules exclusion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

tools/server/server.mjs

@@ -0,0 +1,204 @@
+import { readFileSync, writeFileSync, existsSync, watch } from 'fs';
+import { createServer } from 'http';
+import { resolve, dirname, basename, join, relative } from 'path';
+import { fileURLToPath } from 'url';
+import { spawn } from 'child_process';
+
+import express from 'express';
+import expressWs from 'express-ws';
+
+import { inlineCSS } from './inliner.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..', '..');       // project root
+const TOOLS = join(ROOT, 'tools');                   // tools/ (for go run)
+const PREVIEW = join(ROOT, 'preview');               // preview/
+const THEMES = join(ROOT, 'themes');                 // themes/
+const RENDERED_JS = join(PREVIEW, 'rendered.js');
+const PORT = parseInt(process.env.PORT || '3456', 10);
+
+// ── Express + WebSocket ──
+const app = express();
+expressWs(app);
+
+// Track connected WebSocket clients
+const clients = new Set();
+
+app.ws('/ws', (ws) => {
+  clients.add(ws);
+  ws.on('close', () => clients.delete(ws));
+});
+
+// Broadcast to all connected browsers
+function broadcast(type, payload = {}) {
+  const msg = JSON.stringify({ type, ...payload });
+  for (const c of clients) c.send(msg);
+}
+
+// Serves preview/ as static (index.html, rendered.js)
+app.use(express.static(PREVIEW, { etag: false }));
+
+// ── Rebuild pipeline ──
+let building = false;
+const CHANGED_THEMES = new Set();
+
+function getThemeFromPath(filePath) {
+  const rel = relative(THEMES, filePath).replace(/\\/g, '/');
+  const parts = rel.split('/').filter(Boolean);
+  return parts[0] || null;
+}
+
+async function rebuild() {
+  if (building) { building = false; return rebuild(); } // debounce — restart
+  building = true;
+
+  const themes = [...CHANGED_THEMES];
+  CHANGED_THEMES.clear();
+
+  const start = Date.now();
+  console.log(`\n[rebuild] ${themes.length > 0 ? themes.join(', ') : 'all'} changed`);
+
+  // Step 1: Go render
+  try {
+    await goPreview(themes.length > 0 ? themes : ['all']);
+  } catch (err) {
+    console.error('[rebuild] go render failed:', err.message);
+    building = false;
+    broadcast('error', { message: err.message });
+    return;
+  }
+
+  // Step 2: Read rendered.js, apply juice inlining
+  try {
+    const renderedJS = readFileSync(RENDERED_JS, 'utf8');
+    const juiced = await juiceRenderedOutput(renderedJS);
+    writeFileSync(RENDERED_JS, juiced, 'utf8');
+  } catch (err) {
+    console.error('[rebuild] juice step failed:', err.message);
+  }
+
+  const elapsed = Date.now() - start;
+  console.log(`[rebuild] done in ${elapsed}ms`);
+
+  building = false;
+
+  // Step 3: Notify browsers
+  broadcast('reload', { elapsed });
+}
+
+// ── Go preview (child process) ──
+function goPreview(themes) {
+  return new Promise((resolve, reject) => {
+    const args = ['run', '.', 'preview', '--folder', '../themes', '--config', './data/templates_config.json', ...themes];
+    const proc = spawn('go', args, { cwd: TOOLS, stdio: ['ignore', 'pipe', 'pipe'] });
+
+    let stdout = '', stderr = '';
+    proc.stdout.on('data', (d) => { stdout += d.toString(); });
+    proc.stderr.on('data', (d) => { stderr += d.toString(); });
+
+    proc.on('close', (code) => {
+      if (code !== 0) reject(new Error(stderr.trim() || `exit ${code}`));
+      else {
+        // Print the summary lines
+        const lines = stdout.split('\n').filter(l => l.includes('all required') || l.includes('only'));
+        for (const l of lines) console.log('  ' + l.trim());
+        resolve(stdout);
+      }
+    });
+
+    proc.on('error', reject);
+  });
+}
+
+// ── Juice post-processing ──
+function juiceRenderedOutput(jsContent) {
+  // rendered.js format: window.__RENDERED__ = { "theme": { "tpl": "<html>..." } };
+  // We inline CSS inside each rendered HTML snippet
+  const match = jsContent.match(/window\.__RENDERED__\s*=\s*(\{[\s\S]*?\});/);
+  if (!match) return Promise.resolve(jsContent);
+
+  let rendered;
+  try {
+    rendered = JSON.parse(match[1]);
+  } catch {
+    return Promise.resolve(jsContent); // can't parse, skip
+  }
+
+  let changed = false;
+  for (const theme of Object.keys(rendered)) {
+    for (const tpl of Object.keys(rendered[theme])) {
+      const html = rendered[theme][tpl];
+      if (typeof html !== 'string') continue;
+      // Only inline HTML that has a <style> block (skip error messages)
+      if (!html.includes('<style') && !html.includes('<html')) continue;
+      try {
+        const juiced = inlineCSS(html);
+        if (juiced !== html) {
+          rendered[theme][tpl] = juiced;
+          changed = true;
+        }
+      } catch {
+        // keep original on juice failure
+      }
+    }
+  }
+
+  if (changed) {
+    const newRendered = 'window.__RENDERED__ = ' + JSON.stringify(rendered, null, 2) + ';\n';
+    // Preserve __REGISTRY__ and __PARAMS__ from original
+    const rest = jsContent.replace(/window\.__RENDERED__\s*=\s*\{[\s\S]*?\};/, '');
+    return Promise.resolve(newRendered + rest);
+  }
+  return Promise.resolve(jsContent);
+}
+
+// ── File watcher (native fs.watch, recursive) ──
+function relPath(absPath) {
+  return relative(ROOT, absPath).replace(/\\/g, '/');
+}
+
+// Debounced rebuild trigger
+let rebuildTimer = null;
+function scheduleRebuild(filePath) {
+  const theme = getThemeFromPath(filePath);
+  if (!theme) return;
+
+  const ext = filePath.slice(filePath.lastIndexOf('.'));
+  if (ext !== '.tmpl') return;
+
+  CHANGED_THEMES.add(theme);
+  clearTimeout(rebuildTimer);
+  rebuildTimer = setTimeout(rebuild, 300);
+}
+
+// Watch themes directory recursively (Windows supports recursive)
+try {
+  watch(THEMES, { recursive: true }, (event, fname) => {
+    if (!fname || !fname.endsWith('.tmpl')) return;
+    const fullPath = join(THEMES, fname);
+    // event is 'rename' for both create and delete; 'change' for modifications
+    if (event === 'change') {
+      console.log('[watch] ' + relPath(fullPath) + ' edited');
+      scheduleRebuild(fullPath);
+    } else if (event === 'rename') {
+      if (existsSync(fullPath)) {
+        console.log('[watch] ' + relPath(fullPath) + ' created');
+      } else {
+        console.log('[watch] ' + relPath(fullPath) + ' deleted');
+      }
+    }
+  });
+  console.log('[watch] themes/ (recursive)');
+} catch (err) {
+  console.error('[watch] failed:', err.message);
+}
+
+// ── Start server ──
+app.get('/health', (_req, res) => res.json({ status: 'ok', port: PORT }));
+
+createServer(app).listen(PORT, () => {
+  console.log(`\n  Gitea Mail Templates — Dev Server`);
+  console.log(`  http://localhost:${PORT}\n`);
+  console.log(`  Watching themes/ for changes...`);
+  console.log(`  WebSocket  ws://localhost:${PORT}/ws`);
+});