nothumanallowed 14.1.13 → 14.1.15

package/package.json

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

package/src/constants.mjs

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

package/src/server/routes/chat.mjs

@@ -334,6 +334,17 @@ export function register(router) {
               .replace(/<style[\s\S]*?<\/style>/gi, '').replace(/<script[\s\S]*?<\/script>/gi, '')
               .replace(/<[^>]+>/g, ' ').replace(/\s{3,}/g, '\n').trim().slice(0, 6000);
           }
+
+          // ── Canvas result — emit dedicated SSE event so the UI panel opens ──
+          if (resultStr.includes('[CANVAS_RENDER]')) {
+            const canvasMarker = resultStr.match(/\[CANVAS_RENDER\]([\s\S]*?)\[\/CANVAS_RENDER\]/);
+            if (canvasMarker) {
+              sse('canvas', { markers: canvasMarker[0] });
+            }
+            // Replace the raw HTML blob with a short placeholder so synthesis LLM doesn't see it
+            resultStr = 'Canvas rendered successfully in the panel.';
+          }
+
           toolResults.push({ action, result: resultStr });
           sse('tool', { action, status: 'done', result: resultStr.slice(0, 500) });
         } catch (e) {

package/src/server/routes/webcraft.mjs

@@ -526,13 +526,24 @@ RULES:
 
 // ── Generation pipeline (SSE) ─────────────────────────────────────────────────
 
-const FILE_PLAN_SYSTEM = `You are an expert full-stack web developer. Your job is to design the complete file structure for a web project.
-Output ONLY a JSON array of file objects: [{"name":"filename","purpose":"brief purpose"}]
-Rules:
-- Include ALL necessary files: HTML, CSS, JS, server, package.json, .env.example, README.md
-- Use relative paths (e.g. "public/styles.css", "routes/auth.js")
+const FILE_PLAN_SYSTEM = `You are a senior full-stack architect. Design a COMPLETE, PRODUCTION-READY file structure for a web project.
+Output ONLY a JSON array: [{"name":"path/to/file.ext","purpose":"what this file does","tokens":N}]
+where "tokens" is your estimate of how many tokens the file content will need (200-800 for small files, 800-2000 for medium, 2000-4000 for large).
+
+MANDATORY rules:
+- Generate 20-40 files minimum for any real project — a complete site requires many files
+- Split large concerns into separate files (separate route files, separate component files, separate util files)
+- Always include: package.json, server.js (or index.js), .env.example, README.md
+- For full-stack projects: routes/, middleware/, models/, controllers/ directories with individual files per resource
+- For frontend: separate CSS files per section (hero, navbar, footer, components), separate JS modules
+- Use relative paths only (e.g. "routes/auth.js", "public/js/app.js", "public/css/main.css")
 - No explanation, no markdown, ONLY the JSON array.`;
 
+// Token counter — approximate based on character count (1 token ≈ 4 chars)
+function countTokens(text) {
+  return Math.ceil((text || '').length / 4);
+}
+
 async function runGenerate(config, projectName, description, blocks, authFields, emit) {
   const blocksDesc = Object.entries(blocks)
     .filter(([, enabled]) => enabled)
@@ -546,12 +557,16 @@ async function runGenerate(config, projectName, description, blocks, authFields,
 Description: ${description}
 ${blocksDesc ? `Required blocks: ${blocksDesc}` : ''}
 ${authDesc}
-Design a complete file structure for this project.`;
+
+Design a COMPLETE production-ready file structure. Include ALL files needed for a fully working site: server, routes, middleware, models, public HTML/CSS/JS pages, config files, README. Minimum 20 files.`;
 
   // Round 1: plan files
   let filePlan = [];
+  let planTokensIn = countTokens(FILE_PLAN_SYSTEM) + countTokens(planPrompt);
+  let planTokensOut = 0;
   try {
-    const planRaw = await callLLM(config, FILE_PLAN_SYSTEM, planPrompt, { max_tokens: 1500 });
+    const planRaw = await callLLM(config, FILE_PLAN_SYSTEM, planPrompt, { max_tokens: 4096 });
+    planTokensOut = countTokens(planRaw);
     const clean = planRaw.replace(/<think>[\s\S]*?<\/think>/g, '').trim()
       .replace(/^```[\w]*\n?/, '').replace(/\n?```$/, '').trim();
     const arr = JSON.parse(clean.match(/\[[\s\S]*\]/)?.[0] ?? clean);
@@ -559,13 +574,34 @@ Design a complete file structure for this project.`;
   } catch {}
 
   if (filePlan.length === 0) {
-    // Minimal fallback structure
+    // Comprehensive fallback structure for a full-stack web project
     filePlan = [
-      { name: 'index.html', purpose: 'Main HTML page' },
-      { name: 'styles.css', purpose: 'CSS styles' },
-      { name: 'app.js', purpose: 'Application logic' },
-      { name: 'server.js', purpose: 'Express server' },
-      { name: 'package.json', purpose: 'Node.js package manifest' },
+      { name: 'package.json', purpose: 'Node.js dependencies and scripts', tokens: 300 },
+      { name: '.env.example', purpose: 'Environment variables template', tokens: 200 },
+      { name: 'README.md', purpose: 'Project documentation', tokens: 400 },
+      { name: 'server.js', purpose: 'Express server entry point with middleware setup', tokens: 1500 },
+      { name: 'routes/index.js', purpose: 'Main router — mounts all sub-routers', tokens: 300 },
+      { name: 'routes/auth.js', purpose: 'Auth routes: register, login, logout, refresh', tokens: 1200 },
+      { name: 'routes/api.js', purpose: 'REST API routes', tokens: 800 },
+      { name: 'middleware/auth.js', purpose: 'JWT authentication middleware', tokens: 600 },
+      { name: 'middleware/error.js', purpose: 'Global error handler', tokens: 400 },
+      { name: 'middleware/validate.js', purpose: 'Request validation middleware', tokens: 500 },
+      { name: 'models/user.js', purpose: 'User model (SQLite/JSON storage)', tokens: 600 },
+      { name: 'controllers/authController.js', purpose: 'Auth business logic', tokens: 1200 },
+      { name: 'utils/jwt.js', purpose: 'JWT sign/verify helpers', tokens: 400 },
+      { name: 'utils/hash.js', purpose: 'Password hashing utilities (bcrypt)', tokens: 300 },
+      { name: 'config/database.js', purpose: 'Database connection and setup', tokens: 500 },
+      { name: 'public/index.html', purpose: 'Main landing page', tokens: 2000 },
+      { name: 'public/dashboard.html', purpose: 'User dashboard page', tokens: 1500 },
+      { name: 'public/login.html', purpose: 'Login/register page', tokens: 1200 },
+      { name: 'public/css/main.css', purpose: 'Global styles, variables, reset', tokens: 1500 },
+      { name: 'public/css/components.css', purpose: 'Reusable component styles (cards, buttons, forms)', tokens: 1200 },
+      { name: 'public/css/layout.css', purpose: 'Layout styles: nav, hero, sections, footer', tokens: 1000 },
+      { name: 'public/css/animations.css', purpose: 'Animations and transitions', tokens: 600 },
+      { name: 'public/js/app.js', purpose: 'Main frontend JS — router, init', tokens: 800 },
+      { name: 'public/js/auth.js', purpose: 'Frontend auth logic — login, register, token storage', tokens: 800 },
+      { name: 'public/js/api.js', purpose: 'API client wrapper with fetch', tokens: 500 },
+      { name: 'public/js/ui.js', purpose: 'UI helpers — toasts, modals, loaders', tokens: 600 },
     ];
   }
 
