nothumanallowed 9.8.8 → 9.9.0

package/package.json

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

@@ -1414,7 +1414,7 @@ export async function cmdUI(args) {
               toolResults.push({ action, result: resultStr });
               sendSSE('tool', { action, status: 'done', result: typeof resultStr === 'string' ? resultStr.slice(0, 500) : '' });
 
-              // Send live browser frame after browser actions (low-quality thumbnail for viewer)
+              // Send live browser frame after browser actions — save as thumbnail file for persistence
               if (action.startsWith('browser_') && action !== 'browser_close') {
                 try {
                   const be = await import('../services/browser-engine.mjs');
@@ -1422,7 +1422,15 @@ export async function cmdUI(args) {
                     const frame = await be.browserScreenshot({ fullPage: false, format: 'jpeg', quality: 30 });
                     if (!frame.error) {
                       const info = await be.browserInfo();
-                      sendSSE('browser_frame', { base64: frame.base64, format: 'jpeg', url: (info.url || '').slice(0, 80) });
+                      const pageUrl = (info.url || '').slice(0, 80);
+                      // Save thumbnail to disk for persistence
+                      const thumbDir = path.join(NHA_DIR, 'screenshots');
+                      fs.mkdirSync(thumbDir, { recursive: true });
+                      const thumbFile = `thumb-${Date.now()}.jpg`;
+                      fs.writeFileSync(path.join(thumbDir, thumbFile), Buffer.from(frame.base64, 'base64'));
+                      if (!res._browserThumbs) res._browserThumbs = [];
+                      res._browserThumbs.push({ file: thumbFile, url: pageUrl });
+                      sendSSE('browser_frame', { file: thumbFile, format: 'jpeg', url: pageUrl });
                     }
                   }
                 } catch { /* frame capture failed, non-critical */ }
@@ -1442,7 +1450,7 @@ export async function cmdUI(args) {
                       const ssBase64 = fs.readFileSync(ssPath).toString('base64');
                       console.log(`  [screenshot] sending SSE, base64 size: ${ssBase64.length}`);
                       sendSSE('screenshot', { base64: ssBase64, format: 'jpeg', filename: ssFilename });
-                      sendSSE('browser_frame', { base64: ssBase64, format: 'jpeg', url: 'Search results' });
+                      sendSSE('browser_frame', { file: ssFilename, format: 'jpeg', url: 'Search results' });
                       if (!res._screenshotFiles) res._screenshotFiles = [];
                       res._screenshotFiles.push(ssFilename);
                     }
@@ -1512,7 +1520,8 @@ export async function cmdUI(args) {
           try { extractMemory('chat', msg, finalResponse); } catch {}
 
           const ssFiles = res._screenshotFiles || [];
-          sendSSE('done', { content: finalResponse, screenshotFiles: ssFiles });
+          const browserThumbs = res._browserThumbs || [];
+          sendSSE('done', { content: finalResponse, screenshotFiles: ssFiles, browserThumbs });
         } catch (e) {
           sendSSE('error', { message: e.message });
         }

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

package/src/services/web-ui.mjs

@@ -252,16 +252,24 @@ function stopChat(){
 
 // ---- BROWSER VIEWER (live preview of headless Chrome) ----
 function showBrowserViewer(title,status){
-  var v=document.getElementById('browserViewer');if(!v)return;
-  v.classList.add('browser-viewer--open');
+  // Update old monitor viewer
+  var v=document.getElementById('browserViewer');if(v)v.classList.add('browser-viewer--open');
   var t=document.getElementById('bvTitle');if(t)t.textContent=title||'Browser';
   var s=document.getElementById('bvStatus');if(s)s.textContent=status||'Loading...';
+  // Also auto-open canvas panel in browser tab
+  var p=document.getElementById('canvasPanel');
+  if(p&&!p.classList.contains('open')){canvasMode='browser';renderCanvasPanel();}
 }
-function updateBrowserFrame(base64,format,url){
-  var f=document.getElementById('bvFrame');if(!f)return;
-  f.innerHTML='<img src="data:image/'+(format||'jpeg')+';base64,'+base64+'" alt="Browser view">';
+function updateBrowserFrame(data){
+  // data = {base64?, file?, format, url}
+  var imgSrc=data.file?API+'/api/screenshots/'+data.file:'data:image/'+(data.format||'jpeg')+';base64,'+data.base64;
+  // Update old monitor viewer
+  var f=document.getElementById('bvFrame');if(f)f.innerHTML='<img src="'+imgSrc+'" alt="Browser view">';
   // Save to per-conversation browser history for canvas Browser tab
-  addBrowserPage(base64,url);
+  addBrowserPage(data.file||null,data.base64||null,data.url);
+  // Update canvas browser tab live if open
+  var p=document.getElementById('canvasPanel');
+  if(p&&p.classList.contains('open')&&canvasMode==='browser'){renderCanvasPanel();}
 }
 function updateBrowserStatus(status){
   var s=document.getElementById('bvStatus');if(s)s.textContent=status;
@@ -409,7 +417,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><button onclick="reopenCanvas()" style="background:none;border:1px solid var(--border2);border-radius:6px;cursor:pointer;font-size:11px;padding:4px 8px;color:var(--dim);font-family:var(--mono);display:flex;align-items:center;gap:4px" title="Open Canvas / Browser panel"><span style="font-size:14px">&#x25A3;</span>Canvas</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:1px solid var(--border2);border-radius:6px;cursor:pointer;font-size:11px;padding:4px 8px;color:var(--dim);font-family:var(--mono);display:flex;align-items:center;gap:4px" title="Open Canvas / Browser panel"><span style="font-size:13px">&#x25A3;</span>Panel</button></div>'+
         '</div>'+
       '</div>'+
     '</div>';
@@ -545,29 +553,33 @@ function showCanvas(html,title){
   saveCanvasData();
 }
 
-function addBrowserPage(base64,url){
+function addBrowserPage(file,base64,url){
   var d=getConvCanvasData();
   var cleanUrl=(url||'Browser').replace(/^https?:\\/\\//, '').slice(0,60);
   // Only add if URL is different from the last entry (avoid frame duplicates)
   if(d.browsers.length>0&&d.browsers[d.browsers.length-1].url===cleanUrl){
-    // Update the thumbnail with the latest frame
-    d.browsers[d.browsers.length-1].base64=base64;
+    // Update the thumbnail file ref
+    if(file)d.browsers[d.browsers.length-1].file=file;
+    if(base64)d.browsers[d.browsers.length-1].base64=base64;
     return;
   }
-  d.browsers.push({base64:base64,url:cleanUrl,ts:new Date().toLocaleTimeString()});
+  d.browsers.push({file:file,base64:base64,url:cleanUrl,ts:new Date().toLocaleTimeString()});
   browserIdx=d.browsers.length-1;
-  // Auto-update canvas panel if browser tab is open
-  var p=document.getElementById('canvasPanel');
-  if(p&&p.classList.contains('open')&&canvasMode==='browser'){renderCanvasPanel();}
+  // Persist file refs to localStorage (not base64)
+  saveCanvasData();
 }
 
 function saveCanvasData(){
-  // Save only canvas HTML (not browser base64 — too large) per conversation
   try{
     var save={};
     for(var id in allCanvasData){
-      if(allCanvasData[id].canvases.length>0){
-        save[id]={canvases:allCanvasData[id].canvases.slice(-20)};
+      var d=allCanvasData[id];
+      if(d.canvases.length>0||d.browsers.length>0){
+        save[id]={
+          canvases:d.canvases.slice(-20),
+          // Save browser entries with file refs only (no base64)
+          browsers:d.browsers.slice(-30).map(function(b){return {file:b.file,url:b.url,ts:b.ts};})
+        };
       }
     }
     localStorage.setItem('nha_canvas_data',JSON.stringify(save));
@@ -582,6 +594,7 @@ function loadCanvasData(){
       for(var id in parsed){
         if(!allCanvasData[id])allCanvasData[id]={canvases:[],browsers:[]};
         allCanvasData[id].canvases=parsed[id].canvases||[];
+        allCanvasData[id].browsers=parsed[id].browsers||[];
       }
     }
   }catch(e){}
@@ -620,11 +633,12 @@ function renderCanvasPanel(){
     if(d.browsers.length===0){
       doc.open();doc.write('<html><body style="margin:0;background:#111;display:flex;align-items:center;justify-content:center;height:100vh;font-family:monospace;color:#555"><div style="text-align:center"><div style="font-size:48px;margin-bottom:12px">&#x1F310;</div><div>No pages visited</div><div style="font-size:11px;margin-top:8px;color:#333">in this conversation</div></div></body></html>');doc.close();
     } else {
-      var gallery='<html><head><style>*{margin:0;padding:0;box-sizing:border-box}body{background:#111;padding:12px;font-family:monospace}h3{color:#00ff41;font-size:12px;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.card{background:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s}.card:hover{border-color:#00ff41}.card img{width:100%;height:120px;object-fit:cover;display:block}.card .info{padding:6px 8px}.card .url{color:#8ab4f8;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .time{color:#555;font-size:9px;margin-top:2px}.selected{border-color:#00ff41;box-shadow:0 0 10px rgba(0,255,65,0.2)}</style></head><body><h3>Pages visited ('+d.browsers.length+')</h3><div class="grid">';
+      var apiBase=window.API||'';
+      var gallery='<html><head><style>*{margin:0;padding:0;box-sizing:border-box}body{background:#111;padding:12px;font-family:monospace}h3{color:#00ff41;font-size:12px;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.card{background:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s}.card:hover{border-color:#00ff41}.card img{width:100%;height:120px;object-fit:cover;display:block;background:#222}.card .info{padding:6px 8px}.card .url{color:#8ab4f8;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .time{color:#555;font-size:9px;margin-top:2px}</style></head><body><h3>Pages visited ('+d.browsers.length+')</h3><div class="grid">';
       for(var bi=0;bi<d.browsers.length;bi++){
         var b=d.browsers[bi];
-        var sel=bi===browserIdx?' selected':'';
-        gallery+='<div class="card'+sel+'" onclick="parent.selectBrowserPage('+bi+')"><img src="data:image/jpeg;base64,'+b.base64+'" alt="'+b.url+'"/><div class="info"><div class="url">'+b.url+'</div><div class="time">'+b.ts+'</div></div></div>';
+        var imgSrc=b.file?apiBase+'/api/screenshots/'+b.file:(b.base64?'data:image/jpeg;base64,'+b.base64:'');
+        gallery+='<div class="card" onclick="parent.selectBrowserPage('+bi+')">'+(imgSrc?'<img src="'+imgSrc+'" alt="'+b.url+'"/>':'<div style="height:120px;display:flex;align-items:center;justify-content:center;color:#555">No preview</div>')+'<div class="info"><div class="url">'+b.url+'</div><div class="time">'+(b.ts||'')+'</div></div></div>';
       }
       gallery+='</div></body></html>';
       doc.open();doc.write(gallery);doc.close();
@@ -779,12 +793,12 @@ function sendChat(){
               }
               if(currentEvent==='screenshot'&&data.base64){
                 showBrowserViewer('Screenshot','Captured');
-                updateBrowserFrame(data.base64,data.format||'jpeg','Screenshot');
+                updateBrowserFrame({base64:data.base64,format:data.format||'jpeg',url:'Screenshot'});
                 updateBrowserStatus('Screenshot captured');
               }
-              if(currentEvent==='browser_frame'&&data.base64){
+              if(currentEvent==='browser_frame'&&(data.base64||data.file)){
                 showBrowserViewer(data.url||'Browser','Live');
-                updateBrowserFrame(data.base64,data.format||'jpeg',data.url||'Browser');
+                updateBrowserFrame(data);
                 if(data.url)updateBrowserStatus(data.url);
               }
               if(currentEvent==='canvas'&&data.markers){
@@ -794,7 +808,7 @@ function sendChat(){
                 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==='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';}var bt=data.browserThumbs||[];if(bt.length>0){var cd=getConvCanvasData();for(var bti=0;bti<bt.length;bti++){var exists=cd.browsers.some(function(b){return b.file===bt[bti].file;});if(!exists)cd.browsers.push({file:bt[bti].file,url:bt[bti].url,ts:new Date().toLocaleTimeString()});}browserIdx=cd.browsers.length-1;saveCanvasData();}renderMessages();loadConvList();if(ssf.length>0)setTimeout(closeBrowserViewer,5000);}
               if(currentEvent==='error'){endStreaming();chatHistory[streamIdx].content='Error: '+(data.message||'Unknown');renderMessages();}
             }catch(e){}
           }