npm - nothumanallowed - Versions diffs - 12.3.0 → 12.4.0 - Mend

nothumanallowed 12.3.0 → 12.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/commands/ui.mjs +7 -6
package/src/constants.mjs +1 -1
package/src/services/tool-executor.mjs +10 -1
package/src/services/web-ui.mjs +46 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "description": "NotHumanAllowed — 38 AI agents, 80 tools. Email, calendar, browser automation, screen capture, canvas, cron/heartbeat, Alexandria E2E messaging, GitHub, Notion, Slack, voice chat, free AI (Liara), 28 languages. Zero-dependency CLI.",
   "type": "module",
   "bin": {

package/src/commands/ui.mjs CHANGED Viewed

@@ -1785,6 +1785,7 @@ export async function cmdUI(args) {
           // Parse and execute tools
           const { textParts, actions } = parseActions(fullResponse);
           const toolResults = [];
+          let inlineEmbeds = ''; // Accumulated inline cards/browser frames for the response
           // Auto-detect search + screenshot intent from user message
           const wantsScreenshot = /screenshot|screen\s*shot|schermo|cattura|foto|immagine/i.test(msg);
@@ -1949,12 +1950,9 @@ export async function cmdUI(args) {
                   });
                   cardHtml += '</div>';
-                  // Append inline markers to the tool result so they end up in the response
-                  if (inlineBrowserMarker || cardHtml.length > 50) {
-                    const inlineMarkers = (inlineBrowserMarker ? inlineBrowserMarker + '\n' : '') + '[INLINE_CARD]' + cardHtml + '[/INLINE_CARD]';
-                    // Append to the last tool result so LLM includes it in response
-                    toolResults[toolResults.length - 1].result += '\n' + inlineMarkers;
-                  }
+                  // Accumulate inline embeds — will be appended to final response AFTER LLM
+                  if (inlineBrowserMarker) inlineEmbeds += '\n' + inlineBrowserMarker;
+                  if (cardHtml.length > 50) inlineEmbeds += '\n[INLINE_CARD]' + cardHtml + '[/INLINE_CARD]';
                 } catch { /* non-critical */ }
               }
@@ -2076,6 +2074,9 @@ export async function cmdUI(args) {
           // Extract memory
           try { extractMemory('chat', msg, finalResponse); } catch {}
+          // Append inline embeds (search cards, browser frames) to the response
+          if (inlineEmbeds) finalResponse += '\n' + inlineEmbeds;
           const ssFiles = res._screenshotFiles || [];
           const browserThumbs = res._browserThumbs || [];
           sendSSE('done', { content: finalResponse, screenshotFiles: ssFiles, browserThumbs });

package/src/constants.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-export const VERSION = '12.3.0';
+export const VERSION = '12.4.0';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';

package/src/services/tool-executor.mjs CHANGED Viewed

@@ -364,7 +364,16 @@ TOOLS:
 64. canvas_render(html: string, title?: string)
     Render HTML in the web UI canvas panel. Show charts, tables, diagrams, reports.
-    Can use Chart.js, Mermaid, or any CDN library via script tags.
+    ALWAYS use Chart.js from CDN for charts and graphs — never build charts with raw HTML/CSS.
+    Template for charts:
+    <html><head><script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script></head>
+    <body style="background:#0a0a0a;padding:20px;margin:0">
+    <canvas id="c" style="max-height:400px"></canvas>
+    <script>new Chart(document.getElementById('c'),{type:'bar',data:{labels:['A','B'],datasets:[{label:'Data',data:[10,20],backgroundColor:['#00ff41','#00e5ff']}]},options:{plugins:{legend:{labels:{color:'#ccc'}}},scales:{x:{ticks:{color:'#888'}},y:{ticks:{color:'#888'}}}}});</script>
+    </body></html>
+    Supported chart types: bar, line, pie, doughnut, radar, polarArea, scatter, bubble.
+    Use dark theme: background #0a0a0a, text #ccc, grid #333, accent colors #00ff41 #00e5ff #ffaa00 #ff4444 #a78bfa.
+    For tables: use proper HTML tables with dark styling. For Mermaid diagrams: load from CDN.
 65. canvas_clear()
     Clear the canvas panel.

package/src/services/web-ui.mjs CHANGED Viewed

@@ -726,6 +726,51 @@ function reopenCanvas(){
   renderCanvasPanel();
 }
 function closeCanvas(){var p=document.getElementById('canvasPanel');if(p)p.classList.remove('open');}
+function canvasCopyText(){
+  var d=getConvCanvasData();var item=d.canvases[canvasIdx];
+  if(!item){alert('No canvas content');return;}
+  // Extract text from the HTML
+  var tmp=document.createElement('div');tmp.innerHTML=item.html.replace(/<script[\s\S]*?<\/script>/gi,'');
+  var text=tmp.textContent||tmp.innerText||'';
+  navigator.clipboard.writeText(text).then(function(){alert('Text copied!')}).catch(function(){alert('Copy failed')});
+}
+function canvasCopyHTML(){
+  var d=getConvCanvasData();var item=d.canvases[canvasIdx];
+  if(!item){alert('No canvas content');return;}
+  navigator.clipboard.writeText(item.html).then(function(){alert('HTML source copied!')}).catch(function(){alert('Copy failed')});
+}
+function canvasCopyImage(){
+  var f=document.getElementById('canvasFrame');
+  if(!f){alert('No canvas frame');return;}
+  try{
+    // Use html2canvas approach — render iframe to canvas then copy
+    var iframe=f;
+    // For sandboxed iframes, we capture via srcdoc render
+    var w=iframe.offsetWidth||800;var h=iframe.offsetHeight||400;
+    var canvas=document.createElement('canvas');canvas.width=w*2;canvas.height=h*2;
+    var ctx=canvas.getContext('2d');ctx.scale(2,2);
+    // Draw white background
+    ctx.fillStyle='#0a0a0a';ctx.fillRect(0,0,w,h);
+    // Render the srcdoc HTML to an image via SVG foreignObject
+    var d=getConvCanvasData();var item=d.canvases[canvasIdx];
+    if(!item){alert('No canvas');return;}
+    var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+h+'"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="background:#0a0a0a">'+item.html.replace(/<script[\s\S]*?<\/script>/gi,'')+'</div></foreignObject></svg>';
+    var img=new Image();
+    img.onload=function(){
+      ctx.drawImage(img,0,0,w,h);
+      canvas.toBlob(function(blob){
+        if(blob){
+          navigator.clipboard.write([new ClipboardItem({'image/png':blob})]).then(function(){alert('Image copied!')}).catch(function(){
+            // Fallback: download
+            var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='canvas.png';a.click();
+          });
+        }
+      },'image/png');
+    };
+    img.onerror=function(){alert('Image render failed — try Copy HTML instead');};
+    img.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg);
+  }catch(e){alert('Image copy failed: '+e.message);}
+}
 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='';}
@@ -2704,7 +2749,7 @@ init();
   </div>
 </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" srcdoc=""></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="canvasCopyText()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px;font-family:var(--mono)" title="Copy text content">Copy</button><button onclick="canvasCopyHTML()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px;font-family:var(--mono)" title="Copy HTML source">HTML</button><button onclick="canvasCopyImage()" style="background:none;border:none;color:var(--dim);cursor:pointer;font-size:11px;font-family:var(--mono)" title="Copy as image">IMG</button><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" srcdoc=""></iframe></div>
 <script>${JS}</script>
 </body>
 </html>`;