4bnode 4.0.3 → 4.0.4

package/skeleton/.4bnode/dev-api.js

@@ -3,11 +3,51 @@ import fs from 'fs';
 import path from 'path';
 import { execSync, exec } from 'child_process';
 import { promisify } from 'util';
+import { pathToFileURL } from 'url';
 const execAsync = promisify(exec);
 import crypto from 'crypto';
 
 const router = express.Router();
 
+// ── Console Log Capture ─────────────────────────────────────────────────────
+const _logBuffer = [];
+const _logMaxSize = 500;
+const _logClients = new Set();
+
+function pushLog(type, args) {
+  const entry = {
+    id: Date.now() + '-' + Math.random().toString(36).slice(2, 7),
+    type,
+    message: args.map(a => (typeof a === 'string' ? a : JSON.stringify(a, null, 2))).join(' '),
+    timestamp: new Date().toISOString(),
+  };
+  _logBuffer.push(entry);
+  if (_logBuffer.length > _logMaxSize) _logBuffer.splice(0, _logBuffer.length - _logMaxSize);
+  for (const client of _logClients) {
+    client.write(`data: ${JSON.stringify(entry)}\n\n`);
+  }
+}
+
+const _origLog = console.log.bind(console);
+const _origError = console.error.bind(console);
+const _origWarn = console.warn.bind(console);
+const _origInfo = console.info.bind(console);
+
+console.log = (...args) => { _origLog(...args); pushLog('log', args); };
+console.error = (...args) => { _origError(...args); pushLog('error', args); };
+console.warn = (...args) => { _origWarn(...args); pushLog('warn', args); };
+console.info = (...args) => { _origInfo(...args); pushLog('info', args); };
+
+// Capture uncaught errors
+process.on('uncaughtException', (err) => {
+  pushLog('error', [`Uncaught Exception: ${err.stack || err.message}`]);
+  _origError('Uncaught Exception:', err);
+});
+process.on('unhandledRejection', (reason) => {
+  pushLog('error', [`Unhandled Rejection: ${reason?.stack || reason}`]);
+  _origError('Unhandled Rejection:', reason);
+});
+
 // Serve dashboard UI and assets
 const __4bnodeDir = path.join(process.cwd(), '.4bnode');
 router.get('/', (req, res) => {
@@ -40,6 +80,8 @@ router.post('/api/auth', (req, res) => {
 // Auth middleware — protect all /api/* routes below
 router.use('/api', (req, res, next) => {
   if (req.path === '/auth') return next();
+  // SSE endpoint handles its own auth via query param (EventSource can't send headers)
+  if (req.path === '/logs/stream') return next();
   const stored = getPasskeyHash();
   if (!stored) return next();
   const passkey = req.headers['x-passkey'];
@@ -133,12 +175,12 @@ function getModelSchemaDetailed(modelName) {
     modelName + ".js"
   );
   if (!fs.existsSync(modelFilePath)) {
-    return [];
+    return { fields: [], indexes: [] };
   }
 
   const content = fs.readFileSync(modelFilePath, "utf8");
   const schemaContent = extractSchemaBlock(content);
-  if (!schemaContent) return [];
+  if (!schemaContent) return { fields: [], indexes: [] };
   const fields = [];
   // Match each field block: fieldName: { type: ..., required: ..., unique: ..., default: ... }
   const fieldRegex = /(\w+)\s*:\s*\{([^}]*)\}/g;
@@ -152,16 +194,41 @@ function getModelSchemaDetailed(modelName) {
       : "String";
     const required = /required:\s*true/.test(props);
     const unique = /unique:\s*true/.test(props);
+    const indexed = /index:\s*true/.test(props);
     const refMatch = props.match(/ref:\s*['"](\w+)['"]/);
     const defaultMatch = props.match(/default:\s*(.+?)(?:,\s*\w+:|$)/);
     const field = { name, type, required, unique };
+    if (indexed) field.index = true;
     if (refMatch) field.ref = refMatch[1];
     if (defaultMatch) {
       field.default = defaultMatch[1].trim();
     }
     fields.push(field);
   }
-  return fields;
+
+  // Parse compound/text indexes: SchemaName.index({ ... })
+  const indexes = [];
+  const indexRegex = /\w+Schema\.index\(\s*\{([^}]+)\}(?:\s*,\s*\{([^}]*)\})?\s*\)/g;
+  let idxMatch;
+  while ((idxMatch = indexRegex.exec(content)) !== null) {
+    const fieldsStr = idxMatch[1];
+    const optsStr = idxMatch[2] || '';
+    const idxFields = [];
+    const fieldEntries = fieldsStr.split(',').map(s => s.trim()).filter(Boolean);
+    for (const entry of fieldEntries) {
+      const [key, val] = entry.split(':').map(s => s.trim());
+      if (val === "'text'" || val === '"text"') {
+        idxFields.push({ field: key, direction: 'text' });
+      } else {
+        idxFields.push({ field: key, direction: parseInt(val) || 1 });
+      }
+    }
+    const isUnique = /unique:\s*true/.test(optsStr);
+    const isText = idxFields.some(f => f.direction === 'text');
+    indexes.push({ fields: idxFields, unique: isUnique, type: isText ? 'text' : 'compound' });
+  }
+
+  return { fields, indexes };
 }
 
 function getModelSchema(modelName) {
@@ -323,7 +390,7 @@ ${assignments}
   };
 ${passwordLogic}
   try {
-    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { new: true });
+    const updatedDocument = await ${pascalName}.findByIdAndUpdate(req.params.id, updatedData, { returnDocument: 'after' });
     if (!updatedDocument) {
       return res.status(404).json({ message: 'Document not found' });
     }
@@ -355,23 +422,35 @@ router.delete('/:id', async (req, res) => {
 // Schema file generation helper
 // ---------------------------------------------------------------------------
 
-function generateSchemaFileContent(pascalName, fields) {
+function generateSchemaFileContent(pascalName, fields, indexes = []) {
   const fieldLines = fields.map((f) => {
     const type = f.type || 'String';
     const parts = [type === 'ObjectId' ? 'type: mongoose.Schema.Types.ObjectId' : `type: ${type}`];
     if (f.ref) parts.push(`ref: '${f.ref}'`);
     if (f.required) parts.push('required: true');
     if (f.unique) parts.push('unique: true');
+    if (f.index) parts.push('index: true');
     if (f.default !== undefined && f.default !== '') parts.push(`default: ${f.default}`);
     return `  ${f.name}: { ${parts.join(', ')} }`;
   });
 
+  // Add index lines
+  let indexLines = '';
+  for (const idx of indexes) {
+    const fieldObj = idx.fields.map(f => {
+      if (f.direction === 'text') return `${f.field}: 'text'`;
+      return `${f.field}: ${f.direction || 1}`;
+    }).join(', ');
+    const options = idx.unique ? ', { unique: true }' : '';
+    indexLines += `\n${pascalName}Schema.index({ ${fieldObj} }${options});`;
+  }
+
   return `import mongoose from 'mongoose';
 
 const ${pascalName}Schema = new mongoose.Schema({
 ${fieldLines.join(',\n')}
 }, { timestamps: true });
-
+${indexLines}
 const ${pascalName} = mongoose.model('${pascalName}', ${pascalName}Schema);
 
 export default ${pascalName};
@@ -388,8 +467,8 @@ router.get('/api/dashboard', (req, res) => {
     const modelFiles = listModels();
     const models = modelFiles.map((f) => {
       const name = path.basename(f, '.js');
-      const fields = getModelSchemaDetailed(name);
-      return { name, fields };
+      const { fields, indexes } = getModelSchemaDetailed(name);
+      return { name, fields, indexes };
     });
     const routes = listRoutes();
     const mongoConfigured = checkMongoConfig();
@@ -435,8 +514,8 @@ router.get('/api/models', (req, res) => {
 router.get('/api/models/:name', (req, res) => {
   try {
     const name = req.params.name;
-    const fields = getModelSchemaDetailed(name);
-    res.json({ name, fields });
+    const { fields, indexes } = getModelSchemaDetailed(name);
+    res.json({ name, fields, indexes });
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
@@ -456,7 +535,7 @@ router.get('/api/models/:name/data', async (req, res) => {
     if (!fs.existsSync(projectMongoose)) {
       return res.status(400).json({ error: 'Mongoose is not installed. Set up MongoDB first.' });
     }
-    const mongoose = (await import(projectMongoose)).default;
+    const mongoose = (await import(pathToFileURL(projectMongoose).href)).default;
 
     // Connect if not already connected
     if (mongoose.connection.readyState === 0) {
@@ -482,7 +561,7 @@ router.get('/api/models/:name/data', async (req, res) => {
 router.get('/api/models/:name/share', (req, res) => {
   try {
     const name = req.params.name;
-    const fields = getModelSchemaDetailed(name);
+    const { fields } = getModelSchemaDetailed(name);
     const routes = listRoutes();
     const routeFile = routes.find(r => r === name + '.js' || r === name + 's.js');
 
@@ -519,7 +598,7 @@ router.post('/api/models', (req, res) => {
       return res.status(400).json({ error: 'Database must be configured before creating schemas. Set up MongoDB first.' });
     }
 
-    const { name, fields } = req.body;
+    const { name, fields, indexes } = req.body;
     const safeName = sanitizeName(name);
     const pascalName = toPascalCase(safeName);
 
@@ -533,7 +612,7 @@ router.post('/api/models', (req, res) => {
       return res.status(409).json({ error: `Model "${safeName}" already exists.` });
     }
 
-    const content = generateSchemaFileContent(pascalName, fields);
+    const content = generateSchemaFileContent(pascalName, fields, indexes);
     fs.writeFileSync(filePath, content, 'utf8');
     res.json({ message: `Model "${safeName}" created.`, file: `src/models/${safeName}.js` });
   } catch (err) {
@@ -545,7 +624,7 @@ router.post('/api/models', (req, res) => {
 router.put('/api/models/:name', (req, res) => {
   try {
     const name = req.params.name;
-    const { fields } = req.body;
+    const { fields, indexes } = req.body;
     const pascalName = toPascalCase(name);
 
     const filePath = path.join(process.cwd(), 'src', 'models', name + '.js');
@@ -553,7 +632,7 @@ router.put('/api/models/:name', (req, res) => {
       return res.status(404).json({ error: `Model "${name}" not found.` });
     }
 
-    const content = generateSchemaFileContent(pascalName, fields);
+    const content = generateSchemaFileContent(pascalName, fields, indexes);
     fs.writeFileSync(filePath, content, 'utf8');
     res.json({ message: `Model "${name}" updated.`, file: `src/models/${name}.js` });
   } catch (err) {
@@ -749,18 +828,56 @@ router.post('/api/routes/:name/add-method', async (req, res) => {
     } else if (routeType === 'crud' && modelName) {
       addImport(`import ${pascalModel} from '../models/${modelName}.js';`);
       const crudMethods = newMethods.length > 0 ? newMethods : ['get', 'post', 'put', 'delete'].filter(m => !existingMethods.includes(m));
+      const allCrudFields = [...selectedFields.map(f => typeof f === 'string' ? { name: f, type: 'String' } : f), ...customFields];
+      const crudBodyFields = allCrudFields.filter(f => f.type !== 'File');
+      const crudFileFields = allCrudFields.filter(f => f.type === 'File');
+      const crudHasFiles = crudFileFields.length > 0;
+      const crudHasFields = allCrudFields.length > 0;
+
+      if (crudHasFiles) {
+        addImport("import multer from 'multer';");
+        if (!content.includes('const upload = multer')) {
+          content = content.replace('const router = express.Router();', "const router = express.Router();\n\nconst upload = multer({ dest: 'uploads/' });");
+        }
+        packagesToInstall.push('multer');
+      }
+
+      let dest = '';
+      let obj = 'req.body';
+      if (crudHasFields) {
+        const parts = [];
+        if (crudBodyFields.length > 0) {
+          dest = `const { ${crudBodyFields.map(f => f.name).join(', ')} } = req.body;`;
+          parts.push(...crudBodyFields.map(f => f.name));
+        }
+        if (crudFileFields.length > 0) {
+          const fileLines = crudFileFields.map(f => {
+            if (crudFileFields.length === 1) return `const ${f.name} = req.file ? req.file.path : undefined;`;
+            return `const ${f.name} = req.files?.['${f.name}']?.[0]?.path || undefined;`;
+          }).join('\\n    ');
+          dest = (dest ? dest + '\\n    ' : '') + fileLines;
+          parts.push(...crudFileFields.map(f => f.name));
+        }
+        obj = `{ ${parts.join(', ')} }`;
+      }
+
+      let mw = '';
+      if (crudHasFiles) {
+        if (crudFileFields.length === 1) mw = `upload.single('${crudFileFields[0].name}'), `;
+        else mw = `upload.fields([${crudFileFields.map(f => `{ name: '${f.name}', maxCount: 1 }`).join(', ')}]), `;
+      }
 
       if (crudMethods.includes('get')) {
         handlers += `\n// Get all\nrouter.get('/', async (req, res) => {\n  try {\n    const items = await ${pascalModel}.find();\n    res.json(items);\n  } catch (err) {\n    res.status(500).json({ message: err.message });\n  }\n});\n\n// Get by ID\nrouter.get('/:id', async (req, res) => {\n  try {\n    const item = await ${pascalModel}.findById(req.params.id);\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json(item);\n  } catch (err) {\n    res.status(500).json({ message: err.message });\n  }\n});\n`;
       }
       if (crudMethods.includes('post')) {
-        handlers += `\n// Create\nrouter.post('/', async (req, res) => {\n  try {\n    const item = new ${pascalModel}(req.body);\n    const saved = await item.save();\n    res.status(201).json(saved);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
+        handlers += `\n// Create\nrouter.post('/', ${mw}async (req, res) => {\n  try {\n    ${dest}\n    const item = new ${pascalModel}(${obj});\n    const saved = await item.save();\n    res.status(201).json(saved);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
       }
       if (crudMethods.includes('put')) {
-        handlers += `\n// Update\nrouter.put('/:id', async (req, res) => {\n  try {\n    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true });\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json(item);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
+        handlers += `\n// Update\nrouter.put('/:id', ${mw}async (req, res) => {\n  try {\n    ${dest}\n    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, ${obj}, { returnDocument: 'after', runValidators: true });\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json(item);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
       }
       if (crudMethods.includes('patch')) {
-        handlers += `\n// Partial Update\nrouter.patch('/:id', async (req, res) => {\n  try {\n    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true });\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json(item);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
+        handlers += `\n// Partial Update\nrouter.patch('/:id', ${mw}async (req, res) => {\n  try {\n    ${dest}\n    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, ${obj}, { returnDocument: 'after', runValidators: true });\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json(item);\n  } catch (err) {\n    res.status(400).json({ message: err.message });\n  }\n});\n`;
       }
       if (crudMethods.includes('delete')) {
         handlers += `\n// Delete\nrouter.delete('/:id', async (req, res) => {\n  try {\n    const item = await ${pascalModel}.findByIdAndDelete(req.params.id);\n    if (!item) return res.status(404).json({ message: '${pascalModel} not found' });\n    res.json({ message: '${pascalModel} deleted' });\n  } catch (err) {\n    res.status(500).json({ message: err.message });\n  }\n});\n`;
@@ -849,7 +966,7 @@ router.get('/api/routes/:name/share', (req, res) => {
     const modelImportMatch = content.match(/import\s+(\w+)\s+from\s+['"]\.\.\/models\/(\w+)['"]/);
     let modelFields = [];
     if (modelImportMatch) {
-      modelFields = getModelSchemaDetailed(modelImportMatch[2]);
+      modelFields = getModelSchemaDetailed(modelImportMatch[2]).fields;
     }
 
     // Parse each endpoint with body/query fields
@@ -1322,6 +1439,46 @@ router.${m}('/', async (req, res) => {
       }
     } else if (type === 'crud' && modelName) {
       const crudMethods = methodList.length > 0 ? methodList : ['get', 'post', 'put', 'delete'];
+      const allFields = [...selectedFields.map(f => typeof f === 'string' ? { name: f, type: 'String' } : f), ...customFields];
+      const bodyFields = allFields.filter(f => f.type !== 'File');
+      const fileFields = allFields.filter(f => f.type === 'File');
+      const hasFileFields = fileFields.length > 0;
+      const hasFields = allFields.length > 0;
+
+      if (hasFileFields) {
+        imports += "import multer from 'multer';\n";
+      }
+
+      // Build destructure and object construction
+      let destructure = '';
+      let buildObj = 'req.body';
+      if (hasFields) {
+        const parts = [];
+        if (bodyFields.length > 0) {
+          destructure = `const { ${bodyFields.map(f => f.name).join(', ')} } = req.body;`;
+          parts.push(...bodyFields.map(f => f.name));
+        }
+        if (fileFields.length > 0) {
+          const fileLines = fileFields.map(f => {
+            if (fileFields.length === 1) return `const ${f.name} = req.file ? req.file.path : undefined;`;
+            return `const ${f.name} = req.files?.['${f.name}']?.[0]?.path || undefined;`;
+          }).join('\n    ');
+          destructure = (destructure ? destructure + '\n    ' : '') + fileLines;
+          parts.push(...fileFields.map(f => f.name));
+        }
+        buildObj = `{ ${parts.join(', ')} }`;
+      }
+
+      // Multer middleware string for write methods
+      let middlewareStr = '';
+      if (hasFileFields) {
+        if (fileFields.length === 1) {
+          middlewareStr = `upload.single('${fileFields[0].name}'), `;
+        } else {
+          const fieldsArg = fileFields.map(f => `{ name: '${f.name}', maxCount: 1 }`).join(', ');
+          middlewareStr = `upload.fields([${fieldsArg}]), `;
+        }
+      }
 
       if (crudMethods.includes('get')) {
         handlers += `
@@ -1351,9 +1508,10 @@ router.get('/:id', async (req, res) => {
       if (crudMethods.includes('post')) {
         handlers += `
 // Create
-router.post('/', async (req, res) => {
+router.post('/', ${middlewareStr}async (req, res) => {
   try {
-    const item = new ${pascalModel}(req.body);
+    ${destructure}
+    const item = new ${pascalModel}(${buildObj});
     const saved = await item.save();
     res.status(201).json(saved);
   } catch (err) {
@@ -1366,9 +1524,10 @@ router.post('/', async (req, res) => {
       if (crudMethods.includes('put')) {
         handlers += `
 // Update
-router.put('/:id', async (req, res) => {
+router.put('/:id', ${middlewareStr}async (req, res) => {
   try {
-    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true });
+    ${destructure}
+    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, ${buildObj}, { returnDocument: 'after', runValidators: true });
     if (!item) return res.status(404).json({ message: '${pascalModel} not found' });
     res.json(item);
   } catch (err) {
@@ -1381,9 +1540,10 @@ router.put('/:id', async (req, res) => {
       if (crudMethods.includes('patch')) {
         handlers += `
 // Partial Update
-router.patch('/:id', async (req, res) => {
+router.patch('/:id', ${middlewareStr}async (req, res) => {
   try {
-    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, req.body, { new: true, runValidators: true });
+    ${destructure}
+    const item = await ${pascalModel}.findByIdAndUpdate(req.params.id, ${buildObj}, { returnDocument: 'after', runValidators: true });
     if (!item) return res.status(404).json({ message: '${pascalModel} not found' });
     res.json(item);
   } catch (err) {
@@ -1407,6 +1567,10 @@ router.delete('/:id', async (req, res) => {
 });
 `;
       }
+
+      if (hasFileFields) {
+        handlers = `\nconst upload = multer({ dest: 'uploads/' });\n` + handlers;
+      }
     } else if (type === 'register' && modelName) {
       const regFields = registerFields.length > 0 ? registerFields : [findField];
       const allDestructured = regFields.join(', ');
@@ -2307,7 +2471,7 @@ router.get('/api/api-tester/routes', (req, res) => {
       const modelImportMatch = content.match(/import\s+(\w+)\s+from\s+['"]\.\.\/models\/(\w+)['"]/);
       let modelFields = [];
       if (modelImportMatch) {
-        modelFields = getModelSchemaDetailed(modelImportMatch[2]);
+        modelFields = getModelSchemaDetailed(modelImportMatch[2]).fields;
       }
 
       const endpoints = [];
@@ -2383,6 +2547,414 @@ router.get('/api/api-tester/routes', (req, res) => {
   }
 });
 
+// ---------------------------------------------------------------------------
+// Reports — schema info & Excel generation
+// ---------------------------------------------------------------------------
+router.get('/api/reports/schema-info', (req, res) => {
+  try {
+    const modelFiles = listModels();
+    const models = modelFiles.map(f => {
+      const name = path.basename(f, '.js');
+      const detail = getModelSchemaDetailed(name);
+      const fields = Array.isArray(detail) ? detail : detail.fields;
+      return { name, fields: fields.map(field => {
+        const result = { ...field };
+        if (field.type === 'ObjectId' && field.ref) {
+          const refDetail = getModelSchemaDetailed(field.ref);
+          const refFields = Array.isArray(refDetail) ? refDetail : refDetail.fields;
+          result.refFields = refFields.map(rf => rf.name);
+        }
+        return result;
+      })};
+    });
+    res.json({ models });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Date formatting helper
+function formatDateValue(val, format, tz) {
+  if (!(val instanceof Date)) {
+    try { val = new Date(val); } catch { return String(val); }
+    if (isNaN(val.getTime())) return String(val);
+  }
+  if (format === 'ISO') return val.toISOString();
+  if (format === 'UNIX') return Math.floor(val.getTime() / 1000);
+  const isAmPm = format.includes(' A');
+  const opts = { timeZone: tz || 'UTC', hour12: isAmPm };
+  const parts = {};
+  try {
+    const fmt = new Intl.DateTimeFormat('en-US', { ...opts, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    fmt.formatToParts(val).forEach(p => { parts[p.type] = p.value; });
+  } catch { return val.toISOString(); }
+  const Y = parts.year, M = parts.month, D = parts.day;
+  const H = parts.hour, m = parts.minute, s = parts.second;
+  const ampm = parts.dayPeriod || '';
+  const time = isAmPm ? `${H}:${m}:${s} ${ampm}` : `${H}:${m}:${s}`;
+  // Normalize hour for 24h (en-US with hour12:false gives "24" for midnight, fix to "00")
+  const H24 = !isAmPm && H === '24' ? '00' : H;
+  const time24 = `${H24}:${m}:${s}`;
+  switch (format) {
+    case 'YYYY-MM-DD HH:mm:ss': return `${Y}-${M}-${D} ${time24}`;
+    case 'DD/MM/YYYY HH:mm:ss': return `${D}/${M}/${Y} ${time24}`;
+    case 'MM/DD/YYYY HH:mm:ss': return `${M}/${D}/${Y} ${time24}`;
+    case 'YYYY-MM-DD hh:mm:ss A': return `${Y}-${M}-${D} ${time}`;
+    case 'DD/MM/YYYY hh:mm:ss A': return `${D}/${M}/${Y} ${time}`;
+    case 'MM/DD/YYYY hh:mm:ss A': return `${M}/${D}/${Y} ${time}`;
+    case 'YYYY-MM-DD': return `${Y}-${M}-${D}`;
+    case 'DD/MM/YYYY': return `${D}/${M}/${Y}`;
+    case 'MM/DD/YYYY': return `${M}/${D}/${Y}`;
+    default: return `${Y}-${M}-${D} ${time24}`;
+  }
+}
+
+function formatVal(val, dateFormat, timezone) {
+  if (val === null || val === undefined) return null;
+  // Native Date
+  if (val instanceof Date) return formatDateValue(val, dateFormat, timezone);
+  // String that looks like ISO date
+  if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(val)) return formatDateValue(val, dateFormat, timezone);
+  // Non-null objects (BSON types from MongoDB driver)
+  if (typeof val === 'object') {
+    const str = val.toString();
+    // BSON Date — toString gives a date string, or has getTime
+    if (typeof val.getTime === 'function') return formatDateValue(new Date(val.getTime()), dateFormat, timezone);
+    // ObjectId or other BSON — toString gives hex string
+    if (str && str !== '[object Object]') return str;
+    return JSON.stringify(val);
+  }
+  return val;
+}
+
+router.post('/api/reports/preview', async (req, res) => {
+  try {
+    const { name, fields = [], systemFields = [], populatedFields = {}, dateFormat = 'YYYY-MM-DD HH:mm:ss', timezone = 'UTC', fieldPrefixes = {} } = req.body;
+    if (!name) return res.status(400).json({ error: 'Model name required' });
+
+    const projectMongoose = path.join(process.cwd(), 'node_modules', 'mongoose', 'index.js');
+    if (!fs.existsSync(projectMongoose)) return res.status(400).json({ error: 'Mongoose not installed.' });
+    const mongoose = (await import(pathToFileURL(projectMongoose).href)).default;
+    if (mongoose.connection.readyState === 0) {
+      const devEnv = path.join(process.cwd(), '.env.development');
+      const uri = getEnvValue(devEnv, 'MONGO_URI');
+      if (!uri) return res.status(400).json({ error: 'MONGO_URI not configured.' });
+      await mongoose.connect(uri);
+    }
+
+    const collection = mongoose.connection.db.collection(name + 's');
+    const rawDocs = await collection.find({}).limit(10).toArray();
+    // Convert BSON to plain JSON objects for reliable field access
+    const docs = JSON.parse(JSON.stringify(rawDocs));
+
+    // Populate referenced fields
+    const lookups = {};
+    for (const [refField, subFields] of Object.entries(populatedFields)) {
+      if (!subFields || subFields.length === 0) continue;
+      const detail = getModelSchemaDetailed(name);
+      const schemaFields = detail.fields || [];
+      const fieldDef = schemaFields.find(f => f.name === refField);
+      if (!fieldDef || !fieldDef.ref) continue;
+      const ids = [...new Set(docs.map(d => d[refField]).filter(Boolean).map(id => typeof id === 'object' ? (id.$oid || id.toString()) : String(id)))];
+      if (ids.length === 0) continue;
+      const { ObjectId } = mongoose.Types;
+      const rawRefDocs = await mongoose.connection.db.collection(fieldDef.ref + 's')
+        .find({ _id: { $in: ids.map(id => { try { return new ObjectId(id); } catch { return id; } }) } }).toArray();
+      const refDocs = JSON.parse(JSON.stringify(rawRefDocs));
+      const map = {};
+      for (const rd of refDocs) {
+        const rdId = typeof rd._id === 'object' ? (rd._id.$oid || rd._id) : rd._id;
+        map[String(rdId)] = rd;
+      }
+      lookups[refField] = { subFields, map };
+    }
+
+    function applyPrefix(key, val) {
+      if (val === null || val === undefined) return val;
+      const prefix = fieldPrefixes[key];
+      return prefix ? prefix + val : val;
+    }
+
+    const rows = docs.map(doc => {
+      const row = {};
+      // System fields first
+      for (const sf of systemFields) {
+        let val = doc[sf];
+        if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+        if (val && typeof val === 'object' && val.$date) val = val.$date;
+        row[sf] = applyPrefix(sf, formatVal(val, dateFormat, timezone));
+      }
+      // Model fields
+      for (const f of fields) {
+        let val = doc[f];
+        if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+        if (val && typeof val === 'object' && val.$date) val = val.$date;
+        row[f] = applyPrefix(f, formatVal(val, dateFormat, timezone));
+      }
+      // Populated ref fields
+      for (const [refField, { subFields, map }] of Object.entries(lookups)) {
+        let refId = doc[refField];
+        if (refId && typeof refId === 'object' && refId.$oid) refId = refId.$oid;
+        const refDoc = refId ? map[String(refId)] : null;
+        for (const sf of subFields) {
+          const colKey = refField + '.' + sf;
+          let val = refDoc ? refDoc[sf] : null;
+          if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+          if (val && typeof val === 'object' && val.$date) val = val.$date;
+          row[colKey] = applyPrefix(colKey, formatVal(val, dateFormat, timezone));
+        }
+      }
+      return row;
+    });
+
+    // Reorder columns if columnOrder provided
+    const columnOrder = req.body.columnOrder;
+    if (columnOrder && columnOrder.length > 0) {
+      const ordered = rows.map(row => {
+        const r = {};
+        columnOrder.forEach(col => { if (col in row) r[col] = row[col]; });
+        return r;
+      });
+      return res.json({ rows: ordered });
+    }
+    res.json({ rows });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post('/api/reports/generate', async (req, res) => {
+  try {
+    const { models: reportModels, filename, dateFormat = 'YYYY-MM-DD HH:mm:ss', timezone = 'UTC' } = req.body;
+    if (!reportModels || !reportModels.length) {
+      return res.status(400).json({ error: 'No models selected' });
+    }
+
+    // Try to import xlsx-js-style (supports styling) or fall back to xlsx
+    let XLSX;
+    try {
+      const styledPkg = path.join(process.cwd(), 'node_modules', 'xlsx-js-style');
+      const plainPkg = path.join(process.cwd(), 'node_modules', 'xlsx');
+      if (!fs.existsSync(styledPkg)) {
+        await execAsync('npm install xlsx-js-style', { cwd: process.cwd() });
+      }
+      // Use createRequire for CJS packages
+      const { createRequire } = await import('module');
+      const require = createRequire(process.cwd() + '/');
+      XLSX = fs.existsSync(styledPkg) ? require('xlsx-js-style') : require('xlsx');
+    } catch (e) {
+      return res.status(400).json({ error: 'Failed to load xlsx. Run: npm install xlsx-js-style' });
+    }
+
+    // Connect to MongoDB
+    const projectMongoose = path.join(process.cwd(), 'node_modules', 'mongoose', 'index.js');
+    if (!fs.existsSync(projectMongoose)) {
+      return res.status(400).json({ error: 'Mongoose is not installed.' });
+    }
+    const mongoose = (await import(pathToFileURL(projectMongoose).href)).default;
+    if (mongoose.connection.readyState === 0) {
+      const devEnv = path.join(process.cwd(), '.env.development');
+      const uri = getEnvValue(devEnv, 'MONGO_URI');
+      if (!uri) return res.status(400).json({ error: 'MONGO_URI not configured.' });
+      await mongoose.connect(uri);
+    }
+
+    const wb = XLSX.utils.book_new();
+
+    for (const rm of reportModels) {
+      const collectionName = rm.name + 's';
+      const collection = mongoose.connection.db.collection(collectionName);
+      const rowLimit = req.body.limit > 0 ? Math.min(req.body.limit, 50000) : 10000;
+      const rawDocs = await collection.find({}).limit(rowLimit).toArray();
+      const docs = JSON.parse(JSON.stringify(rawDocs));
+
+      // Build lookup maps for populated fields
+      const lookups = {};
+      if (rm.populatedFields) {
+        for (const [refField, subFields] of Object.entries(rm.populatedFields)) {
+          if (!subFields || subFields.length === 0) continue;
+          const detail = getModelSchemaDetailed(rm.name);
+          const schemaFields = detail.fields || [];
+          const fieldDef = schemaFields.find(f => f.name === refField);
+          if (!fieldDef || !fieldDef.ref) continue;
+
+          const ids = [...new Set(docs.map(d => d[refField]).filter(Boolean).map(id => typeof id === 'object' ? (id.$oid || id) : String(id)))];
+          if (ids.length === 0) continue;
+
+          const { ObjectId } = mongoose.Types;
+          const rawRefDocs = await mongoose.connection.db.collection(fieldDef.ref + 's')
+            .find({ _id: { $in: ids.map(id => { try { return new ObjectId(id); } catch { return id; } }) } }).toArray();
+          const refDocs = JSON.parse(JSON.stringify(rawRefDocs));
+
+          const map = {};
+          for (const rd of refDocs) {
+            const rdId = typeof rd._id === 'object' ? (rd._id.$oid || rd._id) : rd._id;
+            map[String(rdId)] = rd;
+          }
+          lookups[refField] = { subFields, map };
+        }
+      }
+
+      // Build rows
+      const sysFields = rm.systemFields || [];
+      const rmPrefixes = rm.fieldPrefixes || {};
+      function applyRmPrefix(key, val) {
+        if (val === null || val === undefined || val === '') return val;
+        const prefix = rmPrefixes[key];
+        return prefix ? prefix + val : val;
+      }
+      const rows = docs.map(doc => {
+        const row = {};
+        // System fields first
+        for (const sf of sysFields) {
+          let val = doc[sf];
+          if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+          if (val && typeof val === 'object' && val.$date) val = val.$date;
+          const fv = formatVal(val, dateFormat, timezone);
+          row[sf] = applyRmPrefix(sf, fv === null ? '' : fv);
+        }
+        // Model fields
+        for (const field of rm.fields) {
+          let val = doc[field];
+          if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+          if (val && typeof val === 'object' && val.$date) val = val.$date;
+          const fv = formatVal(val, dateFormat, timezone);
+          row[field] = applyRmPrefix(field, fv === null ? '' : fv);
+        }
+        // Populated ref fields
+        for (const [refField, { subFields, map }] of Object.entries(lookups)) {
+          let refId = doc[refField];
+          if (refId && typeof refId === 'object' && refId.$oid) refId = refId.$oid;
+          const refDoc = refId ? map[String(refId)] : null;
+          for (const sf of subFields) {
+            const colKey = refField + '.' + sf;
+            let val = refDoc ? refDoc[sf] : null;
+            if (val && typeof val === 'object' && val.$oid) val = val.$oid;
+            if (val && typeof val === 'object' && val.$date) val = val.$date;
+            const fv = formatVal(val, dateFormat, timezone);
+            row[colKey] = applyRmPrefix(colKey, fv === null ? '' : fv);
+          }
+        }
+        return row;
+      });
+
+      // Reorder columns if columnOrder provided
+      const colOrder = rm.columnOrder;
+      const headerLabels = rm.headerLabels || {};
+      let finalRows = rows;
+      if (colOrder && colOrder.length > 0) {
+        finalRows = rows.map(row => {
+          const r = {};
+          colOrder.forEach(col => {
+            const label = headerLabels[col] || col;
+            if (col in row) r[label] = row[col];
+          });
+          return r;
+        });
+      } else if (Object.keys(headerLabels).length > 0) {
+        finalRows = rows.map(row => {
+          const r = {};
+          Object.keys(row).forEach(col => {
+            const label = headerLabels[col] || col;
+            r[label] = row[col];
+          });
+          return r;
+        });
+      }
+
+      // Build headers with custom labels
+      const rawHeaders = colOrder && colOrder.length > 0 ? colOrder : Object.keys(rows[0] || {});
+      const displayHeaders = rawHeaders.map(h => headerLabels[h] || h);
+
+      // Create worksheet with explicit column order
+      const ws = XLSX.utils.json_to_sheet(finalRows, { header: displayHeaders });
+
+      // Professional styling
+      const range = XLSX.utils.decode_range(ws['!ref'] || 'A1');
+      // Style header row — bold with background
+      const thinBorder = { style: "thin", color: { rgb: "B4C6E7" } };
+      const allBorders = { top: thinBorder, bottom: thinBorder, left: thinBorder, right: thinBorder };
+      const headerBorder = { top: { style: "thin", color: { rgb: "2F5597" } }, bottom: { style: "thin", color: { rgb: "2F5597" } }, left: { style: "thin", color: { rgb: "2F5597" } }, right: { style: "thin", color: { rgb: "2F5597" } } };
+      // Style header row
+      for (let C = range.s.c; C <= range.e.c; C++) {
+        const addr = XLSX.utils.encode_cell({ r: 0, c: C });
+        if (!ws[addr]) continue;
+        ws[addr].s = {
+          font: { bold: true, color: { rgb: "FFFFFF" }, sz: 12, name: "Calibri" },
+          fill: { fgColor: { rgb: "4472C4" } },
+          alignment: { horizontal: "center", vertical: "center" },
+          border: headerBorder,
+        };
+      }
+      // Alternate row colors with full borders
+      for (let R = 1; R <= range.e.r; R++) {
+        const isEven = R % 2 === 0;
+        for (let C = range.s.c; C <= range.e.c; C++) {
+          const addr = XLSX.utils.encode_cell({ r: R, c: C });
+          if (!ws[addr]) ws[addr] = { v: '', t: 's' };
+          ws[addr].s = {
+            fill: isEven ? { fgColor: { rgb: "D6E4F0" } } : { fgColor: { rgb: "FFFFFF" } },
+            font: { sz: 11, color: { rgb: "333333" }, name: "Calibri" },
+            alignment: { vertical: "center" },
+            border: allBorders,
+          };
+        }
+      }
+      // Column widths with breathing room
+      ws['!cols'] = displayHeaders.map((key, i) => {
+        const rawKey = rawHeaders[i];
+        const maxLen = Math.max(key.length, ...finalRows.map(r => String(r[key] || '').length).slice(0, 100));
+        return { wch: maxLen + 4 };
+      });
+      // Row heights — uniform for all rows
+      const totalRows = range.e.r + 1;
+      ws['!rows'] = Array.from({ length: totalRows }, () => ({ hpt: 26 }));
+
+      const sheetName = rm.name.length > 31 ? rm.name.slice(0, 31) : rm.name;
+      XLSX.utils.book_append_sheet(wb, ws, sheetName);
+    }
+
+    const buf = XLSX.write(wb, { type: 'buffer', bookType: 'xlsx' });
+    const fname = (filename || 'report') + '.xlsx';
+    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+    res.setHeader('Content-Disposition', 'attachment; filename="' + fname + '"');
+    res.send(Buffer.from(buf));
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Logs — history, SSE stream, clear
+// ---------------------------------------------------------------------------
+router.get('/api/logs', (req, res) => {
+  res.json(_logBuffer);
+});
+
+router.get('/api/logs/stream', (req, res) => {
+  // EventSource can't send custom headers, so verify passkey from query param
+  const stored = getPasskeyHash();
+  if (stored) {
+    const pk = req.query.passkey;
+    if (!pk || hashPasskey(pk) !== stored) {
+      return res.status(401).json({ error: 'Unauthorized' });
+    }
+  }
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    Connection: 'keep-alive',
+  });
+  res.write(':\n\n');
+  _logClients.add(res);
+  req.on('close', () => _logClients.delete(res));
+});
+
+router.delete('/api/logs', (req, res) => {
+  _logBuffer.length = 0;
+  res.json({ message: 'Logs cleared' });
+});
+
 // ---------------------------------------------------------------------------
 // Share Collection — save and serve standalone shared page
 // ---------------------------------------------------------------------------
@@ -2406,6 +2978,8 @@ router.post('/api/api-tester/share-collection', (req, res) => {
 
 router.get('/shared/:id', (req, res) => {
   try {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+    res.setHeader('Pragma', 'no-cache');
     const filePath = path.join(sharedDir, req.params.id + '.json');
     if (!fs.existsSync(filePath)) return res.status(404).send('Collection not found');
     const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
@@ -2438,7 +3012,7 @@ body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:
 .sidebar-search input:focus{border-color:#7c3aed}
 .sidebar-search input::placeholder{color:#475569}
 .sidebar-list{flex:1;overflow-y:auto}
-.sidebar-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(30,36,51,0.5);display:flex;align-items:center;gap:10px;transition:all 0.12s;border-left:3px solid transparent}
+.sidebar-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(30,36,51,0.5);display:flex;align-items:center;gap:10px;transition:all 0.12s;border-left:3px solid transparent;color:#e2e8f0}
 .sidebar-item:hover{background:rgba(124,58,237,0.06)}
 .sidebar-item.active{background:rgba(124,58,237,0.1);border-left-color:#7c3aed}
 .sidebar-child{padding:8px 14px 8px 48px;cursor:pointer;border-bottom:1px solid rgba(30,36,51,0.3);display:flex;align-items:center;gap:8px;transition:all 0.12s;border-left:3px solid transparent}
@@ -2450,7 +3024,7 @@ body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:
 .mb-put{background:rgba(59,130,246,0.15);color:#3b82f6}
 .mb-patch{background:rgba(139,92,246,0.15);color:#8b5cf6}
 .mb-delete{background:rgba(248,113,113,0.15);color:#f87171}
-.item-name{font-size:12px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.item-name{font-size:12px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e2e8f0}
 .item-arrow{font-size:10px;color:#475569;width:14px;text-align:center;flex-shrink:0}
 .item-badge{font-size:9px;padding:2px 7px;border-radius:8px;background:rgba(124,58,237,0.15);color:#a78bfa;font-weight:600}
 .sb{font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;font-family:'SF Mono','Fira Code',monospace;flex-shrink:0}
@@ -2554,7 +3128,15 @@ pre{font-family:'SF Mono','Fira Code',monospace;font-size:12px;line-height:1.7;c
       if (code) text = code.querySelector('code').textContent;
     }
     if (text) {
-      navigator.clipboard.writeText(text);
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text);
+      } else {
+        var ta = document.createElement('textarea');
+        ta.value = text; ta.style.cssText = 'position:fixed;opacity:0';
+        document.body.appendChild(ta); ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
       var orig = btn.textContent;
       btn.textContent = 'Copied!';
       btn.style.color = '#34d399';
@@ -2737,24 +3319,177 @@ pre{font-family:'SF Mono','Fira Code',monospace;font-size:12px;line-height:1.7;c
     var main = document.getElementById('main-content');
 
     if (tt === 'socketio' || tt === 'websocket') {
+      var nl = String.fromCharCode(10);
+      var resps = responses[id] || [];
+      var sentLogs = resps.filter(function(r) { return r.dir === 'sent'; });
+      var recvLogs = resps.filter(function(r) { return r.dir === 'received'; });
+      var sysLogs = resps.filter(function(r) { return r.dir === 'system'; });
+
       var h = '<div class="card"><div class="card-header">';
       if (tt === 'socketio') h += '<span class="mb type-sio" style="font-size:11px;padding:4px 10px">Socket.IO</span>';
       else h += '<span class="mb type-ws" style="font-size:11px;padding:4px 10px">WebSocket</span>';
       h += '<span style="font-size:16px;font-weight:600">' + esc(t.name) + '</span></div>';
+
       h += '<div class="stitle">Connection URL</div>';
       h += '<div class="endpoint-url"><code>' + esc(t.url) + '</code><button class="copy-btn" data-copy="url">Copy</button></div>';
-      if (tt === 'socketio' && t.event) { h += '<div class="stitle">Emit Event</div><pre style="margin-bottom:16px">' + esc(t.event) + '</pre>'; }
+      h += '</div>';
+
+      // ── Emit Events Section ──
+      h += '<div class="card">';
+      h += '<div class="card-header"><span style="font-size:14px;font-weight:600;color:#f59e0b">&#8593; Emit Events</span>';
+      h += '<span style="font-size:10px;padding:3px 10px;border-radius:10px;background:rgba(245,158,11,0.12);color:#f59e0b;font-weight:600;margin-left:auto">Client &#8594; Server</span></div>';
+
+      if (tt === 'socketio' && t.event) {
+        h += '<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">';
+        h += '<span class="stitle" style="margin:0;min-width:70px">Event</span>';
+        h += '<span style="font-size:13px;padding:6px 14px;border-radius:6px;background:rgba(245,158,11,0.1);color:#f59e0b;font-family:SF Mono,monospace;font-weight:600;border:1px solid rgba(245,158,11,0.2)">' + esc(t.event) + '</span>';
+        h += '</div>';
+      }
+      if (tt === 'websocket' && t.message) {
+        h += '<div class="stitle">Message</div>';
+      }
+
       if (t.data || t.message) {
-        h += '<div class="stitle">' + (tt === 'socketio' ? 'Event Data' : 'Message') + '</div>';
+        h += '<div class="stitle" style="margin-bottom:6px">Payload</div>';
         var d = t.data || t.message || ''; try { d = JSON.stringify(JSON.parse(d), null, 2); } catch(e) {}
-        h += '<pre style="margin-bottom:16px">' + esc(d) + '</pre>';
+        h += '<div style="position:relative"><pre style="margin-bottom:14px">' + esc(d) + '</pre>';
+        h += '<button class="copy-btn" style="position:absolute;top:8px;right:8px" data-copy="prev-pre">Copy</button></div>';
       }
+
+      // Emit code example
+      if (tt === 'socketio') {
+        h += '<div class="stitle" style="margin-bottom:6px">Code</div>';
+        var emitCode = "// Client-side emit" + nl;
+        emitCode += "import { io } from 'socket.io-client';" + nl;
+        emitCode += "const socket = io('" + t.url + "');" + nl + nl;
+        if (t.event) {
+          var ed = t.data || '{}'; try { ed = JSON.stringify(JSON.parse(ed), null, 2); } catch(e) {}
+          emitCode += "socket.emit('" + t.event + "', " + ed + ");" + nl + nl;
+        }
+        emitCode += "// Server-side handler" + nl;
+        emitCode += "io.on('connection', (socket) => {" + nl;
+        if (t.event) {
+          emitCode += "  socket.on('" + t.event + "', (data) => {" + nl;
+          emitCode += "    console.log('" + t.event + ":', data);" + nl;
+          emitCode += "  });" + nl;
+        }
+        emitCode += "});" + nl + nl;
+        emitCode += "// Emit from Express route" + nl;
+        if (t.event) {
+          var ed2 = t.data || '{}'; try { ed2 = JSON.stringify(JSON.parse(ed2), null, 2); } catch(e) {}
+          emitCode += "req.io.emit('" + t.event + "', " + ed2 + ");";
+        } else {
+          emitCode += "req.io.emit('event_name', { key: 'value' });";
+        }
+        h += '<div style="position:relative"><pre style="margin-bottom:14px">' + esc(emitCode) + '</pre>';
+        h += '<button class="copy-btn" style="position:absolute;top:8px;right:8px" data-copy="prev-pre">Copy</button></div>';
+      } else {
+        h += '<div class="stitle" style="margin-bottom:6px">Code</div>';
+        var wsSendCode = "const ws = new WebSocket('" + t.url + "');" + nl + nl;
+        wsSendCode += "ws.onopen = () => {" + nl;
+        if (t.message) {
+          wsSendCode += "  ws.send(JSON.stringify(" + (t.message || "{}") + "));" + nl;
+        } else {
+          wsSendCode += "  ws.send(JSON.stringify({ key: 'value' }));" + nl;
+        }
+        wsSendCode += "};";
+        h += '<div style="position:relative"><pre style="margin-bottom:14px">' + esc(wsSendCode) + '</pre>';
+        h += '<button class="copy-btn" style="position:absolute;top:8px;right:8px" data-copy="prev-pre">Copy</button></div>';
+      }
+
+      // Saved emitted logs
+      if (sentLogs.length > 0) {
+        h += '<div class="stitle" style="margin-bottom:8px">Saved Emits (' + sentLogs.length + ')</div>';
+        sentLogs.forEach(function(r) {
+          var body = r.body || ''; try { body = JSON.stringify(JSON.parse(body), null, 2); } catch(e) {}
+          h += '<div style="background:#0f1117;border:1px solid #1e2433;border-radius:8px;padding:10px 14px;margin-bottom:6px">';
+          h += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:' + (body ? '8px' : '0') + '">';
+          h += '<span class="sb dir-sent" style="font-size:9px;padding:2px 6px">&#8593; EMIT</span>';
+          h += '<span style="font-size:12px;font-weight:500">' + esc(r.label) + '</span>';
+          h += '</div>';
+          if (body) {
+            h += '<div style="position:relative"><pre style="margin:0;font-size:11px">' + esc(body) + '</pre>';
+            h += '<button class="copy-btn" style="position:absolute;top:4px;right:4px;font-size:10px;padding:2px 8px" data-copy="prev-pre">Copy</button></div>';
+          }
+          h += '</div>';
+        });
+      }
+      h += '</div>';
+
+      // ── Event Listeners Section ──
+      h += '<div class="card">';
+      h += '<div class="card-header"><span style="font-size:14px;font-weight:600;color:#34d399">&#8595; Event Listeners</span>';
+      h += '<span style="font-size:10px;padding:3px 10px;border-radius:10px;background:rgba(52,211,153,0.12);color:#34d399;font-weight:600;margin-left:auto">Server &#8594; Client</span></div>';
+
       if (tt === 'socketio' && t.listeners && t.listeners.length > 0) {
-        h += '<div class="stitle">Listeners</div><div style="display:flex;flex-wrap:wrap;gap:6px">';
-        t.listeners.forEach(function(l) { h += '<span style="font-size:11px;padding:4px 10px;border-radius:6px;background:rgba(52,211,153,0.1);color:#34d399">' + esc(l) + '</span>'; });
+        h += '<div class="stitle" style="margin-bottom:8px">Listening On</div>';
+        h += '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px">';
+        t.listeners.forEach(function(l) {
+          h += '<span style="font-size:12px;padding:6px 14px;border-radius:6px;background:rgba(52,211,153,0.1);color:#34d399;font-family:SF Mono,monospace;font-weight:600;border:1px solid rgba(52,211,153,0.2)">' + esc(l) + '</span>';
+        });
         h += '</div>';
+
+        // Listener code example
+        h += '<div class="stitle" style="margin-bottom:6px">Code</div>';
+        var listenCode = "// Client-side listeners" + nl;
+        listenCode += "import { io } from 'socket.io-client';" + nl;
+        listenCode += "const socket = io('" + t.url + "');" + nl;
+        t.listeners.forEach(function(l) {
+          listenCode += nl + "socket.on('" + l + "', (data) => {" + nl;
+          listenCode += "  console.log('" + l + ":', data);" + nl;
+          listenCode += "});" + nl;
+        });
+        listenCode += nl + "// Server-side broadcast" + nl;
+        t.listeners.forEach(function(l) {
+          listenCode += "io.emit('" + l + "', data);" + nl;
+        });
+        h += '<div style="position:relative"><pre style="margin-bottom:14px">' + esc(listenCode) + '</pre>';
+        h += '<button class="copy-btn" style="position:absolute;top:8px;right:8px" data-copy="prev-pre">Copy</button></div>';
+      } else if (tt === 'websocket') {
+        h += '<div class="stitle" style="margin-bottom:6px">Code</div>';
+        var wsRecvCode = "const ws = new WebSocket('" + t.url + "');" + nl + nl;
+        wsRecvCode += "ws.onmessage = (event) => {" + nl;
+        wsRecvCode += "  const data = JSON.parse(event.data);" + nl;
+        wsRecvCode += "  console.log('Received:', data);" + nl;
+        wsRecvCode += "};" + nl + nl;
+        wsRecvCode += "ws.onclose = () => console.log('Disconnected');";
+        h += '<div style="position:relative"><pre style="margin-bottom:14px">' + esc(wsRecvCode) + '</pre>';
+        h += '<button class="copy-btn" style="position:absolute;top:8px;right:8px" data-copy="prev-pre">Copy</button></div>';
+      } else {
+        h += '<div style="font-size:12px;color:#475569;padding:8px 0">No listeners configured</div>';
       }
-      h += '</div>'; main.innerHTML = h; return;
+
+      // Saved received logs
+      if (recvLogs.length > 0) {
+        h += '<div class="stitle" style="margin-bottom:8px">Received Events (' + recvLogs.length + ')</div>';
+        recvLogs.forEach(function(r) {
+          var body = r.body || ''; try { body = JSON.stringify(JSON.parse(body), null, 2); } catch(e) {}
+          h += '<div style="background:#0f1117;border:1px solid #1e2433;border-radius:8px;padding:10px 14px;margin-bottom:6px">';
+          h += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:' + (body ? '8px' : '0') + '">';
+          h += '<span class="sb dir-recv" style="font-size:9px;padding:2px 6px">&#8595; RECV</span>';
+          h += '<span style="font-size:12px;font-weight:500">' + esc(r.label) + '</span>';
+          h += '</div>';
+          if (body) {
+            h += '<div style="position:relative"><pre style="margin:0;font-size:11px">' + esc(body) + '</pre>';
+            h += '<button class="copy-btn" style="position:absolute;top:4px;right:4px;font-size:10px;padding:2px 8px" data-copy="prev-pre">Copy</button></div>';
+          }
+          h += '</div>';
+        });
+      }
+
+      // System logs
+      if (sysLogs.length > 0) {
+        h += '<div class="stitle" style="margin-top:12px;margin-bottom:8px">System Events (' + sysLogs.length + ')</div>';
+        sysLogs.forEach(function(r) {
+          h += '<div style="background:#0f1117;border:1px solid #1e2433;border-radius:8px;padding:8px 14px;margin-bottom:4px;display:flex;align-items:center;gap:8px">';
+          h += '<span class="sb dir-sys" style="font-size:9px;padding:2px 6px">&#9679; SYS</span>';
+          h += '<span style="font-size:12px;color:#94a3b8">' + esc(r.label) + '</span>';
+          h += '</div>';
+        });
+      }
+
+      h += '</div>';
+      main.innerHTML = h; return;
     }
 
     var mc = { GET:'#34d399', POST:'#f59e0b', PUT:'#3b82f6', PATCH:'#8b5cf6', DELETE:'#f87171' };
@@ -2910,13 +3645,13 @@ pre{font-family:'SF Mono','Fira Code',monospace;font-size:12px;line-height:1.7;c
     }
   });
 
-  renderSidebar();
+  try { renderSidebar(); } catch(e) { console.error('renderSidebar error:', e); }
   if (tests.length > 0) {
     activeTestId = tests[0].id;
     var firstResps = responses[tests[0].id] || [];
     if (firstResps.length > 0) expanded[tests[0].id] = true;
-    renderSidebar();
-    renderTestView(tests[0].id);
+    try { renderSidebar(); } catch(e) { console.error('renderSidebar error:', e); }
+    try { renderTestView(tests[0].id); } catch(e) { console.error('renderTestView error:', e); }
   }
 })();
 </script></body></html>`;