nothumanallowed 13.5.7 → 13.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "13.5.7",
+  "version": "13.5.9",
   "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/commands/ui.mjs

@@ -3790,8 +3790,11 @@ ${writtenSoFar ? `## REPORT WRITTEN SO FAR (for consistency):\n${writtenSoFar.sl
           }
 
           // Estimate token usage (aprox: 1 token ≈ 4 chars)
-          const inTokens = Math.ceil((sysPrompt.length + userMsg.length) / 4);
-          const outTokens = Math.ceil(fullOutput.length / 4);
+          // Include context + toolData in input estimate since they're sent in the prompt
+          const contextLen = (context || '').length;
+          const toolDataLen = (toolData || '').length;
+          const inTokens = Math.ceil((sysPrompt.length + userMsg.length + contextLen + toolDataLen) / 4);
+          const outTokens = Math.ceil(fullOutputClean.length / 4);
           clearInterval(keepalive);
           sendEvent({ usage: { input: inTokens, output: outTokens } });
           sendEvent({ done: true });

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.7';
+export const VERSION = '13.5.9';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/services/web-ui.mjs

@@ -3310,6 +3310,7 @@ var studioState = {
 var studioAbortController = null;
 var parlActiveAgent = null;   // active agent label during parliament streaming
 var parlDoneAgents = {};      // set of completed agent labels during parliament
+var _parlPersistHtml = null;  // persists parliament block HTML across tab navigations
 
 function stopStudio() {
   if (!studioState.running) return;
@@ -3624,72 +3625,159 @@ function officeRoomDecor() {
 // Projects grid positions onto an isometric plane.
 // iso(col, row) → {x, y} pixel coordinates in the scene container.
 // Characters are positioned with position:absolute, scale by row for depth.
-var ISO_TILE_W = 72;
-var ISO_TILE_H = 36;
-var ISO_ORIGIN_X = 260; // center-left of scene
-var ISO_ORIGIN_Y = 40;  // top of scene
+var ISO_TILE_W = 80;
+var ISO_TILE_H = 40;
+var ISO_ORIGIN_X = 500;
+var ISO_ORIGIN_Y = 80;
 function isoProject(col, row) {
   return {
     x: ISO_ORIGIN_X + (col - row) * (ISO_TILE_W / 2),
     y: ISO_ORIGIN_Y + (col + row) * (ISO_TILE_H / 2)
   };
 }
-// Draw isometric floor tiles as SVG
+
+// Full bright office scene — wide SVG background (1000x560)
 function isoFloorSvg(cols, rows) {
-  var w = 600; var h = 240;
-  var out = \x27<svg viewBox="0 0 \x27+w+\x27 \x27+h+\x27" width="\x27+w+\x27" height="\x27+h+\x27" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;pointer-events:none;z-index:0">\x27;
-  // Back wall — two side walls
-  out += \x27<polygon points="0,80 300,20 300,100 0,160" fill="#1a1535" opacity=".7"/>\x27;
-  out += \x27<polygon points="300,20 600,80 600,160 300,100" fill="#141030" opacity=".7"/>\x27;
-  // Wall top edge
-  out += \x27<line x1="0" y1="80" x2="300" y2="20" stroke="#3a3060" stroke-width="1.5"/>\x27;
-  out += \x27<line x1="300" y1="20" x2="600" y2="80" stroke="#3a3060" stroke-width="1.5"/>\x27;
-  // Wall window left
-  out += \x27<polygon points="60,82 130,62 130,102 60,122" fill="#1a2840" stroke="#2a4060" stroke-width="1"/>\x27;
-  out += \x27<polygon points="65,85 125,66 125,98 65,117" fill="#7ecfff" opacity=".15" stroke="#4a90c0" stroke-width=".5"/>\x27;
-  // Wall window right
-  out += \x27<polygon points="470,82 540,62 540,102 470,122" fill="#1a2840" stroke="#2a4060" stroke-width="1"/>\x27;
-  out += \x27<polygon points="475,85 535,66 535,98 475,117" fill="#7ecfff" opacity=".15" stroke="#4a90c0" stroke-width=".5"/>\x27;
-  // Sunlight shafts
-  out += \x27<polygon points="80,102 120,90 125,160 85,175" fill="rgba(200,230,255,.04)"/>\x27;
-  out += \x27<polygon points="490,90 530,102 535,175 495,160" fill="rgba(200,230,255,.04)"/>\x27;
-  // Ceiling lamp
-  out += \x27<ellipse cx="300" cy="22" rx="20" ry="6" fill="#2a2050" stroke="#4a3080" stroke-width="1"/>\x27;
-  out += \x27<ellipse cx="300" cy="24" rx="18" ry="10" fill="rgba(255,220,100,.12)"/>\x27;
-  out += \x27<line x1="300" y1="0" x2="300" y2="22" stroke="#3a3060" stroke-width="1.5"/>\x27;
-  // Floor tiles — iso grid
-  for (var r = 0; r < rows; r++) {
-    for (var c = 0; c < cols; c++) {
-      var p = isoProject(c, r);
-      var tx = p.x; var ty = p.y + 80;
-      // Diamond tile
-      var pts = (tx)+\x27,\x27+(ty) + \x27 \x27+(tx+ISO_TILE_W/2)+\x27,\x27+(ty+ISO_TILE_H/2) + \x27 \x27+tx+\x27,\x27+(ty+ISO_TILE_H) + \x27 \x27+(tx-ISO_TILE_W/2)+\x27,\x27+(ty+ISO_TILE_H/2);
-      var tileEven = (r+c) % 2 === 0;
-      out += \x27<polygon points="\x27+pts+\x27" fill="\x27+(tileEven?\x27#1e1840\x27:\x27#1a1535\x27)+\x27" stroke="#2a2050" stroke-width=".8"/>\x27;
-      // Tile highlight (top-left edge)
-      out += \x27<line x1="\x27+(tx-ISO_TILE_W/2)+\x27" y1="\x27+(ty+ISO_TILE_H/2)+\x27" x2="\x27+tx+\x27" y2="\x27+ty+\x27" stroke="rgba(255,255,255,.04)" stroke-width=".6"/>\x27;
+  var W = 1000; var H = 560;
+  var out = \x27<svg viewBox="0 0 \x27+W+\x27 \x27+H+\x27" width="\x27+W+\x27" height="\x27+H+\x27" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;pointer-events:none;z-index:0">\x27;
+
+  // ── DEFS ────────────────────────────────────────────────────────────
+  out += \x27<defs>\x27;
+  out += \x27<filter id="bGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>\x27;
+  out += \x27<radialGradient id="lampGlow" cx="50%" cy="20%" r="70%"><stop offset="0%" stop-color="rgba(255,248,200,.28)"/><stop offset="100%" stop-color="rgba(255,248,200,0)"/></radialGradient>\x27;
+  out += \x27<linearGradient id="wallL" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#f8f6f0"/><stop offset="100%" stop-color="#ede9e0"/></linearGradient>\x27;
+  out += \x27<linearGradient id="wallR" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#e8e4dc"/><stop offset="100%" stop-color="#ddd8ce"/></linearGradient>\x27;
+  out += \x27</defs>\x27;
+
+  // ── WALLS ────────────────────────────────────────────────────────────
+  // Left wall (back-left)
+  out += \x27<polygon points="0,200 500,40 500,280 0,440" fill="url(#wallL)"/>\x27;
+  // Right wall (back-right)
+  out += \x27<polygon points="500,40 1000,200 1000,440 500,280" fill="url(#wallR)"/>\x27;
+  // Wall top ridge
+  out += \x27<line x1="0" y1="200" x2="500" y2="40" stroke="#c8c0b0" stroke-width="2"/>\x27;
+  out += \x27<line x1="500" y1="40" x2="1000" y2="200" stroke="#bbb0a0" stroke-width="2"/>\x27;
+  out += \x27<line x1="500" y1="40" x2="500" y2="280" stroke="#c0b8a8" stroke-width="1.5"/>\x27;
+
+  // ── WINDOWS on left wall — 3 evenly spaced ──────────────────────────
+  // Helper: window at left-wall position (xL,yTop)→(xR,yTop-slope)
+  // Left wall goes from (0,200)→(500,40), slope = -160/500 per x
+  // Window 1
+  out += \x27<polygon points="60,232 160,206 160,272 60,300" fill="#ceeaff" stroke="#90bcd8" stroke-width="1.5"/>\x27;
+  out += \x27<polygon points="60,232 160,206 160,213 60,239" fill="#a8d8f8" opacity=".6"/>\x27;
+  out += \x27<line x1="60" y1="266" x2="160" y2="239" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<line x1="110" y1="219" x2="110" y2="286" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<polygon points="60,232 160,206 160,272 60,300" fill="rgba(180,220,255,.1)"/>\x27;
+  // Window 2
+  out += \x27<polygon points="200,178 300,152 300,218 200,246" fill="#ceeaff" stroke="#90bcd8" stroke-width="1.5"/>\x27;
+  out += \x27<polygon points="200,178 300,152 300,159 200,185" fill="#a8d8f8" opacity=".6"/>\x27;
+  out += \x27<line x1="200" y1="212" x2="300" y2="185" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<line x1="250" y1="165" x2="250" y2="232" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<polygon points="200,178 300,152 300,218 200,246" fill="rgba(180,220,255,.1)"/>\x27;
+  // Window 3
+  out += \x27<polygon points="340,126 440,100 440,166 340,192" fill="#ceeaff" stroke="#90bcd8" stroke-width="1.5"/>\x27;
+  out += \x27<polygon points="340,126 440,100 440,107 340,133" fill="#a8d8f8" opacity=".6"/>\x27;
+  out += \x27<line x1="340" y1="159" x2="440" y2="133" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<line x1="390" y1="113" x2="390" y2="179" stroke="#90bcd8" stroke-width="1"/>\x27;
+  out += \x27<polygon points="340,126 440,100 440,166 340,192" fill="rgba(180,220,255,.1)"/>\x27;
+  // Sun shafts
+  out += \x27<polygon points="80,300 160,272 190,540 110,560" fill="rgba(255,248,200,.07)"/>\x27;
+  out += \x27<polygon points="215,246 300,218 320,540 235,560" fill="rgba(255,248,200,.06)"/>\x27;
+  out += \x27<polygon points="352,192 440,166 455,540 367,560" fill="rgba(255,248,200,.05)"/>\x27;
+
+  // ── PAINTING on left wall (between W2 and W3) ────────────────────────
+  out += \x27<polygon points="463,112 490,104 490,132 463,140" fill="#e8e2d8" stroke="#c0b090" stroke-width="1.5"/>\x27;
+  out += \x27<polygon points="466,114 488,107 488,130 466,137" fill="#5080b0"/>\x27;
+  out += \x27<polygon points="469,116 488,110 488,120 469,123" fill="#7aa0c8"/>\x27;
+  out += \x27<ellipse cx="478" cy="120" rx="5" ry="4" fill="#fff" opacity=".35"/>\x27;
+
+  // ── PLANT right wall corner ─────────────────────────────────────────
+  out += \x27<ellipse cx="920" cy="360" rx="14" ry="7" fill="#2d5018" opacity=".6"/>\x27;
+  out += \x27<rect x="912" y="348" width="14" height="14" rx="3" fill="#7a4a20"/>\x27;
+  out += \x27<path d="M919 348 C912 328 900 312 905 300 C910 290 919 300 919 348" fill="#3a8020"/>\x27;
+  out += \x27<path d="M919 348 C926 328 938 315 933 302 C928 292 919 303 919 348" fill="#4a9228"/>\x27;
+  out += \x27<path d="M919 342 C908 332 900 322 902 312" stroke="#3a8020" stroke-width="2.5" fill="none" stroke-linecap="round"/>\x27;
+  out += \x27<path d="M919 336 C930 326 938 318 936 306" stroke="#4a9228" stroke-width="2.5" fill="none" stroke-linecap="round"/>\x27;
+
+  // ── CHANDELIER ────────────────────────────────────────────────────────
+  out += \x27<line x1="500" y1="0" x2="500" y2="30" stroke="#aaa" stroke-width="3"/>\x27;
+  out += \x27<ellipse cx="500" cy="30" rx="38" ry="11" fill="#d8c870" stroke="#b8a850" stroke-width="2"/>\x27;
+  out += \x27<ellipse cx="500" cy="36" rx="30" ry="8" fill="#ece090"/>\x27;
+  out += \x27<line x1="478" y1="36" x2="478" y2="46" stroke="#aaa" stroke-width="1.2"/>\x27;
+  out += \x27<line x1="500" y1="36" x2="500" y2="42" stroke="#aaa" stroke-width="1.2"/>\x27;
+  out += \x27<line x1="522" y1="36" x2="522" y2="46" stroke="#aaa" stroke-width="1.2"/>\x27;
+  out += \x27<circle cx="478" cy="50" r="8" fill="#fffbe0" filter="url(#bGlow)"/>\x27;
+  out += \x27<circle cx="500" cy="46" r="10" fill="#fffbe0" filter="url(#bGlow)"/>\x27;
+  out += \x27<circle cx="522" cy="50" r="8" fill="#fffbe0" filter="url(#bGlow)"/>\x27;
+  // Light glow on scene
+  out += \x27<ellipse cx="500" cy="320" rx="360" ry="220" fill="url(#lampGlow)"/>\x27;
+
+  // ── PARQUET FLOOR ──────────────────────────────────────────────────────
+  var plankCols = [\x27#c8924a\x27,\x27#b8823c\x27,\x27#d4a055\x27,\x27#be9248\x27,\x27#a87838\x27];
+  for (var r2 = 0; r2 < rows; r2++) {
+    for (var c2 = 0; c2 < cols; c2++) {
+      var pp = isoProject(c2, r2);
+      var ptx = pp.x; var pty = pp.y + 120;
+      var pFill = plankCols[(r2*3+c2) % plankCols.length];
+      var ppts = ptx+\x27,\x27+pty+\x27 \x27+(ptx+ISO_TILE_W/2)+\x27,\x27+(pty+ISO_TILE_H/2)+\x27 \x27+ptx+\x27,\x27+(pty+ISO_TILE_H)+\x27 \x27+(ptx-ISO_TILE_W/2)+\x27,\x27+(pty+ISO_TILE_H/2);
+      out += \x27<polygon points="\x27+ppts+\x27" fill="\x27+pFill+\x27" stroke="#906820" stroke-width=".8"/>\x27;
+      // long grain line along the plank
+      out += \x27<line x1="\x27+(ptx-ISO_TILE_W/2+5)+\x27" y1="\x27+(pty+ISO_TILE_H/2)+\x27" x2="\x27+(ptx+ISO_TILE_W/2-5)+\x27" y2="\x27+(pty+ISO_TILE_H/2)+\x27" stroke="rgba(0,0,0,.08)" stroke-width=".6"/>\x27;
     }
   }
+  out += \x27<ellipse cx="500" cy="380" rx="120" ry="40" fill="rgba(255,248,200,.1)"/>\x27;
+
   out += \x27</svg>\x27;
   return out;
 }
-// Small isometric desk object at iso position
+
+// Isometric desk — proper 3D look: flat top surface + two visible faces + monitor + keyboard
 function isoDeskSvg(x, y, accentColor) {
-  var ac = accentColor || \x27#3a3060\x27;
-  return \x27<svg viewBox="0 0 64 40" width="64" height="40" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:\x27+(x-32)+\x27px;top:\x27+(y+10)+\x27px;z-index:\x27+(Math.round(y))+\x27;pointer-events:none">\x27+
-    // Desk top face
-    \x27<polygon points="32,4 56,16 32,28 8,16" fill="#1e1840" stroke="\x27+ac+\x27" stroke-width="1.2"/>\x27+
-    // Desk right face
-    \x27<polygon points="56,16 56,32 32,44 32,28" fill="#120e28" stroke="\x27+ac+\x2788" stroke-width=".8"/>\x27+
-    // Desk left face
-    \x27<polygon points="8,16 32,28 32,44 8,32" fill="#161230" stroke="\x27+ac+\x2766" stroke-width=".8"/>\x27+
-    // Monitor on desk
-    \x27<polygon points="24,8 38,14 38,22 24,16" fill="\x27+(ac===\x27#22c55e\x27?\x27#0a2010\x27:\x27#0d0d1e\x27)+\x27" stroke="\x27+ac+\x27" stroke-width="1"/>\x27+
-    \x27<polygon points="24,10 36,15 36,20 24,15" fill="\x27+(ac===\x27#22c55e\x27?\x27#0a2810\x27:\x27#111128\x27)+\x27"/>\x27+
-    // Screen lines
-    \x27<line x1="26" y1="12" x2="34" y2="15" stroke="\x27+ac+\x27" stroke-width=".8" opacity=".8"/>\x27+
-    \x27<line x1="26" y1="14" x2="33" y2="17" stroke="\x27+ac+\x27" stroke-width=".8" opacity=".5"/>\x27+
-    \x27<line x1="26" y1="16" x2="32" y2="18" stroke="\x27+ac+\x27" stroke-width=".8" opacity=".3"/>\x27+
+  var ac = accentColor || \x27#888\x27;
+  var isDone = ac === \x27#22c55e\x27;
+  var isActive = ac === \x27#6366f1\x27;
+  var screenFill = isDone ? \x27#0a2010\x27 : (isActive ? \x27#0d102a\x27 : \x27#111828\x27);
+  var screenGlow = isDone ? \x27#22c55e\x27 : (isActive ? \x27#818cf8\x27 : \x27#4466aa\x27);
+  // Desk is 90x56 viewBox — wide enough to look like a real desk
+  return \x27<svg viewBox="0 0 90 56" width="90" height="56" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:\x27+(x-45)+\x27px;top:\x27+(y+4)+\x27px;z-index:\x27+(Math.round(y))+\x27;pointer-events:none">\x27+
+    // ── DESK LEGS (4 corners, visible as small rectangles) ──
+    \x27<rect x="14" y="42" width="5" height="10" rx="1" fill="#8a5c20"/>\x27+
+    \x27<rect x="56" y="47" width="5" height="8" rx="1" fill="#8a5c20"/>\x27+
+    \x27<rect x="70" y="40" width="5" height="8" rx="1" fill="#7a4e18"/>\x27+
+    \x27<rect x="28" y="36" width="5" height="8" rx="1" fill="#7a4e18"/>\x27+
+    // ── DESK TOP SURFACE (iso diamond) ──
+    \x27<polygon points="45,4 78,21 45,38 12,21" fill="#d4a448" stroke="#b88830" stroke-width="1.2"/>\x27+
+    // wood grain on top
+    \x27<line x1="28" y1="21" x2="62" y2="12" stroke="rgba(0,0,0,.09)" stroke-width=".9"/>\x27+
+    \x27<line x1="24" y1="26" x2="58" y2="17" stroke="rgba(0,0,0,.07)" stroke-width=".9"/>\x27+
+    \x27<line x1="32" y1="17" x2="66" y2="8" stroke="rgba(0,0,0,.06)" stroke-width=".7"/>\x27+
+    // shine
+    \x27<polygon points="45,4 78,21 74,23 45,8 16,23 12,21" fill="rgba(255,255,255,.12)"/>\x27+
+    // ── RIGHT FACE ──
+    \x27<polygon points="78,21 78,36 45,53 45,38" fill="#a87028" stroke="#906018" stroke-width=".8"/>\x27+
+    // ── LEFT FACE ──
+    \x27<polygon points="12,21 45,38 45,53 12,36" fill="#c08838" stroke="#a07028" stroke-width=".8"/>\x27+
+    // ── MONITOR — proper isometric screen ──
+    // Stand
+    \x27<polygon points="54,14 62,18 62,22 54,18" fill="#555" stroke="#333" stroke-width=".6"/>\x27+
+    // Screen back
+    \x27<polygon points="54,4 72,12 72,24 54,16" fill="#2a2a3a" stroke="#222" stroke-width=".8"/>\x27+
+    // Screen front (bezel)
+    \x27<polygon points="55,5 71,13 71,23 55,15" fill="#1a1a28"/>\x27+
+    // Screen content
+    \x27<polygon points="57,7 69,13 69,21 57,15" fill="\x27+screenFill+\x27"/>\x27+
+    \x27<line x1="58" y1="10" x2="68" y2="14" stroke="\x27+screenGlow+\x27" stroke-width="1" opacity=".9"/>\x27+
+    \x27<line x1="58" y1="13" x2="67" y2="17" stroke="\x27+screenGlow+\x27" stroke-width=".9" opacity=".6"/>\x27+
+    \x27<line x1="58" y1="16" x2="66" y2="19" stroke="\x27+screenGlow+\x27" stroke-width=".8" opacity=".4"/>\x27+
+    // ── KEYBOARD ──
+    \x27<polygon points="24,25 44,32 40,36 20,29" fill="#ddd" stroke="#bbb" stroke-width=".6"/>\x27+
+    \x27<line x1="24" y1="28" x2="44" y2="34" stroke="#aaa" stroke-width=".5"/>\x27+
+    \x27<line x1="28" y1="26" x2="28" y2="30" stroke="#aaa" stroke-width=".4"/>\x27+
+    \x27<line x1="33" y1="28" x2="33" y2="32" stroke="#aaa" stroke-width=".4"/>\x27+
+    \x27<line x1="38" y1="30" x2="38" y2="34" stroke="#aaa" stroke-width=".4"/>\x27+
+    // ── PAPERS on desk ──
+    \x27<polygon points="14,24 28,29 25,34 11,29" fill="#f8f6ee" stroke="#ddd" stroke-width=".6" transform="rotate(-6 20 29)"/>\x27+
+    \x27<polygon points="15,23 29,28 26,33 12,28" fill="#fff" stroke="#eee" stroke-width=".5" transform="rotate(-3 21 28)"/>\x27+
     \x27</svg>\x27;
 }
 // Isometric JRPG sprite character — top-down 3/4 perspective, Pokemon-style
@@ -3835,10 +3923,8 @@ function renderStudioNodes() {
 
   // ── ISO scene dimensions ───────────────────────────────────────────────────
   var ISO_COLS = Math.max(nodes.length, 1);
-  var SCENE_W = 600; var SCENE_H = 260;
+  var SCENE_W = 640; var SCENE_H = 420;
 
-  // Distribute agents along row=1 of the iso grid, spaced evenly
-  // Orchestrator walks on row=0 (further back = smaller)
   var agentsHtml = \x27\x27;
   nodes.forEach(function(n, idx) {
     var isActive = n.status === \x27running\x27;
@@ -3846,39 +3932,34 @@ function renderStudioNodes() {
     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#3a3060\x27));
+    var accentColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : (isErr ? \x27#ef4444\x27 : \x27#999\x27));
 
-    // Iso position: spread across columns, agents sit at row=2 (front row)
-    var col = (idx + 0.5) * (ISO_COLS > 1 ? (ISO_COLS - 1) / ISO_COLS : 1) + 0.5;
-    col = (idx * (ISO_COLS <= 1 ? 2 : (4 / ISO_COLS))) + 1;
-    var row = 2.5;
+    // 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 + 40;
-    // scale: row 2.5 = 1.0, background rows smaller
-    var charScale = 0.9 + row * 0.08;
+    var px = pos.x; var py = pos.y + 80;
+    var charScale = 1.1;
     var zIdx = Math.round(py + 100);
 
-    // Speech bubble content
-    var bubbleText = \x27\x27;
-    var bubbleColor = \x27#6366f1\x27;
-    if (isActive) { bubbleText = \x27...lavora\x27; bubbleColor = \x27#6366f1\x27; }
-    else if (isDone) { bubbleText = \x27\u2714 fatto\x27; bubbleColor = \x27#22c55e\x27; }
-    else if (isErr) { bubbleText = \x27\u2715 errore\x27; bubbleColor = \x27#ef4444\x27; }
-    else { bubbleText = \x27in attesa\x27; bubbleColor = \x27#4a4a6a\x27; }
-
+    // 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);
 
-    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:2px;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;
-    // Thought bubble above head
-    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">\x27+esc(bubbleText)+\x27</div>\x27;
+    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;
-    // Name tag
-    agentsHtml += \x27<div class="iso-name" style="color:\x27+(isDone?\x27#4ade80\x27:(isActive?\x27#a5b4fc\x27:(isErr?\x27#f87171\x27:\x27#6b7280\x27)))+\x27">\x27+esc(lbl)+\x27</div>\x27;
-    // Iso desk below character
+    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;
   });
@@ -3886,17 +3967,16 @@ function renderStudioNodes() {
   // ── Orchestrator ──────────────────────────────────────────────────────────
   var orchHtml = \x27\x27;
   if (showMaster) {
-    var oPh = isoProject(ISO_COLS / 2, 0.5);
-    var orchPhrase = [\x27Analizzo il progresso...\x27, \x27Verifico gli step...\x27, \x27Coordinamento...\x27, \x27Supervisione in corso\x27][Math.floor(Date.now()/3000)%4];
+    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
-      ? (\x27Eseguiti \x27+doneCount+\x27/\x27+totalCount)
-      : (orchDone ? \x27Workflow completato!\x27 : \x27In pianificazione\x27);
-    orchHtml = \x27<div class="prl-master \x27+orchAnim+\x27" id="wfOrch" style="position:absolute;left:\x27+(oPh.x+30)+\x27px;top:\x27+(oPh.y-10)+\x27px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:2px">\x27+
-      \x27<div class="iso-bubble iso-bubble--orch" id="wfOrchBubble" style="border-color:#818cf8;color:#a5b4fc;max-width:120px">\x27+esc(orchStatus)+\x27</div>\x27+
+      ? (\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:#818cf8;font-size:8px">Orchestratore</div>\x27+
+      \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;
   }
 
@@ -3909,8 +3989,8 @@ function renderStudioNodes() {
     \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:10px">\x27+
-    isoFloorSvg(ISO_COLS + 2, 4)+
+    \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>\x27+
@@ -4389,8 +4469,9 @@ async function runStudio() {
   // Keep attachmentContext — it was loaded before hitting Run
   parlActiveAgent = null;
   parlDoneAgents = {};
+  _parlPersistHtml = null; // clear persisted parliament for fresh run
   var parlBlockEl = document.getElementById('studioParliamentBlock');
-  if (parlBlockEl) parlBlockEl.style.display = 'none';
+  if (parlBlockEl) { parlBlockEl.innerHTML = ''; parlBlockEl.style.display = 'none'; }
   renderStudioNodes();
   renderStudioLog();
   renderStudioResult();
@@ -5199,6 +5280,9 @@ async function runStudio() {
             flyingDocHtml += \x27</div>\x27;
           }
 
+          // Persist across tab navigations (snapshot — animations won\x27t replay but structure is preserved)
+          if (pb.innerHTML && pb.innerHTML.length < 60000) { _parlPersistHtml = pb.innerHTML; }
+
         }
 
         // Show initial R1 block and scroll into view
@@ -5365,6 +5449,7 @@ async function runStudio() {
         }
       }
       if (parlFinal && parlFinal.style.display !== 'none' && parlFinal.innerHTML) {
+        _parlPersistHtml = parlFinal.innerHTML; // persist so tab nav doesn't lose it
         doScroll(parlFinal);
         setTimeout(function(){ doScroll(resEl); }, 2200);
       } else if (resEl) {
@@ -5611,13 +5696,16 @@ function runStudioStep(idx, node, task, context, stepDef, signal) {
                   if (tb) {
                     if (isStatus) {
                       var st = ev.token.replace(new RegExp(\x27[\\\\r\\\\n]+\x27,\x27g\x27), \x27 \x27);
-                      // Render [Searching: "query"] as a styled search chip
-                      var srchM = st.match(/^\\[Searching:\\s*"([^"]+)"\\]\\s*$/);
+                      // Strip surrounding brackets for display
+                      var stLabel = st.replace(new RegExp(\x27^\\\\[\x27), \x27\x27).replace(new RegExp(\x27\\\\]\\\\s*$\x27), \x27\x27).trim();
+                      // Special chip for Searching
+                      var srchM = st.match(new RegExp(\x27^\\\\[Searching:\\\\s*"([^"]+)"\\\\]\\\\s*$\x27));
                       if (srchM) {
                         var qEsc = srchM[1].replace(/&/g,\x27&amp;\x27).replace(/</g,\x27&lt;\x27).replace(/>/g,\x27&gt;\x27);
-                        tb.innerHTML = \x27<span style="display:inline-flex;align-items:center;gap:6px;background:#1c1c28;border:1px solid #6366f133;border-radius:20px;padding:3px 10px 3px 8px;font-size:11px;font-family:var(--mono)"><span style="color:#6366f1">&#128269;</span><span style="color:var(--dim)">Cercando</span><strong style="color:#a5b4fc">\x27 + qEsc + \x27</strong><span style="color:#6366f1;animation:pulse 1s infinite">&#183;&#183;&#183;</span></span>\x27;
+                        tb.innerHTML = \x27<span class="iso-status-chip"><span class="iso-status-dot"></span>&#128269; <span style="color:var(--dim)">Cercando</span> <strong style="color:#a5b4fc">\x27+qEsc+\x27</strong></span>\x27;
                       } else {
-                        tb.textContent = st;
+                        var stEsc = stLabel.replace(/&/g,\x27&amp;\x27).replace(/</g,\x27&lt;\x27).replace(/>/g,\x27&gt;\x27);
+                        tb.innerHTML = \x27<span class="iso-status-chip"><span class="iso-status-dot"></span>\x27+stEsc+\x27</span>\x27;
                       }
                     } else {
                       // Word-by-word streaming: APPEND new chars, never overwrite
@@ -5704,9 +5792,14 @@ function runStudioStep(idx, node, task, context, stepDef, signal) {
                 }
               }
               if (ev.usage) {
+                // Backend sends accurate usage at end: add input, replace out estimate with real value
                 var uIn = ev.usage.input||0; var uOut = ev.usage.output||0;
-                stepTokensIn += uIn; stepTokensOut += uOut;
-                studioAddTokens(uIn, uOut);
+                // Correct output: remove per-token estimate already added, replace with real count
+                var outDiff = uOut - stepTokensOut;
+                studioTokens.out = Math.max(0, studioTokens.out + outDiff);
+                stepTokensIn += uIn; stepTokensOut = uOut;
+                studioTokens.in += uIn;
+                studioUpdateTokenBar();
               } else if (ev.token && !isStatus) {
                 var est = Math.ceil(ev.token.length/4);
                 stepTokensOut += est; studioTokens.out += est; studioUpdateTokenBar();
@@ -5728,6 +5821,12 @@ function runStudioStep(idx, node, task, context, stepDef, signal) {
 }
 
 function renderStudio(el) {
+  // Persist parliament block across tab navigations
+  var existingParl = document.getElementById('studioParliamentBlock');
+  if (existingParl && existingParl.innerHTML.trim()) {
+    _parlPersistHtml = existingParl.innerHTML;
+  }
+
   var examplesHtml = STUDIO_EXAMPLES.map(function(ex) {
     return '<button class="studio-example-btn" onclick="document.getElementById(\\'studioTaskInput\\').value=' + JSON.stringify(ex) + '">' + esc(ex.slice(0, 52)) + (ex.length > 52 ? '...' : '') + '</button>';
   }).join('');
@@ -5870,7 +5969,6 @@ function renderStudio(el) {
         '<div class="studio-log" id="studioLog" style="display:none"></div>' +
         '<div id="studioParliamentBlock" style="display:none;margin-bottom:12px"></div>' +
         '<div id="studioResult"></div>' +
-        '<div id="studioSessionsBar" style="margin-top:16px;display:none"></div>' +
       '</div>' +
 
       // ── AGENT SIDEBAR ──
@@ -5883,6 +5981,7 @@ function renderStudio(el) {
         '<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>' +
     '</div>';
 
@@ -5890,9 +5989,18 @@ function renderStudio(el) {
   renderStudioLog();
   renderStudioResult();
   renderStudioSessionsBar();
-  studioTokens = {in:0,out:0};
+  // Restore token bar (preserve counts across re-renders)
+  studioUpdateTokenBar();
   // Restore pipeline from state
   renderBuilderPipeline();
+  // Restore parliament block if it was visible before tab navigation
+  if (_parlPersistHtml) {
+    var parlRestoreEl = document.getElementById('studioParliamentBlock');
+    if (parlRestoreEl) {
+      parlRestoreEl.innerHTML = _parlPersistHtml;
+      parlRestoreEl.style.display = 'block';
+    }
+  }
 }
 
 // ---- STUDIO SIDEBAR TAB ----
@@ -6378,10 +6486,10 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .studio-header{margin-bottom:20px}
 .studio-header h2{font-size:15px;color:var(--green);margin-bottom:4px}
 .studio-header p{font-size:11px;color:var(--dim);line-height:1.5}
-.studio-input-row{display:flex;gap:8px;margin-bottom:20px}
-.studio-input-row textarea{flex:1;resize:none;height:60px;padding:10px 14px;font-size:13px;border-radius:var(--r);border:1px solid var(--border2)}
+.studio-input-row{display:flex;gap:8px;margin-bottom:16px;align-items:flex-start}
+.studio-input-row textarea{flex:1;resize:vertical;min-height:90px;max-height:200px;padding:10px 14px;font-size:13px;border-radius:var(--r);border:1px solid var(--border2);line-height:1.5}
 .studio-input-row textarea:focus{border-color:var(--green3)}
-.studio-run-btn{background:var(--green3);color:var(--bg);padding:0 20px;border-radius:var(--r);font-weight:700;font-size:13px;white-space:nowrap;align-self:stretch;min-width:90px}
+.studio-run-btn{background:var(--green3);color:var(--bg);padding:0 16px;border-radius:var(--r);font-weight:600;font-size:12px;white-space:nowrap;align-self:stretch;min-width:80px;letter-spacing:.2px}
 .studio-run-btn:disabled{opacity:.4}
 .studio-canvas{position:relative;width:100%;min-height:220px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:20px;overflow:hidden}
 .studio-canvas__empty{display:flex;align-items:center;justify-content:center;height:180px;color:var(--dim);font-size:11px;flex-direction:column;gap:8px}
@@ -6538,7 +6646,11 @@ 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:#0d0b1e;box-shadow:inset 0 0 40px rgba(0,0,0,.6);cursor:default;max-width:100%;overflow-x:auto}
+.iso-scene{background:#f0ede6;cursor:default;max-width:100%;overflow-x:auto;box-shadow:0 4px 24px rgba(0,0,0,.18)}
+/* 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)}
 /* Thought bubble / speech bubble above character */
@@ -6608,7 +6720,7 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .prl-conv-bar-inner{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:4px;transition:width .8s ease}
 .prl-conv-text{font-size:9px;color:#86efac;line-height:1.55}
 .studio-log{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;max-height:380px;overflow-y:auto;font-size:11.5px;line-height:1.65}
-.studio-log-entry{margin-bottom:12px;padding:10px 12px;border-radius:8px;background:var(--bg3);border:1px solid var(--border)}
+.studio-log-entry{margin-bottom:10px;padding:14px 16px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);min-height:80px}
 .studio-log-entry:last-child{margin-bottom:0}
 .studio-log-entry__header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
 .studio-log-entry__icon{font-size:15px}
@@ -6622,7 +6734,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:600px;overflow-y:auto}
+.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-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}