nothumanallowed 9.8.6 → 9.8.7

package/package.json

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

package/src/services/web-ui.mjs

@@ -409,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><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 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>'+
       '</div>'+
     '</div>';
@@ -547,11 +547,18 @@ function showCanvas(html,title){
 
 function addBrowserPage(base64,url){
   var d=getConvCanvasData();
-  // Avoid duplicates (same URL in a row)
-  if(d.browsers.length>0&&d.browsers[d.browsers.length-1].url===url)return;
-  d.browsers.push({base64:base64,url:url||'Browser',ts:new Date().toLocaleTimeString()});
+  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;
+    return;
+  }
+  d.browsers.push({base64:base64,url:cleanUrl,ts:new Date().toLocaleTimeString()});
   browserIdx=d.browsers.length-1;
-  saveCanvasData();
+  // Auto-update canvas panel if browser tab is open
+  var p=document.getElementById('canvasPanel');
+  if(p&&p.classList.contains('open')&&canvasMode==='browser'){renderCanvasPanel();}
 }
 
 function saveCanvasData(){
@@ -592,25 +599,38 @@ function renderCanvasPanel(){
   // Header title
   var t=document.getElementById('canvasTitle');
   if(t){
-    if(!item){t.textContent=canvasMode==='browser'?'No pages visited':'Empty canvas';}
-    else if(canvasMode==='browser'){t.textContent=(item.url||'Browser')+(list.length>1?' ('+(idx+1)+'/'+list.length+')':'');}
-    else{t.textContent=(item.title||'Canvas')+(list.length>1?' ('+(idx+1)+'/'+list.length+')':'');}
+    if(canvasMode==='browser'){t.textContent=d.browsers.length>0?d.browsers.length+' pages visited':'No pages visited';}
+    else if(!item){t.textContent='Empty canvas';}
+    else{t.textContent=(item.title||'Canvas')+(d.canvases.length>1?' ('+(canvasIdx+1)+'/'+d.canvases.length+')':'');}
   }
-  // Nav arrows
+  // Nav arrows — only for canvas mode (browser uses gallery grid)
   var navEl=document.getElementById('canvasNav');
-  if(navEl){navEl.style.display=list.length>1?'flex':'none';}
+  if(navEl){navEl.style.display=d.canvases.length>1&&canvasMode==='canvas'?'flex':'none';}
   // Tab highlight
   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 iframe
+  // Render iframe content
   var f=document.getElementById('canvasFrame');if(!f)return;
   var doc=f.contentDocument||f.contentWindow.document;
-  if(!item){
-    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">&#x25A3;</div><div>No '+(canvasMode==='browser'?'pages visited':'canvas content')+'</div><div style="font-size:11px;margin-top:8px;color:#333">in this conversation</div></div></body></html>');doc.close();
-  } else if(canvasMode==='browser'){
-    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,'+item.base64+'" style="max-width:100%;max-height:100%"/></body></html>');doc.close();
+  if(canvasMode==='browser'){
+    // Browser tab: gallery of visited page thumbnails
+    var d=getConvCanvasData();
+    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">';
+      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>';
+      }
+      gallery+='</div></body></html>';
+      doc.open();doc.write(gallery);doc.close();
+    }
+  } else if(!item){
+    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">&#x25A3;</div><div>No canvas content</div><div style="font-size:11px;margin-top:8px;color:#333">in this conversation</div></div></body></html>');doc.close();
   } else {
     doc.open();doc.write(item.html);doc.close();
   }
@@ -626,6 +646,7 @@ function canvasNext(){
   if(canvasMode==='browser'){if(browserIdx<d.browsers.length-1){browserIdx++;renderCanvasPanel();}}
   else{if(canvasIdx<d.canvases.length-1){canvasIdx++;renderCanvasPanel();}}
 }
+function selectBrowserPage(i){browserIdx=i;canvasMode='browser';renderCanvasPanel();}
 function canvasShowBrowser(){var d=getConvCanvasData();browserIdx=d.browsers.length-1;canvasMode='browser';renderCanvasPanel();}
 function canvasShowCanvas(){var d=getConvCanvasData();canvasIdx=d.canvases.length-1;canvasMode='canvas';renderCanvasPanel();}
 
@@ -640,15 +661,6 @@ function onConversationSwitch(){
   }
 }
 
-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(d.browsers.length>0){canvasMode='browser';renderCanvasPanel();}
-}
-
 function reopenCanvas(){
   var d=getConvCanvasData();
   canvasIdx=d.canvases.length-1;