nothumanallowed 13.5.64 → 13.5.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.64",
+  "version": "13.5.66",
   "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

@@ -6544,6 +6544,9 @@ var _wcDiffQueue = [];       // [{file, before, after}] diffs from last agent ru
 var _wcGrepOpen = false;     // grep panel visible
 var _wcGrepQuery = '';
 var _wcGrepResults = [];
+var _wcOverlayMinimized = false;   // overlay minimized by user click
+var _wcOverlayTimer = null;        // inactivity timer to restore overlay
+var _wcGenAbortCtrl = null;        // AbortController for generation stop
 var _wcSyntaxResults = [];   // [{file, ok, error}]
 var _wcSnapshots = [];       // [{ts, fileCount}]
 // Skills state
@@ -6621,7 +6624,7 @@ function renderWebCraft(el) {
     '<div style="display:flex;flex-direction:column;height:100%">' +
     wcExHtml +
     '<div style="display:flex;gap:14px;align-items:flex-start;flex:1;min-height:0">' +
-      '<div style="width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;height:100%">' +
+      '<div style="width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;height:100%">' +
         '<div style="background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px">' +
           '<div style="font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px">'+t('wc_blocks')+'</div>' +
           ['auth','cookieBanner','securityMiddleware','emailVerification'].map(function(b){
@@ -6656,7 +6659,23 @@ function renderWebCraft(el) {
           '<button onclick="wcStartSandbox()" id="wcSandboxBtn" style="width:100%;padding:10px;background:var(--bg3);border:1px solid var(--green3);border-radius:8px;color:var(--green);font-size:12px;font-weight:600;cursor:pointer">&#9654; '+t('wc_sandbox_start')+'</button>'
         : '') +
       '</div>' +
-      '<div style="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">' +
+      '<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.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 style="font-size:10px;color:var(--green);font-weight:700">Generando...</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>'
+            +'</div>'
+        ) : '') +
         '<div style="display:flex;border-bottom:1px solid var(--border);flex-shrink:0">' +
           '<button onclick="wcTabFiles()" style="padding:8px 16px;background:'+(wcRightTab==='preview'?'transparent':'var(--bg3)')+';border:none;border-right:1px solid var(--border);color:'+(wcRightTab==='preview'?'var(--dim)':'var(--text)')+';font-size:11px;font-weight:600;cursor:pointer">&#128196; File</button>' +
           '<button onclick="wcTabPreview()" style="padding:8px 16px;background:'+(wcRightTab==='preview'?'var(--bg3)':'transparent')+';border:none;color:'+(wcRightTab==='preview'?'var(--text)':'var(--dim)')+';font-size:11px;font-weight:600;cursor:pointer">&#127760; Sandbox</button>' +
@@ -7030,7 +7049,21 @@ function wcChatPanelHtml() {
     }
   }
   if (wcChatRunning) {
-    messagesHtml += '<div id="wcChatTyping" style="margin:4px 12px;font-size:11px;color:var(--dim)">&#129302; <span style="opacity:.6">&#8230;</span></div>';
+    messagesHtml +=
+      '<div id="wcAgentLiveBubble" style="margin:6px 12px;border:1px solid rgba(255,255,255,0.12);border-radius:10px;background:var(--bg3);overflow:hidden;animation:wcBubbleIn .25s cubic-bezier(.22,1,.36,1)">' +
+        '<div style="display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03)">' +
+          '<span style="font-size:13px;animation:wcRobotBob .9s ease-in-out infinite">&#129302;</span>' +
+          '<span style="font-size:10px;font-weight:700;color:var(--green)">WebCraft Agent</span>' +
+          '<span style="margin-left:auto;display:flex;gap:3px;align-items:center">' +
+            '<span style="width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.9;animation:wcDot 1.1s ease-in-out infinite 0s"></span>' +
+            '<span style="width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.9;animation:wcDot 1.1s ease-in-out infinite .18s"></span>' +
+            '<span style="width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.9;animation:wcDot 1.1s ease-in-out infinite .36s"></span>' +
+          '</span>' +
+        '</div>' +
+        '<div id="wcAgentLiveText" style="padding:8px 10px;font-size:11px;color:var(--text);line-height:1.6;white-space:pre-wrap;min-height:24px">' +
+          '<span style="display:inline-block;width:2px;height:11px;background:var(--green);vertical-align:text-bottom;animation:streamBlink .7s step-end infinite;margin-left:1px">&#8203;</span>' +
+        '</div>' +
+      '</div>';
   }
 
   // Attachments preview