@@ -573,43 +609,70 @@ Design a complete file structure for this project.`;
 
   const projectDir = ensureDir(ProjectStore.dir(projectName));
   const generatedFiles = [];
+  let totalTokensIn = planTokensIn;
+  let totalTokensOut = planTokensOut;
 
-  // Round 2: generate each file
+  const allFileNames = filePlan.map((f) => f.name).join(', ');
+
+  // Round 2: generate each file with streaming
   for (let fi = 0; fi < filePlan.length; fi++) {
     const fileSpec = filePlan[fi];
     emit({ type: 'file_start', name: fileSpec.name, fi: fi + 1, total: filePlan.length });
 
-    const allFileNames = filePlan.map((f) => f.name).join(', ');
-    const prevContext = generatedFiles.slice(-3)
-      .map((f) => `### ${f.name} (excerpt)\n${f.content.slice(0, 800)}`)
+    // Include last 4 generated files as context (truncated to avoid token overflow)
+    const prevContext = generatedFiles.slice(-4)
+      .map((f) => {
+        const ext = f.name.split('.').pop();
+        const snippet = f.content.slice(0, ext === 'json' ? 600 : 1200);
+        return `### ${f.name}\n\`\`\`\n${snippet}${f.content.length > 1200 ? '\n... (truncated)' : ''}\n\`\`\``;
+      })
       .join('\n\n');
 
