nothumanallowed 13.5.12 → 13.5.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nothumanallowed",
3
- "version": "13.5.12",
3
+ "version": "13.5.14",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "bin": {
package/src/constants.mjs CHANGED
@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
5
5
  const __filename = fileURLToPath(import.meta.url);
6
6
  const __dirname = path.dirname(__filename);
7
7
 
8
- export const VERSION = '13.5.12';
8
+ export const VERSION = '13.5.14';
9
9
  export const BASE_URL = 'https://nothumanallowed.com/cli';
10
10
  export const API_BASE = 'https://nothumanallowed.com/api/v1';
11
11
 
@@ -3807,7 +3807,7 @@ function isoCharSvg(opts) {
3807
3807
  var glowColor = isActive ? accentColor : (isDone ? \x27#22c55e\x27 : \x27transparent\x27);
3808
3808
  var glowFilter = (isActive || isDone) ? (\x27filter:drop-shadow(0 0 8px \x27+glowColor+\x27aa)\x27) : \x27\x27;
3809
3809
  var badgeHtml = isDone
3810
- ? \x27<div style="position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;box-shadow:0 0 6px #22c55e88">&#10003;</div>\x27
3810
+ ? \x27<div style="position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:#1f2937;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4)">&#10003;</div>\x27
3811
3811
  : (isActive
3812
3812
  ? \x27<div style="position:absolute;top:-4px;right:-4px;width:14px;height:14px;background:\x27+accentColor+\x27;border-radius:50%;animation:statusPulse 1s ease-in-out infinite;box-shadow:0 0 8px \x27+accentColor+\x27"></div>\x27
3813
3813
  : \x27\x27);
@@ -3916,7 +3916,7 @@ function renderStudioNodes() {
3916
3916
  var phaseLabel2 = hasActive
3917
3917
  ? (\x27Workflow in esecuzione \u2014 \x27+doneCount+\x27/\x27+totalCount)
3918
3918
  : (doneCount===totalCount && totalCount>0 ? \x27Workflow completato\x27 : \x27Workflow pianificato\x27);
3919
- var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#22c55e\x27 : \x27#6b7280\x27);
3919
+ var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#1f2937\x27 : \x27#6b7280\x27);
3920
3920
 
3921
3921
  // ── CSS Grid layout: 100% width, responsive ──────────────────────────────
3922
3922
  // All stations (orch + agents) in a grid, max 4 per row
@@ -3934,19 +3934,19 @@ function renderStudioNodes() {
3934
3934
 
3935
3935
  // Build all station cards (orchestrator first, then agents)
3936
3936
  function buildStation2(label, toolEmoji, isOrch, isActive, isDone, isErr, emojiIdx) {
3937
- var accentColor = isOrch ? \x27#818cf8\x27 : (isActive ? \x27#6366f1\x27 : (isDone ? \x27#22c55e\x27 : (isErr ? \x27#ef4444\x27 : \x27#9ca3af\x27)));
3938
- var nameBg = isDone ? \x27#dcfce7\x27 : (isActive ? \x27#ede9fe\x27 : (isOrch ? \x27#e0e7ff\x27 : \x27rgba(255,255,255,.85)\x27));
3939
- var nameColor = isDone ? \x27#16a34a\x27 : (isActive ? \x27#4f46e5\x27 : (isOrch ? \x27#4338ca\x27 : (isErr ? \x27#dc2626\x27 : \x27#374151\x27)));
3937
+ var accentColor = isOrch ? \x27#818cf8\x27 : (isActive ? \x27#6366f1\x27 : (isDone ? \x27#374151\x27 : (isErr ? \x27#ef4444\x27 : \x27#9ca3af\x27)));
3938
+ var nameBg = isDone ? \x27rgba(0,0,0,.1)\x27 : (isActive ? \x27#ede9fe\x27 : (isOrch ? \x27#e0e7ff\x27 : \x27rgba(255,255,255,.85)\x27));
3939
+ var nameColor = isDone ? \x27#111827\x27 : (isActive ? \x27#4f46e5\x27 : (isOrch ? \x27#4338ca\x27 : (isErr ? \x27#dc2626\x27 : \x27#374151\x27)));
3940
3940
  var monScreen = isOrch
3941
3941
  ? \x27<span style="font-size:11px">&#128269;</span>\x27
3942
- : (isDone ? \x27<span style="color:#22c55e;font-size:13px">&#10003;</span>\x27
3942
+ : (isDone ? \x27<span style="color:#111827;font-size:13px">&#10003;</span>\x27
3943
3943
  : (isActive ? \x27<span class="iso-monitor-blink"></span>\x27
3944
3944
  : \x27<span style="font-size:8px;opacity:.35;color:#818cf8">&#9632;</span>\x27));
3945
3945
  var bubbleText = isOrch
3946
3946
  ? (hasActive ? (\x27Step \x27+doneCount+\x27/\x27+totalCount) : (doneCount===totalCount&&totalCount>0 ? \x27\u2714 Fatto!\x27 : \x27In attesa\x27))
3947
3947
  : (isActive ? \x27\u2022\u2022\u2022 lavora\x27 : (isDone ? \x27\u2714 fatto\x27 : (isErr ? \x27\u2715 errore\x27 : \x27\x27)));
3948
- var bubbleBg = isOrch ? \x27rgba(99,102,241,.15)\x27 : (isActive ? \x27rgba(99,102,241,.12)\x27 : (isDone ? \x27rgba(34,197,94,.12)\x27 : \x27rgba(239,68,68,.12)\x27));
3949
- var glowBox = isActive ? (\x270 0 0 3px \x27+accentColor+\x2744,0 8px 24px \x27+accentColor+\x2733\x27) : (isDone ? (\x270 0 0 2px #22c55e44\x27) : \x27none\x27);
3948
+ var bubbleBg = isOrch ? \x27rgba(99,102,241,.15)\x27 : (isActive ? \x27rgba(99,102,241,.12)\x27 : (isDone ? \x27rgba(0,0,0,.08)\x27 : \x27rgba(239,68,68,.12)\x27));
3949
+ var glowBox = isActive ? (\x270 0 0 3px \x27+accentColor+\x2744,0 8px 24px \x27+accentColor+\x2733\x27) : (isDone ? (\x270 0 0 2px rgba(0,0,0,.25)\x27) : \x27none\x27);
3950
3950
  var orchWalkClass = (isOrch && hasActive) ? \x27 iso-orch-walking\x27 : (isOrch && doneCount===totalCount&&totalCount>0 ? \x27 iso-orch-done\x27 : \x27\x27);
3951
3951
  var charHtml = isoCharSvg({emojiIdx: isOrch ? 99 : emojiIdx, isActive: isActive, isDone: isDone, scale: 1.1, accentColor: accentColor});
3952
3952
  var clickAttr = isOrch ? \x27\x27 : (\x27data-agent-label="\x27+esc(label)+\x27" onclick="studioScrollToAgent(this.getAttribute(String.fromCharCode(100,97,116,97,45,97,103,101,110,116,45,108,97,98,101,108)))"\x27);
@@ -4688,58 +4688,118 @@ async function runStudio() {
4688
4688
  if (!parlBlockBuilt || !pb.innerHTML.trim()) {
4689
4689
  parlBlockBuilt = true;
4690
4690
 
4691
- // Build agent seat HTML (emoji avatar)
4691
+ // ── SEAT builder same style as workflow office stations ──────────
4692
4692
  function buildSeat(prop, seatIdx) {
4693
4693
  var lbl = prop.label || prop.agent;
4694
4694
  var safeLbl = lbl.replace(new RegExp('[^a-zA-Z0-9_-]','g'),\x27_\x27);
4695
4695
  var emojiIdx = Math.abs(lbl.charCodeAt(0)+(lbl.charCodeAt(lbl.length-1)||0)) % AGENT_EMOJIS.length;
4696
4696
  var agentEmoji = AGENT_EMOJIS[emojiIdx];
4697
4697
  void seatIdx;
4698
- var agentAvatar = \x27<div style="font-size:36px;line-height:1;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))">\x27+agentEmoji+\x27</div>\x27;
4698
+ // Each seat: bubble + emoji char + name — states updated surgically later
4699
4699
  return \x27<div class="br-seat" id="brseat_\x27+safeLbl+\x27" data-lbl="\x27+esc(lbl)+\x27">\x27+
4700
- \x27<div class="br-seat-box">\x27+
4701
- \x27<div class="br-bubble" id="brbubble_\x27+safeLbl+\x27"></div>\x27+
4702
- agentAvatar+
4703
- \x27<div class="br-seat-name" id="brname_\x27+safeLbl+\x27">\x27+esc(lbl)+\x27</div>\x27+
4704
- \x27</div>\x27+
4700
+ \x27<div class="br-bubble" id="brbubble_\x27+safeLbl+\x27" style="display:none"></div>\x27+
4701
+ \x27<div class="br-char" style="font-size:38px;line-height:1;user-select:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))">\x27+agentEmoji+\x27</div>\x27+
4702
+ \x27<div class="br-seat-name" id="brname_\x27+safeLbl+\x27">\x27+esc(lbl.slice(0,14))+\x27</div>\x27+
4705
4703
  \x27</div>\x27;
4706
4704
  }
4707
4705
 
4708
- // Arrange seats in a circle around center table
4709
- var seatsHtml = proposals.map(buildSeat).join(\x27\x27);
4710
-
4711
- // Orchestrator at center — emoji (crowned suit)
4712
- var orchEmoji = String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC);
4713
- var crownEmoji = String.fromCodePoint(0x1F451);
4714
- var orchSvgEl = crownEmoji; // crown above orchestrator emoji — not SVG anymore
4715
- var orchSvg = \x27<div style="display:flex;flex-direction:column;align-items:center;gap:2px">\x27+
4716
- \x27<span style="font-size:22px;line-height:1">\x27+crownEmoji+\x27</span>\x27+
4717
- \x27<div style="font-size:52px;line-height:1;filter:drop-shadow(0 0 12px #818cf8AA);user-select:none">\x27+orchEmoji+\x27</div>\x27+
4706
+ // ── Build seat rows: top row (facing down) + bottom row (facing up)
4707
+ // For n agents: ceil(n/2) on top, floor(n/2) on bottom
4708
+ // Orchestrator gets the "head" position (left end of table)
4709
+ var topSeats = [];
4710
+ var botSeats = [];
4711
+ proposals.forEach(function(prop, si) {
4712
+ if (si % 2 === 0) topSeats.push(prop); else botSeats.push(prop);
4713
+ });
4714
+ var topHtml = topSeats.map(buildSeat).join(\x27\x27);
4715
+ var botHtml = botSeats.map(buildSeat).join(\x27\x27);
4716
+
4717
+ // ── Orchestrator head seat ─────────────────────────────────────────
4718
+ var orchEmoji2 = String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC);
4719
+ var crownEm = String.fromCodePoint(0x1F451);
4720
+ var orchHeadHtml = \x27<div class="br-orch" id="brOrch" style="display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px">\x27+
4721
+ \x27<div class="br-orch-speech" id="brOrchSpeech" style="display:none"></div>\x27+
4722
+ \x27<div style="font-size:16px;line-height:1">\x27+crownEm+\x27</div>\x27+
4723
+ \x27<div style="font-size:44px;line-height:1;filter:drop-shadow(0 0 14px #818cf8BB)">\x27+orchEmoji2+\x27</div>\x27+
4724
+ \x27<div class="br-orch-label" style="font-size:9px;font-weight:700;color:#6366f1;background:rgba(99,102,241,.12);border-radius:6px;padding:2px 7px;margin-top:2px">Orchestratore</div>\x27+
4718
4725
  \x27</div>\x27;
4719
- void orchSvgEl;
4720
-
4721
- // Center table (SVG oval)
4722
- var tableSvg = \x27<svg viewBox="0 0 160 80" width="160" height="80" xmlns="http://www.w3.org/2000/svg">\x27+
4723
- // Table shadow
4724
- \x27<ellipse cx="80" cy="44" rx="74" ry="34" fill="rgba(0,0,0,.3)"/>\x27+
4725
- // Table surfaceglossy dark wood
4726
- \x27<ellipse cx="80" cy="40" rx="74" ry="34" fill="#1e1440" stroke="#3a2880" stroke-width="2"/>\x27+
4727
- // Table shine
4728
- \x27<ellipse cx="60" cy="28" rx="30" ry="12" fill="rgba(150,130,255,.08)"/>\x27+
4729
- // NHA logo on table
4730
- \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+
4731
- // Documents on table
4732
- \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+
4733
- \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+
4726
+
4727
+ // ── Conference table SVG — wide rectangle ──────────────────────────
4728
+ // Table is drawn as background SVG, fills the center area
4729
+ var tblSvg = \x27<svg viewBox="0 0 1000 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:50%;left:0;width:100%;height:140px;transform:translateY(-50%);z-index:1;pointer-events:none">\x27+
4730
+ // Shadow
4731
+ \x27<rect x="8" y="12" width="984" height="176" rx="20" fill="rgba(0,0,0,.22)"/>\x27+
4732
+ // Table bodyrich dark walnut
4733
+ \x27<rect x="0" y="4" width="1000" height="176" rx="18" fill="url(#tblGrad)"/>\x27+
4734
+ // Top edge highlight
4735
+ \x27<rect x="0" y="4" width="1000" height="8" rx="8" fill="rgba(255,255,255,.08)"/>\x27+
4736
+ // Wood grain lines
4737
+ \x27<line x1="0" y1="50" x2="1000" y2="50" stroke="rgba(0,0,0,.06)" stroke-width="2"/>\x27+
4738
+ \x27<line x1="0" y1="100" x2="1000" y2="100" stroke="rgba(0,0,0,.08)" stroke-width="2"/>\x27+
4739
+ \x27<line x1="0" y1="150" x2="1000" y2="150" stroke="rgba(0,0,0,.06)" stroke-width="2"/>\x27+
4740
+ // NHA monogram center
4741
+ \x27<text x="500" y="115" text-anchor="middle" font-family="system-ui" font-size="52" font-weight="900" fill="rgba(150,130,255,.12)" letter-spacing="8">NHA</text>\x27+
4742
+ // Laptop/papers scattered on table
4743
+ \x27<rect x="180" y="60" width="60" height="40" rx="4" fill="rgba(99,102,241,.18)" stroke="rgba(99,102,241,.35)" stroke-width="1.5"/>\x27+
4744
+ \x27<rect x="390" y="55" width="70" height="45" rx="4" fill="rgba(99,102,241,.14)" stroke="rgba(99,102,241,.3)" stroke-width="1.5"/>\x27+
4745
+ \x27<rect x="650" y="62" width="55" height="38" rx="4" fill="rgba(99,102,241,.18)" stroke="rgba(99,102,241,.35)" stroke-width="1.5"/>\x27+
4746
+ \x27<rect x="820" y="58" width="50" height="36" rx="4" fill="rgba(99,102,241,.12)" stroke="rgba(99,102,241,.28)" stroke-width="1.5"/>\x27+
4747
+ // Coffee cups
4748
+ \x27<circle cx="300" cy="88" r="14" fill="rgba(180,120,60,.4)" stroke="rgba(180,120,60,.6)" stroke-width="1.5"/>\x27+
4749
+ \x27<circle cx="750" cy="92" r="14" fill="rgba(180,120,60,.4)" stroke="rgba(180,120,60,.6)" stroke-width="1.5"/>\x27+
4750
+ \x27<defs>\x27+
4751
+ \x27<linearGradient id="tblGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5a3a18"/><stop offset="0.5" stop-color="#3d2510"/><stop offset="1" stop-color="#2a1808"/></linearGradient>\x27+
4752
+ \x27</defs>\x27+
4734
4753
  \x27</svg>\x27;
4735
4754
 
4736
- var orchHtml = \x27<div class="br-orch" id="brOrch">\x27+
4737
- \x27<div class="br-orch-speech" id="brOrchSpeech"></div>\x27+
4738
- orchSvg+
4739
- \x27<div class="br-orch-label">NHA Studio</div>\x27+
4740
- \x27</div>\x27;
4755
+ // ── Floor + wall SVG background (same as workflow scene) ───────────
4756
+ var bgSvg = \x27<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none">\x27+
4757
+ \x27<defs>\x27+
4758
+ \x27<filter id="brGlow" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>\x27+
4759
+ \x27<linearGradient id="brWall" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#faf7f2"/><stop offset="1" stop-color="#ede8e0"/></linearGradient>\x27+
4760
+ \x27</defs>\x27+
4761
+ // Wall
4762
+ \x27<rect x="0" y="0" width="1000" height="210" fill="url(#brWall)"/>\x27+
4763
+ // Baseboard
4764
+ \x27<rect x="0" y="205" width="1000" height="7" fill="#d4c4a8" rx="2"/>\x27+
4765
+ // Parquet floor
4766
+ function() {
4767
+ var s2 = \x27\x27;
4768
+ var pColors = [\x27#c8a06a\x27,\x27#bf9860\x27,\x27#d4aa72\x27,\x27#ba9458\x27,\x27#caa86e\x27];
4769
+ var pH2 = 32; var pW2 = 120;
4770
+ for (var fy2 = 212; fy2 < 600+pH2; fy2 += pH2) {
4771
+ var ro3 = (Math.floor((fy2-212)/pH2) % 2) * (pW2/2);
4772
+ for (var fx2 = -pW2+ro3; fx2 < 1000+pW2; fx2 += pW2) {
4773
+ var pc3 = pColors[Math.abs(Math.round(fx2/pW2+fy2/pH2*1.3)) % pColors.length];
4774
+ s2 += \x27<rect x="\x27+Math.round(fx2)+\x27" y="\x27+fy2+\x27" width="\x27+(pW2-2)+\x27" height="\x27+(pH2-2)+\x27" fill="\x27+pc3+\x27" rx="2"/>\x27;
4775
+ s2 += \x27<line x1="\x27+Math.round(fx2+pW2*.4)+\x27" y1="\x27+fy2+\x27" x2="\x27+Math.round(fx2+pW2*.4)+\x27" y2="\x27+(fy2+pH2-2)+\x27" stroke="rgba(0,0,0,.04)" stroke-width="1.5"/>\x27;
4776
+ }
4777
+ }
4778
+ return s2;
4779
+ }()+
4780
+ // Windows
4781
+ \x27<rect x="40" y="22" width="110" height="88" rx="5" fill="#c8e6f8" stroke="#a8cce0" stroke-width="3"/>\x27+
4782
+ \x27<line x1="95" y1="22" x2="95" y2="110" stroke="#a8cce0" stroke-width="2"/>\x27+
4783
+ \x27<line x1="40" y1="66" x2="150" y2="66" stroke="#a8cce0" stroke-width="2"/>\x27+
4784
+ \x27<rect x="40" y="22" width="110" height="88" rx="5" fill="rgba(255,255,255,.18)"/>\x27+
4785
+ \x27<rect x="850" y="22" width="110" height="88" rx="5" fill="#c8e6f8" stroke="#a8cce0" stroke-width="3"/>\x27+
4786
+ \x27<line x1="905" y1="22" x2="905" y2="110" stroke="#a8cce0" stroke-width="2"/>\x27+
4787
+ \x27<line x1="850" y1="66" x2="960" y2="66" stroke="#a8cce0" stroke-width="2"/>\x27+
4788
+ \x27<rect x="850" y="22" width="110" height="88" rx="5" fill="rgba(255,255,255,.18)"/>\x27+
4789
+ // Door
4790
+ \x27<rect x="463" y="0" width="74" height="210" fill="#c8a87a" stroke="#a07848" stroke-width="2"/>\x27+
4791
+ \x27<rect x="472" y="10" width="56" height="50" rx="5" fill="rgba(255,255,255,.18)"/>\x27+
4792
+ \x27<circle cx="524" cy="108" r="6" fill="#8a6028"/>\x27+
4793
+ // Chandelier
4794
+ \x27<line x1="500" y1="0" x2="500" y2="32" stroke="#bbb" stroke-width="3"/>\x27+
4795
+ \x27<ellipse cx="500" cy="42" rx="60" ry="16" fill="#e8d960" stroke="#c8b030" stroke-width="2"/>\x27+
4796
+ \x27<circle cx="468" cy="52" r="10" fill="#fffde0" filter="url(#brGlow)"/>\x27+
4797
+ \x27<circle cx="500" cy="56" r="10" fill="#fffde0" filter="url(#brGlow)"/>\x27+
4798
+ \x27<circle cx="532" cy="52" r="10" fill="#fffde0" filter="url(#brGlow)"/>\x27+
4799
+ \x27<polygon points="440,66 560,66 680,600 320,600" fill="rgba(255,252,200,.05)"/>\x27+
4800
+ \x27</svg>\x27;
4741
4801
 
4742
- // Phase indicator + progress
4802
+ // ── Phase header ───────────────────────────────────────────────────
4743
4803
  var headerHtml = \x27<div class="br-header">\x27+
4744
4804
  \x27<span class="br-phase-chip" id="brPhaseChip"></span>\x27+
4745
4805
  \x27<div class="br-progress-wrap" id="brProgressWrap"><div class="br-progress-bar" id="brProgressBar"></div></div>\x27+
@@ -4747,12 +4807,31 @@ async function runStudio() {
4747
4807
 
4748
4808
  var convergeHtml = \x27<div class="br-convergence" id="brConvergence" style="display:none"></div>\x27;
4749
4809
 
4810
+ // ── Assemble: full-width scene with table ──────────────────────────
4750
4811
  pb.innerHTML =
4751
4812
  \x27<div class="br-wrap">\x27+
4752
4813
  headerHtml+
4753
- \x27<div class="br-room" style="--br-n:\x27+n+\x27">\x27+
4754
- \x27<div class="br-table-center">\x27+tableSvg+orchHtml+\x27</div>\x27+
4755
- \x27<div class="br-seats-ring" style="--br-n:\x27+n+\x27">\x27+seatsHtml+\x27</div>\x27+
4814
+ \x27<div class="br-room" style="position:relative;width:100%;min-height:480px;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18)">\x27+
4815
+ bgSvg+
4816
+ // Decorations
4817
+ \x27<div style="position:absolute;bottom:10px;left:12px;font-size:40px;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))">\x27+String.fromCodePoint(0x1FAB4)+\x27</div>\x27+
4818
+ \x27<div style="position:absolute;bottom:10px;right:12px;font-size:40px;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))">\x27+String.fromCodePoint(0x1FAB4)+\x27</div>\x27+
4819
+ \x27<div style="position:absolute;top:14px;left:180px;font-size:24px;z-index:5">\x27+String.fromCodePoint(0x1F331)+\x27</div>\x27+
4820
+ \x27<div style="position:absolute;top:14px;right:180px;font-size:24px;z-index:5">\x27+String.fromCodePoint(0x1F331)+\x27</div>\x27+
4821
+ // Layout: flex column — top row / [orch + table] / bottom row
4822
+ \x27<div style="position:relative;z-index:10;display:flex;flex-direction:column;justify-content:center;min-height:480px;padding:20px 16px;gap:0;box-sizing:border-box">\x27+
4823
+ // Top seats row (faces DOWN toward table)
4824
+ \x27<div class="br-seats-row" style="justify-content:space-around;margin-bottom:8px">\x27+topHtml+\x27</div>\x27+
4825
+ // Middle row: orchestrator head + table SVG
4826
+ \x27<div style="position:relative;display:flex;align-items:center;width:100%;min-height:160px">\x27+
4827
+ // Orch at left head of table
4828
+ orchHeadHtml+
4829
+ // Table fills the rest of the middle row
4830
+ \x27<div style="position:relative;flex:1;min-height:140px">\x27+tblSvg+\x27</div>\x27+
4831
+ \x27</div>\x27+
4832
+ // Bottom seats row (faces UP toward table)
4833
+ \x27<div class="br-seats-row" style="justify-content:space-around;margin-top:8px">\x27+botHtml+\x27</div>\x27+
4834
+ \x27</div>\x27+
4756
4835
  \x27</div>\x27+
4757
4836
  convergeHtml+
4758
4837
  \x27</div>\x27;
@@ -4869,11 +4948,11 @@ async function runStudio() {
4869
4948
  else if (!isActive && !isDone) actionStr2 = \x27in attesa\x27;
4870
4949
  bubbleEl.textContent = actionStr2;
4871
4950
  bubbleEl.style.display = actionStr2 ? \x27\x27 : \x27none\x27;
4872
- bubbleEl.style.borderColor = isActive ? phaseColor : (isDone ? \x27#22c55e\x27 : \x27#3a3060\x27);
4873
- bubbleEl.style.color = isActive ? phaseColor : (isDone ? \x27#4ade80\x27 : \x27#6b7280\x27);
4951
+ bubbleEl.style.borderColor = isActive ? phaseColor : (isDone ? \x27rgba(0,0,0,.25)\x27 : \x27rgba(0,0,0,.15)\x27);
4952
+ bubbleEl.style.color = isActive ? phaseColor : (isDone ? \x27#111827\x27 : \x27#6b7280\x27);
4874
4953
  }
4875
4954
  if (nameEl) {
4876
- nameEl.style.color = isDone ? \x27#4ade80\x27 : (isActive ? phaseColor : \x27#8880aa\x27);
4955
+ nameEl.style.color = isDone ? \x27#111827\x27 : (isActive ? phaseColor : \x27#374151\x27);
4877
4956
  }
4878
4957
  });
4879
4958
 
@@ -6545,68 +6624,38 @@ input:focus,textarea:focus{border-color:var(--green3)}
6545
6624
  .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}
6546
6625
  .wf-sbraita-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ef4444}
6547
6626
  @keyframes sbraitaPop{0%{transform:translateX(-50%) scale(1) rotate(-2deg)}100%{transform:translateX(-50%) scale(1.06) rotate(2deg)}}
6548
- /* ── Parliament Boardroom 3D ── */
6549
- /* Outer wrapper */
6550
- .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}
6627
+ /* ── Parliament Boardroom bright office, same palette as workflow scene ── */
6628
+ /* Outer wrapper — matches prl-wrap but with slight warm tint */
6629
+ .br-wrap{background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px;animation:stNodeIn .35s ease forwards;overflow:hidden}
6551
6630
  /* Header: phase chip + progress */
6552
6631
  .br-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
6553
- .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}
6554
- .br-progress-wrap{flex:1;height:3px;background:#1a1630;border-radius:4px;overflow:hidden;min-width:60px}
6632
+ .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,.1);border:1px solid var(--pc,rgba(99,102,241,.35));border-radius:20px;padding:3px 12px;display:inline-block;transition:color .4s,border-color .4s}
6633
+ .br-progress-wrap{flex:1;height:3px;background:var(--border);border-radius:4px;overflow:hidden;min-width:60px}
6555
6634
  .br-progress-bar{height:100%;background:linear-gradient(90deg,#6366f1,#22d3ee);border-radius:4px;transition:width .5s ease;width:0%}
6556
- /* Boardroom 3D scene */
6557
- .br-room{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px 16px;
6558
- background:linear-gradient(180deg,#141030 0%,#1c1848 50%,#141030 100%);
6559
- border-radius:10px;overflow:hidden}
6560
- /* Ambient ceiling glow */
6561
- .br-room::before{content:"";position:absolute;inset:0;background:
6562
- radial-gradient(ellipse 70% 50% at 50% 5%,rgba(180,160,255,.2) 0%,transparent 70%),
6563
- radial-gradient(ellipse 30% 30% at 50% 0%,rgba(255,220,100,.12) 0%,transparent 60%);pointer-events:none}
6564
- /* Floor perspective */
6565
- .br-room::after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;
6566
- background:linear-gradient(180deg,transparent 0%,rgba(100,80,200,.08) 50%,rgba(60,40,120,.25) 100%);
6567
- border-top:1px solid rgba(100,80,200,.15);pointer-events:none}
6568
- /* Center: table + orchestrator */
6569
- .br-table-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;z-index:3}
6570
- /* Orchestrator standing at head of table */
6571
- .br-orch{display:flex;flex-direction:column;align-items:center;gap:2px;z-index:4;position:relative}
6572
- .br-orch--active .br-orch-arm-l{transform-origin:50% 0%;animation:brOrchArmL 2s ease-in-out infinite}
6573
- .br-orch--active .br-orch-arm-r{transform-origin:50% 0%;animation:brOrchArmR 2.4s ease-in-out infinite}
6574
- @keyframes brOrchArmL{0%,100%{transform:rotate(0deg)}40%{transform:rotate(-22deg)}70%{transform:rotate(-10deg)}}
6575
- @keyframes brOrchArmR{0%,100%{transform:rotate(0deg)}30%{transform:rotate(18deg)}65%{transform:rotate(8deg)}}
6576
- .br-orch--done{filter:drop-shadow(0 0 12px #22c55eaa)}
6577
- .br-orch-speech{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
6578
- font-size:9px;font-weight:800;font-family:var(--mono);letter-spacing:.4px;
6579
- padding:3px 8px;border:1.5px solid #6366f1;border-radius:8px;
6580
- background:#0d0a1e;white-space:nowrap;
6581
- animation:brSpeechPop .6s ease-in-out infinite alternate;z-index:5;pointer-events:none}
6582
- @keyframes brSpeechPop{0%{transform:translateX(-50%) scale(1) rotate(-1deg)}100%{transform:translateX(-50%) scale(1.05) rotate(1deg)}}
6583
- .br-orch-speech::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#6366f1}
6584
- .br-orch-label{font-size:8px;font-family:var(--mono);font-weight:800;color:#818cf8;text-align:center;letter-spacing:.5px}
6585
- /* Seats ring around table */
6586
- .br-seats-ring{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:2;padding:4px 0;width:100%}
6587
- /* Individual seat / cubicle */
6588
- .br-seat{display:flex;flex-direction:column;align-items:center;gap:0;transition:transform .3s}
6589
- .br-seat-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px 6px;border-radius:12px;
6590
- background:#1a1535;border:1.5px solid #3a3060;
6591
- box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
6592
- transition:border-color .3s,background .3s,box-shadow .3s;position:relative;min-width:70px}
6593
- .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)}
6594
- .br-seat--active{transform:scale(1.04)}
6595
- .br-seat--done .br-seat-box{background:#162516;border-color:#2a4a2a}
6596
- /* Action bubble above agent — shows streaming text */
6597
- .br-bubble{font-size:8px;font-family:var(--mono);padding:3px 8px;border-radius:8px 8px 8px 2px;border:1px solid #3a3060;background:rgba(10,8,20,.88);min-height:14px;text-align:left;line-height:1.45;transition:border-color .3s;word-break:break-word;max-width:100px;white-space:normal;backdrop-filter:blur(4px)}
6598
- /* Agent name */
6599
- .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}
6600
- /* SVG arm animations when agent is active (typing) */
6601
- .br-seat--active .br-arm-l{transform-origin:50% 100%;animation:brArmType .7s ease-in-out infinite}
6602
- .br-seat--active .br-arm-r{transform-origin:50% 100%;animation:brArmType .7s ease-in-out infinite reverse}
6603
- @keyframes brArmType{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(2px)}}
6635
+ /* Boardroom scene — no background (bgSvg covers it) */
6636
+ .br-room{position:relative;width:100%;min-height:480px;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18)}
6637
+ /* Seats rows above/below table */
6638
+ .br-seats-row{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;justify-content:space-around}
6639
+ /* Individual seat card */
6640
+ .br-seat{display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .3s;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.82);border:1.5px solid rgba(200,180,160,.5);box-shadow:0 2px 8px rgba(0,0,0,.12);backdrop-filter:blur(4px);min-width:64px;cursor:default}
6641
+ .br-seat--active{transform:scale(1.07);border-color:var(--sc,#6366f1);box-shadow:0 0 16px rgba(99,102,241,.35),0 2px 8px rgba(0,0,0,.12)}
6642
+ .br-seat--done{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.06)}
6643
+ /* Orchestrator head seat */
6644
+ .br-orch{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;flex-shrink:0}
6645
+ .br-orch-speech{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:rgba(255,255,255,.95);color:#4338ca;white-space:nowrap;animation:brSpeechPop .6s ease-in-out infinite alternate;pointer-events:none;margin-bottom:2px}
6646
+ @keyframes brSpeechPop{0%{transform:scale(1) rotate(-1deg)}100%{transform:scale(1.05) rotate(1deg)}}
6647
+ .br-orch-label{font-size:9px;font-family:var(--mono);font-weight:800;color:#6366f1;background:rgba(99,102,241,.12);border-radius:6px;padding:2px 7px;text-align:center;letter-spacing:.4px}
6648
+ /* Bubble above seat showing streaming text */
6649
+ .br-bubble{font-size:8px;font-family:var(--mono);padding:3px 8px;border-radius:8px 8px 8px 2px;border:1px solid rgba(99,102,241,.35);background:rgba(255,255,255,.95);color:#1e1b4b;min-height:14px;text-align:left;line-height:1.45;transition:border-color .3s;word-break:break-word;max-width:100px;white-space:normal;box-shadow:0 2px 6px rgba(0,0,0,.12);margin-bottom:2px}
6650
+ /* Agent name pill */
6651
+ .br-seat-name{font-size:9px;font-family:var(--mono);font-weight:700;color:#374151;text-align:center;white-space:normal;word-break:break-word;max-width:90px;line-height:1.3;margin-top:1px;transition:color .3s;background:rgba(0,0,0,.04);border-radius:4px;padding:1px 4px}
6652
+ .br-seat--active .br-seat-name{color:#4338ca}
6653
+ .br-seat--done .br-seat-name{color:#111827}
6604
6654
  /* Convergence */
6605
6655
  .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}
6606
- .br-conv-bar-outer{height:4px;background:#1a2e1a;border-radius:4px;overflow:hidden;margin-bottom:6px}
6656
+ .br-conv-bar-outer{height:4px;background:rgba(34,197,94,.15);border-radius:4px;overflow:hidden;margin-bottom:6px}
6607
6657
  .br-conv-bar-inner{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:4px;transition:width .8s ease}
6608
- .br-conv-text{font-size:9px;color:#86efac;line-height:1.55}
6609
- @keyframes brDashFlow{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
6658
+ .br-conv-text{font-size:9px;color:#111827;line-height:1.55}
6610
6659
  /* Keep old prl-* classes for workflow (not touched) */
6611
6660
  .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}
6612
6661
  @keyframes parlPulse{0%,100%{border-color:#6366f1;box-shadow:none}50%{border-color:#818cf8;box-shadow:0 0 20px rgba(99,102,241,.3)}}