nothumanallowed 9.8.2 → 9.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "9.8.2",
+  "version": "9.8.4",
   "description": "NotHumanAllowed — 38 AI agents, 53 tools. Email, calendar, browser automation, screen capture, canvas, cron/heartbeat, GitHub, Notion, Slack, voice chat, 28 languages. Zero-dependency CLI.",
   "type": "module",
   "bin": {

package/src/commands/ui.mjs

@@ -1095,14 +1095,35 @@ export async function cmdUI(args) {
               fullResponse = `![Screenshot](/api/screenshots/${fname})\n\n${fullResponse}`;
             }
           } else if (toolResults.length > 0) {
-            // Standard tool results flow
+            // Extract canvas/screenshot markers from tool results BEFORE second LLM call
+            // These markers must be preserved in the final response for the UI to render
+            let preservedMarkers = '';
             const toolContext = toolResults.map(t => {
-              let clean = t.result.replace(/\[Screenshot[^\]]*\]/g, '').replace(/!\[.*?\]\(data:image[^)]+\)/g, '').slice(0, 3000);
-              return `[${t.action} result]: ${clean.trim()}`;
+              let clean = t.result;
+              // Extract and preserve canvas markers
+              const canvasMatch = clean.match(/\[CANVAS_RENDER\][\s\S]*?\[\/CANVAS_RENDER\]/);
+              if (canvasMatch) {
+                preservedMarkers += canvasMatch[0] + '\n';
+                clean = clean.replace(/\[CANVAS_RENDER\][\s\S]*?\[\/CANVAS_RENDER\]/, '').trim();
+              }
+              if (clean.includes('[CANVAS_CLEAR]')) {
+                preservedMarkers += '[CANVAS_CLEAR]Canvas cleared.[/CANVAS_CLEAR]\n';
+                clean = clean.replace(/\[CANVAS_CLEAR\][\s\S]*?\[\/CANVAS_CLEAR\]/, '').trim();
+              }
+              // Extract screenshot file markers
+              const ssMatch = clean.match(/\[SCREENSHOT_FILE\].*?\[\/SCREENSHOT_FILE\]/);
+              if (ssMatch) {
+                preservedMarkers += ssMatch[0] + '\n';
+                clean = clean.replace(/\[SCREENSHOT_FILE\].*?\[\/SCREENSHOT_FILE\]/, '').trim();
+              }
+              clean = clean.replace(/\[Screenshot[^\]]*\]/g, '').replace(/!\[.*?\]\(data:image[^)]+\)/g, '').slice(0, 3000);
+              return `[${t.action} result]: ${clean.trim() || 'Done.'}`;
             }).join('\n\n');
             const followUp = `The user asked: "${body.message}"\n\nI executed these tools and got REAL results:\n\n${toolContext}\n\nNow respond conversationally based ONLY on the REAL data above. Do NOT output any JSON blocks, base64, or image markdown — just natural text.`;
             try {
               fullResponse = await callLLM(config, enrichedSystemPrompt, followUp);
+              // Prepend preserved markers so the UI can render canvas/screenshots
+              if (preservedMarkers) fullResponse = preservedMarkers + fullResponse;
             } catch {
               fullResponse = toolResults.map(t => `${t.action}: ${t.result}`).join('\n\n');
             }
@@ -1437,23 +1458,35 @@ export async function cmdUI(args) {
           // If tools were executed, make a second LLM call with results
           let finalResponse = fullResponse;
           if (toolResults.length > 0) {
+            // Extract canvas/screenshot markers BEFORE sending to LLM
+            let preservedMarkers = '';
             const toolContext = toolResults.map(t => {
-              // Strip screenshot file references and base64 from tool results — the screenshot was already sent to the UI
-              let clean = t.result.replace(/\[Screenshot[^\]]*\]/g, '').replace(/!\[.*?\]\(data:image[^)]+\)/g, '').slice(0, 3000);
-              return `[${t.action} result]: ${clean.trim()}`;
+              let clean = t.result;
+              const canvasMatch = clean.match(/\[CANVAS_RENDER\][\s\S]*?\[\/CANVAS_RENDER\]/);
+              if (canvasMatch) { preservedMarkers += canvasMatch[0] + '\n'; clean = clean.replace(/\[CANVAS_RENDER\][\s\S]*?\[\/CANVAS_RENDER\]/, '').trim(); }
+              if (clean.includes('[CANVAS_CLEAR]')) { preservedMarkers += '[CANVAS_CLEAR]Canvas cleared.[/CANVAS_CLEAR]\n'; clean = clean.replace(/\[CANVAS_CLEAR\][\s\S]*?\[\/CANVAS_CLEAR\]/, '').trim(); }
+              clean = clean.replace(/\[Screenshot[^\]]*\]/g, '').replace(/!\[.*?\]\(data:image[^)]+\)/g, '').slice(0, 3000);
+              return `[${t.action} result]: ${clean.trim() || 'Done.'}`;
             }).join('\n\n');
