nothumanallowed 13.5.153 → 13.5.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.153",
+  "version": "13.5.155",
   "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 = '13.5.153';
+export const VERSION = '13.5.155';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -7384,38 +7384,32 @@ function wcGenElapsed() {
 function wcStartGenTimer() {
   if (_wcTimerInterval) clearInterval(_wcTimerInterval);
   _wcTimerInterval = setInterval(function() {
-    if (!wcState.running) { clearInterval(_wcTimerInterval); _wcTimerInterval = null; return; }
-    if (_wcOverlayMinimized) {
-      var pill = document.getElementById('wcPillLabel');
-      if (pill) pill.textContent = _wcGenOverlayState.name || 'Generando...';
-      var ov = document.getElementById('wcGenOverlay');
-      if (ov) { var spans = ov.querySelectorAll('span'); if (spans[1]) spans[1].textContent = wcGenElapsed(); }
-    } else {
-      wcUpdateGenOverlay(_wcGenOverlayState.fi, _wcGenOverlayState.total, _wcGenOverlayState.name);
-    }
+    if (!wcState.running && !wcState.repairing) { clearInterval(_wcTimerInterval); _wcTimerInterval = null; return; }
+    // Always update time in-place — never re-render the whole component
+    wcUpdateGenOverlay(_wcGenOverlayState.fi, _wcGenOverlayState.total, _wcGenOverlayState.name);
+    var repairTime = document.getElementById('wcRepairTime');
+    if (repairTime) repairTime.textContent = wcGenElapsed();
   }, 1000);
 }
 
 function wcUpdateGenOverlay(fi2, total, name) {
   _wcGenOverlayState = { fi: fi2, total: total, name: name };
-  if (_wcOverlayMinimized) return;
-  var ov = document.getElementById('wcGenOverlay');
-  if (!ov) return;
-  var pct = Math.round((fi2 / total) * 100);
-  var tokLabel = (_wcTokIn + _wcTokOut) > 0
-    ? '<div style="font-size:10px;color:var(--dim);margin-top:4px;font-family:var(--mono)">&#8679;' + _wcTokIn.toLocaleString() + ' &#8681;' + _wcTokOut.toLocaleString() + ' tok</div>'
-    : '';
-  ov.innerHTML =
-    '<div style="font-size:38px;animation:wcRobotBob 1s ease-in-out infinite">&#129302;</div>' +
-    '<div style="font-size:13px;font-weight:700;color:var(--green);margin-top:12px">' + (name.indexOf('Retry:') === 0 ? 'Retry in corso...' : name.indexOf('Fix:') === 0 ? 'Correzione in corso...' : 'Generazione in corso...') + '</div>' +
-    '<div style="font-size:10px;color:var(--dim);margin-top:2px">Clicca per navigare i file</div>' +
-    '<div style="font-size:11px;color:'+(name.indexOf('Retry:')===0?'#fb923c':name.indexOf('Fix:')===0?'#facc15':'var(--dim)')+';font-family:var(--mono);max-width:300px;text-align:center;word-break:break-all;margin-top:8px">'+wcEsc(name)+'</div>' +
-    '<div style="width:220px;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;margin-top:12px">' +
-      '<div style="height:100%;width:'+pct+'%;background:var(--green);border-radius:2px;transition:width .4s ease;animation:wcBarPulse 1.5s ease-in-out infinite"></div>' +
-    '</div>' +
-    '<div style="font-size:10px;color:var(--dim);margin-top:6px">'+fi2+' / '+total+' file &nbsp;&#183;&nbsp; '+wcGenElapsed()+'</div>' +
-    tokLabel +
-    '<div style="display:flex;gap:4px;margin-top:10px">'+[0,1,2,3,4].map(function(_,idx){ return '<div style="width:6px;height:6px;border-radius:50%;background:var(--green);animation:wcDot 1.1s ease-in-out infinite '+(idx*0.14)+'s"></div>'; }).join('')+'</div>';
+  // Update only the specific DOM nodes — no innerHTML rewrite, no flicker
+  var pct = total > 0 ? Math.round((fi2 / total) * 100) : 0;
+  var counterEl = document.getElementById('wcGenCounter');
+  var barEl     = document.getElementById('wcGenBar');
+  var nameEl    = document.getElementById('wcGenFileName');
+  var timeEl    = document.getElementById('wcGenTime');
+  var pillLabel = document.getElementById('wcPillLabel');
+  var pillCount = document.getElementById('wcPillCount');
+  var pillTime  = document.getElementById('wcPillTime');
+  if (counterEl) counterEl.textContent = fi2 + ' / ' + total;
+  if (barEl)     barEl.style.width = pct + '%';
+  if (nameEl)    nameEl.textContent = name || '';
+  if (timeEl)    timeEl.textContent = wcGenElapsed();
+  if (pillLabel) pillLabel.textContent = name ? name.split(',')[0].trim() : 'Generando...';
+  if (pillCount) pillCount.textContent = fi2 + '/' + total;
+  if (pillTime)  pillTime.textContent  = wcGenElapsed();
 }
 
 // Skills state
@@ -7479,8 +7473,8 @@ function renderWebCraft(el) {
           '</div>' +
           (_activeFile._error ? '<div style="padding:8px 14px;background:rgba(239,68,68,0.12);border-bottom:1px solid rgba(239,68,68,0.3);font-size:11px;color:#f87171;display:flex;align-items:center;gap:6px">&#9888; Generazione fallita — chiedi al modello di rigenerare questo file</div>' :
            _activeFile._syntaxError ? '<div style="padding:8px 14px;background:rgba(234,179,8,0.1);border-bottom:1px solid rgba(234,179,8,0.3);font-size:11px;color:#facc15;display:flex;align-items:center;gap:6px">&#9888; Syntax error: '+wcEsc(_activeFile._syntaxError)+'</div>' : '') +
-          (_activeFile._pending ? '<div style="display:flex;align-items:center;justify-content:center;height:120px;color:var(--dim);font-size:12px;gap:8px">&#8987; In generazione...</div>' :
-          '<pre style="margin:0;padding:14px 16px;font-size:11px;line-height:1.6;color:'+(_activeFile._error?'#f87171':_activeFile._syntaxError?'#fde68a':'var(--text)')+';font-family:var(--mono);white-space:pre-wrap;word-break:break-all">'+wcEsc(_activeFile.content)+'</pre>') +
+          (_activeFile._pending ? '<div id="wcLivePending" style="display:flex;align-items:center;justify-content:center;height:120px;color:var(--dim);font-size:12px;gap:8px">&#8987; In generazione...</div>' :
+          '<pre id="wcLiveCode" style="margin:0;padding:14px 16px;font-size:11px;line-height:1.6;color:'+(_activeFile._error?'#f87171':_activeFile._syntaxError?'#fde68a':'var(--text)')+';font-family:var(--mono);white-space:pre-wrap;word-break:break-all">'+wcEsc(_activeFile.content)+'</pre>') +
         '</div>' +
         fileSidebarHtml +
       '</div>'
@@ -7591,36 +7585,47 @@ function renderWebCraft(el) {
       '<div data-wc-files style="position:relative;flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;height:100%;overflow:hidden">' +
         (wcState.repairing ?
           (_wcOverlayMinimized
-            ? '<div id="wcRepairOverlay" onclick="wcOverlayRestore()" style="position:absolute;bottom:12px;right:12px;z-index:50;background:rgba(0,0,0,0.85);border:1px solid rgba(234,179,8,0.6);border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;animation:wcBubbleIn .2s ease;backdrop-filter:blur(4px)">'
-                +'<span style="font-size:16px;animation:wcRobotBob .9s ease-in-out infinite">&#128295;</span>'
-                +'<span style="font-size:10px;color:#facc15;font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+wcEsc(wcState.repairCurrent || 'Correzione...')+'</span>'
-                +'<span style="font-size:9px;color:var(--dim)">'+wcState.repairDone+'/'+wcState.repairTotal+'</span>'
+            // Minimized repair: pill bottom-right
+            ? '<div id="wcRepairOverlay" onclick="wcOverlayRestore()" style="position:absolute;bottom:12px;right:12px;z-index:50;background:rgba(0,0,0,0.85);border:1px solid rgba(234,179,8,0.6);border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;backdrop-filter:blur(4px)">'
+                +'<span style="font-size:14px;animation:wcRobotBob .9s ease-in-out infinite">&#128295;</span>'
+                +'<span style="font-size:10px;color:#facc15;font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" id="wcRepairFile">'+wcEsc(wcState.repairCurrent || 'Correzione...')+'</span>'
+                +'<span style="font-size:9px;color:var(--dim)" id="wcRepairCounter">'+wcState.repairDone+'/'+wcState.repairTotal+'</span>'
                 +'<span style="display:flex;gap:3px">'+[0,1,2].map(function(_,idx){ return '<span style="width:4px;height:4px;border-radius:50%;background:#facc15;animation:wcDot 1.1s ease-in-out infinite '+(idx*0.18)+'s"></span>'; }).join('')+'</span>'
               +'</div>'
-            : '<div id="wcRepairOverlay" onclick="wcOverlayMinimize()" title="Clicca per navigare i file" style="position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);border-radius:10px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;animation:wcBubbleIn .3s ease">'
-                +'<div style="font-size:38px;animation:wcRobotBob 1s ease-in-out infinite">&#128295;</div>'
-                +'<div style="font-size:13px;font-weight:700;color:#facc15;margin-top:12px">Correzione automatica in corso...</div>'
-                +'<div style="font-size:10px;color:var(--dim);margin-top:4px">Clicca per navigare i file</div>'
-                +'<div id="wcRepairCounter" style="font-size:11px;color:var(--dim);margin-top:6px">'+wcState.repairDone+' / '+wcState.repairTotal+' file</div>'
-                +'<div id="wcRepairFile" style="font-size:10px;color:#fde68a;font-family:var(--mono);margin-top:4px;max-width:280px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+wcEsc(wcState.repairCurrent)+'</div>'
-                +'<div style="display:flex;gap:4px;margin-top:16px">'+[0,1,2,3,4].map(function(_,idx){ return '<div style="width:6px;height:6px;border-radius:50%;background:#facc15;animation:wcDot 1.1s ease-in-out infinite '+(idx*0.14)+'s"></div>'; }).join('')+'</div>'
+            // Full repair: sticky header bar — code stays visible below
+            : '<div id="wcRepairOverlay" style="position:absolute;top:0;left:0;right:0;z-index:50;background:rgba(20,16,0,0.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(234,179,8,0.5);padding:8px 16px;display:flex;align-items:center;gap:10px">'
+                +'<span style="font-size:16px;animation:wcRobotBob .9s ease-in-out infinite;flex-shrink:0">&#128295;</span>'
+                +'<span style="font-size:11px;font-weight:700;color:#facc15;flex-shrink:0">Correzione automatica</span>'
+                +'<span style="font-size:10px;color:#fde68a;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1" id="wcRepairFile">'+wcEsc(wcState.repairCurrent || '')+'</span>'
+                +'<span style="font-size:10px;color:var(--dim);flex-shrink:0" id="wcRepairCounter">'+wcState.repairDone+' / '+wcState.repairTotal+' file</span>'
+                +'<span onclick="wcOverlayMinimize()" style="font-size:10px;color:var(--dim);cursor:pointer;flex-shrink:0;padding:2px 6px;border:1px solid var(--border2);border-radius:4px" title="Minimizza">&#8211;</span>'
+                +'<span style="display:flex;gap:3px">'+[0,1,2].map(function(_,idx){ return '<span style="width:4px;height:4px;border-radius:50%;background:#facc15;animation:wcDot 1.1s ease-in-out infinite '+(idx*0.18)+'s"></span>'; }).join('')+'</span>'
               +'</div>'
           )
         : wcState.running ? (
           _wcOverlayMinimized
-          // Minimized: small pill in bottom-right corner
-          ? '<div id="wcGenOverlay" onclick="wcOverlayRestore()" style="position:absolute;bottom:12px;right:12px;z-index:50;background:rgba(0,0,0,0.85);border:1px solid var(--green3);border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;animation:wcBubbleIn .2s ease;backdrop-filter:blur(4px)">'
-              +'<span style="font-size:16px;animation:wcRobotBob .9s ease-in-out infinite">&#129302;</span>'
-              +'<span id="wcPillLabel" style="font-size:10px;color:var(--green);font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+wcEsc(_wcGenOverlayState.name || 'Generando...')+'</span>'
-              +'<span style="font-size:9px;color:var(--dim)">'+wcGenElapsed()+'</span>'
+          // Minimized gen: pill bottom-right
+          ? '<div id="wcGenOverlay" onclick="wcOverlayRestore()" style="position:absolute;bottom:12px;right:12px;z-index:50;background:rgba(0,0,0,0.85);border:1px solid var(--green3);border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;backdrop-filter:blur(4px)">'
+              +'<span style="font-size:14px;animation:wcRobotBob .9s ease-in-out infinite">&#129302;</span>'
+              +'<span id="wcPillLabel" style="font-size:10px;color:var(--green);font-weight:700;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+wcEsc((_wcGenOverlayState.name||'').split(',')[0].trim() || 'Generando...')+'</span>'
+              +'<span id="wcPillCount" style="font-size:9px;color:var(--dim)">'+_wcGenOverlayState.fi+'/'+_wcGenOverlayState.total+'</span>'
+              +'<span id="wcPillTime" style="font-size:9px;color:var(--dim)">'+wcGenElapsed()+'</span>'
               +'<span style="display:flex;gap:3px">'+[0,1,2].map(function(_,idx){ return '<span style="width:4px;height:4px;border-radius:50%;background:var(--green);animation:wcDot 1.1s ease-in-out infinite '+(idx*0.18)+'s"></span>'; }).join('')+'</span>'
             +'</div>'
-          // Full overlay
-          : '<div id="wcGenOverlay" onclick="wcOverlayMinimize()" title="Clicca per nascondere e navigare i file" style="position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);border-radius:10px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:wcBubbleIn .3s ease;cursor:pointer">'
-              +'<div style="font-size:38px;animation:wcRobotBob 1s ease-in-out infinite">&#129302;</div>'
-              +'<div style="font-size:13px;font-weight:700;color:var(--green);margin-top:12px">Generazione in corso...</div>'
-              +'<div style="font-size:10px;color:var(--dim);margin-top:4px">Clicca per navigare i file</div>'
-              +'<div style="display:flex;gap:4px;margin-top:16px">'+[0,1,2,3,4].map(function(_,idx){ return '<div style="width:6px;height:6px;border-radius:50%;background:var(--green);animation:wcDot 1.1s ease-in-out infinite '+(idx*0.14)+'s"></div>'; }).join('')+'</div>'
+          // Full gen: sticky header bar — code streams visibly below
+          : '<div id="wcGenOverlay" style="position:absolute;top:0;left:0;right:0;z-index:50;background:rgba(0,14,0,0.90);backdrop-filter:blur(6px);border-bottom:1px solid var(--green3);padding:8px 16px;display:flex;flex-direction:column;gap:4px">'
+              +'<div style="display:flex;align-items:center;gap:10px">'
+                +'<span style="font-size:16px;animation:wcRobotBob .9s ease-in-out infinite;flex-shrink:0">&#129302;</span>'
+                +'<span style="font-size:11px;font-weight:700;color:var(--green);flex-shrink:0">Generazione in corso</span>'
+                +'<span id="wcGenFileName" style="font-size:10px;color:var(--dim);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">'+wcEsc((_wcGenOverlayState.name||'').split(',')[0].trim())+'</span>'
+                +'<span id="wcGenCounter" style="font-size:10px;color:var(--dim);flex-shrink:0">'+_wcGenOverlayState.fi+' / '+_wcGenOverlayState.total+'</span>'
+                +'<span id="wcGenTime" style="font-size:10px;color:var(--dim);flex-shrink:0">'+wcGenElapsed()+'</span>'
+                +'<span onclick="wcOverlayMinimize()" style="font-size:10px;color:var(--dim);cursor:pointer;flex-shrink:0;padding:2px 6px;border:1px solid var(--border2);border-radius:4px" title="Minimizza">&#8211;</span>'
+                +'<span style="display:flex;gap:3px">'+[0,1,2].map(function(_,idx){ return '<span style="width:4px;height:4px;border-radius:50%;background:var(--green);animation:wcDot 1.1s ease-in-out infinite '+(idx*0.18)+'s"></span>'; }).join('')+'</span>'
+              +'</div>'
+              +'<div style="height:2px;background:rgba(255,255,255,0.07);border-radius:1px;overflow:hidden">'
+                +'<div id="wcGenBar" style="height:100%;width:'+Math.round((_wcGenOverlayState.fi/_wcGenOverlayState.total||0)*100)+'%;background:var(--green);border-radius:1px;transition:width .3s ease"></div>'
+              +'</div>'
             +'</div>'
         ) : '') +
         '<div style="display:flex;border-bottom:1px solid var(--border);flex-shrink:0">' +
@@ -8116,12 +8121,17 @@ function wcStopAll() {
 }
 
 function wcOverlayMinimize() {
+  if (_wcOverlayTimer) clearTimeout(_wcOverlayTimer);
   _wcOverlayMinimized = true;
   renderWebCraft(document.getElementById('content'));
-  if (_wcOverlayTimer) clearTimeout(_wcOverlayTimer);
+  // Auto-restore after 30s of inactivity so user doesn't miss progress
   _wcOverlayTimer = setTimeout(function() {
-    if (wcState.running || wcState.repairing) { _wcOverlayMinimized = false; renderWebCraft(document.getElementById('content')); }
-  }, 10000);
+    if (wcState.running || wcState.repairing) {
+      _wcOverlayMinimized = false;
+      renderWebCraft(document.getElementById('content'));
+    }
+    _wcOverlayTimer = null;
+  }, 30000);
 }
 
 function wcOverlayRestore() {
@@ -8834,7 +8844,7 @@ async function wcGenerate() {
   }
 
   var _nl = String.fromCharCode(10);
-  var sysPreamble = 'You are an expert full-stack engineer generating production-quality code.' + _nl + _nl + 'SECURITY RULES (non-negotiable):' + _nl + SECURITY_RULES + _nl + _nl + 'Project: ' + projName + _nl + 'Description: ' + desc + _nl + 'Enabled blocks: ' + blocksEnabled + _nl + _nl + 'Generate ONLY the file content requested. No explanations, no markdown code fences, no comments like "here is the file". Output raw file content only.';
+  var sysPreamble = 'You are an expert full-stack engineer generating production-quality code.' + _nl + _nl + 'SECURITY RULES (non-negotiable):' + _nl + SECURITY_RULES + _nl + _nl + 'JSON FILES RULES (non-negotiable):' + _nl + '- NEVER add spaces inside JSON keys or string values that are identifiers (package names, field names).' + _nl + '- package.json "name" must be lowercase with no spaces. All dependency names must match exactly the npm package name (no spaces, no leading/trailing spaces).' + _nl + '- NEVER duplicate dependency entries. Each package name appears exactly once.' + _nl + '- "devDependencies" key has NO trailing space. All JSON keys are exact.' + _nl + _nl + 'Project: ' + projName + _nl + 'Description: ' + desc + _nl + 'Enabled blocks: ' + blocksEnabled + _nl + _nl + 'Generate ONLY the file content requested. No explanations, no markdown code fences, no comments like "here is the file". Output raw file content only.';
   _wcLastFilePlan = filePlan;
   _wcLastSysPreamble = sysPreamble;
 
@@ -8878,7 +8888,27 @@ async function wcGenerate() {
       return part1 + _nl2 + _nl2 + part2;
     }
     var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name, signal, fp.lang, undefined, onLiveUpdate);
-    return wcStripFences(content);
+    content = wcStripFences(content);
+    // Post-process package.json: fix common LLM mistakes (spaces in keys/names, duplicates)
+    if (fp.name === 'package.json' && fp.lang === 'json') {
+      try {
+        var pkg = JSON.parse(content);
+        // Fix name field
+        if (typeof pkg.name === 'string') pkg.name = pkg.name.trim().toLowerCase().replace(/\s+/g, '-');
+        // Fix all dependency sections: strip spaces from keys, deduplicate
+        ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'].forEach(function(section) {
+          if (!pkg[section] || typeof pkg[section] !== 'object') return;
+          var clean = {};
+          Object.keys(pkg[section]).forEach(function(k) {
+            var cleanKey = k.trim();
+            if (cleanKey && !clean[cleanKey]) clean[cleanKey] = pkg[section][k];
+          });
+          pkg[section] = clean;
+        });
+        content = JSON.stringify(pkg, null, 2);
+      } catch(_) { /* if JSON is already broken, leave as-is for repair to handle */ }
+    }
+    return content;
   }
 
   wcStartGenTimer();