@@ -7072,7 +7105,10 @@ function wcChatPanelHtml() {
         '<input type="file" id="wcFileInput" multiple accept="image/*,.pdf" style="display:none" onchange="wcHandleFileAttach(this)">' +
       '</label>' +
       '<textarea id="wcChatInput" rows="4" placeholder="'+placeholder+'" '+(inputDisabled?'disabled':'')+' style="flex:1;padding:8px 10px;font-size:12px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);resize:vertical;min-height:80px;line-height:1.5;font-family:inherit" onkeydown="wcChatKeydown(event)"></textarea>' +
-      '<button onclick="wcChatSend()" '+(inputDisabled?'disabled':'')+' style="padding:8px 14px;background:var(--green3);border:none;border-radius:8px;color:var(--bg);font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;height:38px">'+sendBtnLabel+'</button>' +
+      '<div style="display:flex;flex-direction:column;gap:5px;flex-shrink:0">' +
+        '<button onclick="wcChatSend()" '+(inputDisabled?'disabled':'')+' style="padding:8px 14px;background:var(--green3);border:none;border-radius:8px;color:var(--bg);font-size:13px;font-weight:700;cursor:pointer;height:38px;white-space:nowrap">'+sendBtnLabel+'</button>' +
+        (inputDisabled ? '<button onclick="wcStopAll()" style="padding:5px 10px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);border-radius:7px;color:#f87171;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap">&#9632; Stop</button>' : '') +
+      '</div>' +
     '</div>' +
   '</div>';
 }
@@ -7081,6 +7117,17 @@ function wcChatKeydown(e) {
   if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); wcChatSend(); }
 }
 