+
+            // If we have canvas content, send it to client immediately via SSE
+            if (preservedMarkers.includes('[CANVAS_RENDER]')) {
+              sendSSE('canvas', { markers: preservedMarkers });
+            }
+
             const followUp = `The user asked: "${msg}"\n\nI executed these tools and got REAL results:\n\n${toolContext}\n\nNow respond to the user conversationally based ONLY on the REAL data above. Present the results clearly. Do NOT output any JSON blocks, any base64 data, or any image markdown — just natural text. If a screenshot was taken, just mention "Screenshot captured" without embedding it.`;
             sendSSE('tool_synthesis', {});
             try {
               finalResponse = await callLLMStream(config, enrichedPrompt, followUp, (chunk) => {
                 sendSSE('token', { content: chunk });
               });
-              // Strip any JSON blocks and base64 the LLM might have emitted
               finalResponse = finalResponse
                 .replace(/```json[\s\S]*?```/g, '')
                 .replace(/!\[.*?\]\(data:image\/[^)]+\)/g, '')
                 .replace(/data:image\/[a-z]+;base64,[A-Za-z0-9+/=]{100,}/g, '[image]')
                 .trim();
+              // Prepend preserved markers for persistence
+              if (preservedMarkers) finalResponse = preservedMarkers + finalResponse;
             } catch {
               finalResponse = toolResults.map(t => `${t.action}: ${t.result}`).join('\n\n');
             }

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 = '9.8.2';
+export const VERSION = '9.8.4';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -94,7 +94,18 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .msg{margin-bottom:12px}
 .msg--user .msg__bubble{background:var(--bg3);border:1px solid var(--border2);border-radius:8px 8px 2px 8px;padding:10px 14px;max-width:85%;margin-left:auto;color:var(--bright)}
 .msg--assistant .msg__bubble{background:var(--greendim);border:1px solid var(--green3);border-radius:8px 8px 8px 2px;padding:10px 14px;max-width:85%;color:var(--text);white-space:pre-wrap;word-wrap:break-word}
+.msg--assistant .msg__bubble img{max-width:100%;border-radius:8px;margin:8px 0;border:1px solid rgba(0,255,65,0.2)}
 .msg__label{font-size:10px;color:var(--dim);margin-bottom:2px}
