nothumanallowed 13.5.7 → 13.5.8

package/package.json

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

package/src/services/web-ui.mjs

@@ -3626,70 +3626,127 @@ function officeRoomDecor() {
 // 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_ORIGIN_X = 300;
+var ISO_ORIGIN_Y = 60;
 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 SVG background
 function isoFloorSvg(cols, rows) {
-  var w = 600; var h = 240;
+  var w = 640; var h = 320;
   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;
+
+  // ── BACK WALL (white/cream) ──────────────────────────────────────────
+  out += \x27<polygon points="0,100 320,20 320,120 0,200" fill="#f5f3ee"/>\x27;
+  out += \x27<polygon points="320,20 640,100 640,200 320,120" fill="#edeae3"/>\x27;
+  out += \x27<line x1="0" y1="100" x2="320" y2="20" stroke="#ccc" stroke-width="1.5"/>\x27;
+  out += \x27<line x1="320" y1="20" x2="640" y2="100" stroke="#bbb" stroke-width="1.5"/>\x27;
+  // Wall corner vertical line
+  out += \x27<line x1="320" y1="20" x2="320" y2="120" stroke="#c8c4bc" stroke-width="1"/>\x27;
+
+  // ── WINDOWS — 3 centered on left wall ────────────────────────────────
+  // Win L1
+  out += \x27<polygon points="30,122 90,102 90,155 30,175" fill="#d0eeff" stroke="#aac8e8" stroke-width="1"/>\x27;
+  out += \x27<line x1="60,112" y1="60" x2="60" y2="130" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  out += \x27<line x1="30,148" y1="148" x2="90" y2="128" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  out += \x27<polygon points="30,122 90,102 90,108 30,128" fill="#b8ddf8" opacity=".4"/>\x27;
+  out += \x27<polygon points="30,122 90,102 90,155 30,175" fill="rgba(200,230,255,.12)"/>\x27;
+  // Win L2 (center-left)
+  out += \x27<polygon points="110,102 175,80 175,132 110,154" fill="#d0eeff" stroke="#aac8e8" stroke-width="1"/>\x27;
+  out += \x27<polygon points="110,102 175,80 175,88 110,110" fill="#b8ddf8" opacity=".4"/>\x27;
+  out += \x27<line x1="142" y1="91" x2="142" y2="143" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  out += \x27<line x1="110" y1="128" x2="175" y2="106" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  out += \x27<polygon points="110,102 175,80 175,132 110,154" fill="rgba(200,230,255,.10)"/>\x27;
+  // Win L3 (center)
+  out += \x27<polygon points="195,88 255,68 255,118 195,138" fill="#d0eeff" stroke="#aac8e8" stroke-width="1"/>\x27;
+  out += \x27<polygon points="195,88 255,68 255,76 195,96" fill="#b8ddf8" opacity=".4"/>\x27;
+  out += \x27<line x1="225" y1="78" x2="225" y2="128" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  out += \x27<line x1="195" y1="113" x2="255" y2="93" stroke="#aac8e8" stroke-width=".8"/>\x27;
+  // Sunlight shafts from windows
+  out += \x27<polygon points="50,155 90,140 120,260 80,275" fill="rgba(255,250,220,.06)"/>\x27;
+  out += \x27<polygon points="130,132 175,116 200,260 155,275" fill="rgba(255,250,220,.05)"/>\x27;
+  out += \x27<polygon points="210,116 255,100 270,260 225,275" fill="rgba(255,250,220,.04)"/>\x27;
+
+  // ── ART on left wall ────────────────────────────────────────────────
+  // Frame 1 (small painting near top-right of left wall)
+  out += \x27<polygon points="275,72 310,60 310,90 275,102" fill="#e8e4dc" stroke="#bbb" stroke-width="1"/>\x27;
+  out += \x27<polygon points="278,74 307,63 307,88 278,99" fill="#7a9ed4"/>\x27;
+  out += \x27<polygon points="285,77 303,70 303,84 285,91" fill="#a8c4e8"/>\x27;
+  out += \x27<ellipse cx="294" cy="80" rx="5" ry="4" fill="#fff" opacity=".5"/>\x27;
+
+  // ── PLANT (bottom-left corner) ───────────────────────────────────────
+  out += \x27<ellipse cx="30" cy="188" rx="10" ry="5" fill="#2d4a1e" opacity=".7"/>\x27;
+  out += \x27<rect x="25" y="178" width="10" height="10" rx="2" fill="#5a3a1a"/>\x27;
+  out += \x27<path d="M30 178 C25 165 18 155 22 148 C26 142 30 148 30 178" fill="#3a7a1e"/>\x27;
+  out += \x27<path d="M30 178 C35 162 42 155 38 148 C34 142 30 150 30 178" fill="#4a8a26"/>\x27;
+  out += \x27<path d="M30 175 C22 168 16 160 18 153" stroke="#3a7a1e" stroke-width="2" fill="none" stroke-linecap="round"/>\x27;
+  out += \x27<path d="M30 170 C38 165 44 158 42 151" stroke="#4a8a26" stroke-width="2" fill="none" stroke-linecap="round"/>\x27;
+
+  // ── CEILING CHANDELIER with glow ─────────────────────────────────────
+  out += \x27<line x1="320" y1="0" x2="320" y2="18" stroke="#999" stroke-width="2"/>\x27;
+  // Chandelier body
+  out += \x27<ellipse cx="320" cy="18" rx="24" ry="7" fill="#d4c88a" stroke="#b8a860" stroke-width="1.5"/>\x27;
+  out += \x27<ellipse cx="320" cy="22" rx="20" ry="5" fill="#e8d898"/>\x27;
+  // Bulbs hanging down
+  out += \x27<circle cx="305" cy="28" r="5" fill="#fffbe8" filter="url(#glow)"/>\x27;
+  out += \x27<circle cx="320" cy="26" r="6" fill="#fffbe8" filter="url(#glow)"/>\x27;
+  out += \x27<circle cx="335" cy="28" r="5" fill="#fffbe8" filter="url(#glow)"/>\x27;
+  out += \x27<line x1="305" y1="22" x2="305" y2="28" stroke="#aaa" stroke-width=".8"/>\x27;
+  out += \x27<line x1="320" y1="22" x2="320" y2="26" stroke="#aaa" stroke-width=".8"/>\x27;
+  out += \x27<line x1="335" y1="22" x2="335" y2="28" stroke="#aaa" stroke-width=".8"/>\x27;
+  // Light cone glow on floor/walls
+  out += \x27<radialGradient id="chandelierGlow" cx="50%" cy="0%" r="60%"><stop offset="0%" stop-color="rgba(255,245,180,.22)"/><stop offset="100%" stop-color="rgba(255,245,180,0)"/></radialGradient>\x27;
+  out += \x27<filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>\x27;
+  out += \x27<ellipse cx="320" cy="180" rx="200" ry="120" fill="url(#chandelierGlow)"/>\x27;
+
+  // ── PARQUET FLOOR — long narrow planks ───────────────────────────────
+  // Draw rectangular plank tiles in iso projection
+  var PLANK_W = ISO_TILE_W; var PLANK_H = ISO_TILE_H;
+  var plankColors = [\x27#b5854a\x27,\x27#a8783c\x27,\x27#bf9055\x27,\x27#c49a60\x27,\x27#a07234\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 + 110;
+      var pIdx = (r2 * 3 + c2) % plankColors.length;
+      var pFill = plankColors[pIdx];
+      var ppts = ptx+\x27,\x27+pty+\x27 \x27+(ptx+PLANK_W/2)+\x27,\x27+(pty+PLANK_H/2)+\x27 \x27+ptx+\x27,\x27+(pty+PLANK_H)+\x27 \x27+(ptx-PLANK_W/2)+\x27,\x27+(pty+PLANK_H/2);
+      out += \x27<polygon points="\x27+ppts+\x27" fill="\x27+pFill+\x27" stroke="#8a6028" stroke-width=".7" opacity=".95"/>\x27;
+      // Plank grain lines (long horizontal across plank)
+      out += \x27<line x1="\x27+(ptx-PLANK_W/2+4)+\x27" y1="\x27+(pty+PLANK_H/2)+\x27" x2="\x27+(ptx+PLANK_W/2-4)+\x27" y2="\x27+(pty+PLANK_H/2)+\x27" stroke="rgba(0,0,0,.06)" stroke-width=".5"/>\x27;
     }
   }
+  // Floor highlight (lamp reflection)
+  out += \x27<ellipse cx="320" cy="220" rx="90" ry="30" fill="rgba(255,250,200,.08)"/>\x27;
+
   out += \x27</svg>\x27;
   return out;
 }