@@ -8890,35 +8920,67 @@ async function wcGenerate() {
   wcState.activeFile = 0;
   renderWebCraft(document.getElementById('content'));
 
-  // Live render throttle — update UI at most every 120ms per file during streaming
-  var _wcLiveRenderTimers = {};
+  // Live update: write token directly into DOM — zero re-render, zero flicker
+  var _wcLiveDomTimers = {};
   function wcLiveUpdateFile(fpName, fpLang, partialContent) {
+    // Always update state
+    var fileIdx = -1;
     for (var li = 0; li < wcState.generatedFiles.length; li++) {
       if (wcState.generatedFiles[li].name === fpName) {
         wcState.generatedFiles[li].content = partialContent;
         wcState.generatedFiles[li]._pending = false;
+        fileIdx = li;
         break;
       }
     }
-    if (_wcLiveRenderTimers[fpName]) return; // throttle
-    _wcLiveRenderTimers[fpName] = setTimeout(function() {
-      delete _wcLiveRenderTimers[fpName];
-      renderWebCraft(document.getElementById('content'));
-    }, 120);
+    // If this file is the active one, update the <pre> directly (throttled 80ms)
+    if (fileIdx !== wcState.activeFile) return;
+    if (_wcLiveDomTimers[fpName]) return;
+    _wcLiveDomTimers[fpName] = setTimeout(function() {
+      delete _wcLiveDomTimers[fpName];
+      // Replace pending placeholder with live <pre> if needed
+      var pending = document.getElementById('wcLivePending');
+      var pre = document.getElementById('wcLiveCode');
+      var wrap = document.getElementById('wcCodeWrap');
+      if (pending && wrap) {
+        // First token: swap placeholder for <pre>
+        var newPre = document.createElement('pre');
+        newPre.id = 'wcLiveCode';
+        newPre.style.cssText = 'margin:0;padding:14px 16px;font-size:11px;line-height:1.6;color:var(--text);font-family:var(--mono);white-space:pre-wrap;word-break:break-all';
+        newPre.textContent = partialContent;
+        pending.parentNode.replaceChild(newPre, pending);
+        return;
+      }
+      if (pre) {
+        pre.textContent = partialContent;
+        // Auto-scroll to bottom so user sees latest tokens
+        var codeWrap = document.getElementById('wcCodeWrap');
+        if (codeWrap) codeWrap.scrollTop = codeWrap.scrollHeight;
+      }
+    }, 80);
   }
 
   // Generate in parallel batches of 4 — each call is independent/fresh to Liara
+  // Counter increments 1 per file as it completes, not per batch
   var BATCH = 4;
   var doneCount = 0;
+  wcUpdateGenOverlay(0, filePlan.length, '');
   for (var bi = 0; bi < filePlan.length; bi += BATCH) {
     if (_wcGenAbortCtrl && _wcGenAbortCtrl.signal.aborted) break;
     var batch = filePlan.slice(bi, bi + BATCH);
-    wcUpdateGenOverlay(doneCount, filePlan.length, batch.map(function(f){ return f.name; }).join(', '));
-    var results = await Promise.allSettled(batch.map(function(fp) {
+    var results = await Promise.allSettled(batch.map(function(fp, bii) {
+      // Point activeFile at the first file of this batch so tokens appear immediately
+      if (bii === 0) {
+        var firstIdx = wcState.generatedFiles.findIndex(function(f){ return f.name === fp.name; });
+        if (firstIdx >= 0) wcState.activeFile = firstIdx;
+      }
+      // Show file name in overlay as soon as it starts
+      wcUpdateGenOverlay(doneCount, filePlan.length, fp.name);
       var liveCallback = function(partial) { wcLiveUpdateFile(fp.name, fp.lang, partial); };
       return wcGenOneFile(fp, _wcGenAbortCtrl ? _wcGenAbortCtrl.signal : null, liveCallback).then(function(c){ return { fp: fp, content: c }; });
     }));
-    results.forEach(function(r) {
+    results.forEach(function(r, ri) {
+      var batchIdx = ri;
       if (r.status === 'fulfilled') {
         var fp = r.value.fp;
         for (var gi = 0; gi < wcState.generatedFiles.length; gi++) {
@@ -8928,20 +8990,20 @@ async function wcGenerate() {
           }
         }
       } else if (r.reason && r.reason.name !== 'AbortError') {
-        var fpName = batch[results.indexOf(r)] ? batch[results.indexOf(r)].name : '?';
-        // find by matching position
-        var batchIdx = results.indexOf(r);
-        if (batch[batchIdx]) fpName = batch[batchIdx].name;
-        for (var gi2 = 0; gi2 < wcState.generatedFiles.length; gi2++) {
-          if (wcState.generatedFiles[gi2].name === fpName) {
-            wcState.generatedFiles[gi2] = { name: fpName, content: '// Error generating this file: ' + (r.reason.message || 'unknown error'), lang: (batch[batchIdx] || {}).lang || '', _error: true };
-            break;
+        var fpErr = batch[batchIdx];
+        if (fpErr) {
+          for (var gi2 = 0; gi2 < wcState.generatedFiles.length; gi2++) {
+            if (wcState.generatedFiles[gi2].name === fpErr.name) {
+              wcState.generatedFiles[gi2] = { name: fpErr.name, content: '// Error generating this file: ' + (r.reason.message || 'unknown error'), lang: fpErr.lang || '', _error: true };
+              break;
+            }
           }
         }
       }
       doneCount++;
+      // Update counter immediately on each file completion — no full re-render
+      wcUpdateGenOverlay(doneCount, filePlan.length, doneCount < filePlan.length ? (batch[Math.min(batchIdx+1, batch.length-1)] || batch[batchIdx] || {}).name || '' : '');
     });
-    renderWebCraft(document.getElementById('content'));
   }
 
   if (_wcTimerInterval) { clearInterval(_wcTimerInterval); _wcTimerInterval = null; }