-    const fileSys = `You are an expert full-stack web developer generating production-quality code.
-Output ONLY the complete file content — no explanation, no markdown fences, no comments about what you're doing.
-Write real, working, modern code. Do NOT use placeholder text like "TODO" or "// add code here".`;
+    // Estimate appropriate max_tokens for this file
+    const estimatedTokens = fileSpec.tokens || 2000;
+    const maxTokens = Math.min(Math.max(estimatedTokens * 2, 2000), 8192);
+
+    const fileSys = `You are a senior full-stack developer generating a COMPLETE, PRODUCTION-READY file.
+CRITICAL RULES:
+- Output ONLY the raw file content — zero explanations, zero markdown fences, zero "here is the file:" preamble
+- Write COMPLETE, WORKING code — no TODOs, no placeholders, no "add your code here" comments
+- Every function must be fully implemented with real logic
+- Use modern patterns: async/await, ES6+, proper error handling
+- CSS must include responsive design (mobile-first), dark/light variables, smooth animations
+- HTML must be complete with proper meta tags, semantic structure, accessible markup
+- JS must handle all edge cases, show loading states, handle errors gracefully`;
 
     const filePrompt = `Project: ${projectName}
 Description: ${description}
-${blocksDesc ? `Required blocks: ${blocksDesc}` : ''}
+${blocksDesc ? `Enabled blocks: ${blocksDesc}` : ''}
 ${authDesc}
-All files in project: ${allFileNames}
+Full project file list: ${allFileNames}
 
-Generate COMPLETE content for: ${fileSpec.name}
+NOW GENERATE: ${fileSpec.name}
 Purpose: ${fileSpec.purpose}
-${prevContext ? `\n--- Recent files for context ---\n${prevContext}` : ''}
 
-Output ONLY the complete file content.`;
+${prevContext ? `Recent files generated (for consistency):\n${prevContext}\n\n` : ''}Output ONLY the complete file content, starting immediately with the first line of the file.`;
 
     let fileContent = '';
     let syntaxError = null;
+    const fileTokensIn = countTokens(fileSys) + countTokens(filePrompt);
 
     try {
       await callLLMStream(config, fileSys, filePrompt, (chunk) => {
         fileContent += chunk;
         emit({ type: 'file_chunk', name: fileSpec.name, chunk, fi: fi + 1, total: filePlan.length });
-      }, { max_tokens: 4096 });
+      }, { max_tokens: maxTokens });
+
+      const fileTokensOut = countTokens(fileContent);
+      totalTokensIn += fileTokensIn;
+      totalTokensOut += fileTokensOut;
+
+      // Strip markdown fences if LLM wrapped the output anyway
+      fileContent = fileContent
+        .replace(/^```[\w]*\n/, '').replace(/\n```$/, '')
+        .replace(/^```[\w]*\r\n/, '').replace(/\r\n```$/, '').trim();
 
-      // Quick syntax check for JS files
+      // Quick syntax check for JS/TS files
       if (fileSpec.name.endsWith('.js') || fileSpec.name.endsWith('.mjs')) {
         try { new Function(fileContent); } catch (e) { syntaxError = e.message.replace(/\n.*/s, ''); }
       }
@@ -618,7 +681,7 @@ Output ONLY the complete file content.`;
       ensureDir(path.dirname(abs));
       fs.writeFileSync(abs, fileContent, 'utf-8');
       generatedFiles.push({ name: fileSpec.name, content: fileContent });
-      emit({ type: 'file_done', name: fileSpec.name, fi: fi + 1, total: filePlan.length, syntaxError });
+      emit({ type: 'file_done', name: fileSpec.name, fi: fi + 1, total: filePlan.length, syntaxError, tokOut: fileTokensOut });
     } catch (e) {
       emit({ type: 'file_error', name: fileSpec.name, error: e.message });
     }
@@ -641,12 +704,10 @@ Output ONLY the complete file content.`;
     fs.writeFileSync(memFile, `# ${projectName} — Project Memory\n\n_Add architectural decisions, preferences, and notes here._\n`, 'utf-8');
   }
   const logFile = path.join(ctxDir, 'changes.log.md');
-  const logEntry = `## ${new Date().toISOString().slice(0, 10)} — Initial generation\n- Generated ${generatedFiles.length} files\n- Description: ${description}\n`;
+  const logEntry = `## ${new Date().toISOString().slice(0, 10)} — Initial generation\n- Generated ${generatedFiles.length} files\n- Tokens in: ${totalTokensIn} / out: ${totalTokensOut}\n- Description: ${description}\n`;
   fs.writeFileSync(logFile, (fs.existsSync(logFile) ? fs.readFileSync(logFile, 'utf-8') : '') + logEntry, 'utf-8');
 
-  const inputTokensEst = Math.round(filePlan.length * 800);
-  const outputTokensEst = generatedFiles.reduce((sum, f) => sum + Math.ceil(f.content.length / 4), 0);
-  emit({ type: 'done', tokIn: inputTokensEst, tokOut: outputTokensEst });
+  emit({ type: 'done', tokIn: totalTokensIn, tokOut: totalTokensOut });
 }
 
 // ── ZIP download ──────────────────────────────────────────────────────────────