nothumanallowed 13.5.152 → 13.5.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.152",
+  "version": "13.5.154",
   "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/commands/ui.mjs

@@ -4652,6 +4652,39 @@ ${completedHeadings ? `## SECTIONS ALREADY WRITTEN (headings only):\n${completed
         return;
       }
 
+      // POST /api/studio/webcraft/stream  { system, user, max_tokens }  → SSE token stream
+      // Used by WebCraft generation for live typewriter effect per file
+      if (pathname === '/api/studio/webcraft/stream' && method === 'POST') {
+        const body = await parseBody(req, 131072);
+        if (!body.system || !body.user) {
+          sendJSON(res, 400, { error: 'system and user required' });
+          logRequest(method, pathname, 400, Date.now() - start);
+          return;
+        }
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          'Connection': 'keep-alive',
+          'Access-Control-Allow-Origin': '*',
+        });
+        let fullText = '';
+        let tokIn = 0, tokOut = 0;
+        try {
+          await callLLMStream(config, body.system, body.user, (token) => {
+            fullText += token;
+            tokOut++;
+            res.write('data: ' + JSON.stringify({ type: 'token', token }) + '\n\n');
+          }, { max_tokens: body.max_tokens || 16384, temperature: 0.3 });
+          tokIn = Math.round((body.system.length + body.user.length) / 4);
+          res.write('data: ' + JSON.stringify({ type: 'done', text: fullText, usage: { prompt_tokens: tokIn, completion_tokens: tokOut } }) + '\n\n');
+        } catch (e) {
+          res.write('data: ' + JSON.stringify({ type: 'error', message: e.message }) + '\n\n');
+        }
+        res.end();
+        logRequest(method, pathname, 200, Date.now() - start);
+        return;
+      }
+
       // ── WebCraft Projects — list and delete saved projects ──────────────────
       // GET  /api/studio/webcraft/projects         → { projects: [{name, description, fileCount, createdAt, dir}] }
       // DELETE /api/studio/webcraft/projects/:name → { ok }

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.152';
+export const VERSION = '13.5.154';
 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() {
@@ -8864,19 +8874,20 @@ async function wcGenerate() {
   }
 
   // Helper: generate one file (with two-pass split for large CSS files)
-  async function wcGenOneFile(fp, signal) {
+  // onLiveUpdate(partialContent) is called on each token for live display
+  async function wcGenOneFile(fp, signal, onLiveUpdate) {
     var _nl2 = String.fromCharCode(10);
     var splitPrompts = WC_CSS_SPLIT[fp.name];
     if (splitPrompts) {
-      // Two-pass generation: call LLM twice and concatenate
-      var part1 = await wcCallLLM(sysPreamble, splitPrompts[0] + _nl2 + _nl2 + 'File: ' + fp.name, signal, fp.lang, 8192);
+      // Two-pass generation: streaming on first pass only
+      var part1 = await wcCallLLM(sysPreamble, splitPrompts[0] + _nl2 + _nl2 + 'File: ' + fp.name, signal, fp.lang, 8192, onLiveUpdate);
       part1 = wcStripFences(part1);
       if (signal && signal.aborted) return part1;
-      var part2 = await wcCallLLM(sysPreamble, splitPrompts[1] + _nl2 + _nl2 + 'File: ' + fp.name, signal, fp.lang, 8192);
+      var part2 = await wcCallLLM(sysPreamble, splitPrompts[1] + _nl2 + _nl2 + 'File: ' + fp.name, signal, fp.lang, 8192, function(p2) { if (onLiveUpdate) onLiveUpdate(part1 + _nl2 + _nl2 + p2); });
       part2 = wcStripFences(part2);
       return part1 + _nl2 + _nl2 + part2;
     }
-    var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name, signal, fp.lang);
+    var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name, signal, fp.lang, undefined, onLiveUpdate);
     return wcStripFences(content);
   }
 
@@ -8889,17 +8900,67 @@ async function wcGenerate() {
   wcState.activeFile = 0;
   renderWebCraft(document.getElementById('content'));
 
+  // 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 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) {
-      return wcGenOneFile(fp, _wcGenAbortCtrl ? _wcGenAbortCtrl.signal : null).then(function(c){ return { fp: fp, content: c }; });
+    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++) {
@@ -8909,20 +8970,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; }
@@ -9120,7 +9181,57 @@ function wcIsTruncated(content, lang) {
   return false;
 }
 
-async function wcCallLLMRaw(sys, user, signal, maxTok) {
+async function wcCallLLMRaw(sys, user, signal, maxTok, onToken) {
+  // Streaming path: use SSE endpoint so tokens appear live in the file editor
+  if (onToken) {
+    var streamOpts = {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({system: sys, user: user, max_tokens: maxTok || 16384})
+    };
+    if (signal) streamOpts.signal = signal;
+    for (var sa = 0; sa < 3; sa++) {
+      if (signal && signal.aborted) throw new DOMException('Aborted', 'AbortError');
+      var sr = await fetch(API + '/api/studio/webcraft/stream', streamOpts);
+      if (!sr.ok) {
+        if (sr.status < 500 || sa === 2) throw new Error('LLM stream error ' + sr.status);
+        await new Promise(function(resolve) { setTimeout(resolve, 2000); });
+        continue;
+      }
+      var sreader = sr.body.getReader();
+      var sdec = new TextDecoder();
+      var sbuf = '';
+      var fullText = '';
+      while (true) {
+        var sres = await sreader.read();
+        if (sres.done) break;
+        sbuf += sdec.decode(sres.value, {stream: true});
+        var sparts = sbuf.split(String.fromCharCode(10) + String.fromCharCode(10));
+        sbuf = sparts.pop();
+        for (var si = 0; si < sparts.length; si++) {
+          var sline = sparts[si].replace(/^data: /, '').trim();
+          if (!sline) continue;
+          try {
+            var sev = JSON.parse(sline);
+            if (sev.type === 'token') {
+              fullText += sev.token;
+              onToken(fullText);
+            } else if (sev.type === 'done') {
+              if (sev.usage) {
+                _wcTokIn  += (sev.usage.prompt_tokens || 0);
+                _wcTokOut += (sev.usage.completion_tokens || 0);
+              }
+            } else if (sev.type === 'error') {
+              throw new Error(sev.message || 'Stream error');
+            }
+          } catch(_) {}
+        }
+      }
+      return fullText;
+    }
+  }
+
+  // Non-streaming fallback (used by repair and continuation passes)
   var fetchOpts = {
     method: 'POST',
     headers: {'Content-Type':'application/json'},
@@ -9132,12 +9243,10 @@ async function wcCallLLMRaw(sys, user, signal, maxTok) {
     var r = await fetch(API + '/api/studio/webcraft', fetchOpts);
     if (r.ok) {
       var d = await r.json();
-      // Accumulate token counts if the server returns usage data
       if (d && d.usage) {
         _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)
         _wcTokIn  += Math.round((sys.length + user.length) / 4);
         _wcTokOut += Math.round((d.text || '').length / 4);
       }
@@ -9153,9 +9262,9 @@ async function wcCallLLMRaw(sys, user, signal, maxTok) {
   }
 }
 
-async function wcCallLLM(sys, user, signal, lang, maxTok) {
-  var content = await wcCallLLMRaw(sys, user, signal, maxTok);
-  // Continuation loop: if response is truncated, ask model to continue
+async function wcCallLLM(sys, user, signal, lang, maxTok, onToken) {
+  var content = await wcCallLLMRaw(sys, user, signal, maxTok, onToken);
+  // Continuation loop: if response is truncated, ask model to continue (no streaming for continuations)
   var maxContinuations = 2;
   for (var ci = 0; ci < maxContinuations; ci++) {
     if (!wcIsTruncated(content, lang || 'text')) break;
@@ -9166,6 +9275,7 @@ async function wcCallLLM(sys, user, signal, lang, maxTok) {
     var continuation = await wcCallLLMRaw(sys, continuePrompt, signal, maxTok);
     if (!continuation || continuation.trim().length < 5) break;
     content = content + String.fromCharCode(10) + continuation;
+    if (onToken) onToken(content);
   }
   return content;
 }