nothumanallowed 13.2.78 → 13.2.80

package/package.json

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

package/src/services/web-ui.mjs

@@ -81,6 +81,34 @@ function renderMd(raw) {
     // Close lists on blank or non-list line
     if (inUl) { out.push('</ul>'); inUl = false; }
     if (inOl) { out.push('</ol>'); inOl = false; }
+    // Markdown table: line starting with | and containing at least two |
+    if (l.charAt(0) === '|' && l.lastIndexOf('|') > 0) {
+      // Separator row (---|---) — skip, handled via <thead>
+      if (/^\|[\s\-|:]+\|$/.test(l.trim())) continue;
+      var cells = l.split('|').slice(1,-1).map(function(c){ return c.trim(); });
+      // Check if next line is a separator → this is a header row
+      var nextL = lines[i+1] ? lines[i+1].trim() : '';
+      var isHeader = /^\|[\s\-|:]+\|$/.test(nextL);
+      if (isHeader) {
+        out.push('<table class="md-table"><thead><tr>' + cells.map(function(c){ return '<th>'+c+'</th>'; }).join('') + '</tr></thead><tbody>');
+      } else {
+        // Check if we need to open tbody (no header case)
+        var prevOut = out[out.length-1] || '';
+        if (prevOut.indexOf('<tbody>') === -1 && prevOut.indexOf('<tr>') === -1) {
+          out.push('<table class="md-table"><tbody>');
+        }
+        out.push('<tr>' + cells.map(function(c){ return '<td>'+c+'</td>'; }).join('') + '</tr>');
+        // Close table if next line is not a table row
+        var nextL2 = lines[i+1] ? lines[i+1].trim() : '';
+        if (!nextL2 || nextL2.charAt(0) !== '|') { out.push('</tbody></table>'); }
+      }
+      continue;
+    }
+    // Close open table if we hit a non-table line
+    var lastOut = out[out.length-1] || '';
+    if (lastOut.indexOf('<tr>') !== -1 && lastOut.indexOf('</table>') === -1) {
+      out.push('</tbody></table>');
+    }
     // Blockquote > text
     var bqm = l.match(/^&gt; (.+)/);
     if (bqm) { out.push('<blockquote class="md-bq">'+bqm[1]+'</blockquote>'); continue; }
@@ -3250,6 +3278,8 @@ function studioReset() {
   if (ta) ta.value = '';
   var tb = document.getElementById('studioTokenBar');
   if (tb) tb.textContent = '';
+  var inlinePdfBtn = document.getElementById('studioInlinePdfBtn');
+  if (inlinePdfBtn) inlinePdfBtn.style.display = 'none';
   renderStudioNodes();
   renderStudioLog();
   renderStudioResult();
@@ -3388,68 +3418,221 @@ function downloadStudioPDF() {
     return;
   }
 
-  // Build sections for each agent
+  // ── Markdown → HTML for PDF (full support: tables, lists, headers, inline) ──
   function mdToPdfHtml(raw) {
-    var lines = raw.split(String.fromCharCode(10));
+    var NL2 = String.fromCharCode(10);
+    var lines = raw.split(NL2);
     var out = '';
-    var inList = false;
+    var inUl = false, inOl = false, inTable = false, inTbody = false;
+    function closeAll() {
+      if (inUl) { out += '</ul>'; inUl = false; }
+      if (inOl) { out += '</ol>'; inOl = false; }
+      if (inTable) { if (inTbody) { out += '</tbody>'; inTbody = false; } out += '</table>'; inTable = false; }
+    }
+    function inlineFormat(t) {
+      t = t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+      t = t.replace(new RegExp('[*][*]([^*]+)[*][*]','g'),'<strong>$1</strong>');
+      t = t.replace(new RegExp('[*]([^*]+)[*]','g'),'<em>$1</em>');
+      t = t.replace(/~~([^~]+)~~/g,'<del>$1</del>');
+      return t;
+    }
     for (var li = 0; li < lines.length; li++) {
-      var line = lines[li]
-        .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-      // Inline bold: **text**
-      line = line.replace(new RegExp('[*][*]([^*]+)[*][*]','g'),'<strong>$1</strong>');
-      // Inline italic: *text*
-      line = line.replace(new RegExp('[*]([^*]+)[*]','g'),'<em>$1</em>');
-      if (line.slice(0,4) === '### ') { if(inList){out+='</ul>';inList=false;} out += '<h3>' + line.slice(4) + '</h3>'; continue; }
-      if (line.slice(0,3) === '## ') { if(inList){out+='</ul>';inList=false;} out += '<h2>' + line.slice(3) + '</h2>'; continue; }
-      if (line.slice(0,2) === '# ') { if(inList){out+='</ul>';inList=false;} out += '<h2>' + line.slice(2) + '</h2>'; continue; }
-      if (line.slice(0,2) === '- ' || line.slice(0,2) === '* ') {
-        if (!inList) { out += '<ul>'; inList = true; }
-        out += '<li>' + line.slice(2) + '</li>';
+      var line = lines[li];
+      var trimmed = line.trim();
+      // Headers
+      if (trimmed.slice(0,4) === '### ') { closeAll(); out += '<h3>' + inlineFormat(trimmed.slice(4)) + '</h3>'; continue; }
+      if (trimmed.slice(0,3) === '## ')  { closeAll(); out += '<h2>' + inlineFormat(trimmed.slice(3)) + '</h2>'; continue; }
+      if (trimmed.slice(0,2) === '# ')   { closeAll(); out += '<h1>' + inlineFormat(trimmed.slice(2)) + '</h1>'; continue; }
+      // Horizontal rule
+      if (/^---+$/.test(trimmed)) { closeAll(); out += '<hr>'; continue; }
+      // Markdown table
+      if (trimmed.charAt(0) === '|' && trimmed.lastIndexOf('|') > 0) {
+        // Separator row — signals end of header
+        if (/^\|[\s\-|:]+\|$/.test(trimmed)) {
+          if (inTable) { out += '</thead><tbody>'; inTbody = true; }
+          continue;
+        }
+        var cells = trimmed.split('|').slice(1,-1).map(function(c){ return inlineFormat(c.trim()); });
+        var nextTrimmed = lines[li+1] ? lines[li+1].trim() : '';
+        var nextIsSep = /^\|[\s\-|:]+\|$/.test(nextTrimmed);
+        if (!inTable) {
+          out += '<table>';
+          inTable = true;
+          if (nextIsSep) { out += '<thead>'; inTbody = false; }
+          else { out += '<tbody>'; inTbody = true; }
+        }
+        var tag = (!inTbody) ? 'th' : 'td';
+        out += '<tr>' + cells.map(function(c){ return '<'+tag+'>'+c+'</'+tag+'>'; }).join('') + '</tr>';
         continue;
       }
-      if (inList) { out += '</ul>'; inList = false; }
-      if (line.trim() === '') { out += '</p><p>'; } else { out += line + '<br>'; }
+      // Close table if not a table row
+      if (inTable) { if (inTbody) { out += '</tbody>'; inTbody = false; } out += '</table>'; inTable = false; }
+      // Unordered list
+      if (/^[\-\*] /.test(trimmed)) {
+        if (inOl) { out += '</ol>'; inOl = false; }
+        if (!inUl) { out += '<ul>'; inUl = true; }
+        out += '<li>' + inlineFormat(trimmed.slice(2)) + '</li>';
+        continue;
+      }
+      // Ordered list
+      var olMatch = trimmed.match(/^\d+\. (.+)/);
+      if (olMatch) {
+        if (inUl) { out += '</ul>'; inUl = false; }
+        if (!inOl) { out += '<ol>'; inOl = true; }
+        out += '<li>' + inlineFormat(olMatch[1]) + '</li>';
+        continue;
+      }
+      // Close lists
+      if (inUl) { out += '</ul>'; inUl = false; }
+      if (inOl) { out += '</ol>'; inOl = false; }
+      // Blank line
+      if (trimmed === '') { out += '<div style="height:6px"></div>'; continue; }
+      // Paragraph
+      out += '<p>' + inlineFormat(trimmed) + '</p>';
     }
-    if (inList) out += '</ul>';
-    return '<p>' + out + '</p>';
+    closeAll();
+    return out;
   }
-  var sectionsHtml = nodes.map(function(n) {
-    if (!n.output || n.output === '(no output)' || n.agent === 'CanvasAgent') return '';
-    return '<div class="section"><div class="agent-label">' + (n.icon||'') + ' ' + esc(n.label||n.agent) + '</div><div class="section-body">' + mdToPdfHtml(n.output) + '</div></div>';
+
+  // ── Collect workflow metadata ─────────────────────────────────────────────
+  var activeNodes = nodes.filter(function(n){ return n.output && n.output !== '(no output)' && n.agent !== 'CanvasAgent'; });
+  var totalTokensIn  = studioTokens ? (studioTokens.in  || 0) : 0;
+  var totalTokensOut = studioTokens ? (studioTokens.out || 0) : 0;
+  var agentNames = activeNodes.map(function(n){ return (n.icon||'') + ' ' + esc(n.label||n.agent); });
+  var nowTime = new Date().toLocaleTimeString('it-IT', {hour:'2-digit',minute:'2-digit'});
+
+  // ── Section HTML ──────────────────────────────────────────────────────────
+  var sectionsHtml = activeNodes.map(function(n, idx) {
+    var agentColor = ['#4f46e5','#0891b2','#059669','#d97706','#dc2626','#7c3aed','#0284c7'][idx % 7];
+    return '<div class="section">' +
+      '<div class="agent-header" style="border-left-color:' + agentColor + '">' +
+        '<span class="agent-icon">' + (n.icon||'&#9632;') + '</span>' +
+        '<div><div class="agent-name">' + esc(n.label||n.agent) + '</div>' +
+        '<div class="agent-sub">' + esc(n.agent) + ' &nbsp;&#183;&nbsp; Step ' + (idx+1) + ' di ' + activeNodes.length + '</div></div>' +
+      '</div>' +
+      '<div class="section-body">' + mdToPdfHtml(n.output) + '</div>' +
+    '</div>';
   }).join('');
 
-  // Include canvas if present (as an embedded iframe screenshot fallback note)
-  var canvasNote = studioState.canvas ? ["<div class='section canvas-note'><div class='agent-label'>&#9632; Canvas Report</div><div class='section-body'><p><em>Il Canvas HTML e disponibile in Studio. Aprire il pannello Canvas e usare la funzione stampa del browser per includerlo.</em></p></div></div>"].join("") : "";
-
-  var html = '<!DOCTYPE html><html lang="it"><head><meta charset="UTF-8"><title>' + esc(task) + '</title><style>' +
-    'body{font-family:"Helvetica Neue",Arial,sans-serif;color:#111;background:#fff;margin:0;padding:0}' +
-    '.cover{background:#0d0d0d;color:#fff;padding:60px 50px;page-break-after:always}' +
-    '.cover h1{font-size:28px;font-weight:700;margin:0 0 12px;color:#00ff41}' +
-    '.cover .meta{font-size:13px;color:#aaa;margin-top:8px}' +
-    '.cover .task{font-size:15px;color:#e0e0e0;margin-top:20px;line-height:1.6;max-width:700px}' +
-    '.cover .brand{font-size:11px;color:#555;margin-top:40px;letter-spacing:2px;text-transform:uppercase}' +
-    '.toc{padding:40px 50px;border-bottom:1px solid #e0e0e0;page-break-after:always}' +
-    '.toc h2{font-size:14px;text-transform:uppercase;letter-spacing:2px;color:#555;margin-bottom:16px}' +
-    '.toc ol{margin:0;padding-left:20px;font-size:13px;line-height:2}' +
-    '.section{padding:36px 50px;border-bottom:1px solid #f0f0f0;page-break-inside:avoid}' +
+  // ── Full HTML document ────────────────────────────────────────────────────
+  var html = '<!DOCTYPE html><html lang="it"><head><meta charset="UTF-8"><title>' + esc(task) + '</title>' +
+  '<link rel="preconnect" href="https://fonts.googleapis.com">' +
+  '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">' +
+  '<style>' +
+    '*{box-sizing:border-box;margin:0;padding:0}' +
+    'body{font-family:"Inter",system-ui,sans-serif;color:#1e1e2e;background:#fff;font-size:13px;line-height:1.7}' +
+
+    // Cover
+    '.cover{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#1e3a5f 100%);color:#fff;padding:64px 60px 56px;page-break-after:always;position:relative;overflow:hidden}' +
+    '.cover::before{content:"";position:absolute;top:-80px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 70%);pointer-events:none}' +
+    '.cover-brand{font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:32px;display:flex;align-items:center;gap:8px}' +
+    '.cover-brand::before{content:"";display:inline-block;width:24px;height:2px;background:#6366f1}' +
+    '.cover h1{font-size:30px;font-weight:800;line-height:1.25;color:#fff;margin-bottom:20px;max-width:680px}' +
+    '.cover-task-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px}' +
+    '.cover-task{font-size:14px;color:rgba(255,255,255,.8);line-height:1.65;max-width:660px;font-style:italic;padding:14px 18px;background:rgba(255,255,255,.07);border-radius:8px;border-left:3px solid #6366f1}' +
+
+    // Stats bar
+    '.cover-stats{display:flex;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}' +
+    '.stat{flex:1;padding-right:28px;border-right:1px solid rgba(255,255,255,.1)}' +
+    '.stat:last-child{border-right:none;padding-right:0;padding-left:28px}' +
+    '.stat:not(:first-child){padding-left:28px}' +
+    '.stat-value{font-size:22px;font-weight:800;color:#fff;line-height:1}' +
+    '.stat-label{font-size:10px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:5px}' +
+
+    // Workflow bar
+    '.workflow-bar{padding:28px 60px;background:#f8f7ff;border-bottom:1px solid #e8e5ff;display:flex;align-items:center;gap:0;flex-wrap:wrap}' +
+    '.wf-step{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#4f46e5;white-space:nowrap}' +
+    '.wf-arrow{color:#c7c2f0;margin:0 6px;font-size:14px}' +
+    '.wf-label{font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#9c97c7;margin-right:16px}' +
+
+    // TOC
+    '.toc{padding:36px 60px;border-bottom:1px solid #eee;page-break-after:always}' +
+    '.toc-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9ca3af;margin-bottom:18px}' +
+    '.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}' +
+    '.toc-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f9f9fc;border-radius:8px;border:1px solid #ede9fe}' +
+    '.toc-num{width:22px;height:22px;border-radius:50%;background:#4f46e5;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}' +
+    '.toc-name{font-size:12px;font-weight:600;color:#1e1e2e}' +
+
+    // Sections
+    '.section{padding:36px 60px;border-bottom:1px solid #f0f0f5;page-break-inside:avoid}' +
     '.section:last-child{border-bottom:none}' +
-    '.agent-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#888;font-weight:700;margin-bottom:14px}' +
-    '.section-body{font-size:13px;line-height:1.8;color:#222}' +
-    '.section-body h2{font-size:16px;font-weight:700;color:#111;margin:20px 0 8px}' +
-    '.section-body h3{font-size:14px;font-weight:600;color:#333;margin:16px 0 6px}' +
-    '.section-body ul{margin:8px 0;padding-left:20px}' +
+    '.agent-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-left:14px;border-left:3px solid #4f46e5}' +
+    '.agent-icon{font-size:22px;line-height:1}' +
+    '.agent-name{font-size:14px;font-weight:700;color:#1e1e2e}' +
+    '.agent-sub{font-size:10px;font-weight:500;color:#9ca3af;letter-spacing:.5px;margin-top:2px}' +
+    '.section-body{font-size:13px;line-height:1.75;color:#374151}' +
+    '.section-body h1{font-size:18px;font-weight:700;color:#1e1e2e;margin:20px 0 10px;border-bottom:1px solid #e5e7eb;padding-bottom:6px}' +
+    '.section-body h2{font-size:15px;font-weight:700;color:#1e1e2e;margin:18px 0 8px}' +
+    '.section-body h3{font-size:13px;font-weight:600;color:#4f46e5;margin:14px 0 6px}' +
+    '.section-body p{margin:0 0 10px}' +
+    '.section-body ul{margin:8px 0 10px 18px;list-style:disc}' +
+    '.section-body ol{margin:8px 0 10px 18px}' +
     '.section-body li{margin-bottom:4px}' +
-    '.section-body strong{font-weight:700}' +
-    '.section-body p{margin:0 0 12px}' +
-    '.canvas-note{background:#f9f9f9}' +
-    '.footer-bar{padding:20px 50px;background:#f9f9f9;font-size:10px;color:#aaa;text-align:center;letter-spacing:1px}' +
-    '@media print{body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.cover{page-break-after:always}.toc{page-break-after:always}}' +
+    '.section-body strong{font-weight:700;color:#1e1e2e}' +
+    '.section-body em{color:#6366f1;font-style:italic}' +
+    '.section-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:12px}' +
+    '.section-body th{background:#f0eeff;color:#4f46e5;font-weight:700;text-align:left;padding:8px 12px;border:1px solid #e0d9ff;font-size:11px;letter-spacing:.3px}' +
+    '.section-body td{padding:7px 12px;border:1px solid #ede9fe;color:#374151}' +
+    '.section-body tr:nth-child(even) td{background:#f9f8ff}' +
+    '.section-body hr{border:none;border-top:1px solid #e5e7eb;margin:16px 0}' +
+    '.section-body blockquote{border-left:3px solid #6366f1;padding:8px 14px;background:#f5f3ff;border-radius:0 6px 6px 0;color:#4f46e5;font-style:italic;margin:10px 0}' +
+
+    // Footer
+    '.footer-bar{padding:18px 60px;background:#f8f7ff;border-top:2px solid #e8e5ff;display:flex;justify-content:space-between;align-items:center}' +
+    '.footer-left{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#9c97c7}' +
+    '.footer-right{font-size:10px;color:#b8b4d4}' +
+
+    '@media print{' +
+      'body{-webkit-print-color-adjust:exact;print-color-adjust:exact}' +
+      '.cover{page-break-after:always}' +
+      '.toc{page-break-after:always}' +
+      '.section{page-break-inside:avoid}' +
+    '}' +
   '</style></head><body>' +
-    '<div class="cover"><div class="brand">NotHumanAllowed — NHA Studio</div><h1>' + esc(task.length > 80 ? task.slice(0,80)+'...' : task) + '</h1><div class="meta">Generato il ' + today + ' &nbsp;·&nbsp; ' + nodes.filter(function(n){return n.agent!=='CanvasAgent'}).length + ' agenti</div><div class="task">' + esc(task) + '</div></div>' +
-    '<div class="toc"><h2>Indice</h2><ol>' + nodes.filter(function(n){return n.output&&n.output!=='(no output)'&&n.agent!=='CanvasAgent'}).map(function(n){return '<li>' + esc(n.label||n.agent) + '</li>';}).join('') + '</ol></div>' +
-    sectionsHtml + canvasNote +
-    '<div class="footer-bar">NHA Studio &nbsp;·&nbsp; nothumanallowed.com &nbsp;·&nbsp; ' + today + '</div>' +
+
+  // ── Cover ────────────────────────────────────────────────────────────────
+  '<div class="cover">' +
+    '<div class="cover-brand">NotHumanAllowed &nbsp; NHA Studio</div>' +
+    '<h1>' + esc(task.length > 90 ? task.slice(0,90)+'...' : task) + '</h1>' +
+    '<div class="cover-task-label">Workflow richiesto</div>' +
+    '<div class="cover-task">' + esc(task) + '</div>' +
+    '<div class="cover-stats">' +
+      '<div class="stat"><div class="stat-value">' + activeNodes.length + '</div><div class="stat-label">Agenti eseguiti</div></div>' +
+      '<div class="stat"><div class="stat-value">' + today + '</div><div class="stat-label">Data generazione</div></div>' +
+      '<div class="stat"><div class="stat-value">' + nowTime + '</div><div class="stat-label">Ora</div></div>' +
+      (totalTokensIn > 0 ? '<div class="stat"><div class="stat-value">' + (totalTokensIn + totalTokensOut).toLocaleString() + '</div><div class="stat-label">Token totali</div></div>' : '') +
+    '</div>' +
+  '</div>' +
+
+  // ── Workflow bar ─────────────────────────────────────────────────────────
+  '<div class="workflow-bar">' +
+    '<span class="wf-label">Workflow:</span>' +
+    activeNodes.map(function(n, idx){
+      return '<span class="wf-step">' + (n.icon||'') + ' ' + esc(n.label||n.agent) + '</span>' +
+        (idx < activeNodes.length-1 ? '<span class="wf-arrow">&#8594;</span>' : '');
+    }).join('') +
+  '</div>' +
+
+  // ── TOC ──────────────────────────────────────────────────────────────────
+  '<div class="toc">' +
+    '<div class="toc-title">Indice dei contenuti</div>' +
+    '<div class="toc-grid">' +
+    activeNodes.map(function(n, idx){
+      return '<div class="toc-item"><div class="toc-num">' + (idx+1) + '</div><div class="toc-name">' + esc(n.label||n.agent) + '</div></div>';
+    }).join('') +
+    '</div>' +
+  '</div>' +
+
+  // ── Sections ─────────────────────────────────────────────────────────────
+  sectionsHtml +
+
+  // ── Footer ───────────────────────────────────────────────────────────────
+  '<div class="footer-bar">' +
+    '<span class="footer-left">NHA Studio &nbsp;&#183;&nbsp; nothumanallowed.com</span>' +
+    '<span class="footer-right">' + today + ' ' + nowTime +
+      (totalTokensIn > 0 ? ' &nbsp;&#183;&nbsp; ' + totalTokensIn.toLocaleString() + ' token in / ' + totalTokensOut.toLocaleString() + ' out' : '') +
+    '</span>' +
+  '</div>' +
   '</body></html>';
 
   // Use Blob URL to avoid popup blockers — opens in new tab, user can Cmd+P to print as PDF
@@ -3474,8 +3657,17 @@ function renderStudioResult() {
   var body = hasCanvas
     ? '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"><span style="color:var(--dim);font-size:13px">&#10003; ' + t('canvas_generated') + '</span><button onclick="openCanvasPanel()" style="padding:6px 14px;background:var(--greendim);border:1px solid var(--green3);border-radius:8px;color:var(--green);font-size:12px;cursor:pointer;font-weight:700">&#x25A3; ' + t('canvas_open') + '</button></div>'
     : '<div class="md-body">' + renderMd(studioState.result) + '</div>';
-  var dlBtn = '<button onclick="downloadStudioPDF()" title="Scarica il workflow come PDF" style="margin-top:10px;padding:6px 14px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--dim);font-size:11px;cursor:pointer;font-family:var(--mono);letter-spacing:.5px">&#x2913; Download PDF</button>';
-  el.innerHTML = '<div class="studio-result__title">&#10003; ' + t('workflow_complete') + '</div>' + body + dlBtn;
+  var tokLine = (studioTokens && (studioTokens.in > 0 || studioTokens.out > 0))
+    ? '<div style="margin-top:8px;font-size:11px;color:var(--dim);font-family:var(--mono)">&#x2B06; ' + (studioTokens.in||0).toLocaleString() + ' token in &nbsp;&#x2B07; ' + (studioTokens.out||0).toLocaleString() + ' token out &nbsp;&#x2022;&nbsp; <strong style="color:var(--green)">' + ((studioTokens.in||0)+(studioTokens.out||0)).toLocaleString() + '</strong> totale</div>'
+    : '';
+  var dlBtn = '<div style="margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap">' +
+    '<button onclick="downloadStudioPDF()" title="Scarica il workflow come PDF" style="display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.3px;box-shadow:0 2px 8px rgba(79,70,229,.35)">&#x2913; Download PDF</button>' +
+    '<span style="font-size:11px;color:var(--dim)">Scarica il workflow completo come documento PDF</span>' +
+    '</div>';
+  el.innerHTML = '<div class="studio-result__title">&#10003; ' + t('workflow_complete') + '</div>' + body + tokLine + dlBtn;
+  // Show/hide inline PDF button in the prompt bar
+  var inlinePdfBtn = document.getElementById('studioInlinePdfBtn');
+  if (inlinePdfBtn) inlinePdfBtn.style.display = 'inline-flex';
   // Update canvas button style: bright green when canvas exists, dimmed otherwise
   var canvasBtn = document.getElementById('studioCanvasBtn');
   if (canvasBtn) {
@@ -4005,6 +4197,7 @@ function renderStudio(el) {
               '<button onclick="document.getElementById(\\x27studioFileInput\\x27).click()" title="Attach PDF or image" style="padding:8px 10px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;font-size:15px" ' + (studioState.running ? 'disabled' : '') + '>&#128206;</button>' +
               '<button id="studioRunBtn" class="studio-run-btn" onclick="runStudio()" style="flex:1" ' + (studioState.running ? 'disabled' : '') + '>' + t('run') + '</button>' +
               '<button id="studioStopBtn" onclick="stopStudio()" title="' + t('stop') + '" style="padding:8px 14px;background:#7f1d1d;border:1px solid #ef4444;border-radius:8px;color:#ef4444;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;' + (studioState.running ? '' : 'display:none') + '">&#9632; ' + t('stop') + '</button>' +
+              '<button id="studioInlinePdfBtn" onclick="downloadStudioPDF()" title="Scarica PDF del risultato" style="display:' + (studioState.result ? 'inline-flex' : 'none') + ';align-items:center;gap:5px;padding:8px 12px;background:linear-gradient(135deg,#4f46e5,#2563eb);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px rgba(79,70,229,.35)">&#x2913; PDF</button>' +
               '<button onclick="studioReset()" title="' + t('reset') + '" style="padding:8px 12px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;font-size:16px;line-height:1" ' + (studioState.running ? 'disabled' : '') + '>&#8635;</button>' +
             '</div>' +
           '</div>' +
@@ -4619,6 +4812,11 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .md-body em{font-style:italic;color:var(--dim)}
 .md-body del{text-decoration:line-through;color:var(--dim)}
 .md-body a{color:var(--cyan);text-decoration:underline}
+.md-body .md-table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:13px}
+.md-body .md-table th{background:var(--bg3);color:var(--bright);font-weight:600;padding:7px 12px;text-align:left;border:1px solid var(--border2);white-space:nowrap}
+.md-body .md-table td{padding:6px 12px;border:1px solid var(--border);color:var(--text);vertical-align:top}
+.md-body .md-table tbody tr:nth-child(odd){background:rgba(0,0,0,0.15)}
+.md-body .md-table tbody tr:hover{background:rgba(0,255,65,0.04)}
 
 /* ---- CHAT bubble markdown tweaks ---- */
 .msg--assistant .msg__bubble{white-space:normal}