+.msg__actions{display:flex;gap:6px;margin-top:4px;opacity:0.15;transition:opacity 0.2s}
+.msg:hover .msg__actions{opacity:1}
+.msg__actions button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:10px;font-family:var(--mono);padding:2px 4px}
+.msg__actions button:hover{color:var(--green)}
+#canvasPanel{position:fixed;top:60px;right:12px;width:480px;max-height:calc(100vh - 80px);background:#0d0d0d;border:1px solid var(--green);border-radius:12px;z-index:1000;overflow:hidden;display:none;flex-direction:column;box-shadow:0 0 30px rgba(0,255,65,0.1)}
+#canvasPanel.open{display:flex}
+#canvasPanel .cvs-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--green);background:rgba(0,255,65,0.05)}
+#canvasPanel .cvs-header span{font-family:var(--mono);color:var(--green);font-size:12px}
+#canvasPanel .cvs-header button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;margin-left:8px}
+#canvasPanel iframe{flex:1;border:none;background:#fff;min-height:350px;width:100%}
 .msg--thinking{color:var(--dim);font-style:italic}
 .tool-indicator{display:inline-block;padding:2px 8px;margin:2px 0;border-radius:4px;font-size:11px;background:var(--bg3);border:1px solid var(--border)}
 .tool-indicator--browser{border-color:#9c27b0;color:#ce93d8}
@@ -433,17 +444,32 @@ function renderMessages(){
     el.innerHTML='<div class="chat__empty"><div class="chat__empty-title">NHA Chat</div><div>Personal Operations Assistant — Streaming + Web Search + Browser</div><div class="chat__empty-hint">Try: Show my unread emails / Search the web for React 19 / Open google.com and take a screenshot</div></div>';
     return;
   }
-  var h='';chatHistory.forEach(function(m){
+  var h='';chatHistory.forEach(function(m,mi){
     var raw=m.content||'';
-    // Strip any raw base64 data that leaked into content (from LLM hallucinations)
+    var isA=m.role==='assistant';
+    // Strip any raw base64 data that leaked into content
     raw=raw.replace(/data:image\\/[a-z]+;base64,[A-Za-z0-9+\\/=]{200,}/g,'[image]');
     raw=raw.replace(/[A-Za-z0-9+\\/=]{500,}/g,'');
+    // Handle canvas markers (assistant only)
+    if(isA){
+      var cm=raw.match(/\\[CANVAS_RENDER\\]([\\s\\S]*?)\\[\\/CANVAS_RENDER\\]/);
+      if(cm){try{var cd=JSON.parse(cm[1]);showCanvas(cd.html,cd.title);}catch(e){} raw=raw.replace(/\\[CANVAS_RENDER\\][\\s\\S]*?\\[\\/CANVAS_RENDER\\]/,'').trim();}
+      if(raw.indexOf('[CANVAS_CLEAR]')!==-1){closeCanvas();raw=raw.replace(/\\[CANVAS_CLEAR\\][\\s\\S]*?\\[\\/CANVAS_CLEAR\\]/,'').trim();}
+      // Handle screenshot file markers
+      var sm=raw.match(/\\[SCREENSHOT_FILE\\](.*?)\\[\\/SCREENSHOT_FILE\\]/);
+      if(sm){var fn=sm[1].split('/').pop();raw=raw.replace(/\\[SCREENSHOT_FILE\\].*?\\[\\/SCREENSHOT_FILE\\]/,'');raw='![Screenshot](/api/screenshots/'+fn+')\\n'+raw;}
+    }
     var imgs=[];var idx=0;
-    // Match both /api/screenshots/ URLs and data:image (short ones only, for inline display)
     var safe=raw.replace(/!\\[([^\\]]*)\\]\\((\\/api\\/screenshots\\/[a-zA-Z0-9._-]+)\\)/g,function(_,alt,src){var ph='__IMG'+idx+'__';imgs.push({ph:ph,alt:alt,src:src});idx++;return ph;});
     var content=esc(safe);
     for(var i=0;i<imgs.length;i++){content=content.replace(imgs[i].ph,'<img class="screenshot-preview" alt="'+esc(imgs[i].alt)+'" src="'+imgs[i].src+'">');}
-    h+='<div class="msg msg--'+esc(m.role)+'"><div class="msg__label">'+esc(m.role==='user'?'You':'NHA')+'</div><div class="msg__bubble">'+content+'</div></div>';
+    // Action buttons
+    var acts='<div class="msg__actions">';
+    acts+='<button onclick="copyMsg('+mi+')">Copy</button>';
+    if(isA){acts+='<button onclick="retryMsg('+mi+')">Retry</button>';}
+    else{acts+='<button onclick="editMsg('+mi+')">Edit</button>';}
+    acts+='</div>';
+    h+='<div class="msg msg--'+esc(m.role)+'"><div class="msg__label">'+esc(m.role==='user'?'You':'NHA')+'</div><div class="msg__bubble">'+content+'</div>'+acts+'</div>';
   });
   el.innerHTML=h;el.scrollTop=el.scrollHeight;
 }
@@ -496,6 +522,42 @@ function clearChatAttach(){
   document.getElementById('chatImageInput').value='';
 }
 
+// ---- CANVAS ----
+function showCanvas(html,title){
+  var p=document.getElementById('canvasPanel');
+  var t=document.getElementById('canvasTitle');
+  var f=document.getElementById('canvasFrame');
+  if(!p||!f)return;
+  if(t)t.textContent=title||'Canvas';
+  p.classList.add('open');
+  var doc=f.contentDocument||f.contentWindow.document;
+  doc.open();doc.write(html);doc.close();
+}
+function closeCanvas(){var p=document.getElementById('canvasPanel');if(p)p.classList.remove('open');}
+function toggleCanvasSize(){
+  var p=document.getElementById('canvasPanel');if(!p)return;
+  if(p.style.width==='80vw'){p.style.width='';p.style.height='';p.style.top='';p.style.right='';}
+  else{p.style.width='80vw';p.style.height='80vh';p.style.top='10vh';p.style.right='10vw';}
+}
+// ---- MSG ACTIONS ----
+function copyMsg(i){
+  var m=chatHistory[i];if(!m)return;
+  var t=(m.content||'').replace(/\\[CANVAS_RENDER\\][\\s\\S]*?\\[\\/CANVAS_RENDER\\]/g,'').replace(/\\[SCREENSHOT_FILE\\].*?\\[\\/SCREENSHOT_FILE\\]/g,'').trim();
+  navigator.clipboard.writeText(t).catch(function(){});
+}
+function retryMsg(i){
+  if(i<1||chatHistory[i].role!=='assistant')return;
+  var userMsg=chatHistory[i-1];if(!userMsg||userMsg.role!=='user')return;
+  chatHistory.splice(i,1);saveChatToStorage();renderMessages();
+  var inp=document.getElementById('chatInput');if(inp){inp.value=userMsg.content;}
+  sendChat();
+}
+function editMsg(i){
+  if(chatHistory[i].role!=='user')return;
+  var inp=document.getElementById('chatInput');if(!inp)return;
+  inp.value=chatHistory[i].content;inp.focus();
+  chatHistory.splice(i);saveChatToStorage();renderMessages();
+}
 function sendChat(){
   var inp=document.getElementById('chatInput');if(!inp)return;
   var msg=inp.value.trim();
@@ -590,6 +652,12 @@ function sendChat(){
                 updateBrowserFrame(data.base64,data.format||'jpeg');
                 if(data.url)updateBrowserStatus(data.url);
               }
+              if(currentEvent==='canvas'&&data.markers){
+                // Canvas content arrived — render it immediately
+                var cm=data.markers.match(/\\[CANVAS_RENDER\\]([\\s\\S]*?)\\[\\/CANVAS_RENDER\\]/);
+                if(cm){try{var cd=JSON.parse(cm[1]);showCanvas(cd.html,cd.title);}catch(e){}}
+                if(data.markers.indexOf('[CANVAS_CLEAR]')!==-1)closeCanvas();
+              }
               if(currentEvent==='tool_synthesis'){chatHistory[streamIdx].content='';renderMessages();}
               if(currentEvent==='done'){endStreaming();if(data.content)chatHistory[streamIdx].content=data.content;var ssf=data.screenshotFiles||[];for(var fi=0;fi<ssf.length;fi++){chatHistory[streamIdx].content+='\\n![Screenshot](/api/screenshots/'+ssf[fi]+')\\n';}renderMessages();loadConvList();if(ssf.length>0)setTimeout(closeBrowserViewer,5000);}
               if(currentEvent==='error'){endStreaming();chatHistory[streamIdx].content='Error: '+(data.message||'Unknown');renderMessages();}
@@ -1956,6 +2024,7 @@ init();
   </div>
 </div>
 
+<div id="canvasPanel"><div class="cvs-header"><span id="canvasTitle">Canvas</span><div><button onclick="toggleCanvasSize()" title="Resize">&#x2922;</button><button onclick="closeCanvas()" title="Close">&times;</button></div></div><iframe id="canvasFrame" sandbox="allow-scripts allow-same-origin"></iframe></div>
 <script>${JS}</script>
 </body>
 </html>`;