nothumanallowed 13.4.6 → 13.4.8

package/package.json

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

package/src/services/tool-executor.mjs

@@ -2043,7 +2043,10 @@ export async function executeTool(action, params, config) {
             let installCmd, installArgs;
             if (language === 'python') {
               installCmd = 'pip3';
-              installArgs = ['install', '--quiet', '--target', path.default.join(sandboxDir, 'site-packages'), ...safePkgs];
+              // --only-binary=:all: forces pre-built wheels — no setup.py/build hook execution,
+              // eliminating arbitrary code execution during install.
+              // Network access is still live (accepted risk for local CLI; use --no-index for server).
+              installArgs = ['install', '--quiet', '--only-binary=:all:', '--target', path.default.join(sandboxDir, 'site-packages'), ...safePkgs];
             } else {
               // javascript / typescript
               fs.default.writeFileSync(path.default.join(sandboxDir, 'package.json'), JSON.stringify({ type: 'module' }));

package/src/services/web-ui.mjs

@@ -3408,6 +3408,139 @@ function studioLog(agent, icon, text, type, update) {
   renderStudioLog();
 }
 
+// ── Workflow node character SVG ──────────────────────────────────────────────
+// Generates a compact animated "agent at desk" illustration for each pipeline node card.
+// isRunning = prl-arm/prl-head animations active; isDone = green checkmark.
+function buildWorkflowChar(n) {
+  var lbl = n.label || n.agent || \x27?\x27;
+  var ico = n.icon || \x27■\x27;
+  var isActive = n.status === \x27running\x27;
+  var isDone = n.status === \x27done\x27;
+  var skinColors = [\x27#fbbf24\x27,\x27#f97316\x27,\x27#a78bfa\x27,\x27#34d399\x27,\x27#60a5fa\x27,\x27#f472b6\x27];
+  var skinIdx = Math.abs((lbl.charCodeAt(0)||65)+(lbl.charCodeAt(lbl.length-1)||90)) % skinColors.length;
+  var skin = skinColors[skinIdx];
+  var shirtColors = [\x27#4f46e5\x27,\x27#0891b2\x27,\x27#7c3aed\x27,\x27#059669\x27,\x27#dc2626\x27,\x27#d97706\x27];
+  var shirt = shirtColors[skinIdx];
+  var hairColors = [\x27#1a1a1a\x27,\x27#4a3728\x27,\x27#c4a35a\x27,\x27#8b0000\x27,\x27#2c4a7c\x27,\x27#3d2b1f\x27];
+  var hair = hairColors[skinIdx];
+  var accentColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : \x27#333360\x27);
+  var deskBg = isDone ? \x27#1a3a1a\x27 : (isActive ? \x27#1a1a3e\x27 : \x27#1a1a2a\x27);
+  var monGlow = isActive ? \x27filter:drop-shadow(0 0 4px #6366f1)\x27 : \x27\x27;
+  var armCls = isActive ? \x27class="prl-arm"\x27 : \x27\x27;
+  var headCls = isActive ? \x27class="prl-head"\x27 : \x27\x27;
+  var glowStyle = isActive ? \x27filter:drop-shadow(0 0 5px #6366f1)\x27 : \x27\x27;
+  var svg = \x27<svg viewBox="0 0 80 96" width="70" height="84" xmlns="http://www.w3.org/2000/svg" style="\x27+glowStyle+\x27;display:block;margin:0 auto">\x27+
+    // Desk
+    \x27<path d="M4 55 L76 55 L76 63 L4 63 Z" fill="\x27+deskBg+\x27" stroke="\x27+accentColor+\x27" stroke-width="1.2"/>\x27+
+    \x27<path d="M4 63 L76 63 L76 70 L4 70 Z" fill="#0e0e1c"/>\x27+
+    \x27<line x1="4" y1="63" x2="76" y2="63" stroke="\x27+accentColor+\x2760" stroke-width=".8"/>\x27+
+    \x27<path d="M10 70 C10 70 9 82 9 84 C9 86 11 87 13 87 C15 87 17 86 17 84 C17 82 16 70 16 70 Z" fill="#111128"/>\x27+
+    \x27<path d="M63 70 C63 70 62 82 62 84 C62 86 64 87 66 87 C68 87 70 86 70 84 C70 82 69 70 69 70 Z" fill="#111128"/>\x27+
+    \x27<rect x="17" y="79" width="46" height="3" rx="1.5" fill="#161626"/>\x27+
+    // Monitor
+    \x27<ellipse cx="35" cy="56" rx="14" ry="2" fill="rgba(0,0,0,.4)"/>\x27+
+    \x27<ellipse cx="35" cy="57" rx="7" ry="1.5" fill="#1a1a2e"/>\x27+
+    \x27<rect x="33" y="50" width="4" height="6" rx="1" fill="#1a1a2e"/>\x27+
+    \x27<rect x="17" y="26" width="36" height="25" rx="4" fill="#050510"/>\x27+
+    \x27<rect x="18" y="27" width="34" height="23" rx="3" fill="#0d0d20" stroke="\x27+accentColor+\x27" stroke-width="\x27+(isActive?\x272\x27:\x271\x27)+\x27" style="\x27+monGlow+\x27"/>\x27+
+    \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="#0a0a18"/>\x27+
+    (isActive ?
+      \x27<defs><linearGradient id="wsg\x27+skinIdx+\x27" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#6366f122"/><stop offset="1" stop-color="#6366f108"/></linearGradient></defs>\x27+
+      \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="url(#wsg\x27+skinIdx+\x27)"/>\x27+
+      \x27<line x1="22" y1="32" x2="48" y2="32" stroke="#6366f1ee" stroke-width="1.2" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="35" x2="44" y2="35" stroke="#6366f1aa" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="38" x2="46" y2="38" stroke="#6366f188" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="41" x2="40" y2="41" stroke="#6366f166" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="44" x2="43" y2="44" stroke="#6366f144" stroke-width="1" stroke-linecap="round"/>\x27
+      :
+      \x27<line x1="22" y1="33" x2="46" y2="33" stroke="#1e1e30" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="36" x2="42" y2="36" stroke="#1e1e30" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="39" x2="44" y2="39" stroke="#1e1e30" stroke-width="1" stroke-linecap="round"/>\x27+
+      \x27<line x1="22" y1="42" x2="38" y2="42" stroke="#1e1e30" stroke-width="1" stroke-linecap="round"/>\x27
+    )+
+    \x27<circle cx="35" cy="28.2" r=".9" fill="\x27+(isActive?\x27#6366f1\x27:\x27#2a2a40\x27)+\x27"/>\x27+
+    // Keyboard
+    \x27<rect x="13" y="48" width="36" height="7" rx="2.5" fill="#0c0c1e" stroke="#202036" stroke-width="1"/>\x27+
+    \x27<rect x="14" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="18" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="22" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="26" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="30" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="34" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="38" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="15" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="21" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="27" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="33" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
+    \x27<rect x="19" y="55" width="24" height="1.8" rx=".9" fill="#181830"/>\x27+
+    // Chair
+    \x27<ellipse cx="34" cy="72" rx="12" ry="4" fill="#111124"/>\x27+
+    \x27<rect x="32" y="65" width="4" height="8" rx="1" fill="#1a1a2c"/>\x27+
+    \x27<path d="M22 60 Q22 56 34 56 Q46 56 46 60 L46 66 Q46 68 34 68 Q22 68 22 66 Z" fill="#1c1c2c" stroke="#2a2a3e" stroke-width="1"/>\x27+
+    \x27<path d="M24 44 Q23 38 34 37 Q45 38 44 44 L44 58 Q44 60 34 60 Q24 60 24 58 Z" fill="#191928" stroke="#2a2a3c" stroke-width="1"/>\x27+
+    \x27<path d="M26 46 Q26 41 34 40 Q42 41 42 46 L42 57 Q42 58 34 58 Q26 58 26 57 Z" fill="#1e1e30"/>\x27+
+    // Shirt
+    \x27<path d="M27 44 Q27 42 34 41 Q41 42 41 44 L42 58 L26 58 Z" fill="\x27+shirt+\x27"/>\x27+
+    \x27<path d="M27 44 Q27 42 34 41 L34 58 L26 58 Z" fill="rgba(0,0,0,.12)"/>\x27+
+    \x27<path d="M34 41 L31 46 L34 44.5 L37 46 Z" fill="\x27+skin+\x27ee"/>\x27+
+    // Arms
+    \x27<g \x27+armCls+\x27>\x27+
+    \x27<path d="M28 45 C24 47 22 50 21 53 C21 55 23 56 25 55 C27 54 27 52 28 49 Z" fill="\x27+shirt+\x27"/>\x27+
+    \x27<path d="M21 53 C19 55 18 57 18 59 C18 61 20 62 22 61 C24 60 24 58 25 55 Z" fill="\x27+skin+\x27"/>\x27+
+    \x27<ellipse cx="19" cy="60" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(-10 19 60)"/>\x27+
+    \x27<path d="M40 45 C44 47 46 50 47 53 C47 55 45 56 43 55 C41 54 41 52 40 49 Z" fill="\x27+shirt+\x27"/>\x27+
+    \x27<path d="M47 53 C49 55 50 57 50 59 C50 61 48 62 46 61 C44 60 44 58 43 55 Z" fill="\x27+skin+\x27"/>\x27+
+    \x27<ellipse cx="49" cy="60" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(10 49 60)"/>\x27+
+    \x27</g>\x27+
+    // Head
+    \x27<g \x27+headCls+\x27>\x27+
+    \x27<path d="M30 40 L38 40 L38 43 Q38 45 34 45 Q30 45 30 43 Z" fill="\x27+skin+\x27"/>\x27+
+    \x27<ellipse cx="34" cy="29" rx="11" ry="12.5" fill="\x27+skin+\x27"/>\x27+
+    \x27<path d="M23 28 C21 28 20 30 20 31.5 C20 33 21 34.5 23 34.5 C24 34.5 24.5 33.5 24 31.5 C24.5 29.5 24 28 23 28" fill="\x27+skin+\x27"/>\x27+
+    \x27<path d="M45 28 C47 28 48 30 48 31.5 C48 33 47 34.5 45 34.5 C44 34.5 43.5 33.5 44 31.5 C43.5 29.5 44 28 45 28" fill="\x27+skin+\x27"/>\x27+
+    \x27<path d="M23 28 C22 22 24 16 34 15 C44 16 46 22 45 28 C44 22 42 18 34 17 C26 18 24 22 23 28" fill="\x27+hair+\x27"/>\x27+
+    \x27<path d="M28 17 C30 15 33 15 36 16 C33 14 29 15 28 17" fill="rgba(255,255,255,.12)"/>\x27+
+    \x27<path d="M27 23 Q29.5 21.5 32 23" stroke="\x27+hair+\x27" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27+
+    \x27<path d="M36 23 Q38.5 21.5 41 23" stroke="\x27+hair+\x27" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27+
+    \x27<ellipse cx="30" cy="27.5" rx="3" ry="3.5" fill="#fff"/>\x27+
+    \x27<ellipse cx="38" cy="27.5" rx="3" ry="3.5" fill="#fff"/>\x27+
+    \x27<circle cx="30" cy="28" r="2.2" fill="#3d4a6b"/>\x27+
+    \x27<circle cx="38" cy="28" r="2.2" fill="#3d4a6b"/>\x27+
+    \x27<circle cx="30" cy="28" r="1.3" fill="#0a0a14"/>\x27+
+    \x27<circle cx="38" cy="28" r="1.3" fill="#0a0a14"/>\x27+
+    \x27<circle cx="31" cy="27" r=".8" fill="rgba(255,255,255,.9)"/>\x27+
+    \x27<circle cx="39" cy="27" r=".8" fill="rgba(255,255,255,.9)"/>\x27+
+    \x27<path d="M33 31 Q33 33 34 33.5 Q35 34 35 33 Q36 33 36 31" stroke="\x27+skin+\x27" stroke-width="1.1" fill="none" opacity=".7"/>\x27+
+    (isDone ?
+      \x27<path d="M29 37 Q34 42 39 37" stroke="#8b4513" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
+      \x27<path d="M30 37.5 Q34 41 38 37.5 Q34 40 30 37.5" fill="#fff" opacity=".8"/>\x27
+      :
+      \x27<path d="M30.5 37 Q34 38.5 37.5 37" stroke="#8b4513" stroke-width="1.4" fill="none" stroke-linecap="round"/>\x27
+    )+
+    \x27<circle cx="38.5" cy="48" r="5.5" fill="#0f0f1e" stroke="\x27+shirt+\x2780" stroke-width="1.2"/>\x27+
+    \x27<circle cx="38.5" cy="48" r="4" fill="#161622"/>\x27+
+    \x27<text x="38.5" y="51" text-anchor="middle" font-size="6">\x27+ico+\x27</text>\x27+
+    \x27</g>\x27+
+    (isDone ?
+      \x27<circle cx="67" cy="9" r="9" fill="#0a2010"/>\x27+
+      \x27<circle cx="67" cy="9" r="7" fill="#16a34a"/>\x27+
+      \x27<circle cx="67" cy="9" r="5.5" fill="#22c55e"/>\x27+
+      \x27<path d="M63 9 L66 12 L71 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>\x27
+      : \x27\x27)+
+    // Floating document icon when running (bobbing above desk)
+    (isActive ?
+      \x27<g class="prl-doc-hold" style="transform-origin:58px 10px">\x27+
+      \x27<path d="M52 4 L66 4 L69 7 L69 22 L52 22 Z" fill="#0d0d20" stroke="#6366f1" stroke-width="1.5"/>\x27+
+      \x27<path d="M66 4 L66 7 L69 7" fill="none" stroke="#6366f1" stroke-width="1"/>\x27+
+      \x27<line x1="55" y1="10" x2="66" y2="10" stroke="#6366f1ee" stroke-width=".9" stroke-linecap="round"/>\x27+
+      \x27<line x1="55" y1="13" x2="64" y2="13" stroke="#6366f1aa" stroke-width=".9" stroke-linecap="round"/>\x27+
+      \x27<line x1="55" y1="16" x2="65" y2="16" stroke="#6366f188" stroke-width=".9" stroke-linecap="round"/>\x27+
+      \x27</g>\x27
+      : \x27\x27)+
+    \x27</svg>\x27;
+  return svg;
+}
+
 function renderStudioNodes() {
   var el = document.getElementById('studioNodes');
   if (!el) return;
@@ -3415,37 +3548,96 @@ function renderStudioNodes() {
     el.innerHTML = '<div class="studio-canvas__empty"><div class="studio-canvas__empty-icon">&#9881;</div><div>Describe a task and click Run</div></div>';
     return;
   }
-  var html = '<div class="studio-nodes">';
+  // ── Full-scene office layout ──────────────────────────────────────────────
+  // Renders all pipeline nodes as agents at desks in a continuous office floor scene.
+  // Active agent types at keyboard. Done agents smile. Waiting agents idle.
+  // Orchestrator walks between desks scolding agents.
+  var hasActive = studioState.nodes.some(function(n){ return n.status === \x27running\x27; });
+  var hasDone = studioState.nodes.some(function(n){ return n.status === \x27done\x27; });
+  var showMaster = hasActive || hasDone;
+
+  // Build desks for each node
+  var desksHtml2 = \x27\x27;
   studioState.nodes.forEach(function(n, i) {
-    var cls = 'studio-node';
-    if (n.status === 'running') cls += ' studio-node--active';
-    else if (n.status === 'done') cls += ' studio-node--done';
-    else if (n.status === 'error') cls += ' studio-node--error';
-    var statusLabel = {waiting:'&#9711; wait', running:'&#9654; running', done:'&#10003; done', error:'&#10005; error'}[n.status] || '';
-    // Only animate nodes that haven't been rendered yet (first appearance)
-    var style = n._rendered ? '' : 'animation-delay:' + (i * 110) + 'ms';
-    html += '<div class="' + cls + '" data-agent-label="' + esc(n.label || n.agent) + '" style="' + style + ';cursor:pointer" onclick="studioScrollToAgent(this.getAttribute(String.fromCharCode(100,97,116,97,45,97,103,101,110,116,45,108,97,98,101,108)))" title="Vai al log di ' + esc(n.label || n.agent) + '">';
-    html += '<div class="studio-node__circle">' + n.icon + '</div>';
-    html += '<div class="studio-node__label">' + esc(n.label) + '</div>';
-    if (n.reason) {
-      html += '<div class="studio-node__reason" onclick="event.stopPropagation();this.classList.toggle(String.fromCharCode(111,112,101,110))" title="' + esc(n.reason) + '">&#x2139;<span class="studio-node__reason-tip">' + esc(n.reason) + '</span></div>';
-    }
-    html += '<div class="studio-node__status studio-node__status--' + n.status + '">' + statusLabel + '</div>';
-    if (n.status === 'running') {
-      html += '<div class="studio-node__progress"><span></span><span></span><span></span></div>';
-    }
-    html += '</div>';
-    if (i < studioState.nodes.length - 1) {
-      var next = studioState.nodes[i + 1];
-      var arrowCls = 'studio-arrow';
-      if (n.status === 'done' && next.status === 'running') arrowCls += ' studio-arrow--active';
-      else if (n.status === 'done') arrowCls += ' studio-arrow--done';
-      var arrowStyle = n._rendered ? '' : 'opacity:0;animation:stNodeIn .3s ease ' + (i * 110 + 55) + 'ms forwards';
-      html += '<div class="' + arrowCls + '" style="' + arrowStyle + '">&#8594;</div>';
-    }
+    var isActive = n.status === \x27running\x27;
+    var isDone = n.status === \x27done\x27;
+    var isErr = n.status === \x27error\x27;
+    desksHtml2 += \x27<div class="wf-desk\x27+(isActive?\x27 wf-desk--active\x27:\x27\x27)+(isDone?\x27 wf-desk--done\x27:\x27\x27)+(isErr?\x27 wf-desk--err\x27:\x27\x27)+\x27" data-agent-label="\x27+esc(n.label||n.agent)+\x27" onclick="studioScrollToAgent(this.getAttribute(String.fromCharCode(100,97,116,97,45,97,103,101,110,116,45,108,97,98,101,108)))" title="Vai al log di \x27+esc(n.label||n.agent)+\x27">\x27;
+    if (isActive) desksHtml2 += \x27<div class="prl-action-bubble prl-action-bubble--active" style="font-size:8px;padding:2px 6px">\u2026lavora</div>\x27;
+    else if (isDone) desksHtml2 += \x27<div class="prl-action-bubble" style="background:#0a2010;border-color:#22c55e;color:#4ade80;font-size:8px;padding:2px 6px">\u2714 fatto</div>\x27;
+    else if (isErr) desksHtml2 += \x27<div class="prl-action-bubble" style="background:#200a0a;border-color:#ef4444;color:#f87171;font-size:8px;padding:2px 6px">\u2715 errore</div>\x27;
+    desksHtml2 += buildWorkflowChar(n);
+    desksHtml2 += \x27<div class="wf-desk-name" style="color:\x27+(isDone?\x27#4ade80\x27:(isActive?\x27#a5b4fc\x27:(isErr?\x27#f87171\x27:\x27#6b7280\x27)))+\x27" title="\x27+esc(n.label)+\x27">\x27+esc(n.label)+\x27</div>\x27;
+    desksHtml2 += \x27</div>\x27;
     n._rendered = true;
   });
-  html += '</div>';
+
+  // ── Master orchestrator SVG (same as parliament) ───────────────────────────
+  var masterColor3 = \x27#818cf8\x27;
+  var masterSvg2 = \x27<svg viewBox="0 0 60 90" width="52" height="78" xmlns="http://www.w3.org/2000/svg" style="filter:drop-shadow(0 0 10px \x27+masterColor3+\x27aa)">\x27+
+    \x27<path d="M22 55 C21 63 19 72 18 77 C17 80 18 82 21 82 C23 82 24 80 24 77 C25 71 25 62 26 55 Z" fill="#1e1c4a" class="prl-master-leg-l"/>\x27+
+    \x27<path d="M28 55 C29 63 31 72 32 77 C33 80 32 82 29 82 C27 82 26 80 26 77 C25 71 25 62 24 55 Z" fill="#1e1c4a" class="prl-master-leg-r"/>\x27+
+    \x27<path d="M16 79 C14 79 13 81 14 83 C15 85 18 85 21 84 C23 83 24 82 23 80 C22 79 19 79 16 79" fill="#0a0a14"/>\x27+
+    \x27<path d="M34 79 C36 79 37 81 36 83 C35 85 32 85 29 84 C27 83 26 82 27 80 C28 79 31 79 34 79" fill="#0a0a14"/>\x27+
+    \x27<path d="M13 32 C12 30 15 27 25 25 C35 27 38 30 37 32 L38 55 L12 55 Z" fill="#252450"/>\x27+
+    \x27<path d="M13 32 C12 30 15 27 25 25 L25 55 L12 55 Z" fill="#1e1d44"/>\x27+
+    \x27<path d="M25 25 C35 27 38 30 37 32 L38 55 L25 55 Z" fill="#272660"/>\x27+
+    \x27<path d="M25 25 L19 33 L22 36 L25 29 Z" fill="#1a1940"/>\x27+
+    \x27<path d="M25 25 L31 33 L28 36 L25 29 Z" fill="#1a1940"/>\x27+
+    \x27<path d="M25 29 L22 36 L25 34 L28 36 Z" fill="#f0f0fa"/>\x27+
+    \x27<path d="M25 33 L24 44 L25 48 L26 44 Z" fill="\x27+masterColor3+\x27"/>\x27+
+    \x27<path d="M23.5 32 L26.5 32 L25 34 Z" fill="\x27+masterColor3+\x27"/>\x27+
+    \x27<path d="M33 35 L36 33 L37 36 L34 37 Z" fill="\x27+masterColor3+\x2799"/>\x27+
+    \x27<circle cx="25" cy="42" r="1.2" fill="\x27+masterColor3+\x27aa"/>\x27+
+    \x27<circle cx="20" cy="36" r="2.5" fill="#0d0d1e" stroke="\x27+masterColor3+\x2799" stroke-width="1"/>\x27+
+    \x27<text x="20" y="39" text-anchor="middle" font-size="4" fill="\x27+masterColor3+\x27">N</text>\x27+
+    \x27<g class="prl-master-arm-l">\x27+
+    \x27<path d="M13 34 C8 37 6 42 6 46 C6 49 9 50 11 49 C13 48 13 45 14 41 C15 38 14 35 13 34" fill="#252450"/>\x27+
+    \x27<path d="M6 46 C4 48 4 51 5 53 C6 55 9 55 10 53 C11 51 10 48 10 46 Z" fill="#d4a97a"/>\x27+
+    \x27<ellipse cx="7" cy="54" rx="4.5" ry="3.5" fill="#d4a97a" transform="rotate(-15 7 54)"/>\x27+
+    \x27</g>\x27+
+    \x27<g class="prl-master-arm-r">\x27+
+    \x27<path d="M37 34 C42 37 44 41 44 45 C44 48 41 49 39 48 C37 47 37 44 37 40 C37 37 37 35 37 34" fill="#252450"/>\x27+
+    \x27<path d="M44 44 C46 46 47 49 46 52 C45 54 42 54 41 52 C40 50 41 47 41 45 Z" fill="#d4a97a"/>\x27+
+    \x27<ellipse cx="45" cy="52" rx="4" ry="3" fill="#d4a97a" transform="rotate(15 45 52)"/>\x27+
+    \x27<rect x="43" y="32" width="14" height="19" rx="2.5" fill="#1a1a2e" stroke="\x27+masterColor3+\x2799" stroke-width="1.5"/>\x27+
+    \x27<rect x="47" y="30" width="6" height="5" rx="1.5" fill="\x27+masterColor3+\x27"/>\x27+
+    \x27<rect x="48" y="31" width="4" height="3" rx="1" fill="#0f0f1e"/>\x27+
+    \x27<line x1="46" y1="36" x2="54" y2="36" stroke="\x27+masterColor3+\x27cc" stroke-width="1"/>\x27+
+    \x27<line x1="46" y1="39" x2="54" y2="39" stroke="\x27+masterColor3+\x27aa" stroke-width="1"/>\x27+
+    \x27<line x1="46" y1="42" x2="54" y2="42" stroke="\x27+masterColor3+\x2788" stroke-width="1"/>\x27+
+    \x27</g>\x27+
+    \x27<path d="M22 25 L28 25 L28 29 Q28 31 25 31 Q22 31 22 29 Z" fill="#d4a97a"/>\x27+
+    \x27<ellipse cx="25" cy="15" rx="12" ry="13" fill="#d4a97a"/>\x27+
+    \x27<path d="M14 15 C14 22 18 26 25 27 C32 26 36 22 36 15" fill="#d4a97a"/>\x27+
+    \x27<path d="M13 13 C11 13 10 15 10 17 C10 19 11 20 13 20 C14 20 14.5 19 14 17 C14.5 15 14 13 13 13" fill="#d4a97a"/>\x27+
+    \x27<path d="M37 13 C39 13 40 15 40 17 C40 19 39 20 37 20 C36 20 35.5 19 36 17 C35.5 15 36 13 37 13" fill="#d4a97a"/>\x27+
+    \x27<path d="M13 14 C12 7 16 2 25 1 C34 2 38 7 37 14 C36 7 32 4 25 3 C18 4 14 7 13 14" fill="#1a0e08"/>\x27+
+    \x27<path d="M22 3 C21 4 21 6 22 8" stroke="rgba(255,255,255,.15)" stroke-width="1.5" fill="none"/>\x27+
+    \x27<path d="M16.5 11 Q19 9.5 21.5 11" stroke="#1a0e08" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
+    \x27<path d="M28.5 11 Q31 9.5 33.5 11" stroke="#1a0e08" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
+    \x27<ellipse cx="19.5" cy="14.5" rx="3.2" ry="3.5" fill="#fff"/>\x27+
+    \x27<ellipse cx="30.5" cy="14.5" rx="3.2" ry="3.5" fill="#fff"/>\x27+
+    \x27<circle cx="19.5" cy="15" r="2.3" fill="#1e3a6e"/>\x27+
+    \x27<circle cx="30.5" cy="15" r="2.3" fill="#1e3a6e"/>\x27+
+    \x27<circle cx="19.5" cy="15" r="1.3" fill="#0a0a18"/>\x27+
+    \x27<circle cx="30.5" cy="15" r="1.3" fill="#0a0a18"/>\x27+
+    \x27<circle cx="20.5" cy="13.7" r=".9" fill="rgba(255,255,255,.95)"/>\x27+
+    \x27<circle cx="31.5" cy="13.7" r=".9" fill="rgba(255,255,255,.95)"/>\x27+
+    \x27<path d="M19.5 24 Q25 27.5 30.5 24" stroke="#8b4513" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
+    \x27<path d="M20 24.5 Q25 27 30 24.5 Q25 26.5 20 24.5" fill="#fff" opacity=".7"/>\x27+
+    \x27<text x="25" y="-1" text-anchor="middle" font-size="12" style="filter:drop-shadow(0 0 4px \x27+masterColor3+\x27)">&#9830;</text>\x27+
+    \x27<circle cx="25" cy="-2" r="8" fill="none" stroke="\x27+masterColor3+\x2730" stroke-width="1.5"/>\x27+
+    \x27</svg>\x27;
+
+  var masterWfHtml = showMaster ? (\x27<div class="prl-master prl-master-walk wf-master">\x27+masterSvg2+\x27<div class="prl-master-label" style="color:\x27+masterColor3+\x27;font-size:8px">Orchestratore</div></div>\x27) : \x27\x27;
+
+  var html = \x27<div class="prl-office wf-office">\x27+
+    \x27<div class="prl-office-floor"></div>\x27+
+    \x27<div class="wf-desks-row">\x27+desksHtml2+\x27</div>\x27+
+    masterWfHtml+
+    \x27</div>\x27;
+
   el.innerHTML = html;
 }
 
@@ -4099,12 +4291,8 @@ async function runStudio() {
       studioState.nodes[i].tokensIn = stepResult.tokensIn || 0;
       studioState.nodes[i].tokensOut = stepResult.tokensOut || 0;
       studioLog(node.label, node.icon, realOutput || (stepResult.canvas ? '[Canvas report generated]' : '(done)'), 'agent', true);
-      // If CanvasAgent produced HTML, pre-load the frame but do NOT auto-open the panel.
-      // Auto-opening would cover the parliament animation block if parliament mode is active.
-      if (stepResult.canvas) {
-        var cf = document.getElementById('canvasFrame');
-        if (cf) cf.srcdoc = stepResult.canvas;
-      }
+      // allCanvasData already updated inside runStudioStep streaming handler.
+      // Keep _canvasFrameLoadedHtml in sync so openCanvasPanel knows what\x27s loaded.
       // Accumulate context: append each step's output so specialist agents see ALL previous data
       if (realOutput) {
         context = context
@@ -5003,12 +5191,23 @@ function runStudioStep(idx, node, task, context, stepDef, signal) {
               if (ev.canvas) {
                 canvasHtml = ev.canvas;
                 studioState.canvas = ev.canvas;
-                // Pre-load the canvas HTML into the frame but do NOT auto-open the panel —
-                // opening it mid-run would hide the parliament animation block from view.
-                // The user opens the canvas manually via the Canvas button.
-                var cf2 = document.getElementById('canvasFrame');
+                // Store in allCanvasData so openCanvasPanel() finds it reliably
+                // (studioState.canvas can be stale if session is restored from localStorage)
+                var _cid = activeConvId || \x27_default\x27;
+                if (!allCanvasData[_cid]) allCanvasData[_cid] = {canvases:[], browsers:[]};
+                // Replace last studio canvas if it exists, otherwise push
+                var _cd = allCanvasData[_cid];
+                var _existIdx = _cd.canvases.findIndex(function(c){ return c.title === \x27Studio Report\x27; });
+                var _citem = {html: ev.canvas, title: \x27Studio Report\x27, ts: new Date().toLocaleTimeString()};
+                if (_existIdx >= 0) { _cd.canvases[_existIdx] = _citem; canvasIdx = _existIdx; }
+                else { _cd.canvases.push(_citem); canvasIdx = _cd.canvases.length - 1; }
+                canvasMode = \x27canvas\x27;
+                // Pre-load the canvas HTML into the frame tracker — do NOT open the panel
+                // (opening mid-run would hide the parliament animation block).
+                _canvasFrameLoadedHtml = ev.canvas;
+                var cf2 = document.getElementById(\x27canvasFrame\x27);
                 if (cf2) cf2.srcdoc = canvasHtml;
-                var scb = document.getElementById('studioCanvasBtn');
+                var scb = document.getElementById(\x27studioCanvasBtn\x27);
                 if (scb) {
                   scb.style.display = \x27\x27;
                   scb.style.background = \x27var(--greendim)\x27;
@@ -5723,6 +5922,18 @@ 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}
+/* ── Workflow scene (office layout, replaces cramped pill nodes) ── */
+.studio-canvas{background:none!important;border:none!important;padding:0!important;margin-bottom:0!important}
+#studioNodes .prl-office{border-radius:10px;border:1px solid var(--border);background:var(--bg2);margin-bottom:16px;min-height:200px;padding:16px 12px 8px;position:relative;overflow:visible}
+.wf-office{display:block}
+.wf-desks-row{display:flex;align-items:flex-end;justify-content:center;gap:6px;flex-wrap:wrap;padding-bottom:10px}
+.wf-desk{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:opacity .2s}
+.wf-desk:hover{opacity:.85}
+.wf-desk--active{filter:drop-shadow(0 0 8px #6366f188)}
+.wf-desk--done{filter:drop-shadow(0 0 6px #22c55e55)}
+.wf-desk--err{filter:drop-shadow(0 0 6px #ef444455)}
+.wf-desk-name{font-size:9px;font-weight:600;text-align:center;max-width:88px;word-break:break-word;line-height:1.3;padding:0 2px;margin-top:2px}
+.wf-master{position:absolute;bottom:28px;right:16px}
 /* ── Parliament Office Cartoon ── */
 .prl-wrap{background:#07070f;border:1.5px solid #6366f1;border-radius:14px;padding:14px 16px 12px;margin-bottom:16px;animation:stNodeIn .35s ease forwards;overflow:hidden}
 #studioParliamentBlock[style*="sticky"] .prl-wrap{animation:stNodeIn .35s ease forwards,parlPulse 2.2s ease-in-out infinite}