nothumanallowed 9.3.18 → 9.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "9.3.18",
+  "version": "9.4.0",
   "description": "NotHumanAllowed — 38 AI agents + 58 tools + browser automation + web search. Streaming chat, headless Chrome CDP, multi-conversation, export. Gmail, Calendar, Drive, GitHub, Notion, Slack. Zero-dependency CLI.",
   "type": "module",
   "bin": {

package/src/commands/ui.mjs

@@ -1263,6 +1263,20 @@ 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)
+              if (action.startsWith('browser_') && action !== 'browser_close') {
+                try {
+                  const be = await import('../services/browser-engine.mjs');
+                  if (be.isBrowserRunning()) {
+                    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) });
+                    }
+                  }
+                } catch { /* frame capture failed, non-critical */ }
+              }
+
               // If the tool produced a screenshot (web_search with screenshot=true), send it via SSE and save to disk
               if (resultStr.includes('[Screenshot of results captured')) {
                 try {

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

package/src/services/browser-engine.mjs

@@ -1014,13 +1014,29 @@ export async function browserExtract(options = {}) {
 export async function browserEval(code, options = {}) {
   const browser = await getBrowser();
 
-  const result = await browser.ws.send('Runtime.evaluate', {
-    expression: code,
+  // Auto-wrap object literals: {key: val} → ({key: val}) to avoid block/label ambiguity
+  let expression = code.trim();
+  if (expression.startsWith('{') && !expression.startsWith('{(')) {
+    expression = `(${expression})`;
+  }
+
+  let result = await browser.ws.send('Runtime.evaluate', {
+    expression,
     returnByValue: true,
     awaitPromise: options.awaitPromise !== false,
     generatePreview: true,
   }, COMMAND_TIMEOUT_MS);
 
+  // If SyntaxError, retry with IIFE wrapper
+  if (result.exceptionDetails?.exception?.description?.includes('SyntaxError')) {
+    result = await browser.ws.send('Runtime.evaluate', {
+      expression: `(() => { return (${code.trim()}); })()`,
+      returnByValue: true,
+      awaitPromise: options.awaitPromise !== false,
+      generatePreview: true,
+    }, COMMAND_TIMEOUT_MS);
+  }
+
   if (result.exceptionDetails) {
     const errMsg = result.exceptionDetails.exception?.description
       || result.exceptionDetails.text

package/src/services/web-ui.mjs

@@ -101,6 +101,18 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .tool-indicator--web{border-color:var(--cyan);color:var(--cyan)}
 .tool-indicator--email{border-color:var(--green3);color:var(--green)}
 .screenshot-preview{max-width:100%;border-radius:var(--r);margin:8px 0;border:1px solid var(--border)}
+.browser-viewer{position:fixed;bottom:16px;right:16px;width:380px;background:var(--bg2);border:2px solid #9c27b0;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.6);z-index:300;overflow:hidden;display:none;transition:all .3s ease}
+.browser-viewer--open{display:block}
+.browser-viewer__header{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#1a1a2e;border-bottom:1px solid #9c27b0;font-size:10px;color:#ce93d8}
+.browser-viewer__dot{width:6px;height:6px;border-radius:50%;background:#9c27b0;animation:bvpulse 1.5s infinite}
+@keyframes bvpulse{0%,100%{opacity:1}50%{opacity:.3}}
+.browser-viewer__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.browser-viewer__close{background:none;border:none;color:#666;cursor:pointer;font-size:14px;padding:0 4px}
+.browser-viewer__close:hover{color:#fff}
+.browser-viewer__frame{width:100%;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}
+.browser-viewer__frame img{width:100%;height:100%;object-fit:contain}
+.browser-viewer__status{padding:4px 10px;font-size:9px;color:var(--dim);border-top:1px solid var(--border)}
+@media(max-width:600px){.browser-viewer{width:280px;bottom:70px}}
 .chat__bar{display:flex;gap:8px;padding:10px 0 12px 0;border-top:1px solid var(--border);flex-shrink:0}
 .chat__input{flex:1;resize:none;min-height:40px;max-height:100px;padding:10px 14px}
 .chat__send{background:var(--green3);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-weight:700;font-size:12px}
@@ -226,6 +238,24 @@ function stopChat(){
   renderMessages();
 }
 
+// ---- 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');
+  var t=document.getElementById('bvTitle');if(t)t.textContent=title||'Browser';
+  var s=document.getElementById('bvStatus');if(s)s.textContent=status||'Loading...';
+}
+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">';
+}
+function updateBrowserStatus(status){
+  var s=document.getElementById('bvStatus');if(s)s.textContent=status;
+}
+function closeBrowserViewer(){
+  var v=document.getElementById('browserViewer');if(v)v.classList.remove('browser-viewer--open');
+}
+
 function loadConvList(){return apiGet('/api/conversations').then(function(r){convList=(r&&r.conversations)||[];renderConvSidebar();})}
 function loadConv(id){return apiGet('/api/conversations/'+id).then(function(r){if(r&&r.conversation){activeConvId=r.conversation.id;chatHistory=r.conversation.messages||[];renderMessages();renderConvSidebar();}})}
 function createNewConv(){return apiPost('/api/conversations',{}).then(function(r){if(r&&r.conversation){activeConvId=r.conversation.id;chatHistory=[];renderMessages();loadConvList();}})}
@@ -533,6 +563,12 @@ function sendChat(){
                 var label=toolLabels[data.action]||data.action;
                 var indicator=data.status==='executing'?'\\u23f3 '+label+'...':'\\u2705 '+label;
                 if(data.status==='error')indicator='\\u274c '+label+' failed';
+                // Show browser viewer for browser actions
+                var isBrowserAction=data.action&&data.action.startsWith('browser_');
+                if(isBrowserAction&&data.status==='executing'){showBrowserViewer(label,'Executing...');}
+                if(isBrowserAction&&data.status==='done'){updateBrowserStatus('\\u2705 '+label);}
+                if(isBrowserAction&&data.status==='error'){updateBrowserStatus('\\u274c '+label);}
+                if(data.action==='browser_close'&&data.status==='done'){setTimeout(closeBrowserViewer,2000);}
                 // Strip JSON action blocks from streamed content (they are internal tool calls, not for the user)
                 if(data.status==='executing'){chatHistory[streamIdx].content=chatHistory[streamIdx].content.replace(new RegExp('\\x60\\x60\\x60json[\\\\s\\\\S]*?\\x60\\x60\\x60','g'),'').trim()+'\\n';}
                 chatHistory[streamIdx].content+=indicator+'\\n';
@@ -540,11 +576,18 @@ function sendChat(){
               }
               if(currentEvent==='screenshot'&&data.base64){
                 if(!chatHistory[streamIdx]._screenshots)chatHistory[streamIdx]._screenshots=[];
-                // Use file URL if available (persists across sessions), fall back to base64
                 var ssUrl=data.filename?'/api/screenshots/'+data.filename:'data:image/'+(data.format||'jpeg')+';base64,'+data.base64;
                 chatHistory[streamIdx]._screenshots.push(ssUrl);
                 chatHistory[streamIdx].content+='\\n![Screenshot]('+ssUrl+')\\n';
                 renderMessages();
+                // Update browser viewer with the screenshot
+                updateBrowserFrame(data.base64,data.format||'jpeg');
+                updateBrowserStatus('Screenshot captured');
+              }
+              if(currentEvent==='browser_frame'&&data.base64){
+                // Live frame update (thumbnail from browser during operations)
+                updateBrowserFrame(data.base64,data.format||'jpeg');
+                if(data.url)updateBrowserStatus(data.url);
               }
               if(currentEvent==='tool_synthesis'){chatHistory[streamIdx].content='';renderMessages();}
               if(currentEvent==='done'){endStreaming();if(data.content)chatHistory[streamIdx].content=data.content;var ss=chatHistory[streamIdx]._screenshots;if(ss&&ss.length>0){for(var si=0;si<ss.length;si++){chatHistory[streamIdx].content+='\\n![Screenshot]('+ss[si]+')\\n';}}renderMessages();loadConvList();}
@@ -1837,6 +1880,18 @@ init();
   <button onclick="openSidebar()" style="position:fixed;top:8px;left:8px;z-index:100;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--green);font-size:20px;padding:4px 10px;cursor:pointer;line-height:1" id="mobileBurger">&#9776;</button>
 
   <div class="content" id="content"></div>
+
+  <div class="browser-viewer" id="browserViewer">
+    <div class="browser-viewer__header">
+      <span class="browser-viewer__dot"></span>
+      <span class="browser-viewer__title" id="bvTitle">Browser</span>
+      <button class="browser-viewer__close" onclick="closeBrowserViewer()">&times;</button>
+    </div>
+    <div class="browser-viewer__frame" id="bvFrame">
+      <span style="color:var(--dim);font-size:11px">Waiting...</span>
+    </div>
+    <div class="browser-viewer__status" id="bvStatus">Idle</div>
+  </div>
 </div>
 
 <div class="modal-overlay" id="agentModal">