-// Small isometric desk object at iso position
+// Small isometric desk object at iso position — bright wood
 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+
+  var ac = accentColor || \x27#888\x27;
+  var doneDesk = ac === \x27#22c55e\x27;
+  return \x27<svg viewBox="0 0 72 44" width="72" height="44" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:\x27+(x-36)+\x27px;top:\x27+(y+8)+\x27px;z-index:\x27+(Math.round(y))+\x27;pointer-events:none">\x27+
+    // Desk top face — warm wood
+    \x27<polygon points="36,4 62,18 36,32 10,18" fill="#d4a855" stroke="#b8893a" stroke-width="1"/>\x27+
+    \x27<polygon points="36,4 62,18 36,32 10,18" fill="rgba(255,255,255,.08)"/>\x27+
+    // Grain lines on top
+    \x27<line x1="22" y1="18" x2="50" y2="10" stroke="rgba(0,0,0,.1)" stroke-width=".8"/>\x27+
+    \x27<line x1="22" y1="22" x2="50" y2="14" stroke="rgba(0,0,0,.07)" stroke-width=".8"/>\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+
+    \x27<polygon points="62,18 62,36 36,50 36,32" fill="#a8783c" stroke="#8a5c28" 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+
+    \x27<polygon points="10,18 36,32 36,50 10,36" fill="#c49050" stroke="#9e7234" stroke-width=".8"/>\x27+
+    // Monitor on desk — light screen
+    \x27<polygon points="28,10 44,16 44,26 28,20" fill="#1e2840" stroke="\x27+ac+\x27" stroke-width="1.2"/>\x27+
+    \x27<polygon points="29,11 43,17 43,25 29,19" fill="\x27+(doneDesk?\x27#0d2010\x27:\x27#0d1a2e\x27)+\x27"/>\x27+
+    // Screen glow lines
+    \x27<line x1="31" y1="14" x2="41" y2="18" stroke="\x27+ac+\x27" stroke-width=".9" opacity=".8"/>\x27+
+    \x27<line x1="31" y1="17" x2="40" y2="20" stroke="\x27+ac+\x27" stroke-width=".9" opacity=".5"/>\x27+
+    \x27<line x1="31" y1="20" x2="39" y2="23" stroke="\x27+ac+\x27" stroke-width=".9" opacity=".3"/>\x27+
     \x27</svg>\x27;
 }
 // Isometric JRPG sprite character — top-down 3/4 perspective, Pokemon-style
@@ -3835,10 +3892,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 +3901,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 +3936,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 +3958,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+
@@ -5611,13 +5660,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 +5756,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();
@@ -5870,7 +5927,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 +5939,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>';
 
@@ -6378,10 +6435,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 +6595,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 +6669,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 +6683,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}