nothumanallowed 13.5.63 → 13.5.65

package/package.json

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

@@ -6621,7 +6621,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 +6656,8 @@ 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 ? '<div id="wcGenOverlay" 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"><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">Avvio generazione...</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>' +
@@ -6694,6 +6695,12 @@ function wcPickExample(i) {
   wcState.projectName = ex.name;
   wcState.description = ex.desc;
   renderWebCraft(document.getElementById('content'));
+  // After re-render, populate the chat textarea and project name input with example values
+  var chatEl = document.getElementById('wcChatInput');
+  if (chatEl) chatEl.value = ex.desc;
+  var nameEl = document.getElementById('wcProjectName');
+  if (nameEl) nameEl.value = ex.name;
+  if (chatEl) chatEl.focus();
 }
 function wcTabFiles() { wcRightTab = 'files'; renderWebCraft(document.getElementById('content')); }
 function wcTabPreview() { wcRightTab = 'preview'; renderWebCraft(document.getElementById('content')); }
@@ -7024,7 +7031,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
@@ -7199,8 +7220,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 || '' });
@@ -7705,10 +7730,28 @@ 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) {
+    var ov = document.getElementById('wcGenOverlay');
+    if (!ov) return;
+    var pct = Math.round((fi2 / total) * 100);
+    ov.innerHTML =
+      '<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:24px">' +
+        '<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)">Generazione in corso...</div>' +
+        '<div style="font-size:11px;color:var(--dim);font-family:var(--mono);max-width:300px;text-align:center;word-break:break-all">'+wcEsc(name)+'</div>' +
+        '<div style="width:220px;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden">' +
+          '<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)">'+fi2+' / '+total+' file</div>' +
+        '<div style="display:flex;gap:4px;margin-top:4px">' +
+          [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>';
+  }
+
   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);
     try {
       var _nl2 = String.fromCharCode(10);
       var content = await wcCallLLM(sysPreamble, fp.prompt + _nl2 + _nl2 + 'File to generate: ' + fp.name);
@@ -8619,6 +8662,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)}}