nothumanallowed 13.5.9 → 13.5.11

package/package.json

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

package/src/services/web-ui.mjs

@@ -3781,121 +3781,58 @@ function isoDeskSvg(x, y, accentColor) {
     \x27</svg>\x27;
 }
 // Isometric JRPG sprite character — top-down 3/4 perspective, Pokemon-style
+// Agent emojis — rotate through professional/diverse set
+var AGENT_EMOJIS = [
+  String.fromCodePoint(0x1F9D1,0x200D,0x1F4BB), // person at laptop
+  String.fromCodePoint(0x1F469,0x200D,0x1F4BC), // woman office worker
+  String.fromCodePoint(0x1F468,0x200D,0x1F4BC), // man office worker
+  String.fromCodePoint(0x1F9D1,0x200D,0x1F52C), // scientist
+  String.fromCodePoint(0x1F469,0x200D,0x1F4BB), // woman technologist
+  String.fromCodePoint(0x1F468,0x200D,0x1F4BB), // man technologist
+  String.fromCodePoint(0x1F9D1,0x200D,0x1F3A8), // artist
+  String.fromCodePoint(0x1F9D1,0x200D,0x2696,0xFE0F), // judge
+];
+
 function isoCharSvg(opts) {
-  var skin = opts.skin || \x27#fbbf24\x27;
-  var shirt = opts.shirt || \x27#4f46e5\x27;
-  var hair = opts.hair || \x27#1a0e08\x27;
   var isActive = opts.isActive;
   var isDone = opts.isDone;
   var scale = opts.scale || 1;
-  var glow = isActive ? (\x27filter:drop-shadow(0 0 6px \x27+(opts.accentColor||shirt)+\x27)\x27) : (isDone ? \x27filter:drop-shadow(0 0 4px #22c55e44)\x27 : \x27\x27);
-  var armCls = isActive ? \x27class="prl-arm"\x27 : \x27\x27;
-  var headCls = isActive ? \x27class="prl-head"\x27 : \x27\x27;
-  var w = Math.round(48 * scale); var h = Math.round(64 * scale);
-  return \x27<svg viewBox="0 0 48 64" width="\x27+w+\x27" height="\x27+h+\x27" xmlns="http://www.w3.org/2000/svg" style="\x27+glow+\x27;display:block;overflow:visible">\x27+
-    // Shadow beneath character
-    \x27<ellipse cx="24" cy="62" rx="\x27+(11*scale)+\x27" ry="\x27+(4*scale)+\x27" fill="rgba(0,0,0,.3)"/>\x27+
-    // Legs
-    \x27<path d="M18 42 C17 50 16 56 15 60 C14 62 17 63 19 62 C21 61 21 56 21 50 L21 42 Z" fill="\x27+shirt+\x27cc" class="prl-master-leg-l"/>\x27+
-    \x27<path d="M24 42 C25 50 26 56 27 60 C28 62 25 63 23 62 C21 61 21 56 21 50 L21 42 Z" fill="\x27+shirt+\x27cc" class="prl-master-leg-r"/>\x27+
-    // Shoes
-    \x27<ellipse cx="16" cy="62" rx="4" ry="2" fill="#1a0e04" transform="rotate(-10 16 62)"/>\x27+
-    \x27<ellipse cx="26" cy="62" rx="4" ry="2" fill="#1a0e04" transform="rotate(10 26 62)"/>\x27+
-    // Body
-    \x27<rect x="13" y="26" width="20" height="18" rx="3" fill="\x27+shirt+\x27"/>\x27+
-    \x27<rect x="13" y="26" width="10" height="18" rx="3" fill="rgba(0,0,0,.1)"/>\x27+
-    // Collar
-    \x27<path d="M21 26 L18 30 L21 28 L24 30 Z" fill="\x27+skin+\x27"/>\x27+
-    // Arms
-    \x27<g \x27+armCls+\x27>\x27+
-    \x27<path d="M13 28 C8 30 6 35 6 39 C6 42 9 43 11 42 C13 41 13 37 14 33 Z" fill="\x27+shirt+\x27"/>\x27+
-    \x27<ellipse cx="7" cy="41" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(-15 7 41)"/>\x27+
-    \x27<path d="M33 28 C38 30 40 35 40 39 C40 42 37 43 35 42 C33 41 33 37 32 33 Z" fill="\x27+shirt+\x27"/>\x27+
-    \x27<ellipse cx="39" cy="41" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(15 39 41)"/>\x27+
-    \x27</g>\x27+
-    // Head
-    \x27<g \x27+headCls+\x27>\x27+
-    \x27<ellipse cx="21" cy="13" rx="11" ry="12" fill="\x27+skin+\x27"/>\x27+
-    \x27<path d="M10 13 C10 6 14 1 21 0 C28 1 32 6 32 13 C31 7 28 4 21 3 C14 4 11 7 10 13" fill="\x27+hair+\x27"/>\x27+
-    \x27<circle cx="16" cy="14" r="1.5" fill="#0a0a14"/>\x27+
-    \x27<circle cx="26" cy="14" r="1.5" fill="#0a0a14"/>\x27+
-    \x27<circle cx="16.7" cy="13" r=".7" fill="rgba(255,255,255,.9)"/>\x27+
-    (isDone ?
-      \x27<path d="M15 20 Q21 24 27 20" stroke="#8b4513" stroke-width="1.5" fill="none" stroke-linecap="round"/>\x27+
-      \x27<path d="M16 20.5 Q21 23 26 20.5 Q21 22 16 20.5" fill="#fff" opacity=".6"/>\x27
-      : isActive ?
-      \x27<path d="M15 19 Q21 21 27 19" stroke="#8b4513" stroke-width="1.4" fill="none" stroke-linecap="round"/>\x27
-      :
-      \x27<path d="M16 20 Q21 22 26 20" stroke="#8b4513" stroke-width="1.2" fill="none" stroke-linecap="round"/>\x27
-    )+
-    \x27</g>\x27+
-    \x27</svg>\x27;
+  var accentColor = opts.accentColor || \x27#6366f1\x27;
+  var idx = opts.emojiIdx;
+  // idx === 99 means orchestrator — use crown+suit combo
+  var emoji = (idx === 99)
+    ? (String.fromCodePoint(0x1F451) + String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC))
+    : AGENT_EMOJIS[(idx || 0) % AGENT_EMOJIS.length];
+  var sz = Math.round(52 * scale);
+  var glowColor = isActive ? accentColor : (isDone ? \x27#22c55e\x27 : \x27transparent\x27);
+  var glowFilter = (isActive || isDone) ? (\x27filter:drop-shadow(0 0 8px \x27+glowColor+\x27aa)\x27) : \x27\x27;
+  var badgeHtml = isDone
+    ? \x27<div style="position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;box-shadow:0 0 6px #22c55e88">&#10003;</div>\x27
+    : (isActive
+        ? \x27<div style="position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:\x27+accentColor+\x27;border-radius:50%;animation:statusPulse 1s ease-in-out infinite;box-shadow:0 0 8px \x27+accentColor+\x27"></div>\x27
+        : \x27\x27);
+  var ringStyle = isActive
+    ? (\x27outline:2.5px solid \x27+accentColor+\x27;box-shadow:0 0 16px \x27+accentColor+\x27AA\x27)
+    : (isDone ? \x27outline:2px solid #22c55e88\x27 : \x27outline:none\x27);
+  var animClass = isActive ? \x27 prl-head\x27 : \x27\x27;
+  return \x27<div class="iso-char-wrap\x27+animClass+\x27" style="position:relative;display:inline-flex;align-items:center;justify-content:center;width:\x27+sz+\x27px;height:\x27+sz+\x27px;border-radius:50%;background:rgba(255,255,255,.15);\x27+ringStyle+\x27;\x27+glowFilter+\x27;transition:all .3s">\x27+
+    \x27<span style="font-size:\x27+Math.round(36*scale)+\x27px;line-height:1;user-select:none">\x27+emoji+\x27</span>\x27+
+    badgeHtml+
+    \x27</div>\x27;
 }
-// Orchestrator — bigger, crowned, JRPG boss sprite
+// Orchestrator — emoji-based, crowned
 function isoOrchSvg(hasActive, doneRatio) {
-  var mc = \x27#818cf8\x27;
-  var armCls = hasActive ? \x27class="prl-master-arm-l"\x27 : \x27\x27;
-  var armRCls = hasActive ? \x27class="prl-master-arm-r"\x27 : \x27\x27;
-  return \x27<svg viewBox="0 0 60 80" width="58" height="76" xmlns="http://www.w3.org/2000/svg" style="display:block;overflow:visible;filter:drop-shadow(0 0 10px \x27+mc+\x27aa)">\x27+
-    // Shadow
-    \x27<ellipse cx="30" cy="78" rx="16" ry="5" fill="rgba(0,0,0,.4)"/>\x27+
-    // Legs
-    \x27<path d="M24 52 C23 60 22 67 21 72 C20 75 22 76 24 76 C26 76 27 74 27 71 C28 65 28 58 28 52 Z" fill="#1e1c4a" class="prl-master-leg-l"/>\x27+
-    \x27<path d="M30 52 C31 60 32 67 33 72 C34 75 32 76 30 76 C28 76 27 74 27 71 C26 65 26 58 26 52 Z" fill="#1e1c4a" class="prl-master-leg-r"/>\x27+
-    // Shoes
-    \x27<ellipse cx="20" cy="74" rx="5" ry="2.5" fill="#0a0a14" transform="rotate(-8 20 74)"/>\x27+
-    \x27<ellipse cx="34" cy="74" rx="5" ry="2.5" fill="#0a0a14" transform="rotate(8 34 74)"/>\x27+
-    // Suit body
-    \x27<path d="M14 32 C13 30 16 27 27 25 C38 27 41 30 40 32 L41 52 L13 52 Z" fill="#252464"/>\x27+
-    \x27<path d="M14 32 C13 30 16 27 27 25 L27 52 L13 52 Z" fill="#1e1d52"/>\x27+
-    \x27<path d="M27 25 C38 27 41 30 40 32 L41 52 L27 52 Z" fill="#2a2870"/>\x27+
-    // Lapels
-    \x27<path d="M27 25 L21 33 L24 36 L27 29 Z" fill="#1a1940"/>\x27+
-    \x27<path d="M27 25 L33 33 L30 36 L27 29 Z" fill="#1a1940"/>\x27+
-    \x27<path d="M27 29 L24 36 L27 34 L30 36 Z" fill="#f0f0fa"/>\x27+
-    // Tie
-    \x27<path d="M27 33 L26 44 L27 48 L28 44 Z" fill="\x27+mc+\x27"/>\x27+
-    // Arms
-    \x27<g \x27+armCls+\x27 style="transform-origin:14px 35px">\x27+
-    \x27<path d="M14 35 C8 38 5 44 5 48 C5 51 8 52 10 51 C12 50 13 46 14 42 C15 39 14 36 14 35" fill="#252450"/>\x27+
-    \x27<ellipse cx="6" cy="51" rx="5" ry="3.5" fill="#d4a97a" transform="rotate(-15 6 51)"/>\x27+
-    \x27</g>\x27+
-    \x27<g \x27+armRCls+\x27 style="transform-origin:40px 35px">\x27+
-    \x27<path d="M40 35 C46 38 49 43 49 47 C49 50 46 51 44 50 C42 49 41 45 40 41 C39 38 40 36 40 35" fill="#252450"/>\x27+
-    // Clipboard
-    \x27<rect x="46" y="30" width="12" height="16" rx="2" fill="#1a1a2e" stroke="\x27+mc+\x2799" stroke-width="1.2"/>\x27+
-    \x27<rect x="49" y="28" width="6" height="4" rx="1" fill="\x27+mc+\x27"/>\x27+
-    \x27<line x1="48" y1="34" x2="56" y2="34" stroke="\x27+mc+\x27cc" stroke-width=".9"/>\x27+
-    \x27<line x1="48" y1="37" x2="56" y2="37" stroke="\x27+mc+\x27aa" stroke-width=".9"/>\x27+
-    \x27<line x1="48" y1="40" x2="54" y2="40" stroke="\x27+mc+\x2788" stroke-width=".9"/>\x27+
-    \x27</g>\x27+
-    // Neck
-    \x27<rect x="24" y="25" width="6" height="5" rx="2" fill="#d4a97a"/>\x27+
-    // Head
-    \x27<ellipse cx="27" cy="14" rx="13" ry="13" fill="#d4a97a"/>\x27+
-    \x27<path d="M14 14 C14 20 18 24 27 25 C36 24 40 20 40 14" fill="#d4a97a"/>\x27+
-    // Hair
-    \x27<path d="M14 14 C13 7 17 2 27 1 C37 2 41 7 40 14 C39 7 35 4 27 3 C19 4 15 7 14 14" fill="#1a0e08"/>\x27+
-    // Eyes
-    \x27<ellipse cx="22" cy="15" rx="3" ry="3.5" fill="#fff"/>\x27+
-    \x27<ellipse cx="32" cy="15" rx="3" ry="3.5" fill="#fff"/>\x27+
-    \x27<circle cx="22" cy="15.5" r="2" fill="#1e3a6e"/>\x27+
-    \x27<circle cx="32" cy="15.5" r="2" fill="#1e3a6e"/>\x27+
-    \x27<circle cx="22" cy="15.5" r="1.2" fill="#0a0a18"/>\x27+
-    \x27<circle cx="32" cy="15.5" r="1.2" fill="#0a0a18"/>\x27+
-    \x27<circle cx="23" cy="14" r=".8" fill="rgba(255,255,255,.9)"/>\x27+
-    (hasActive ?
-      \x27<path d="M21 21 Q27 25 33 21" stroke="#8b4513" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
-      \x27<ellipse cx="27" cy="22.5" rx="3.5" ry="2" fill="#5a1a0a" opacity=".6"/>\x27
-      :
-      \x27<path d="M21 22 Q27 25 33 22" stroke="#8b4513" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27
-    )+
-    // Crown
-    \x27<path d="M17 4 L20 9 L27 6 L34 9 L37 4 L27 1 Z" fill="#f59e0b"/>\x27+
-    \x27<circle cx="20" cy="9" r="2" fill="#fbbf24"/>\x27+
-    \x27<circle cx="27" cy="6" r="2" fill="#fbbf24"/>\x27+
-    \x27<circle cx="34" cy="9" r="2" fill="#fbbf24"/>\x27+
-    \x27</svg>\x27;
+  void doneRatio;
+  var orchEmoji = String.fromCodePoint(0x1F9D1, 0x200D, 0x1F4BC); // person in suit
+  var glowColor = hasActive ? \x27#818cf8\x27 : \x27#22c55e\x27;
+  var animClass = hasActive ? \x27 prl-head\x27 : \x27\x27;
+  var crown = String.fromCodePoint(0x1F451); // crown emoji above
+  return \x27<div class="iso-orch-wrap\x27+animClass+\x27" style="position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px">\x27+
+    \x27<span style="font-size:18px;line-height:1">\x27+crown+\x27</span>\x27+
+    \x27<div style="position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:rgba(99,102,241,.15);outline:3px solid \x27+glowColor+\x27;box-shadow:0 0 20px \x27+glowColor+\x27AA">\x27+
+      \x27<span style="font-size:42px;line-height:1;user-select:none">\x27+orchEmoji+\x27</span>\x27+
+    \x27</div>\x27+
+    \x27</div>\x27;
 }
 
 // Skin/shirt/hair palette per agent label
@@ -3907,6 +3844,61 @@ function agentPalette(lbl) {
   return {skin: skins[i], shirt: shirts[i], hair: hairs[i]};
 }
 
+// Tool emoji map — specific icon per agent/tool type, fallback to default
+var TOOL_EMOJI_MAP = {
+  websearch: String.fromCodePoint(0x1F50D),
+  search: String.fromCodePoint(0x1F50D),
+  browser: String.fromCodePoint(0x1F310),
+  email: String.fromCodePoint(0x1F4E7),
+  gmail: String.fromCodePoint(0x1F4E7),
+  calendar: String.fromCodePoint(0x1F4C5),
+  github: String.fromCodePoint(0x1F431),
+  notion: String.fromCodePoint(0x1F4D3),
+  slack: String.fromCodePoint(0x1F4AC),
+  data: String.fromCodePoint(0x1F4CA),
+  analyst: String.fromCodePoint(0x1F4CA),
+  writer: String.fromCodePoint(0x270F,0xFE0F),
+  summary: String.fromCodePoint(0x1F4CB),
+  research: String.fromCodePoint(0x1F52C),
+  canvas: String.fromCodePoint(0x1F3A8),
+  security: String.fromCodePoint(0x1F6E1,0xFE0F),
+  devops: String.fromCodePoint(0x2699,0xFE0F),
+  code: String.fromCodePoint(0x1F4BB),
+  file: String.fromCodePoint(0x1F4C2),
+  drive: String.fromCodePoint(0x1F4BE),
+  maps: String.fromCodePoint(0x1F5FA,0xFE0F),
+  voice: String.fromCodePoint(0x1F3A4),
+  pdf: String.fromCodePoint(0x1F4DC),
+  document: String.fromCodePoint(0x1F4DC),
+  task: String.fromCodePoint(0x2705),
+  contacts: String.fromCodePoint(0x1F4F1),
+  reminder: String.fromCodePoint(0x23F0),
+  news: String.fromCodePoint(0x1F4F0),
+  image: String.fromCodePoint(0x1F5BC,0xFE0F),
+  video: String.fromCodePoint(0x1F3AC),
+  music: String.fromCodePoint(0x1F3B5),
+  translate: String.fromCodePoint(0x1F30D),
+  math: String.fromCodePoint(0x1F9EE),
+  sql: String.fromCodePoint(0x1F5C4,0xFE0F),
+  api: String.fromCodePoint(0x1F517),
+  test: String.fromCodePoint(0x1F9EA),
+  monitor: String.fromCodePoint(0x1F4F6),
+  _default: String.fromCodePoint(0x1F527) // wrench as fallback
+};
+
+function getNodeEmoji(n) {
+  var lbl = (n.label || n.agent || '').toLowerCase();
+  var icon = n.icon || '';
+  // Check by label keywords
+  var keys = Object.keys(TOOL_EMOJI_MAP);
+  for (var ki = 0; ki < keys.length; ki++) {
+    if (keys[ki] !== '_default' && lbl.indexOf(keys[ki]) >= 0) return TOOL_EMOJI_MAP[keys[ki]];
+  }
+  // If icon looks like an emoji code point (not HTML entity), use it
+  if (icon && icon.length > 0 && icon.charCodeAt(0) > 127) return icon;
+  return TOOL_EMOJI_MAP._default;
+}
+
 function renderStudioNodes() {
   var el = document.getElementById('studioNodes');
   if (!el) return;
@@ -3921,78 +3913,170 @@ function renderStudioNodes() {
   var totalCount = nodes.length;
   var showMaster = hasActive || doneCount > 0;
 
-  // ── ISO scene dimensions ───────────────────────────────────────────────────
-  var ISO_COLS = Math.max(nodes.length, 1);
-  var SCENE_W = 640; var SCENE_H = 420;
+  var phaseLabel2 = hasActive
+    ? (\x27Workflow in esecuzione \u2014 \x27+doneCount+\x27/\x27+totalCount)
+    : (doneCount===totalCount && totalCount>0 ? \x27Workflow completato\x27 : \x27Workflow pianificato\x27);
+  var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#22c55e\x27 : \x27#6b7280\x27);
+
+  // ── Layout: all nodes + orchestrator on a grid ────────────────────────────
+  // Include orchestrator as first "station" (desk 0), then all agents
+  // Total stations = nodes.length + 1 (orchestrator)
+  var totalStations = totalCount + 1;
+  // Grid: up to 3 per row, rows fill downward
+  var cols = Math.min(totalStations, 3);
+  var rows = Math.ceil(totalStations / cols);
+
+  // Scene: square, 100% width of parent, dynamic height based on grid rows
+  // Each cell = 160px wide, 180px tall
+  var CELL_W = 160; var CELL_H = 180;
+  var SCENE_W = cols * CELL_W + 40; // +padding
+  var SCENE_H = Math.max(rows * CELL_H + 80, 400);
+
+  // Plant emoji for decoration corners
+  var plantEmoji = String.fromCodePoint(0x1F331); // seedling
+  var bigPlant = String.fromCodePoint(0x1FAB4);   // potted plant
+
+  // ── Build station HTML ───────────────────────────────────────────────────
+  var stationsHtml = \x27\x27;
+
+  // Station builder — shared for orchestrator and agents
+  function buildStation(stationIdx, label, emoji, toolEmoji, isOrch, isActive, isDone, isErr, idx) {
+    var col = stationIdx % cols;
+    var row2 = Math.floor(stationIdx / cols);
+    var left = 20 + col * CELL_W + CELL_W/2;
+    var top = 30 + row2 * CELL_H;
+    var zIdx = 100 + row2 * 10 + col;
+    var accentColor = isOrch ? \x27#818cf8\x27 : (isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : (isErr ? \x27#ef4444\x27 : \x27#aaa\x27)));
+
+    // Desk — isometric CSS box using borders
+    var deskHtml = \x27<div class="iso-desk" style="--dc:\x27+accentColor+\x27"></div>\x27;
+
+    // Monitor — small box on desk
+    var monHtml = \x27<div class="iso-monitor" style="border-color:\x27+accentColor+\x2788">\x27+
+      \x27<div class="iso-monitor-screen">\x27+(isOrch?\x27<span style="font-size:10px">&#128269;</span>\x27:(isDone?\x27<span style="color:#22c55e;font-size:10px">&#10003;</span>\x27:(isActive?\x27<span class="iso-monitor-blink"></span>\x27:\x27<span style="font-size:9px;opacity:.4">&#9632;</span>\x27)))+\x27</div>\x27+
+      \x27</div>\x27;
+
+    // Tool badge — the emoji representing what this node does
+    var toolBadge = \x27<div class="iso-tool-badge" title="\x27+esc(label)+\x27">\x27+toolEmoji+\x27</div>\x27;
+
+    // Agent/tool character emoji
+    var charEmojiHtml = isoCharSvg({emojiIdx: isOrch ? 99 : idx, isActive: isActive, isDone: isDone, scale: 1, accentColor: accentColor});
+
+    // Status bubble
+    var bubbleText = isOrch
+      ? (hasActive ? (\x27Step \x27+doneCount+\x27/\x27+totalCount) : ((!hasActive && doneCount===totalCount && totalCount>0) ? \x27Completato!\x27 : \x27In attesa\x27))
+      : (isActive ? \x27...lavora\x27 : (isDone ? \x27\u2714 fatto\x27 : (isErr ? \x27\u2715 errore\x27 : \x27\x27)));
+    var bubbleColor = isOrch ? \x27#818cf8\x27 : (isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : \x27#ef4444\x27));
+    var bubbleHtml = (bubbleText || isOrch)
+      ? \x27<div class="iso-bubble\x27+(isActive?\x27 iso-bubble--active\x27:\x27\x27)+\x27" id="isobubble_\x27+(isOrch?\x27orch\x27:idx)+\x27" style="border-color:\x27+bubbleColor+\x27;color:\x27+bubbleColor+\x27">\x27+esc(bubbleText)+\x27</div>\x27
+      : \x27<div style="height:22px"></div>\x27;
+
+    // Name badge
+    var nameColor = isDone ? \x27#16a34a\x27 : (isActive ? \x27#6366f1\x27 : (isOrch ? \x27#818cf8\x27 : (isErr ? \x27#dc2626\x27 : \x27#374151\x27)));
+    var nameBg = isDone ? \x27#dcfce7\x27 : (isActive ? \x27#ede9fe\x27 : (isOrch ? \x27#e0e7ff\x27 : \x27#f3f4f6\x27));
+    var nameHtml = \x27<div class="iso-name" style="color:\x27+nameColor+\x27;background:\x27+nameBg+\x27">\x27+(isOrch?\x27\u2666 \x27:\x27\x27)+esc(label.slice(0,18))+\x27</div>\x27;
+
+    // Orchestrator walk animation — walks between desks horizontally
+    var orchWalkStyle = \x27\x27;
+    if (isOrch && hasActive) {
+      var activeIdx = nodes.findIndex(function(nd){return nd.status===\x27running\x27;});
+      if (activeIdx >= 0) {
+        var targetStation = activeIdx + 1; // station index of active agent (orch is 0)
+        var targetCol = targetStation % cols;
+        var targetRow = Math.floor(targetStation / cols);
+        var targetLeft = 20 + targetCol * CELL_W + CELL_W/2;
+        var targetTop = 30 + targetRow * CELL_H;
+        orchWalkStyle = \x27--orch-tx:\x27+(targetLeft - left)+\x27px;--orch-ty:\x27+(targetTop - top)+\x27px\x27;
+      }
+    }
+    var orchClass = (isOrch && hasActive) ? \x27 iso-orch-walking\x27 : (isOrch && !hasActive && doneCount===totalCount && totalCount>0 ? \x27 iso-orch-done\x27 : \x27\x27);
+
+    var clickHandler = isOrch ? \x27\x27 : \x27onclick="studioScrollToAgent(this.getAttribute(String.fromCharCode(100,97,116,97,45,97,103,101,110,116,45,108,97,98,101,108)))"\x27;
+    var dataAttr = isOrch ? \x27\x27 : \x27data-agent-label="\x27+esc(label)+\x27"\x27;
+
+    return \x27<div class="iso-station\x27+orchClass+\x27" \x27+dataAttr+\x27 style="position:absolute;left:\x27+left+\x27px;top:\x27+top+\x27px;z-index:\x27+zIdx+\x27;transform:translateX(-50%);\x27+orchWalkStyle+\x27" \x27+clickHandler+\x27>\x27+
+      bubbleHtml+
+      toolBadge+
+      charEmojiHtml+
+      deskHtml+
+      monHtml+
+      nameHtml+
+      \x27</div>\x27;
+  }
+
+  // Orchestrator station (index 0)
+  var orchIsActive2 = hasActive;
+  var orchDone2 = !hasActive && doneCount === totalCount && totalCount > 0;
+  stationsHtml += buildStation(0, \x27Orchestratore\x27, String.fromCodePoint(0x1F451), String.fromCodePoint(0x1F4CB), true, orchIsActive2, orchDone2, false, -1);
 
-  var agentsHtml = \x27\x27;
+  // Agent/tool stations (index 1..N)
   nodes.forEach(function(n, idx) {
     var isActive = n.status === \x27running\x27;
     var isDone = n.status === \x27done\x27;
     var isErr = n.status === \x27error\x27;
     var lbl = n.label || n.agent;
-    var pal = agentPalette(lbl);
-    var accentColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : (isErr ? \x27#ef4444\x27 : \x27#999\x27));
-
-    // Spread agents evenly across front rows
-    var colStep = ISO_COLS > 1 ? 5 / (ISO_COLS - 1) : 2;
-    var col = (ISO_COLS === 1) ? 2.5 : idx * colStep;
-    var row = 3.5;
-    var pos = isoProject(col, row);
-    var px = pos.x; var py = pos.y + 80;
-    var charScale = 1.1;
-    var zIdx = Math.round(py + 100);
-
-    // Bubble: only show when active (live text) or done (checkmark)
-    var bubbleText = isActive ? \x27...lavora\x27 : (isDone ? \x27\u2714 fatto\x27 : (isErr ? \x27\u2715 errore\x27 : \x27\x27));
-    var bubbleColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : \x27#ef4444\x27);
-    var charSvg = isoCharSvg({skin: pal.skin, shirt: pal.shirt, hair: pal.hair,
-      isActive: isActive, isDone: isDone, scale: charScale, accentColor: accentColor});
-    var charW = Math.round(48 * charScale); var charH = Math.round(64 * charScale);
-
-    agentsHtml += \x27<div class="iso-agent" data-agent-label="\x27+esc(lbl)+\x27" style="position:absolute;left:\x27+(px-charW/2)+\x27px;top:\x27+(py-charH)+\x27px;z-index:\x27+zIdx+\x27;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer" onclick="studioScrollToAgent(this.getAttribute(String.fromCharCode(100,97,116,97,45,97,103,101,110,116,45,108,97,98,101,108)))">\x27;
-    // Bubble — bigger, left-aligned (no mirror issue)
-    if (bubbleText || isActive) {
-      agentsHtml += \x27<div class="iso-bubble\x27+(isActive?\x27 iso-bubble--active\x27:\x27\x27)+\x27" id="isobubble_\x27+idx+\x27" style="border-color:\x27+bubbleColor+\x27;color:\x27+bubbleColor+\x27;min-width:80px;max-width:140px;font-size:10px;padding:4px 10px;text-align:left">\x27+esc(bubbleText)+\x27</div>\x27;
-    } else {
-      agentsHtml += \x27<div class="iso-bubble" id="isobubble_\x27+idx+\x27" style="visibility:hidden;min-width:80px"></div>\x27;
-    }
-    agentsHtml += charSvg;
-    agentsHtml += \x27<div class="iso-name" style="font-size:10px;font-weight:700;color:\x27+(isDone?\x27#22c55e\x27:(isActive?\x27#818cf8\x27:(isErr?\x27#ef4444\x27:\x27#555\x27)))+\x27;text-shadow:0 1px 3px rgba(255,255,255,.8)">\x27+esc(lbl)+\x27</div>\x27;
-    // Desk — lighter wood color for bright office
-    agentsHtml += isoDeskSvg(px, py - charH/2, accentColor);
-    agentsHtml += \x27</div>\x27;
+    var toolEmoji = getNodeEmoji(n);
+    stationsHtml += buildStation(idx + 1, lbl, AGENT_EMOJIS[idx % AGENT_EMOJIS.length], toolEmoji, false, isActive, isDone, isErr, idx);
   });
 
-  // ── Orchestrator ──────────────────────────────────────────────────────────
-  var orchHtml = \x27\x27;
-  if (showMaster) {
-    var oPh = isoProject(ISO_COLS / 2 + 0.5, 1.2);
-    var orchDone = !hasActive && doneCount === totalCount;
-    var orchAnim = hasActive ? \x27prl-master-walk\x27 : (orchDone ? \x27prl-master-done\x27 : \x27\x27);
-    var orchStatus = hasActive
-      ? (\x27Step \x27+doneCount+\x27/\x27+totalCount)
-      : (orchDone ? \x27Completato!\x27 : \x27Pianificazione\x27);
-    orchHtml = \x27<div class="prl-master \x27+orchAnim+\x27" id="wfOrch" style="position:absolute;left:\x27+(oPh.x-28)+\x27px;top:\x27+(oPh.y+60)+\x27px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:3px">\x27+
-      \x27<div class="iso-bubble iso-bubble--orch" id="wfOrchBubble" style="border-color:#6366f1;color:#6366f1;max-width:140px;font-size:10px;padding:4px 10px">\x27+esc(orchStatus)+\x27</div>\x27+
-      isoOrchSvg(hasActive, doneCount / Math.max(totalCount,1))+
-      \x27<div class="prl-master-label" style="color:#6366f1;font-size:9px;font-weight:700;text-shadow:0 1px 3px rgba(255,255,255,.8)">Orchestratore</div>\x27+
-      \x27</div>\x27;
-  }
+  // ── Decorations: plants + door ───────────────────────────────────────────
+  var decoHtml =
+    \x27<div style="position:absolute;bottom:8px;left:8px;font-size:32px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))">\x27+bigPlant+\x27</div>\x27+
+    \x27<div style="position:absolute;bottom:8px;right:8px;font-size:32px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))">\x27+bigPlant+\x27</div>\x27+
+    \x27<div style="position:absolute;top:8px;right:14px;font-size:22px;line-height:1">\x27+plantEmoji+\x27</div>\x27+
+    // Door on back wall
+    \x27<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:38px;height:54px;background:#c8a87a;border:2px solid #a07848;border-radius:4px 4px 0 0;z-index:1">\x27+
+      \x27<div style="position:absolute;right:5px;top:50%;width:6px;height:6px;border-radius:50%;background:#7a5a2a;transform:translateY(-50%)"></div>\x27+
+      \x27<div style="position:absolute;top:4px;left:4px;right:4px;height:16px;background:rgba(255,255,255,.15);border-radius:2px"></div>\x27+
+    \x27</div>\x27;
 
-  var phaseLabel2 = hasActive
-    ? (\x27Workflow in esecuzione \u2014 \x27+doneCount+\x27/\x27+totalCount)
-    : (doneCount===totalCount && totalCount>0 ? \x27Workflow completato\x27 : \x27Workflow pianificato\x27);
-  var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#22c55e\x27 : \x27#6b7280\x27);
+  // ── Floor SVG (fills the whole scene) ────────────────────────────────────
+  var floorSvg = \x27<svg viewBox="0 0 \x27+SCENE_W+\x27 \x27+SCENE_H+\x27" width="\x27+SCENE_W+\x27" height="\x27+SCENE_H+\x27" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;z-index:0;pointer-events:none">\x27;
+  // Back wall
+  floorSvg += \x27<rect x="0" y="0" width="\x27+SCENE_W+\x27" height="\x27+Math.round(SCENE_H*0.38)+\x27" fill="#f5f0ea"/>\x27;
+  // Baseboard
+  floorSvg += \x27<rect x="0" y="\x27+Math.round(SCENE_H*0.38-4)+\x27" width="\x27+SCENE_W+\x27" height="6" fill="#d4c4a8" rx="1"/>\x27;
+  // Floor — parquet planks
+  var floorY = Math.round(SCENE_H*0.38);
+  var plankColors = [\x27#c8a06a\x27,\x27#bf9860\x27,\x27#d4aa72\x27,\x27#ba9458\x27,\x27#c4a068\x27];
+  var plankH = 28; var plankW = 80;
+  for (var fy = floorY; fy < SCENE_H; fy += plankH) {
+    var rowOff = (Math.floor((fy-floorY)/plankH) % 2) * (plankW/2);
+    for (var fx = -plankW + rowOff; fx < SCENE_W + plankW; fx += plankW) {
+      var pc = plankColors[Math.abs(Math.round(fx/plankW + fy/plankH)) % plankColors.length];
+      floorSvg += \x27<rect x="\x27+fx+\x27" y="\x27+fy+\x27" width="\x27+(plankW-1)+\x27" height="\x27+(plankH-1)+\x27" fill="\x27+pc+\x27" rx="1"/>\x27;
+      // Grain line
+      floorSvg += \x27<line x1="\x27+(fx+plankW*0.35)+\x27" y1="\x27+fy+\x27" x2="\x27+(fx+plankW*0.35)+\x27" y2="\x27+(fy+plankH-1)+\x27" stroke="rgba(0,0,0,.05)" stroke-width="1"/>\x27;
+    }
+  }
+  // Window on back wall
+  floorSvg += \x27<rect x="20" y="18" width="60" height="50" rx="3" fill="#bbd8f5" stroke="#a8c4dc" stroke-width="2"/>\x27;
+  floorSvg += \x27<line x1="50" y1="18" x2="50" y2="68" stroke="#a8c4dc" stroke-width="1.5"/>\x27;
+  floorSvg += \x27<line x1="20" y1="43" x2="80" y2="43" stroke="#a8c4dc" stroke-width="1.5"/>\x27;
+  floorSvg += \x27<rect x="20" y="18" width="60" height="50" rx="3" fill="rgba(255,255,255,.15)"/>\x27;
+  if (SCENE_W > 350) {
+    floorSvg += \x27<rect x="\x27+(SCENE_W-100)+\x27" y="18" width="60" height="50" rx="3" fill="#bbd8f5" stroke="#a8c4dc" stroke-width="2"/>\x27;
+    floorSvg += \x27<line x1="\x27+(SCENE_W-70)+\x27" y1="18" x2="\x27+(SCENE_W-70)+\x27" y2="68" stroke="#a8c4dc" stroke-width="1.5"/>\x27;
+    floorSvg += \x27<line x1="\x27+(SCENE_W-100)+\x27" y1="43" x2="\x27+(SCENE_W-40)+\x27" y2="43" stroke="#a8c4dc" stroke-width="1.5"/>\x27;
+  }
+  // Chandelier
+  var chandX = Math.round(SCENE_W/2);
+  floorSvg += \x27<line x1="\x27+chandX+\x27" y1="0" x2="\x27+chandX+\x27" y2="24" stroke="#999" stroke-width="2"/>\x27;
+  floorSvg += \x27<ellipse cx="\x27+chandX+\x27" cy="28" rx="28" ry="8" fill="#e8d980" stroke="#c8b840" stroke-width="1.5"/>\x27;
+  floorSvg += \x27<circle cx="\x27+(chandX-18)+\x27" cy="32" r="5" fill="#fff8c0" filter="url(#bGlow)"/>\x27;
+  floorSvg += \x27<circle cx="\x27+chandX+\x27" cy="34" r="5" fill="#fff8c0" filter="url(#bGlow)"/>\x27;
+  floorSvg += \x27<circle cx="\x27+(chandX+18)+\x27" cy="32" r="5" fill="#fff8c0" filter="url(#bGlow)"/>\x27;
+  floorSvg += \x27<defs><filter id="bGlow" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>\x27;
+  floorSvg += \x27</svg>\x27;
 
   el.innerHTML =
     \x27<div class="prl-wrap" style="border-color:\x27+phaseColor2+\x2744;padding-bottom:8px">\x27+
     \x27<div class="prl-header"><span class="prl-phase-chip" style="--pc:\x27+phaseColor2+\x27">\x27+phaseLabel2+\x27</span></div>\x27+
-    \x27<div style="display:flex;justify-content:center;width:100%;overflow-x:auto">\x27+
-    \x27<div class="iso-scene" style="position:relative;width:\x27+SCENE_W+\x27px;min-width:\x27+SCENE_W+\x27px;height:\x27+SCENE_H+\x27px;overflow:hidden;border-radius:12px;background:#f0ede6">\x27+
-    isoFloorSvg(ISO_COLS + 2, 5)+
-    agentsHtml+
-    orchHtml+
+    \x27<div class="iso-scene-wrap">\x27+
+    \x27<div class="iso-scene" style="position:relative;width:\x27+SCENE_W+\x27px;min-width:\x27+SCENE_W+\x27px;height:\x27+SCENE_H+\x27px">\x27+
+    floorSvg+
+    decoHtml+
+    stationsHtml+
     \x27</div>\x27+
     \x27</div>\x27+
     \x27</div>\x27;
@@ -4632,84 +4716,35 @@ async function runStudio() {
           if (!parlBlockBuilt || !pb.innerHTML.trim()) {
             parlBlockBuilt = true;
 
-            // Build agent seat HTML (box + avatar)
-            function buildSeat(prop) {
+            // Build agent seat HTML (emoji avatar)
+            function buildSeat(prop, seatIdx) {
               var lbl = prop.label || prop.agent;
-              var ico = prop.icon || String.fromCharCode(9632);
-              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)+(lbl.charCodeAt(lbl.length-1)||0)) % skinColors.length;
-              var skin = skinColors[skinIdx];
-              var shirtC = [\x27#4f46e5\x27,\x27#0891b2\x27,\x27#7c3aed\x27,\x27#059669\x27,\x27#dc2626\x27,\x27#d97706\x27][skinIdx];
-              var safeLbl = lbl.replace(/[^a-zA-Z0-9_-]/g,\x27_\x27);
-              // Mini agent SVG (seated, top-down perspective hint)
-              var agentSvg = \x27<svg viewBox="0 0 44 52" width="44" height="52" xmlns="http://www.w3.org/2000/svg">\x27+
-                // Chair back
-                \x27<rect x="6" y="2" width="32" height="6" rx="3" fill="#2a2050" stroke="#3a3070" stroke-width="1"/>\x27+
-                // Chair seat
-                \x27<rect x="6" y="32" width="32" height="12" rx="3" fill="#221840" stroke="#3a3060" stroke-width="1"/>\x27+
-                // Body / torso
-                \x27<rect x="14" y="8" width="16" height="22" rx="4" fill="\x27+shirtC+\x27" opacity=".9"/>\x27+
-                // Head
-                \x27<circle cx="22" cy="5" r="7" fill="\x27+skin+\x27"/>\x27+
-                // Eyes
-                \x27<circle cx="19.5" cy="4.5" r="1.2" fill="#0a0a14"/>\x27+
-                \x27<circle cx="24.5" cy="4.5" r="1.2" fill="#0a0a14"/>\x27+
-                // Arms on desk
-                \x27<rect x="7" y="26" width="9" height="5" rx="2" fill="\x27+skin+\x27" class="br-arm-l"/>\x27+
-                \x27<rect x="28" y="26" width="9" height="5" rx="2" fill="\x27+skin+\x27" class="br-arm-r"/>\x27+
-                // Monitor on desk in front of agent
-                \x27<rect x="12" y="37" width="20" height="13" rx="2" fill="#141028" stroke="#3a3070" stroke-width="1"/>\x27+
-                \x27<rect x="13" y="38" width="18" height="11" rx="1" fill="rgba(90,80,180,.35)"/>\x27+
-                \x27<line x1="14" y1="41" x2="30" y2="41" stroke="#9090cc" stroke-width=".8" opacity=".8"/>\x27+
-                \x27<line x1="14" y1="44" x2="28" y2="44" stroke="#7070aa" stroke-width=".8" opacity=".6"/>\x27+
-                // Agent badge
-                \x27<circle cx="22" cy="13" r="5" fill="#0f0f1e" stroke="\x27+shirtC+\x2780" stroke-width="1.2"/>\x27+
-                \x27<text x="22" y="16" text-anchor="middle" font-size="6" font-family="system-ui">\x27+ico+\x27</text>\x27+
-                \x27</svg>\x27;
+              var safeLbl = lbl.replace(new RegExp('[^a-zA-Z0-9_-]','g'),\x27_\x27);
+              var emojiIdx = Math.abs(lbl.charCodeAt(0)+(lbl.charCodeAt(lbl.length-1)||0)) % AGENT_EMOJIS.length;
+              var agentEmoji = AGENT_EMOJIS[emojiIdx];
+              void seatIdx;
+              var agentAvatar = \x27<div style="font-size:36px;line-height:1;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))">\x27+agentEmoji+\x27</div>\x27;
               return \x27<div class="br-seat" id="brseat_\x27+safeLbl+\x27" data-lbl="\x27+esc(lbl)+\x27">\x27+
                 \x27<div class="br-seat-box">\x27+
                   \x27<div class="br-bubble" id="brbubble_\x27+safeLbl+\x27"></div>\x27+
-                  agentSvg+
+                  agentAvatar+
                   \x27<div class="br-seat-name" id="brname_\x27+safeLbl+\x27">\x27+esc(lbl)+\x27</div>\x27+
                 \x27</div>\x27+
                 \x27</div>\x27;
             }
 
             // Arrange seats in a circle around center table
-            // Positions computed from CSS: use CSS custom properties per seat index
             var seatsHtml = proposals.map(buildSeat).join(\x27\x27);
 
-            // Orchestrator at center (standing, prominent)
-            var orchSvg = \x27<svg viewBox="0 0 54 70" width="54" height="70" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif">\x27+
-              // Legs
-              \x27<path d="M20 45 C19 54 18 62 17 66 C16 68 18 69 20 69 C22 69 23 68 23 65 C24 59 24 52 25 45 Z" fill="#252460"/>\x27+
-              \x27<path d="M27 45 C28 54 29 62 30 66 C31 68 29 69 27 69 C25 69 24 68 24 65 C23 59 23 52 22 45 Z" fill="#252460"/>\x27+
-              // Suit
-              \x27<path d="M11 26 C10 24 13 21 22 19 C31 21 34 24 33 26 L34 45 L10 45 Z" fill="#252464"/>\x27+
-              \x27<path d="M11 26 C10 24 13 21 22 19 L22 45 L10 45 Z" fill="#1e1d52"/>\x27+
-              \x27<path d="M22 19 C31 21 34 24 33 26 L34 45 L22 45 Z" fill="#2a2870"/>\x27+
-              // Tie
-              \x27<path d="M22 22 L21 36 L22 40 L23 36 Z" fill="#818cf8"/>\x27+
-              // Arms gesturing (spread wide — presenting)
-              \x27<path d="M10 28 C4 30 1 36 2 41 C3 44 6 44 8 42 C10 40 11 36 12 32 C13 30 11 27 10 28" fill="#252464" class="br-orch-arm-l"/>\x27+
-              \x27<path d="M34 28 C40 30 43 36 42 41 C41 44 38 44 36 42 C34 40 33 36 32 32 C31 30 33 27 34 28" fill="#252464" class="br-orch-arm-r"/>\x27+
-              // Head
-              \x27<circle cx="22" cy="13" r="9" fill="#fbbf24"/>\x27+
-              \x27<circle cx="19" cy="12" r="1.5" fill="#0a0a14"/>\x27+
-              \x27<circle cx="25" cy="12" r="1.5" fill="#0a0a14"/>\x27+
-              \x27<circle cx="20" cy="11" r=".6" fill="rgba(255,255,255,.8)"/>\x27+
-              \x27<circle cx="26" cy="11" r=".6" fill="rgba(255,255,255,.8)"/>\x27+
-              // Mouth — speaking
-              \x27<path d="M18 16 Q22 20 26 16" stroke="#8b4513" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27+
-              // NHA badge
-              \x27<circle cx="16" cy="30" r="3" fill="#0d0d1e" stroke="#818cf888" stroke-width="1"/>\x27+
-              \x27<text x="16" y="32.5" text-anchor="middle" font-size="3.5" fill="#818cf8">N</text>\x27+
-              // Crown / authority marker
-              \x27<path d="M15 3 L17 8 L22 5 L27 8 L29 3 L22 0 Z" fill="#f59e0b"/>\x27+
-              \x27<circle cx="17" cy="8" r="1.5" fill="#fbbf24"/>\x27+
-              \x27<circle cx="22" cy="5" r="1.5" fill="#fbbf24"/>\x27+
-              \x27<circle cx="27" cy="8" r="1.5" fill="#fbbf24"/>\x27+
-              \x27</svg>\x27;
+            // Orchestrator at center — emoji (crowned suit)
+            var orchEmoji = String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC);
+            var crownEmoji = String.fromCodePoint(0x1F451);
+            var orchSvgEl = crownEmoji; // crown above orchestrator emoji — not SVG anymore
+            var orchSvg = \x27<div style="display:flex;flex-direction:column;align-items:center;gap:2px">\x27+
+              \x27<span style="font-size:22px;line-height:1">\x27+crownEmoji+\x27</span>\x27+
+              \x27<div style="font-size:52px;line-height:1;filter:drop-shadow(0 0 12px #818cf8AA);user-select:none">\x27+orchEmoji+\x27</div>\x27+
+              \x27</div>\x27;
+            void orchSvgEl;
 
             // Center table (SVG oval)
             var tableSvg = \x27<svg viewBox="0 0 160 80" width="160" height="80" xmlns="http://www.w3.org/2000/svg">\x27+
@@ -5972,16 +6007,18 @@ function renderStudio(el) {
       '</div>' +
 
       // ── AGENT SIDEBAR ──
-      '<div class="studio-tools-panel">' +
-        // Tab bar
-        '<div style="display:flex;gap:0;margin-bottom:10px;border:1px solid var(--border);border-radius:6px;overflow:hidden">' +
-          '<button id="sideTabTools" onclick="studioSideTab(\\x27tools\\x27)" style="flex:1;padding:5px;font-size:10px;font-weight:600;background:var(--green3);color:#fff;border:none;cursor:pointer">&#128295; Tools</button>' +
-          '<button id="sideTabAgents" onclick="studioSideTab(\\x27agents\\x27)" style="flex:1;padding:5px;font-size:10px;font-weight:600;background:var(--bg3);color:var(--dim);border:none;cursor:pointer">&#129302; Agents</button>' +
+      '<div style="display:flex;flex-direction:column;gap:12px;width:220px;flex-shrink:0;position:sticky;top:16px;align-self:flex-start">' +
+        '<div class="studio-tools-panel">' +
+          // Tab bar
+          '<div style="display:flex;gap:0;margin-bottom:10px;border:1px solid var(--border);border-radius:6px;overflow:hidden">' +
+            '<button id="sideTabTools" onclick="studioSideTab(\\x27tools\\x27)" style="flex:1;padding:5px;font-size:10px;font-weight:600;background:var(--green3);color:#fff;border:none;cursor:pointer">&#128295; Tools</button>' +
+            '<button id="sideTabAgents" onclick="studioSideTab(\\x27agents\\x27)" style="flex:1;padding:5px;font-size:10px;font-weight:600;background:var(--bg3);color:var(--dim);border:none;cursor:pointer">&#129302; Agents</button>' +
+          '</div>' +
+          '<div style="font-size:9px;color:var(--dim);margin-bottom:8px">Click to add to pipeline</div>' +
+          '<div id="sideToolsList">'+toolsHtml+'</div>' +
+          '<div id="sideAgentsList" style="display:none">'+specialistHtml+'</div>' +
         '</div>' +
-        '<div style="font-size:9px;color:var(--dim);margin-bottom:8px">Click to add to pipeline</div>' +
-        '<div id="sideToolsList">'+toolsHtml+'</div>' +
-        '<div id="sideAgentsList" style="display:none">'+specialistHtml+'</div>' +
-        '<div id="studioSessionsBar" style="margin-top:16px;display:none"></div>' +
+        '<div id="studioSessionsBar" style="display:none;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg2)"></div>' +
       '</div>' +
     '</div>';
 
@@ -6646,19 +6683,43 @@ input:focus,textarea:focus{border-color:var(--green3)}
 /* Plant right */
 .prl-office-plant2{position:absolute;bottom:14px;right:8px;width:22px;height:42px;z-index:2;pointer-events:none}
 /* ── ISOMETRIC JRPG SCENE ── */
-.iso-scene{background:#f0ede6;cursor:default;max-width:100%;overflow-x:auto;box-shadow:0 4px 24px rgba(0,0,0,.18)}
+.iso-scene-wrap{width:100%;overflow-x:auto;display:flex;justify-content:center}
+.iso-scene{background:#f0ede6;cursor:default;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18)}
+/* ── Station layout (new grid-based office) ── */
+.iso-station{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:filter .2s}
+.iso-station:hover{filter:brightness(1.08)}
+.iso-station.iso-orch-walking{animation:orchWalk 2.2s ease-in-out infinite alternate}
+@keyframes orchWalk{0%{transform:translateX(-50%)}100%{transform:translateX(calc(-50% + var(--orch-tx,0px))) translateY(var(--orch-ty,0px))}}
+.iso-station.iso-orch-done{animation:orchDone .6s ease forwards}
+@keyframes orchDone{0%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1)}}
+/* Desk */
+.iso-desk{width:90px;height:18px;background:linear-gradient(180deg,#d4a448 0%,#b8832a 100%);border-radius:4px 4px 2px 2px;box-shadow:0 4px 0 #8a5e18,0 6px 8px rgba(0,0,0,.25);border:1px solid #c49038;position:relative;margin-top:2px}
+.iso-desk::after{content:'';position:absolute;bottom:-4px;left:6px;right:6px;height:4px;background:#8a5e18;border-radius:0 0 3px 3px}
+/* Monitor on desk */
+.iso-monitor{width:52px;height:38px;background:#1a1a2c;border:2px solid #3a3070;border-radius:4px;position:absolute;top:-44px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
+.iso-monitor::before{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:8px;height:6px;background:#252436;border-radius:0 0 2px 2px}
+.iso-monitor-screen{width:42px;height:28px;background:rgba(80,60,180,.3);border-radius:2px;display:flex;align-items:center;justify-content:center}
+.iso-monitor-blink{width:6px;height:6px;border-radius:50%;background:#6366f1;animation:monBlink .8s ease-in-out infinite}
+@keyframes monBlink{0%,100%{opacity:1;box-shadow:0 0 6px #6366f1}50%{opacity:.3;box-shadow:none}}
+/* Tool badge emoji floating above desk */
+.iso-tool-badge{font-size:18px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));margin-bottom:-2px;user-select:none}
 /* Animated status chip for [bracket tokens] */
 .iso-status-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);border-radius:20px;padding:3px 10px;font-size:11px;font-family:var(--mono);color:#818cf8;animation:statusPulse 2s ease-in-out infinite}
 @keyframes statusPulse{0%,100%{opacity:.7;border-color:rgba(99,102,241,.3)}50%{opacity:1;border-color:rgba(99,102,241,.7);box-shadow:0 0 8px rgba(99,102,241,.3)}}
 .iso-status-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;animation:dotBounce 1s ease-in-out infinite}
 .iso-agent{transition:filter .3s}
-.iso-agent:hover{filter:brightness(1.15)}
+.iso-agent:hover{filter:brightness(1.1) saturate(1.2)}
+.iso-char-wrap{transition:transform .2s,box-shadow .3s}
+.iso-char-wrap.prl-head{animation:isoCharBob 1.2s ease-in-out infinite}
+@keyframes isoCharBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+.iso-orch-wrap{transition:transform .2s}
+.iso-orch-wrap.prl-head{animation:isoCharBob 1.4s ease-in-out infinite}
 /* Thought bubble / speech bubble above character */
 .iso-bubble{font-size:8px;font-family:var(--mono);padding:2px 7px;border-radius:10px 10px 10px 2px;border:1px solid #3a3060;background:rgba(10,8,20,.85);color:#6b7280;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;line-height:1.4;transition:all .25s;pointer-events:none;backdrop-filter:blur(4px)}
 .iso-bubble--active{background:rgba(30,20,60,.9);border-color:#6366f1;color:#a5b4fc;animation:isoBubblePop .35s ease;white-space:normal;max-width:110px;word-break:break-word;line-height:1.35}
 .iso-bubble--orch{font-size:9px;padding:3px 9px;border-radius:12px;border-color:#818cf8;color:#a5b4fc;background:rgba(20,15,50,.9)}
 @keyframes isoBubblePop{0%{transform:scale(.8) translateY(4px);opacity:.4}100%{transform:scale(1) translateY(0);opacity:1}}
-.iso-name{font-size:8px;font-family:var(--mono);font-weight:700;letter-spacing:.3px;text-align:center;max-width:80px;white-space:normal;word-break:break-word;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
+.iso-name{font-size:10px;font-family:var(--mono);font-weight:700;letter-spacing:.3px;text-align:center;max-width:90px;white-space:normal;word-break:break-word;line-height:1.3;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 6px;pointer-events:none;backdrop-filter:blur(4px)}
 /* Desks row — kept for boardroom compat */
 .prl-desks-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;position:relative;z-index:2;padding-bottom:8px}
 .prl-desk{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 6px 4px;border-radius:12px;background:#1a1535;border:1.5px solid #3a3060;transition:border-color .4s,background .4s,box-shadow .4s;position:relative;min-width:80px;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
@@ -6734,7 +6795,7 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .studio-result__body{font-size:13px;color:var(--text);word-wrap:break-word;line-height:1.7}
 .studio-example-btn{display:inline-block;padding:5px 12px;border:1px solid var(--border2);border-radius:20px;font-size:10px;color:var(--dim);cursor:pointer;background:none;margin:0 4px 6px 0;transition:all .15s}
 .studio-example-btn:hover{border-color:var(--green3);color:var(--green);background:var(--greendim)}
-.studio-tools-panel{width:220px;flex-shrink:0;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg2);max-height:calc(100vh - 120px);overflow-y:auto;position:sticky;top:16px}
+.studio-tools-panel{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg2);max-height:calc(100vh - 200px);overflow-y:auto}
 .studio-tool-item{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s;margin-bottom:4px}
 .studio-tool-item:hover{background:var(--bg3);border-radius:6px}
 .studio-tool-icon{font-size:16px;flex-shrink:0;margin-top:1px}