nothumanallowed 13.5.88 → 13.5.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.88",
+  "version": "13.5.90",
   "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/services/web-ui.mjs

@@ -6556,6 +6556,8 @@ var _wcSyntaxResults = [];   // [{file, ok, error}]
 var _wcSnapshots = [];       // [{ts, fileCount}]
 var _wcLastFilePlan = [];    // saved for manual repair trigger
 var _wcLastSysPreamble = '';
+var _wcTokIn = 0;            // global token counters (accumulate across generation + repair)
+var _wcTokOut = 0;
 // Skills state
 var wcSkills = [];          // [{name, content, type}] type: 'skill'|'memory'|'provider'
 var wcSkillModal = null;    // null | {mode:'edit'|'new', idx:number|null, name, content, type, generating}
@@ -6646,12 +6648,12 @@ function renderWebCraft(el) {
 
   // Example prompts — clicking fills project name + description
   var wcExamples = [
-    {name:'MySaaS',    desc:'SaaS landing page with hero section, pricing table (free/pro/enterprise), feature comparison grid, user registration (name, email, password), login, protected dashboard with sidebar navigation (overview, settings, billing), account settings page, and email verification flow.'},
-    {name:'MyShop',    desc:'E-commerce site with homepage showcasing featured products, product catalog with filters (category, price range), product detail page with image gallery, shopping cart with quantity controls, checkout form with address and payment fields, user registration and login, order history page, and admin panel for product management.'},
-    {name:'MyBlog',    desc:'Blog and CMS with homepage listing recent articles (title, excerpt, cover image, author, date), article detail page with markdown rendering, category and tag filtering, author profile page, admin panel for writing and publishing posts (rich text editor), user comments with moderation, and RSS feed endpoint.'},
-    {name:'MyPortfolio', desc:'Professional portfolio with animated hero section (name, role, call-to-action), projects showcase grid with lightbox modal, skills section with progress bars, about page with timeline, contact form with SMTP email sending, dark/light mode toggle, and smooth scroll navigation.'},
-    {name:'MyRestaurant', desc:'Restaurant website with hero with background video, menu page organized by category (starters, mains, desserts, drinks) with photos and prices, online booking form (date, time, party size, special requests) with email confirmation, about us page, gallery section, and contact page with embedded map.'},
-    {name:'MyJobBoard',  desc:'Job board platform with homepage listing recent job postings (title, company, location, type), job detail page, company profile pages, candidate registration and login, job application form with resume upload, employer dashboard to post and manage listings, saved jobs for candidates, and job search with filters (location, type, salary range).'}
+    {name:'MySaaS', desc:'SaaS product landing page. Hero: large headline, subheadline, two CTA buttons (Start free trial / Watch demo), animated gradient background. Features section: 3-column grid with icon, title, description for 6 features (real-time sync, team collaboration, analytics dashboard, API access, role-based permissions, 99.9% uptime SLA). Pricing section: 3 cards (Free: 1 user, 5 projects, community support; Pro $29/mo: 10 users, unlimited projects, priority support, API access; Enterprise: custom pricing, SSO, SLA, dedicated support) with highlighted recommended card. Testimonials: 3 customer quotes with avatar placeholder, name, company, star rating. FAQ accordion: 5 questions. Footer: links, social icons, copyright. Nav: logo, links (Features, Pricing, Docs, Blog), Login and Start Free CTA buttons. Sticky nav on scroll. Smooth scroll between sections.'},
+    {name:'MyShop', desc:'E-commerce storefront homepage. Nav: logo, search bar (full-width on mobile), cart icon with item count badge, account icon, hamburger menu on mobile. Hero: full-width banner with promotional message, discount badge, Shop Now CTA. Category strip: 6 category cards with icon and label (Electronics, Clothing, Home, Sports, Books, Beauty). Featured products grid: 8 product cards each with product image placeholder, product name, star rating (1-5), review count, original price with strikethrough, sale price, Add to Cart button, wishlist heart icon. Promo banner: full-width colored banner with coupon code. Newsletter signup: email input with Subscribe button. Footer: 4-column layout (Company, Customer Service, Categories, Contact info). Fully responsive 2-col on tablet, 1-col on mobile.'},
+    {name:'MyBlog', desc:'Blog and content platform homepage. Nav: logo, category links (Tech, Design, Business, Life), search icon, Subscribe CTA. Hero: large featured article card with cover image placeholder, category badge, title, excerpt (2 lines), author avatar, author name, date, read time, Read More link. Article grid: 6 cards in 3-column layout, each with cover image, category tag, title, excerpt, author, date. Sidebar (on desktop): Recent posts list (5 items with thumbnail, title, date), Popular tags cloud (10 tags as pill buttons), Newsletter signup widget (email + Subscribe). Pagination: numbered page links. Author bio section at bottom: avatar, name, bio paragraph, social links. Footer: minimal with links and copyright.'},
+    {name:'MyPortfolio', desc:'Developer portfolio homepage. Nav: name/logo left, links right (Work, Skills, About, Contact), dark/light mode toggle button, nav hides on scroll down and shows on scroll up. Hero: centered layout, large name heading, animated typewriter role subtitle cycling through 3 roles (e.g. Full-Stack Developer / UI Engineer / Open Source Contributor), short bio paragraph, two CTA buttons (View my work / Download CV), animated floating code snippet decoration. Work section: 6 project cards in 2-column masonry-style grid, each with project screenshot placeholder, project name, tech stack tags (3-4 pills), description (2 lines), GitHub icon link and Live Demo link. Skills section: grouped by category (Frontend, Backend, Tools) with skill name and filled bar (percentage). About section: split layout, left photo placeholder, right: bio paragraph, timeline of 3 career milestones (year, title, company, description). Contact section: centered form (name, email, subject, message textarea, Send Message button), response time note. All sections with smooth scroll entrance animations using Intersection Observer.'},
+    {name:'MyRestaurant', desc:'Restaurant website homepage. Nav: logo center, links left (Menu, Story, Reservations, Gallery, Contact), phone number right, fixed transparent becoming solid white on scroll. Hero: full-viewport background image placeholder with dark overlay, restaurant name in serif font, tagline, two buttons (Reserve a Table / View Menu). About strip: 3 horizontal icon+stat items (e.g. Est. 2010 / 50 Tables / 4.9 Stars). Menu preview section: tabbed navigation (Starters, Mains, Desserts, Drinks), each tab shows 6 menu items in 2-column grid with dish name, description (1 line), allergen icons, price. CTA reservation banner: colored background, heading, inline form (date picker, time select, party size select, name, phone, Book Now button). Gallery grid: 9 square image placeholders in 3x3 mosaic layout with hover zoom effect. Chef section: photo placeholder left, name, title, bio paragraph, signature right. Testimonials: horizontal scroll of 5 review cards (stars, quote, reviewer name, date). Footer: address, opening hours table (Mon-Sun), social links, Google Maps embed placeholder.'},
+    {name:'MyJobBoard', desc:'Job board homepage. Nav: logo, links (Browse Jobs, Companies, Salary Guide, Blog), Post a Job CTA button (green), Sign In link. Hero: centered search widget (keyword input + location input + category select + Search Jobs button), popular searches as clickable tags below (e.g. React Developer, Data Analyst, UX Designer). Stats strip: 4 counters (Active Jobs, Companies Hiring, Candidates, Jobs Filled This Month). Featured jobs list: 8 job cards in vertical list, each with company logo placeholder, job title, company name, location (with icon), job type badge (Full-time/Remote/Contract), salary range, posted X days ago, bookmark icon, Quick Apply button. Filter sidebar (desktop): checkboxes for Job Type, Experience Level, Salary Range slider, Location radius, Remote only toggle. Top companies section: 6 company cards in 3-col grid with logo, name, industry, open positions count, View Jobs link. Category cards: 8 icons+labels for job categories. Newsletter: email input with Get Job Alerts button. Footer: 5-column layout (Job Seekers, Employers, Resources, Company, Social).'}
   ];
   var wcExHtml = '<div style="margin-bottom:12px;flex-shrink:0"><div style="font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px">'+t('wc_examples_label')+'</div><div style="display:flex;gap:6px;flex-wrap:wrap">' +
     wcExamples.map(function(ex,i){
@@ -6769,12 +6771,12 @@ function renderWebCraft(el) {
 
 function wcPickExample(i) {
   var wcExamplesData = [
-    {name:'MySaaS',    desc:'SaaS landing page with hero section, pricing table (free/pro/enterprise), feature comparison grid, user registration (name, email, password), login, protected dashboard with sidebar navigation (overview, settings, billing), account settings page, and email verification flow.'},
-    {name:'MyShop',    desc:'E-commerce site with homepage showcasing featured products, product catalog with filters (category, price range), product detail page with image gallery, shopping cart with quantity controls, checkout form with address and payment fields, user registration and login, order history page, and admin panel for product management.'},
-    {name:'MyBlog',    desc:'Blog and CMS with homepage listing recent articles (title, excerpt, cover image, author, date), article detail page with markdown rendering, category and tag filtering, author profile page, admin panel for writing and publishing posts (rich text editor), user comments with moderation, and RSS feed endpoint.'},
-    {name:'MyPortfolio', desc:'Professional portfolio with animated hero section (name, role, call-to-action), projects showcase grid with lightbox modal, skills section with progress bars, about page with timeline, contact form with SMTP email sending, dark/light mode toggle, and smooth scroll navigation.'},
-    {name:'MyRestaurant', desc:'Restaurant website with hero with background video, menu page organized by category (starters, mains, desserts, drinks) with photos and prices, online booking form (date, time, party size, special requests) with email confirmation, about us page, gallery section, and contact page with embedded map.'},
-    {name:'MyJobBoard',  desc:'Job board platform with homepage listing recent job postings (title, company, location, type), job detail page, company profile pages, candidate registration and login, job application form with resume upload, employer dashboard to post and manage listings, saved jobs for candidates, and job search with filters (location, type, salary range).'}
+    {name:'MySaaS', desc:'SaaS product landing page. Hero: large headline, subheadline, two CTA buttons (Start free trial / Watch demo), animated gradient background. Features section: 3-column grid with icon, title, description for 6 features (real-time sync, team collaboration, analytics dashboard, API access, role-based permissions, 99.9% uptime SLA). Pricing section: 3 cards (Free: 1 user, 5 projects, community support; Pro $29/mo: 10 users, unlimited projects, priority support, API access; Enterprise: custom pricing, SSO, SLA, dedicated support) with highlighted recommended card. Testimonials: 3 customer quotes with avatar placeholder, name, company, star rating. FAQ accordion: 5 questions. Footer: links, social icons, copyright. Nav: logo, links (Features, Pricing, Docs, Blog), Login and Start Free CTA buttons. Sticky nav on scroll. Smooth scroll between sections.'},
+    {name:'MyShop', desc:'E-commerce storefront homepage. Nav: logo, search bar (full-width on mobile), cart icon with item count badge, account icon, hamburger menu on mobile. Hero: full-width banner with promotional message, discount badge, Shop Now CTA. Category strip: 6 category cards with icon and label (Electronics, Clothing, Home, Sports, Books, Beauty). Featured products grid: 8 product cards each with product image placeholder, product name, star rating (1-5), review count, original price with strikethrough, sale price, Add to Cart button, wishlist heart icon. Promo banner: full-width colored banner with coupon code. Newsletter signup: email input with Subscribe button. Footer: 4-column layout (Company, Customer Service, Categories, Contact info). Fully responsive 2-col on tablet, 1-col on mobile.'},
+    {name:'MyBlog', desc:'Blog and content platform homepage. Nav: logo, category links (Tech, Design, Business, Life), search icon, Subscribe CTA. Hero: large featured article card with cover image placeholder, category badge, title, excerpt (2 lines), author avatar, author name, date, read time, Read More link. Article grid: 6 cards in 3-column layout, each with cover image, category tag, title, excerpt, author, date. Sidebar (on desktop): Recent posts list (5 items with thumbnail, title, date), Popular tags cloud (10 tags as pill buttons), Newsletter signup widget (email + Subscribe). Pagination: numbered page links. Author bio section at bottom: avatar, name, bio paragraph, social links. Footer: minimal with links and copyright.'},
+    {name:'MyPortfolio', desc:'Developer portfolio homepage. Nav: name/logo left, links right (Work, Skills, About, Contact), dark/light mode toggle button, nav hides on scroll down and shows on scroll up. Hero: centered layout, large name heading, animated typewriter role subtitle cycling through 3 roles (e.g. Full-Stack Developer / UI Engineer / Open Source Contributor), short bio paragraph, two CTA buttons (View my work / Download CV), animated floating code snippet decoration. Work section: 6 project cards in 2-column masonry-style grid, each with project screenshot placeholder, project name, tech stack tags (3-4 pills), description (2 lines), GitHub icon link and Live Demo link. Skills section: grouped by category (Frontend, Backend, Tools) with skill name and filled bar (percentage). About section: split layout, left photo placeholder, right: bio paragraph, timeline of 3 career milestones (year, title, company, description). Contact section: centered form (name, email, subject, message textarea, Send Message button), response time note. All sections with smooth scroll entrance animations using Intersection Observer.'},
+    {name:'MyRestaurant', desc:'Restaurant website homepage. Nav: logo center, links left (Menu, Story, Reservations, Gallery, Contact), phone number right, fixed transparent becoming solid white on scroll. Hero: full-viewport background image placeholder with dark overlay, restaurant name in serif font, tagline, two buttons (Reserve a Table / View Menu). About strip: 3 horizontal icon+stat items (e.g. Est. 2010 / 50 Tables / 4.9 Stars). Menu preview section: tabbed navigation (Starters, Mains, Desserts, Drinks), each tab shows 6 menu items in 2-column grid with dish name, description (1 line), allergen icons, price. CTA reservation banner: colored background, heading, inline form (date picker, time select, party size select, name, phone, Book Now button). Gallery grid: 9 square image placeholders in 3x3 mosaic layout with hover zoom effect. Chef section: photo placeholder left, name, title, bio paragraph, signature right. Testimonials: horizontal scroll of 5 review cards (stars, quote, reviewer name, date). Footer: address, opening hours table (Mon-Sun), social links, Google Maps embed placeholder.'},
+    {name:'MyJobBoard', desc:'Job board homepage. Nav: logo, links (Browse Jobs, Companies, Salary Guide, Blog), Post a Job CTA button (green), Sign In link. Hero: centered search widget (keyword input + location input + category select + Search Jobs button), popular searches as clickable tags below (e.g. React Developer, Data Analyst, UX Designer). Stats strip: 4 counters (Active Jobs, Companies Hiring, Candidates, Jobs Filled This Month). Featured jobs list: 8 job cards in vertical list, each with company logo placeholder, job title, company name, location (with icon), job type badge (Full-time/Remote/Contract), salary range, posted X days ago, bookmark icon, Quick Apply button. Filter sidebar (desktop): checkboxes for Job Type, Experience Level, Salary Range slider, Location radius, Remote only toggle. Top companies section: 6 company cards in 3-col grid with logo, name, industry, open positions count, View Jobs link. Category cards: 8 icons+labels for job categories. Newsletter: email input with Get Job Alerts button. Footer: 5-column layout (Job Seekers, Employers, Resources, Company, Social).'}
   ];
   var ex = wcExamplesData[i];
   if (!ex) return;
@@ -7936,7 +7938,7 @@ async function wcGenerate() {
   _wcLastSysPreamble = sysPreamble;
 
   var _wcGenStartTime = Date.now();
-  var _wcTokIn = 0, _wcTokOut = 0;
+  _wcTokIn = 0; _wcTokOut = 0;  // reset global counters for this generation run
   var _wcTimerInterval = null;
 
   function wcGenElapsed() {
@@ -8042,12 +8044,10 @@ async function wcGenerate() {
   }
 
   if (_wcTimerInterval) { clearInterval(_wcTimerInterval); _wcTimerInterval = null; }
-  var _wcGenTotalTime = Math.floor((Date.now() - _wcGenStartTime) / 1000);
 
   wcState.running = false;
   _wcGenAbortCtrl = null;
   _wcOverlayMinimized = false;
-  wcState.lastGenStats = { tokIn: _wcTokIn, tokOut: _wcTokOut, seconds: _wcGenTotalTime, files: wcState.generatedFiles.length };
 
   // Auto-save
   try {
@@ -8057,10 +8057,21 @@ async function wcGenerate() {
     });
   } catch(_) {}
 
+  // Post-generation syntax scan — mark truncated/broken files before repair
+  wcState.generatedFiles.forEach(function(f) {
+    if (f._error || f._pending || !f.content) return;
+    var chk = wcSyntaxCheck(f.content, f.lang || '');
+    if (!chk.ok) f._syntaxError = chk.reason;
+  });
+
   renderWebCraft(document.getElementById('content'));
 
   // Auto-repair: run immediately after generation completes
   await wcAutoRepair(filePlan, sysPreamble);
+
+  // Update stats AFTER repair so token counts include repair calls
+  wcState.lastGenStats = { tokIn: _wcTokIn, tokOut: _wcTokOut, seconds: Math.floor((Date.now() - _wcGenStartTime) / 1000), files: wcState.generatedFiles.length };
+  renderWebCraft(document.getElementById('content'));
 }
 
 // ── Auto-repair pass — fixes _error and _syntaxError files ────────────────
@@ -8233,12 +8244,12 @@ async function wcCallLLMRaw(sys, user, signal) {
       var d = await r.json();
       // Accumulate token counts if the server returns usage data
       if (d && d.usage) {
-        if (typeof _wcTokIn !== 'undefined') _wcTokIn += (d.usage.prompt_tokens || d.usage.input_tokens || 0);
-        if (typeof _wcTokOut !== 'undefined') _wcTokOut += (d.usage.completion_tokens || d.usage.output_tokens || 0);
+        _wcTokIn  += (d.usage.prompt_tokens || d.usage.input_tokens || 0);
+        _wcTokOut += (d.usage.completion_tokens || d.usage.output_tokens || 0);
       } else if (d && d.text) {
         // Estimate from char count (4 chars ≈ 1 token)
-        if (typeof _wcTokIn !== 'undefined') _wcTokIn += Math.round((sys.length + user.length) / 4);
-        if (typeof _wcTokOut !== 'undefined') _wcTokOut += Math.round((d.text || '').length / 4);
+        _wcTokIn  += Math.round((sys.length + user.length) / 4);
+        _wcTokOut += Math.round((d.text || '').length / 4);
       }
       return (d && (d.text || d.content || d.result)) || '';
     }
@@ -8407,6 +8418,7 @@ async function wcStartSandbox() {
   wcState.sandbox = { running: true, port: null, dir: null, logs: [], error: null };
   wcState.rightTab = 'preview';
   wcRightTab = 'preview';
+  _wcSkillsLoaded = false;   // force skill panel reload after sandbox completes
   renderWebCraft(document.getElementById('content'));
 
   try {