nothumanallowed 9.8.2 → 9.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "9.8.2",
+  "version": "9.8.3",
   "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.2';
+export const VERSION = '9.8.3';
 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();
@@ -1956,6 +2018,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>`;