nothumanallowed 13.2.93 → 13.2.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.2.93",
+  "version": "13.2.94",
   "description": "NotHumanAllowed — 38 AI agents, 80 tools, Studio (visual agentic workflows). 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/constants.mjs

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

package/src/services/web-ui.mjs

@@ -3677,7 +3677,8 @@ function downloadStudioPDF() {
   '</div>' +
   '</body></html>';
 
-  // Generate PDF using jsPDF + html2canvas (loaded from CDN on demand)
+  // Generate PDF — injects print-safe CSS then uses html2canvas at 2.5x for crisp output.
+  // Page breaks are avoided inside .section/.card/.priority-item by injecting break-inside:avoid.
   var pdfFileName = (studioState.task || 'NHA Studio Report').slice(0, 60).replace(/[^a-z0-9\s]/gi,'').trim().replace(/\s+/g,'-') + '.pdf';
   function doGeneratePdf() {
     var btn2 = document.getElementById('studioInlinePdfBtn');
@@ -3687,33 +3688,67 @@ function downloadStudioPDF() {
       if (dlBtn2) { dlBtn2.disabled = b; dlBtn2.textContent = b ? 'Generando PDF...' : '\u2913 Download PDF'; }
     }
     setBusy(true);
-    // Build iframe to render the report HTML at full width
+
+    // Inject page-break-safe CSS into the HTML before rendering
+    var printCss = '<style>body{padding:20px!important;max-width:800px!important;margin:0 auto!important}' +
+      '.section,.card,.priority-item,.source-item,.bar-row{break-inside:avoid;page-break-inside:avoid}' +
+      '.header{break-after:avoid;page-break-after:avoid}' +
+      'h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}' +
+      '@media print{body{background:#fff!important;color:#111!important}' +
+      '.header{background:linear-gradient(135deg,#4f46e5,#06b6d4)!important;-webkit-print-color-adjust:exact}' +
+      '.section{background:#f8f9fa!important;border:1px solid #e0e0e0!important}' +
+      '.section-title{color:#4f46e5!important}}</style>';
+    var pdfHtml = html.replace('</head>', printCss + '</head>');
+
+    // Build hidden iframe at 800px (A4 equivalent at 96dpi)
     var iframe = document.createElement('iframe');
-    iframe.style.cssText = 'position:fixed;left:-9999px;top:0;width:900px;height:1px;border:none;visibility:hidden';
+    iframe.style.cssText = 'position:fixed;left:-9999px;top:0;width:800px;height:1px;border:none;visibility:hidden';
     document.body.appendChild(iframe);
     var ifrDoc = iframe.contentDocument || iframe.contentWindow.document;
-    ifrDoc.open(); ifrDoc.write(html); ifrDoc.close();
+    ifrDoc.open(); ifrDoc.write(pdfHtml); ifrDoc.close();
     iframe.onload = function() {
       var body = ifrDoc.body;
       var totalH = Math.max(body.scrollHeight, body.offsetHeight, ifrDoc.documentElement.scrollHeight);
       iframe.style.height = totalH + 'px';
+      // Render at 2.5x scale for crisp text
       window.html2canvas(body, {
-        scale: 1.5, useCORS: true, allowTaint: true,
-        width: 900, windowWidth: 900,
+        scale: 2.5, useCORS: true, allowTaint: true,
+        backgroundColor: '#0d0d14',
+        width: 800, windowWidth: 800,
         scrollX: 0, scrollY: 0,
         ignoreElements: function(el){ return el.tagName === 'SCRIPT'; }
       }).then(function(canvas) {
-        var imgData = canvas.toDataURL('image/jpeg', 0.85);
+        var imgData = canvas.toDataURL('image/png'); // PNG for crisp text
         var pdf = new window.jspdf.jsPDF({orientation:'portrait', unit:'pt', format:'a4', compress:true});
-        var pageW = pdf.internal.pageSize.getWidth();
-        var pageH = pdf.internal.pageSize.getHeight();
-        var imgW = pageW;
-        var imgH = (canvas.height * pageW) / canvas.width;
-        var y = 0;
-        while (y < imgH) {
-          if (y > 0) pdf.addPage();
-          pdf.addImage(imgData, 'JPEG', 0, -y, imgW, imgH, '', 'FAST');
-          y += pageH;
+        var pageW = pdf.internal.pageSize.getWidth();   // 595pt
+        var pageH = pdf.internal.pageSize.getHeight();  // 842pt
+        var margin = 24; // pt
+        var usableW = pageW - margin * 2;
+        var usableH = pageH - margin * 2;
+        // Scale image to fit page width
+        var imgW = usableW;
+        var imgH = (canvas.height * usableW) / canvas.width;
+
+        // Smart paging: find safe cut points every ~usableH
+        // Strategy: render slice by slice, each slice fits one page
+        var sliceH = Math.floor(canvas.height * (usableH / imgH)); // canvas px per page
+        var yCanvas = 0;
+        var pageNum = 0;
+        while (yCanvas < canvas.height) {
+          if (pageNum > 0) pdf.addPage();
+          var remaining = canvas.height - yCanvas;
+          var thisSlice = Math.min(sliceH, remaining);
+          // Create a temporary canvas for this slice
+          var sliceCanvas = document.createElement('canvas');
+          sliceCanvas.width = canvas.width;
+          sliceCanvas.height = thisSlice;
+          var ctx = sliceCanvas.getContext('2d');
+          ctx.drawImage(canvas, 0, yCanvas, canvas.width, thisSlice, 0, 0, canvas.width, thisSlice);
+          var sliceData = sliceCanvas.toDataURL('image/png');
+          var sliceImgH = (thisSlice * usableW) / canvas.width;
+          pdf.addImage(sliceData, 'PNG', margin, margin, usableW, sliceImgH, '', 'FAST');
+          yCanvas += thisSlice;
+          pageNum++;
         }
         pdf.save(pdfFileName);
         document.body.removeChild(iframe);
@@ -3803,6 +3838,8 @@ async function runStudio() {
   studioState.running = true;
   studioState.planned = false;
   // Keep attachmentContext — it was loaded before hitting Run
+  var parlBlockEl = document.getElementById('studioParliamentBlock');
+  if (parlBlockEl) parlBlockEl.style.display = 'none';
   renderStudioNodes();
   renderStudioLog();
   renderStudioResult();
@@ -3929,6 +3966,38 @@ async function runStudio() {
         var parlNodeIdx = studioState.nodes.length;
         studioState.nodes.push({icon:\x27&#x2656;\x27, agent:\x27Parliament\x27, label:\x27Parlamento\x27, status:\x27running\x27, output:\x27\x27, _rendered:false});
         renderStudioNodes();
+
+        // ── Parliament visual block ──────────────────────────────────────
+        // Track active R2 agent for visual block
+        var parlActiveAgent = null;
+        var parlDoneAgents = {};
+
+        function renderParlBlock(phase, activeLabel, convergence) {
+          var pb = document.getElementById(\x27studioParliamentBlock\x27);
+          if (!pb) return;
+          pb.style.display = \x27block\x27;
+          var agentCircles = proposals.map(function(p) {
+            var lbl = p.label || p.agent;
+            var isDone = !!parlDoneAgents[lbl];
+            var isActive = lbl === activeLabel;
+            var circCls = \x27studio-parliament__agent-circle\x27 + (isActive ? \x27 studio-parliament__agent-circle--reading\x27 : isDone ? \x27 studio-parliament__agent-circle--done\x27 : \x27\x27);
+            var readingTxt = isActive
+              ? (\x27<div class="studio-parliament__reading">\u21c4 legge ' + proposals.filter(function(x){return (x.label||x.agent)!==lbl;}).map(function(x){return x.label||x.agent;}).slice(0,2).join(\x27, \x27) + \x27</div>\x27)
+              : \x27\x27;
+            return \x27<div class="studio-parliament__agent"><div class="\x27 + circCls + \x27">\x27 + esc(p.icon||String.fromCharCode(9632)) + \x27</div><div class="studio-parliament__agent-label">\x27 + esc(lbl.slice(0,14)) + \x27</div>\x27 + readingTxt + \x27</div>\x27;
+          }).join(\x27<div class="studio-parliament__bidir">\u21c4</div>\x27);
+
+          var phaseLabel = phase === \x27r1\x27 ? \x27Round 1\x27 : phase === \x27r2\x27 ? \x27Round 2 — Cross-reading\x27 : phase === \x27r3\x27 ? \x27Round 3 — Mediazione\x27 : \x27Completato\x27;
+          var roundEl = convergence != null
+            ? \x27<div class="studio-parliament__convergence">&#x2714; Convergenza: \x27 + convergence + \x27% &mdash; deliberazione completata</div>\x27
+            : \x27<span class="studio-parliament__round">\x27 + phaseLabel + \x27</span>\x27;
+
+          pb.innerHTML = \x27<div class="studio-parliament"><div class="studio-parliament__header"><div class="studio-parliament__master"><span class="studio-parliament__master-icon">&#x2666;</span><span>MASTER AGENT &mdash; Orchestrazione</span></div><div class="studio-parliament__title">&#x2656; PARLIAMENT</div>\x27 + (convergence == null ? roundEl : \x27\x27) + \x27</div><div class="studio-parliament__agents">\x27 + agentCircles + \x27</div>\x27 + (convergence != null ? roundEl : \x27\x27) + \x27</div>\x27;
+        }
+
+        // Show initial R1 block
+        renderParlBlock(\x27r1\x27, null, null);
+
         var deliberateBody = JSON.stringify({task: task, proposals: proposals, language: document.getElementById(\x27langSelect\x27) ? document.getElementById(\x27langSelect\x27).value : \x27it\x27});
         try {
           var delRes = await fetch(\x27/api/studio/deliberate\x27, {method:\x27POST\x27, headers:{\x27Content-Type\x27:\x27application/json\x27}, body: deliberateBody, signal: studioAbortController ? studioAbortController.signal : undefined});
@@ -3950,12 +4019,11 @@ async function runStudio() {
                 try {
                   var dev = JSON.parse(dd);
                   if (dev.token) {
-                    // Status tokens — check for Round 2 start to add new animated log entry
                     var r2StartM = dev.token.match(/^\\[Round 2: (.+?)\\]\\s*$/);
                     var r2LiveM = dev.token.match(/^\\[Round 2 (.+?): (\\d+) token\\]\\s*$/);
                     if (r2StartM) {
-                      // New R2 agent starting — add a new log entry with thinking animation
                       var r2Label = r2StartM[1];
+                      parlActiveAgent = r2Label;
                       studioLog(r2Label, \x27&#x2656;\x27, \x27\x27, \x27agent\x27, false);
                       var delEnts2 = document.querySelectorAll(\x27.studio-log-entry\x27);
                       var delL2 = delEnts2[delEnts2.length - 1];
@@ -3964,7 +4032,7 @@ async function runStudio() {
                         var delTb2 = delL2.querySelector(\x27.studio-log-entry__text\x27);
                         if (delTb2) delTb2.innerHTML = \x27<span style="color:var(--green);font-family:var(--mono);font-size:10px">&#x2656; Deliberando Round 2<span class="thinking-dots"><span></span><span></span><span></span></span></span>\x27;
                       }
-                      // Update Parliament pipeline node — show R2 agent + who it reads
+                      renderParlBlock(\x27r2\x27, r2Label, null);
                       if (studioState.nodes[parlNodeIdx]) {
                         var otherLabels = proposals.filter(function(p){ return (p.label || p.agent) !== r2Label; }).map(function(p){ return p.label || p.agent; });
                         var readingStr = otherLabels.slice(0,2).join(\x27 + \x27) + (otherLabels.length > 2 ? \x27 +\x27 + (otherLabels.length-2) : \x27\x27);
@@ -3973,7 +4041,6 @@ async function runStudio() {
                         renderStudioNodes();
                       }
                     } else if (r2LiveM) {
-                      // Live token count update for the current R2 agent
                       var r2AgentName = r2LiveM[1];
                       var r2Toks = parseInt(r2LiveM[2], 10);
                       var delAllEnts = document.querySelectorAll(\x27[data-r2-agent]\x27);
@@ -3981,35 +4048,31 @@ async function runStudio() {
                       for (var rei = delAllEnts.length - 1; rei >= 0; rei--) {
                         if (delAllEnts[rei].getAttribute(\x27data-r2-agent\x27) === r2AgentName) { r2Entry = delAllEnts[rei]; break; }
                       }
-                      if (!r2Entry) {
-                        var delAllE = document.querySelectorAll(\x27.studio-log-entry\x27);
-                        r2Entry = delAllE[delAllE.length - 1];
-                      }
+                      if (!r2Entry) { var delAllE = document.querySelectorAll(\x27.studio-log-entry\x27); r2Entry = delAllE[delAllE.length - 1]; }
                       if (r2Entry) {
                         var r2Tb = r2Entry.querySelector(\x27.studio-log-entry__text\x27);
                         if (r2Tb) r2Tb.innerHTML = \x27<span style="color:var(--green);font-family:var(--mono);font-size:10px">&#x2656; Deliberando Round 2 \u2014 \x27 + r2Toks + \x27 token<span class="thinking-dots"><span></span><span></span><span></span></span></span>\x27;
                       }
-                      studioAddTokens(0, 20); // approx chunk size
+                      studioAddTokens(0, 20);
                     } else {
-                      // Other status tokens — update last log entry
                       var delEntries = document.querySelectorAll(\x27.studio-log-entry\x27);
                       var delLast = delEntries[delEntries.length - 1];
                       if (delLast) { var delTb = delLast.querySelector(\x27.studio-log-entry__text\x27); if (delTb) delTb.textContent = dev.token.replace(new RegExp(\x27[\\r\\n]+\x27,\x27g\x27),\x27 \x27); }
                     }
                   } else if (dev.deliberation_r2) {
                     var r2d = dev.deliberation_r2;
-                    // Full output in log — no truncation
                     studioLog(r2d.label || r2d.agent, \x27&#x2656;\x27, \x27[R2] \x27 + (r2d.output || \x27\x27), \x27agent\x27, true);
                     var ni2 = studioState.nodes.findIndex(function(x){return x.agent===r2d.agent;});
-                    if (ni2 >= 0) {
-                      studioState.nodes[ni2].output = r2d.output;
-                      studioState.nodes[ni2].status = \x27done\x27;
-                    }
-                    // Estimate tokens for R2 (approx 1 token ≈ 4 chars)
+                    if (ni2 >= 0) { studioState.nodes[ni2].output = r2d.output; studioState.nodes[ni2].status = \x27done\x27; }
                     studioAddTokens(0, Math.ceil((r2d.output||'').length / 4));
+                    // Mark this agent done in parliament block
+                    parlDoneAgents[r2d.label || r2d.agent] = true;
+                    parlActiveAgent = null;
+                    renderParlBlock(\x27r2\x27, null, null);
                     renderStudioNodes();
                     context = r2d.output || context;
                   } else if (dev.deliberation_r3) {
+                    renderParlBlock(\x27r3\x27, null, null);
                     studioLog(\x27HERALD\x27, \x27&#128295;\x27, \x27[Mediazione] \x27 + (dev.deliberation_r3.output || \x27\x27), \x27system\x27, true);
                     studioAddTokens(0, Math.ceil((dev.deliberation_r3.output||'').length / 4));
                     context = dev.deliberation_r3.output || context;
@@ -4017,6 +4080,7 @@ async function runStudio() {
                     var r2Conv = Math.round((dev.r2_convergence || 0) * 100);
                     studioLog(\x27Parlamento\x27, \x27&#x2656;\x27, \x27Deliberazione completa — convergenza R2: \x27 + r2Conv + \x27%\x27, \x27system\x27);
                     if (dev.mediation) { context = dev.mediation; }
+                    renderParlBlock(\x27done\x27, null, r2Conv);
                     if (studioState.nodes[parlNodeIdx]) {
                       studioState.nodes[parlNodeIdx].status = \x27done\x27;
                       studioState.nodes[parlNodeIdx].label = \x27Parlamento (\x27 + r2Conv + \x27%)\x27;
@@ -4033,6 +4097,7 @@ async function runStudio() {
         } catch(e3) {
           if (e3.name !== \x27AbortError\x27) {
             studioLog(\x27Parlamento\x27, \x27&#x2656;\x27, \x27Deliberazione non disponibile: \x27 + (e3.message || String(e3)), \x27error\x27);
+            var pb2 = document.getElementById(\x27studioParliamentBlock\x27); if (pb2) pb2.style.display = \x27none\x27;
           }
         }
       }
@@ -4068,6 +4133,7 @@ function saveStudioSession(task, nodes, log, result) {
       task: task,
       nodes: nodes.map(function(n){return {label:n.label,icon:n.icon,agent:n.agent};}),
       result: result,
+      canvas: studioState.canvas || null,
       log: log.map(function(e){return {agent:e.agent,icon:e.icon,text:e.text,type:e.type,time:e.time};}),
       ts: new Date().toLocaleString()
     });
@@ -4111,10 +4177,28 @@ function restoreStudioSession(idx) {
   studioState.nodes = s.nodes.map(function(n){return {icon:n.icon,agent:n.agent,label:n.label,status:'done'};});
   studioState.log = s.log;
   studioState.result = s.result;
+  studioState.canvas = s.canvas || null;
   studioState.running = false;
   var ta = document.getElementById('studioTaskInput');
   if (ta) ta.value = s.task;
   renderStudioNodes(); renderStudioLog(); renderStudioResult();
+  // Restore canvas if present
+  if (s.canvas) {
+    var cf = document.getElementById('canvasFrame');
+    var cp = document.getElementById('canvasPanel');
+    if (cf) cf.srcdoc = s.canvas;
+    if (cp) cp.classList.add('open');
+    var ct = document.getElementById('canvasTitle');
+    if (ct) ct.textContent = 'Studio Report';
+    var scb = document.getElementById('studioCanvasBtn');
+    if (scb) scb.style.display = '';
+    // Also store in allCanvasData so canvas panel nav works
+    var convId = activeConvId || 'studio';
+    if (!allCanvasData[convId]) allCanvasData[convId] = {canvases:[], browsers:[]};
+    allCanvasData[convId].canvases.push({html: s.canvas, title: s.task.slice(0,60), ts: s.ts});
+    canvasIdx = allCanvasData[convId].canvases.length - 1;
+    canvasMode = 'canvas';
+  }
   showToast('success', 'Session restored', s.task.slice(0, 60), 3000);
 }
 
@@ -4417,6 +4501,7 @@ function renderStudio(el) {
           '<button id="studioCanvasBtn" onclick="openCanvasPanel()" title="' + t('canvas_open') + '" style="font-size:12px;padding:5px 14px;background:none;border:1px solid var(--border);border-radius:6px;color:var(--dim);cursor:pointer;font-weight:700;transition:all .2s">&#9632; Canvas</button>' +
         '</div>' +
         '<div class="studio-canvas" id="studioNodes"></div>' +
+        '<div id="studioParliamentBlock" style="display:none"></div>' +
         '<div class="studio-log" id="studioLog" style="display:none"></div>' +
         '<div id="studioResult"></div>' +
         '<div id="studioSessionsBar" style="margin-top:16px;display:none"></div>' +
@@ -4962,6 +5047,24 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .studio-arrow{display:flex;align-items:center;color:var(--border2);font-size:18px;padding:0 8px;flex-shrink:0;margin-bottom:30px;transition:color .4s}
 .studio-arrow--active{color:var(--green3);animation:stFlow .5s ease-in-out infinite alternate}
 .studio-arrow--done{color:#22c55e}
+.studio-parliament{background:linear-gradient(135deg,#0e0e1c 0%,#12122a 100%);border:1.5px solid #6366f1;border-radius:12px;padding:18px 20px;margin-bottom:16px;animation:stNodeIn .4s ease forwards}
+.studio-parliament__header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #6366f133}
+.studio-parliament__master{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#4f46e5,#7c3aed);border-radius:8px;padding:7px 12px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.5px}
+.studio-parliament__master-icon{font-size:18px}
+.studio-parliament__title{font-size:10px;color:#a5b4fc;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-left:auto}
+.studio-parliament__round{font-size:10px;color:#6366f1;background:rgba(99,102,241,.12);border-radius:20px;padding:3px 10px;font-weight:700;animation:stPulse .9s ease-in-out infinite}
+.studio-parliament__agents{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:4px 0}
+.studio-parliament__agent{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:80px}
+.studio-parliament__agent-circle{width:44px;height:44px;border-radius:10px;border:1.5px solid #6366f1;background:#1a1a2e;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s}
+.studio-parliament__agent-circle--reading{border-color:#22d3ee;box-shadow:0 0 0 6px rgba(34,211,238,.15),0 0 16px rgba(34,211,238,.2);animation:stRing 1.4s ease-out infinite}
+.studio-parliament__agent-circle--done{border-color:#22c55e;background:rgba(34,197,94,.08)}
+.studio-parliament__agent-label{font-size:9px;color:#a5b4fc;text-align:center;font-weight:600;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.studio-parliament__conn{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:16px}
+.studio-parliament__conn-line{width:2px;height:18px;background:linear-gradient(180deg,#6366f1,#22d3ee);border-radius:2px;animation:stFlow .7s ease-in-out infinite alternate}
+.studio-parliament__bidir{color:#6366f1;font-size:14px;animation:stPulse .6s ease-in-out infinite}
+.studio-parliament__reading{font-size:9px;color:#22d3ee;text-align:center;margin-top:6px;font-family:var(--mono);background:rgba(34,211,238,.07);border-radius:6px;padding:3px 8px}
+.studio-parliament__convergence{text-align:center;margin-top:12px;padding:8px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.2);border-radius:8px;font-size:11px;color:#22c55e;font-weight:700}
+@keyframes stOrbit{0%{transform:translateX(0) scale(1)}50%{transform:translateX(4px) scale(1.04)}100%{transform:translateX(0) scale(1)}}
 .studio-log{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;max-height:380px;overflow-y:auto;font-size:11.5px;line-height:1.65}
 .studio-log-entry{margin-bottom:12px;padding:10px 12px;border-radius:8px;background:var(--bg3);border:1px solid var(--border)}
 .studio-log-entry:last-child{margin-bottom:0}