+function wcStopAll() {
+  // Abort ongoing generation
+  if (_wcGenAbortCtrl) { _wcGenAbortCtrl.abort(); _wcGenAbortCtrl = null; }
+  wcState.running = false;
+  wcChatRunning = false;
+  _wcOverlayMinimized = false;
+  if (_wcOverlayTimer) { clearTimeout(_wcOverlayTimer); _wcOverlayTimer = null; }
+  wcChat.push({ role: 'system', text: '&#9632; Generazione interrotta.' });
+  renderWebCraft(document.getElementById('content'));
+}
+
 function wcRemoveAttachment(ai) {
   wcChatAttachments.splice(ai, 1);
   renderWebCraft(document.getElementById('content'));
@@ -7205,8 +7252,12 @@ async function wcExecuteAgentCall(message, isPlanExec, planOrigMsg, attachments)
           var ev = JSON.parse(line);
           if (ev.type === 'text') {
             agentMsg.text += ev.token;
-            var typingEl = document.getElementById('wcChatTyping');
-            if (typingEl) typingEl.textContent = '...';
+            // Inject token directly into live bubble (no re-render)
+            var liveEl = document.getElementById('wcAgentLiveText');
+            if (liveEl) {
+              var cursor = '<span style="display:inline-block;width:2px;height:11px;background:var(--green);vertical-align:text-bottom;animation:streamBlink .7s step-end infinite;margin-left:1px">&#8203;</span>';
+              liveEl.innerHTML = wcEsc(agentMsg.text) + cursor;
+            }
             wcScrollChatToBottom();
           } else if (ev.type === 'tool') {
             agentMsg.tools.push({ op: ev.op, path: ev.path, result: ev.result, oldSnippet: ev.oldSnippet || '', newSnippet: ev.newSnippet || '' });
@@ -7652,6 +7703,8 @@ async function wcGenerate() {
   wcState.running = true;
   wcState.generatedFiles = [];
   wcState.activeFile = 0;
+  _wcOverlayMinimized = false;
+  _wcGenAbortCtrl = new AbortController();
   renderWebCraft(document.getElementById('content'));
 
   // Security rules always injected
@@ -7711,13 +7764,47 @@ 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.';
 
+  function wcUpdateGenOverlay(fi2, total, name) {
+    if (_wcOverlayMinimized) return; // don't touch minimized pill
+    var ov = document.getElementById('wcGenOverlay');
+    if (!ov) return;
+    var pct = Math.round((fi2 / total) * 100);
+    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">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: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</div>' +
+      '<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>';
+  }
+
+  function wcOverlayMinimize() {
+    _wcOverlayMinimized = true;
+    renderWebCraft(document.getElementById('content'));
+    // Restore after 10s of inactivity
+    if (_wcOverlayTimer) clearTimeout(_wcOverlayTimer);
+    _wcOverlayTimer = setTimeout(function() {
+      if (wcState.running) { _wcOverlayMinimized = false; renderWebCraft(document.getElementById('content')); }
+    }, 10000);
+  }
+
+  function wcOverlayRestore() {
+    if (_wcOverlayTimer) { clearTimeout(_wcOverlayTimer); _wcOverlayTimer = null; }
+    _wcOverlayMinimized = false;
+    renderWebCraft(document.getElementById('content'));
+  }
+
   for (var fi = 0; fi < filePlan.length; fi++) {
     var fp = filePlan[fi];
-    var runBtn = document.getElementById('wcRunBtn');
-    if (runBtn) runBtn.innerHTML = '&#9203; '+t('wc_generating')+' ' + fp.name + ' (' + (fi+1) + '/' + filePlan.length + ')...';
+    wcUpdateGenOverlay(fi, filePlan.length, fp.name);
+    // Check if aborted
+    if (_wcGenAbortCtrl && _wcGenAbortCtrl.signal.aborted) break;
     try {
       var _nl2 = String.fromCharCode(10);
-      var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name);
+      var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name, _wcGenAbortCtrl ? _wcGenAbortCtrl.signal : null);
       // Strip markdown code fences if model added them anyway
       var _fence = String.fromCharCode(96,96,96);
       var wcLines = content.split(_nl2);
@@ -7728,11 +7815,14 @@ async function wcGenerate() {
       if (fi === 0) wcState.activeFile = 0;
       renderWebCraft(document.getElementById('content'));
     } catch(e) {
+      if (e && e.name === 'AbortError') break;
       wcState.generatedFiles.push({ name: fp.name, content: '// Error generating this file: ' + e.message, lang: fp.lang });
     }
   }
 
   wcState.running = false;
+  _wcGenAbortCtrl = null;
+  _wcOverlayMinimized = false;
 
   // Auto-save project to ~/.nha/webcraft/<projectName>/
   try {
@@ -7746,12 +7836,14 @@ async function wcGenerate() {
   renderWebCraft(document.getElementById('content'));
 }
 
-async function wcCallLLM(sys, user) {
-  var r = await fetch(API + '/api/studio/webcraft', {
+async function wcCallLLM(sys, user, signal) {
+  var fetchOpts = {
     method: 'POST',
     headers: {'Content-Type':'application/json'},
     body: JSON.stringify({system: sys, user: user, max_tokens: 4096})
-  });
+  };
+  if (signal) fetchOpts.signal = signal;
+  var r = await fetch(API + '/api/studio/webcraft', fetchOpts);
   if (!r.ok) throw new Error('LLM error ' + r.status);
   var d = await r.json();
   return (d && (d.text || d.content || d.result)) || '';
@@ -8625,6 +8717,10 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .prl-action-bubble--active{color:#000000;font-weight:700;border-color:#374151;background:#ffffff;animation:parlBubblePop .4s ease}
 @keyframes parlBubblePop{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1);opacity:1}}
 @keyframes streamBlink{0%,100%{opacity:1}50%{opacity:0}}
+@keyframes wcBubbleIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes wcRobotBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-4deg)}}
+@keyframes wcDot{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1.2)}}
+@keyframes wcBarPulse{0%,100%{opacity:1}50%{opacity:.65}}
 /* Character SVG animations */
 @keyframes parlArmType{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(2px)}}
 @keyframes parlHeadNod{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(2px) rotate(4deg)}}