nothumanallowed 9.8.3 → 9.8.5

package/package.json

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

package/src/services/web-ui.mjs

@@ -260,6 +260,8 @@ function showBrowserViewer(title,status){
 function updateBrowserFrame(base64,format){
   var f=document.getElementById('bvFrame');if(!f)return;
   f.innerHTML='<img src="data:image/'+(format||'jpeg')+';base64,'+base64+'" alt="Browser view">';
+  // Also save to canvas browser tab
+  lastBrowserFrame=base64;
 }
 function updateBrowserStatus(status){
   var s=document.getElementById('bvStatus');if(s)s.textContent=status;
@@ -407,7 +409,7 @@ function renderChat(el){
         '</div>'+
         '<div class="chat"><div class="chat__messages" id="chatMessages"></div>'+
         '<div id="chatAttachInfo" style="display:none;padding:4px 12px;font-size:11px;color:var(--cyan);background:var(--bg2);border-top:1px solid var(--border)"><span id="chatAttachName"></span> <button onclick="clearChatAttach()" style="background:none;border:none;color:#f44;cursor:pointer;font-size:14px;font-weight:700">&times;</button></div>'+
-        '<div class="chat__bar"><button class="chat__mic" id="chatMic" onclick="toggleVoiceInput()" title="Voice input">&#127908;</button><button onclick="document.getElementById(\\x27chatFileInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach file">&#128206;</button><button onclick="document.getElementById(\\x27chatImageInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach image">&#128247;</button><input type="file" id="chatFileInput" style="display:none" onchange="handleChatFile(this)"><input type="file" id="chatImageInput" accept="image/*" style="display:none" onchange="handleChatImage(this)"><textarea class="chat__input" id="chatInput" placeholder="Ask anything... (or attach file/image first)" rows="1"></textarea><button class="chat__send" id="chatSend">Send</button><button class="chat__stop" id="chatStop" onclick="stopChat()">Stop</button></div>'+
+        '<div class="chat__bar"><button class="chat__mic" id="chatMic" onclick="toggleVoiceInput()" title="Voice input">&#127908;</button><button onclick="document.getElementById(\\x27chatFileInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach file">&#128206;</button><button onclick="document.getElementById(\\x27chatImageInput\\x27).click()" style="background:none;border:none;cursor:pointer;font-size:16px;padding:4px" title="Attach image">&#128247;</button><input type="file" id="chatFileInput" style="display:none" onchange="handleChatFile(this)"><input type="file" id="chatImageInput" accept="image/*" style="display:none" onchange="handleChatImage(this)"><textarea class="chat__input" id="chatInput" placeholder="Ask anything... (or attach file/image first)" rows="1"></textarea><button class="chat__send" id="chatSend">Send</button><button class="chat__stop" id="chatStop" onclick="stopChat()">Stop</button><button onclick="reopenCanvas()" style="background:none;border:none;cursor:pointer;font-size:14px;padding:4px;color:var(--dim)" title="Open Canvas panel">&#x25A3;</button></div>'+
         '</div>'+
       '</div>'+
     '</div>';
@@ -522,17 +524,68 @@ function clearChatAttach(){
   document.getElementById('chatImageInput').value='';
 }
 
-// ---- CANVAS ----
+// ---- CANVAS (with history + browser viewer) ----
+var canvasHistory=[];  // [{html,title,timestamp}]
+var canvasIdx=-1;      // current index in history
+var canvasMode='canvas'; // 'canvas' or 'browser'
+var lastBrowserFrame=null;
+
 function showCanvas(html,title){
+  // Save to history
+  canvasHistory.push({html:html,title:title||'Canvas',timestamp:new Date().toLocaleTimeString()});
+  canvasIdx=canvasHistory.length-1;
+  canvasMode='canvas';
+  renderCanvasPanel();
+  // Persist canvas history to localStorage
+  try{localStorage.setItem('nha_canvas_history',JSON.stringify(canvasHistory.slice(-20)));}catch(e){}
+}
+
+function renderCanvasPanel(){
   var p=document.getElementById('canvasPanel');
+  if(!p)return;
+  p.classList.add('open');
+  var item=canvasMode==='browser'?null:canvasHistory[canvasIdx];
+  // Update header
   var t=document.getElementById('canvasTitle');
+  if(t){
+    if(canvasMode==='browser'){t.textContent='Browser';}
+    else if(item){t.textContent=item.title+(canvasHistory.length>1?' ('+(canvasIdx+1)+'/'+canvasHistory.length+')':'');}
+    else{t.textContent='Canvas';}
+  }
+  // Update nav buttons visibility
+  var navEl=document.getElementById('canvasNav');
+  if(navEl){navEl.style.display=canvasHistory.length>1&&canvasMode==='canvas'?'flex':'none';}
+  // Update tab buttons
+  var tabC=document.getElementById('canvasTabC');
+  var tabB=document.getElementById('canvasTabB');
+  if(tabC)tabC.style.borderBottom=canvasMode==='canvas'?'2px solid var(--green)':'none';
+  if(tabB)tabB.style.borderBottom=canvasMode==='browser'?'2px solid var(--green)':'none';
+  // Render content
   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();
+  if(!f)return;
+  if(canvasMode==='browser'&&lastBrowserFrame){
+    var doc=f.contentDocument||f.contentWindow.document;
+    doc.open();doc.write('<html><body style="margin:0;background:#1a1a1a;display:flex;align-items:center;justify-content:center;height:100vh"><img src="data:image/jpeg;base64,'+lastBrowserFrame+'" style="max-width:100%;max-height:100%"/></body></html>');doc.close();
+  } else if(item){
+    var doc=f.contentDocument||f.contentWindow.document;
+    doc.open();doc.write(item.html);doc.close();
+  }
 }
+
+function canvasPrev(){if(canvasIdx>0){canvasIdx--;canvasMode='canvas';renderCanvasPanel();}}
+function canvasNext(){if(canvasIdx<canvasHistory.length-1){canvasIdx++;canvasMode='canvas';renderCanvasPanel();}}
+function canvasShowBrowser(){canvasMode='browser';renderCanvasPanel();}
+function canvasShowCanvas(){canvasMode='canvas';renderCanvasPanel();}
+
+function reopenCanvas(){
+  if(canvasHistory.length===0){
+    // Try restore from localStorage
+    try{var saved=localStorage.getItem('nha_canvas_history');if(saved){canvasHistory=JSON.parse(saved);canvasIdx=canvasHistory.length-1;}}catch(e){}
+  }
+  if(canvasHistory.length>0){canvasIdx=canvasHistory.length-1;canvasMode='canvas';renderCanvasPanel();}
+  else if(lastBrowserFrame){canvasMode='browser';renderCanvasPanel();}
+}
+
 function closeCanvas(){var p=document.getElementById('canvasPanel');if(p)p.classList.remove('open');}
 function toggleCanvasSize(){
   var p=document.getElementById('canvasPanel');if(!p)return;
@@ -652,6 +705,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();}
@@ -2018,7 +2077,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>
+<div id="canvasPanel"><div class="cvs-header"><div style="display:flex;align-items:center;gap:8px"><button id="canvasTabC" onclick="canvasShowCanvas()" style="background:none;border:none;border-bottom:2px solid var(--green);color:var(--green);cursor:pointer;font-family:var(--mono);font-size:11px;padding:2px 6px">Canvas</button><button id="canvasTabB" onclick="canvasShowBrowser()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:11px;padding:2px 6px">Browser</button><span id="canvasTitle" style="font-family:var(--mono);color:var(--green);font-size:11px;margin-left:8px">Canvas</span></div><div style="display:flex;align-items:center;gap:4px"><span id="canvasNav" style="display:none;gap:4px"><button onclick="canvasPrev()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px" title="Previous">&#x25C0;</button><button onclick="canvasNext()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px" title="Next">&#x25B6;</button></span><button onclick="toggleCanvasSize()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px" title="Resize">&#x2922;</button><button onclick="closeCanvas()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px" title="Close">&times;</button></div></div><iframe id="canvasFrame" sandbox="allow-scripts allow-same-origin"></iframe></div>
 <script>${JS}</script>
 </body>
 </html>`;