nothumanallowed 13.5.2 → 13.5.3

package/package.json

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

package/src/services/web-ui.mjs

@@ -4328,36 +4328,236 @@ async function runStudio() {
         var parlActiveAgent = null;
         var parlDoneAgents = {};
 
+        // ── Parliament boardroom: first call builds DOM, subsequent calls only update state ──
+        var parlBlockBuilt = false;
+
         function renderParlBlock(phase, activeLabel, convergence) {
           var pb = document.getElementById(\x27studioParliamentBlock\x27);
           if (!pb) return;
           pb.style.display = \x27block\x27;
-          // Always in normal document flow — no fixed/absolute positioning
-          pb.style.position = \x27\x27; pb.style.bottom = \x27\x27; pb.style.left = \x27\x27;
-          pb.style.transform = \x27\x27; pb.style.width = \x27\x27;
-          pb.style.top = \x27\x27; pb.style.zIndex = \x27\x27; pb.style.boxShadow = \x27\x27;
-          pb.style.maxWidth = \x27\x27;
-
-          // ── OFFICE CARTOON ANIMATION ─────────────────────────────────────────
-          // Each agent = a character at a desk doing visible work.
-          // Documents fly between agents during R2. MASTER walks around in R1.
+
           var phaseColor = {r1:\x27#6366f1\x27,r2:\x27#22d3ee\x27,r3:\x27#f59e0b\x27,done:\x27#22c55e\x27}[phase]||\x27#6366f1\x27;
           var phaseLabel = {
-            r1:\x27Round 1 \u2014 Ogni agente analizza il task in autonomia\x27,
-            r2:\x27Round 2 \u2014 Gli agenti si scambiano le analisi e le raffinano\x27,
-            r3:\x27Round 3 \u2014 HERALD media le posizioni divergenti\x27,
+            r1:\x27Round 1 \u2014 Ogni agente analizza\x27,
+            r2:\x27Round 2 \u2014 Cross-reading e raffinamento\x27,
+            r3:\x27Round 3 \u2014 HERALD media le divergenze\x27,
             done:\x27Deliberazione completata\x27
           }[phase]||\x27\x27;
-
           var n = proposals.length;
           var doneCount = Object.keys(parlDoneAgents).length;
           var progressPct = n > 0 ? Math.round(doneCount / n * 100) : 0;
 
-          // ── Build one desk+character card per agent ───────────────────────
-          // Character is SVG-drawn inline: head + body + arms + desk.
-          // Active = character types (arms animate). Done = character leans back, checkmark.
-          // R2 active = character holds document up and turns head.
+          // ─────────────────────────────────────────────────────────────────────
+          // BOARDROOM 3D — first call builds the full DOM structure.
+          // Subsequent calls ONLY update agent states (no innerHTML overwrite).
+          // ─────────────────────────────────────────────────────────────────────
+
+          if (!parlBlockBuilt) {
+            parlBlockBuilt = true;
+
+            // Build agent seat HTML (box + avatar)
+            function buildSeat(prop) {
+              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;
+              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+
+                  \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;
+
+            // 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+
+              // Table shadow
+              \x27<ellipse cx="80" cy="44" rx="74" ry="34" fill="rgba(0,0,0,.3)"/>\x27+
+              // Table surface — glossy dark wood
+              \x27<ellipse cx="80" cy="40" rx="74" ry="34" fill="#1e1440" stroke="#3a2880" stroke-width="2"/>\x27+
+              // Table shine
+              \x27<ellipse cx="60" cy="28" rx="30" ry="12" fill="rgba(150,130,255,.08)"/>\x27+
+              // NHA logo on table
+              \x27<text x="80" y="46" text-anchor="middle" font-family="system-ui" font-size="18" font-weight="900" fill="rgba(100,90,200,.25)" letter-spacing="2">NHA</text>\x27+
+              // Documents on table
+              \x27<rect x="62" y="34" width="18" height="14" rx="2" fill="#141028" stroke="#4a3880" stroke-width="1" transform="rotate(-8 71 41)"/>\x27+
+              \x27<rect x="82" y="36" width="18" height="14" rx="2" fill="#141028" stroke="#4a3880" stroke-width="1" transform="rotate(5 91 43)"/>\x27+
+              \x27</svg>\x27;
+
+            var orchHtml = \x27<div class="br-orch" id="brOrch">\x27+
+              \x27<div class="br-orch-speech" id="brOrchSpeech"></div>\x27+
+              orchSvg+
+              \x27<div class="br-orch-label">Orchestratore</div>\x27+
+              \x27</div>\x27;
+
+            // Phase indicator + progress
+            var headerHtml = \x27<div class="br-header">\x27+
+              \x27<span class="br-phase-chip" id="brPhaseChip"></span>\x27+
+              \x27<div class="br-progress-wrap" id="brProgressWrap"><div class="br-progress-bar" id="brProgressBar"></div></div>\x27+
+              \x27</div>\x27;
+
+            var convergeHtml = \x27<div class="br-convergence" id="brConvergence" style="display:none"></div>\x27;
+
+            pb.innerHTML =
+              \x27<div class="br-wrap">\x27+
+              headerHtml+
+              \x27<div class="br-room" style="--br-n:\x27+n+\x27">\x27+
+              \x27<div class="br-table-center">\x27+tableSvg+orchHtml+\x27</div>\x27+
+              \x27<div class="br-seats-ring" style="--br-n:\x27+n+\x27">\x27+seatsHtml+\x27</div>\x27+
+              \x27</div>\x27+
+              convergeHtml+
+              \x27</div>\x27;
+          }
+
+          // ── Update state (runs every call, including initial build) ──────────
 
+          // Phase chip
+          var chipEl = document.getElementById(\x27brPhaseChip\x27);
+          if (chipEl) { chipEl.textContent = phaseLabel; chipEl.style.setProperty(\x27--pc\x27, phaseColor); }
+
+          // Progress bar
+          var pbBar = document.getElementById(\x27brProgressBar\x27);
+          if (pbBar) pbBar.style.width = progressPct + \x27%\x27;
+          var pbWrap = document.getElementById(\x27brProgressWrap\x27);
+          if (pbWrap) pbWrap.style.display = convergence != null ? \x27none\x27 : \x27\x27;
+
+          // Convergence
+          var convEl = document.getElementById(\x27brConvergence\x27);
+          if (convEl && convergence != null) {
+            convEl.style.display = \x27block\x27;
+            convEl.innerHTML = \x27<div class="br-conv-bar-outer"><div class="br-conv-bar-inner" style="width:\x27+Math.min(convergence,100)+\x27%"></div></div>\x27+
+              \x27<div class="br-conv-text"><strong>\u2714 Convergenza \x27+convergence+\x27%</strong> \u2014 HERALD ha sintetizzato il consenso finale.</div>\x27;
+          }
+
+          // Orchestrator speech bubble
+          var orchSpeech = document.getElementById(\x27brOrchSpeech\x27);
+          if (orchSpeech) {
+            var orchSpeeches = {
+              r1: [\x27Analizzate!\x27,\x27Al lavoro!\x27,\x27Forza!\x27,\x27Pensate!\x27],
+              r2: [\x27Confrontate!\x27,\x27Leggete tutto!\x27,\x27Raffinare!\x27,\x27Scambiate!\x27],
+              r3: [\x27Mediazione!\x27,\x27Convergete!\x27,\x27Trovate accordo!\x27],
+              done: [\x27Ottimo!\x27,\x27Consenso!\x27,\x27Bene!\x27]
+            };
+            var spArr = orchSpeeches[phase] || orchSpeeches.r1;
+            if (phase === \x27done\x27) {
+              orchSpeech.style.display = \x27none\x27;
+            } else {
+              orchSpeech.style.display = \x27\x27;
+              // Rotate through phrases based on progress
+              orchSpeech.textContent = spArr[doneCount % spArr.length];
+              orchSpeech.style.borderColor = phaseColor;
+              orchSpeech.style.color = phaseColor;
+            }
+          }
+
+          // Orchestrator animation class
+          var orchEl = document.getElementById(\x27brOrch\x27);
+          if (orchEl) {
+            orchEl.className = \x27br-orch\x27 + (phase===\x27done\x27 ? \x27 br-orch--done\x27 : \x27 br-orch--active\x27);
+            orchEl.style.setProperty(\x27--oc\x27, phaseColor);
+          }
+
+          // Update each agent seat state
+          proposals.forEach(function(prop) {
+            var lbl = prop.label || prop.agent;
+            var safeLbl = lbl.replace(/[^a-zA-Z0-9_-]/g,\x27_\x27);
+            var seatEl = document.getElementById(\x27brseat_\x27+safeLbl);
+            var bubbleEl = document.getElementById(\x27brbubble_\x27+safeLbl);
+            var nameEl = document.getElementById(\x27brname_\x27+safeLbl);
+            var isDone = !!parlDoneAgents[lbl];
+            var isActive = lbl === activeLabel;
+
+            if (seatEl) {
+              seatEl.className = \x27br-seat\x27 +
+                (isActive ? \x27 br-seat--active\x27 : \x27\x27) +
+                (isDone ? \x27 br-seat--done\x27 : \x27\x27);
+              seatEl.style.setProperty(\x27--sc\x27, phaseColor);
+            }
+            if (bubbleEl) {
+              var actionStr2 = \x27\x27;
+              if (phase===\x27r1\x27 && isActive) actionStr2 = \x27...analizza\x27;
+              else if (phase===\x27r1\x27 && isDone) actionStr2 = \x27\u2714 bozza pronta\x27;
+              else if (phase===\x27r2\x27 && isActive) actionStr2 = \x27...legge + raffina\x27;
+              else if (phase===\x27r2\x27 && isDone) actionStr2 = \x27\u2714 raffinato\x27;
+              else if (phase===\x27r3\x27 && isActive) actionStr2 = \x27...media\x27;
+              else if (phase===\x27done\x27) actionStr2 = \x27\u2714 consenso\x27;
+              else if (!isActive && !isDone) actionStr2 = \x27in attesa\x27;
+              bubbleEl.textContent = actionStr2;
+              bubbleEl.style.display = actionStr2 ? \x27\x27 : \x27none\x27;
+              bubbleEl.style.borderColor = isActive ? phaseColor : (isDone ? \x27#22c55e\x27 : \x27#3a3060\x27);
+              bubbleEl.style.color = isActive ? phaseColor : (isDone ? \x27#4ade80\x27 : \x27#6b7280\x27);
+            }
+            if (nameEl) {
+              nameEl.style.color = isDone ? \x27#4ade80\x27 : (isActive ? phaseColor : \x27#8880aa\x27);
+            }
+          });
+
+          // ── Old function stubs needed by remaining code paths ────────────────
           function buildChar(prop, isDone, isActive, isOrchestratorTarget) {
             var lbl = prop.label || prop.agent;
             var ico = prop.icon || String.fromCharCode(9632);
@@ -4767,36 +4967,6 @@ async function runStudio() {
             flyingDocHtml += \x27</div>\x27;
           }
 
-          // ── Assemble agent desks row ──────────────────────────────────────
-          var desksHtml = proposals.map(function(prop) {
-            var lbl = prop.label || prop.agent;
-            return buildChar(prop, !!parlDoneAgents[lbl], lbl===activeLabel, false);
-          }).join(\x27\x27);
-
-          var convergenceHtml = convergence != null
-            ? (\x27<div class="prl-conv-wrap"><div class="prl-conv-bar-outer"><div class="prl-conv-bar-inner" style="width:\x27+Math.min(convergence,100)+\x27%"></div></div>\x27+
-               \x27<div class="prl-conv-text"><strong>\u2714 Convergenza \x27+convergence+\x27%</strong> &mdash; le analisi condividono il \x27+convergence+\x27% dei concetti chiave (Jaccard). HERALD ha sintetizzato il consenso finale.</div></div>\x27)
-            : (\x27<div class="prl-progress"><div class="prl-progress__bar" style="width:\x27+progressPct+\x27%"></div></div>\x27);
-
-          pb.innerHTML =
-            \x27<div class="prl-wrap">\x27+
-            \x27<div class="prl-header"><span class="prl-phase-chip" style="--pc:\x27+phaseColor+\x27">\x27+phaseLabel+\x27</span></div>\x27+
-            \x27<div class="prl-office">\x27+
-            officeRoomDecor()+
-            \x27<div class="prl-office-floor"></div>\x27+
-            \x27<div class="prl-desks-row" style="position:relative;z-index:2">\x27+desksHtml+\x27</div>\x27+
-            masterHtml+
-            flyingDocHtml+
-            \x27</div>\x27+
-            convergenceHtml+
-            \x27</div>\x27;
-
-          // Force Safari compositing repaint
-          void pb.offsetHeight;
-          requestAnimationFrame(function(){
-            pb.style.opacity = \x270.99\x27;
-            requestAnimationFrame(function(){ pb.style.opacity = \x271\x27; });
-          });
         }
 
         // Show initial R1 block and scroll into view
@@ -5951,7 +6121,68 @@ input:focus,textarea:focus{border-color:var(--green3)}
 .wf-sbraita-bubble{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:#1a0a0a;border:1.5px solid #ef4444;color:#fca5a5;font-family:var(--mono);font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;white-space:nowrap;letter-spacing:.5px;animation:sbraitaPop .4s ease-in-out infinite alternate;pointer-events:none;z-index:4}
 .wf-sbraita-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ef4444}
 @keyframes sbraitaPop{0%{transform:translateX(-50%) scale(1) rotate(-2deg)}100%{transform:translateX(-50%) scale(1.06) rotate(2deg)}}
-/* ── Parliament Office Cartoon ── */
+/* ── Parliament Boardroom 3D ── */
+/* Outer wrapper */
+.br-wrap{background:#090714;border:1.5px solid #6366f1;border-radius:14px;padding:12px 14px;margin-bottom:16px;animation:stNodeIn .35s ease forwards;overflow:hidden}
+/* Header: phase chip + progress */
+.br-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
+.br-phase-chip{font-size:10px;font-weight:800;font-family:var(--mono);letter-spacing:.3px;color:var(--pc,#6366f1);background:rgba(99,102,241,.12);border:1px solid var(--pc,rgba(99,102,241,.4));border-radius:20px;padding:3px 12px;display:inline-block;transition:color .4s,border-color .4s}
+.br-progress-wrap{flex:1;height:3px;background:#1a1630;border-radius:4px;overflow:hidden;min-width:60px}
+.br-progress-bar{height:100%;background:linear-gradient(90deg,#6366f1,#22d3ee);border-radius:4px;transition:width .5s ease;width:0%}
+/* Boardroom 3D scene */
+.br-room{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px 16px;
+  background:linear-gradient(180deg,#141030 0%,#1c1848 50%,#141030 100%);
+  border-radius:10px;overflow:hidden}
+/* Ambient ceiling glow */
+.br-room::before{content:"";position:absolute;inset:0;background:
+  radial-gradient(ellipse 70% 50% at 50% 5%,rgba(180,160,255,.2) 0%,transparent 70%),
+  radial-gradient(ellipse 30% 30% at 50% 0%,rgba(255,220,100,.12) 0%,transparent 60%);pointer-events:none}
+/* Floor perspective */
+.br-room::after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;
+  background:linear-gradient(180deg,transparent 0%,rgba(100,80,200,.08) 50%,rgba(60,40,120,.25) 100%);
+  border-top:1px solid rgba(100,80,200,.15);pointer-events:none}
+/* Center: table + orchestrator */
+.br-table-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;z-index:3}
+/* Orchestrator standing at head of table */
+.br-orch{display:flex;flex-direction:column;align-items:center;gap:2px;z-index:4;position:relative}
+.br-orch--active .br-orch-arm-l{transform-origin:50% 0%;animation:brOrchArmL 2s ease-in-out infinite}
+.br-orch--active .br-orch-arm-r{transform-origin:50% 0%;animation:brOrchArmR 2.4s ease-in-out infinite}
+@keyframes brOrchArmL{0%,100%{transform:rotate(0deg)}40%{transform:rotate(-22deg)}70%{transform:rotate(-10deg)}}
+@keyframes brOrchArmR{0%,100%{transform:rotate(0deg)}30%{transform:rotate(18deg)}65%{transform:rotate(8deg)}}
+.br-orch--done{filter:drop-shadow(0 0 12px #22c55eaa)}
+.br-orch-speech{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
+  font-size:9px;font-weight:800;font-family:var(--mono);letter-spacing:.4px;
+  padding:3px 8px;border:1.5px solid #6366f1;border-radius:8px;
+  background:#0d0a1e;white-space:nowrap;
+  animation:brSpeechPop .6s ease-in-out infinite alternate;z-index:5;pointer-events:none}
+@keyframes brSpeechPop{0%{transform:translateX(-50%) scale(1) rotate(-1deg)}100%{transform:translateX(-50%) scale(1.05) rotate(1deg)}}
+.br-orch-speech::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#6366f1}
+.br-orch-label{font-size:8px;font-family:var(--mono);font-weight:800;color:#818cf8;text-align:center;letter-spacing:.5px}
+/* Seats ring around table */
+.br-seats-ring{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:2;padding:4px 0;width:100%}
+/* Individual seat / cubicle */
+.br-seat{display:flex;flex-direction:column;align-items:center;gap:0;transition:transform .3s}
+.br-seat-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px 6px;border-radius:12px;
+  background:#1a1535;border:1.5px solid #3a3060;
+  box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
+  transition:border-color .3s,background .3s,box-shadow .3s;position:relative;min-width:70px}
+.br-seat--active .br-seat-box{background:#1e1a45;border-color:var(--sc,#6366f1);box-shadow:0 0 20px rgba(99,102,241,.3),0 0 40px rgba(99,102,241,.08),inset 0 1px 0 rgba(150,130,255,.15)}
+.br-seat--active{transform:scale(1.04)}
+.br-seat--done .br-seat-box{background:#162516;border-color:#2a4a2a}
+/* Action bubble above agent */
+.br-bubble{font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:7px;border:1px solid #3a3060;background:#0d0a1e;min-height:14px;text-align:center;line-height:1.4;transition:all .3s;word-break:break-word;max-width:90px}
+/* Agent name */
+.br-seat-name{font-size:9px;font-family:var(--mono);font-weight:700;text-align:center;white-space:normal;word-break:break-word;max-width:90px;line-height:1.3;margin-top:2px;transition:color .3s}
+/* SVG arm animations when agent is active (typing) */
+.br-seat--active .br-arm-l{transform-origin:50% 100%;animation:brArmType .7s ease-in-out infinite}
+.br-seat--active .br-arm-r{transform-origin:50% 100%;animation:brArmType .7s ease-in-out infinite reverse}
+@keyframes brArmType{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(2px)}}
+/* Convergence */
+.br-convergence{margin-top:10px;padding:8px 12px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.22);border-radius:8px}
+.br-conv-bar-outer{height:4px;background:#1a2e1a;border-radius:4px;overflow:hidden;margin-bottom:6px}
+.br-conv-bar-inner{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:4px;transition:width .8s ease}
+.br-conv-text{font-size:9px;color:#86efac;line-height:1.55}
+/* Keep old prl-* classes for workflow (not touched) */
 .prl-wrap{background:#0b0918;border:1.5px solid #6366f1;border-radius:14px;padding:14px 16px 12px;margin-bottom:16px;animation:stNodeIn .35s ease forwards;overflow:hidden}
 @keyframes parlPulse{0%,100%{border-color:#6366f1;box-shadow:none}50%{border-color:#818cf8;box-shadow:0 0 20px rgba(99,102,241,.3)}}
 .prl-header{display:flex;align-items:center;margin-bottom:10px}