nothumanallowed 13.5.15 → 13.5.17

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.15",
3
+ "version": "13.5.17",
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.15';
8
+ export const VERSION = '13.5.17';
9
9
  export const BASE_URL = 'https://nothumanallowed.com/cli';
10
10
  export const API_BASE = 'https://nothumanallowed.com/api/v1';
11
11
 
@@ -3798,16 +3798,13 @@ function isoCharSvg(opts) {
3798
3798
  var isDone = opts.isDone;
3799
3799
  var scale = opts.scale || 1;
3800
3800
  var accentColor = opts.accentColor || \x27#6366f1\x27;
3801
- var idx = opts.emojiIdx;
3802
- // idx === 99 means orchestrator — use crown+suit combo
3803
- var emoji = (idx === 99)
3804
- ? (String.fromCodePoint(0x1F451) + String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC))
3805
- : AGENT_EMOJIS[(idx || 0) % AGENT_EMOJIS.length];
3801
+ var idx = opts.emojiIdx || 0;
3802
+ var emoji = AGENT_EMOJIS[idx % AGENT_EMOJIS.length];
3806
3803
  var sz = Math.round(52 * scale);
3807
3804
  var glowColor = isActive ? accentColor : (isDone ? \x27#22c55e\x27 : \x27transparent\x27);
3808
3805
  var glowFilter = (isActive || isDone) ? (\x27filter:drop-shadow(0 0 8px \x27+glowColor+\x27aa)\x27) : \x27\x27;
3809
3806
  var badgeHtml = isDone
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
3807
+ ? \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
3811
3808
  : (isActive
3812
3809
  ? \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
3810
  : \x27\x27);
@@ -3824,14 +3821,12 @@ function isoCharSvg(opts) {
3824
3821
  function isoOrchSvg(hasActive, doneRatio) {
3825
3822
  void doneRatio;
3826
3823
  var orchEmoji = String.fromCodePoint(0x1F9D1, 0x200D, 0x1F4BC); // person in suit
3827
- var glowColor = hasActive ? \x27#818cf8\x27 : \x27#374151\x27;
3828
3824
  var animClass = hasActive ? \x27 prl-head\x27 : \x27\x27;
3825
+ var glowFilter = hasActive ? \x27filter:drop-shadow(0 0 12px #818cf8AA)\x27 : \x27filter:drop-shadow(0 0 6px rgba(0,0,0,.25))\x27;
3829
3826
  var crown = String.fromCodePoint(0x1F451); // crown emoji above
3830
- return \x27<div class="iso-orch-wrap\x27+animClass+\x27" style="position:relative;display:inline-flex;align-items:center;justify-content:center">\x27+
3831
- \x27<div style="position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:rgba(99,102,241,.15);outline:3px solid \x27+glowColor+\x27;box-shadow:0 0 20px \x27+glowColor+\x27AA">\x27+
3832
- \x27<span style="font-size:42px;line-height:1;user-select:none">\x27+orchEmoji+\x27</span>\x27+
3833
- \x27<span style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:18px;line-height:1;pointer-events:none">\x27+crown+\x27</span>\x27+
3834
- \x27</div>\x27+
3827
+ return \x27<div class="iso-orch-wrap\x27+animClass+\x27" style="display:inline-flex;flex-direction:column;align-items:center;gap:0">\x27+
3828
+ \x27<span style="font-size:18px;line-height:1;display:block;text-align:center">\x27+crown+\x27</span>\x27+
3829
+ \x27<span style="font-size:52px;line-height:1;user-select:none;display:block;\x27+glowFilter+\x27">\x27+orchEmoji+\x27</span>\x27+
3835
3830
  \x27</div>\x27;
3836
3831
  }
3837
3832
 
@@ -3844,61 +3839,6 @@ function agentPalette(lbl) {
3844
3839
  return {skin: skins[i], shirt: shirts[i], hair: hairs[i]};
3845
3840
  }
3846
3841
 
3847
- // Tool emoji map — specific icon per agent/tool type, fallback to default
3848
- var TOOL_EMOJI_MAP = {
3849
- websearch: String.fromCodePoint(0x1F50D),
3850
- search: String.fromCodePoint(0x1F50D),
3851
- browser: String.fromCodePoint(0x1F310),
3852
- email: String.fromCodePoint(0x1F4E7),
3853
- gmail: String.fromCodePoint(0x1F4E7),
3854
- calendar: String.fromCodePoint(0x1F4C5),
3855
- github: String.fromCodePoint(0x1F431),
3856
- notion: String.fromCodePoint(0x1F4D3),
3857
- slack: String.fromCodePoint(0x1F4AC),
3858
- data: String.fromCodePoint(0x1F4CA),
3859
- analyst: String.fromCodePoint(0x1F4CA),
3860
- writer: String.fromCodePoint(0x270F,0xFE0F),
3861
- summary: String.fromCodePoint(0x1F4CB),
3862
- research: String.fromCodePoint(0x1F52C),
3863
- canvas: String.fromCodePoint(0x1F3A8),
3864
- security: String.fromCodePoint(0x1F6E1,0xFE0F),
3865
- devops: String.fromCodePoint(0x2699,0xFE0F),
3866
- code: String.fromCodePoint(0x1F4BB),
3867
- file: String.fromCodePoint(0x1F4C2),
3868
- drive: String.fromCodePoint(0x1F4BE),
3869
- maps: String.fromCodePoint(0x1F5FA,0xFE0F),
3870
- voice: String.fromCodePoint(0x1F3A4),
3871
- pdf: String.fromCodePoint(0x1F4DC),
3872
- document: String.fromCodePoint(0x1F4DC),
3873
- task: String.fromCodePoint(0x2705),
3874
- contacts: String.fromCodePoint(0x1F4F1),
3875
- reminder: String.fromCodePoint(0x23F0),
3876
- news: String.fromCodePoint(0x1F4F0),
3877
- image: String.fromCodePoint(0x1F5BC,0xFE0F),
3878
- video: String.fromCodePoint(0x1F3AC),
3879
- music: String.fromCodePoint(0x1F3B5),
3880
- translate: String.fromCodePoint(0x1F30D),
3881
- math: String.fromCodePoint(0x1F9EE),
3882
- sql: String.fromCodePoint(0x1F5C4,0xFE0F),
3883
- api: String.fromCodePoint(0x1F517),
3884
- test: String.fromCodePoint(0x1F9EA),
3885
- monitor: String.fromCodePoint(0x1F4F6),
3886
- _default: String.fromCodePoint(0x1F527) // wrench as fallback
3887
- };
3888
-
3889
- function getNodeEmoji(n) {
3890
- var lbl = (n.label || n.agent || '').toLowerCase();
3891
- var icon = n.icon || '';
3892
- // Check by label keywords
3893
- var keys = Object.keys(TOOL_EMOJI_MAP);
3894
- for (var ki = 0; ki < keys.length; ki++) {
3895
- if (keys[ki] !== '_default' && lbl.indexOf(keys[ki]) >= 0) return TOOL_EMOJI_MAP[keys[ki]];
3896
- }
3897
- // If icon looks like an emoji code point (not HTML entity), use it
3898
- if (icon && icon.length > 0 && icon.charCodeAt(0) > 127) return icon;
3899
- return TOOL_EMOJI_MAP._default;
3900
- }
3901
-
3902
3842
  function renderStudioNodes() {
3903
3843
  var el = document.getElementById('studioNodes');
3904
3844
  if (!el) return;
@@ -3913,142 +3853,78 @@ function renderStudioNodes() {
3913
3853
  var totalCount = nodes.length;
3914
3854
  var showMaster = hasActive || doneCount > 0;
3915
3855
 
3916
- var phaseLabel2 = hasActive
3917
- ? (\x27Workflow in esecuzione \u2014 \x27+doneCount+\x27/\x27+totalCount)
3918
- : (doneCount===totalCount && totalCount>0 ? \x27Workflow completato\x27 : \x27Workflow pianificato\x27);
3919
- var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#1f2937\x27 : \x27#6b7280\x27);
3856
+ // ── ISO scene dimensions ───────────────────────────────────────────────────
3857
+ var ISO_COLS = Math.max(nodes.length, 1);
3858
+ var SCENE_W = 640; var SCENE_H = 420;
3920
3859
 
3921
- // ── CSS Grid layout: 100% width, responsive ──────────────────────────────
3922
- // All stations (orch + agents) in a grid, max 4 per row
3923
- var totalStations = totalCount + 1; // +1 for orchestrator
3924
- var cols = totalStations <= 2 ? totalStations : (totalStations <= 4 ? 2 : (totalStations <= 6 ? 3 : 4));
3925
- var rows = Math.ceil(totalStations / cols);
3926
-
3927
- // Each station rendered as a grid cell — 100% fills parent
3928
- // No pixel-based absolute positioning: use CSS grid % cells
3929
- var gridTpl = \x27repeat(\x27+cols+\x27,1fr)\x27;
3930
-
3931
- // Plant/deco emojis
3932
- var bigPlant = String.fromCodePoint(0x1FAB4);
3933
- var plantEmoji = String.fromCodePoint(0x1F331);
3934
-
3935
- // Build all station cards (orchestrator first, then agents)
3936
- function buildStation2(label, toolEmoji, isOrch, isActive, isDone, isErr, emojiIdx) {
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
- var monScreen = isOrch
3941
- ? \x27<span style="font-size:11px">&#128269;</span>\x27
3942
- : (isDone ? \x27<span style="color:#111827;font-size:13px">&#10003;</span>\x27
3943
- : (isActive ? \x27<span class="iso-monitor-blink"></span>\x27
3944
- : \x27<span style="font-size:8px;opacity:.35;color:#818cf8">&#9632;</span>\x27));
3945
- var bubbleText = isOrch
3946
- ? (hasActive ? (\x27Step \x27+doneCount+\x27/\x27+totalCount) : (doneCount===totalCount&&totalCount>0 ? \x27\u2714 Fatto!\x27 : \x27In attesa\x27))
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(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
- var orchWalkClass = (isOrch && hasActive) ? \x27 iso-orch-walking\x27 : (isOrch && doneCount===totalCount&&totalCount>0 ? \x27 iso-orch-done\x27 : \x27\x27);
3951
- var charHtml = isoCharSvg({emojiIdx: isOrch ? 99 : emojiIdx, isActive: isActive, isDone: isDone, scale: 1.1, accentColor: accentColor});
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);
3953
- return \x27<div class="iso-station\x27+orchWalkClass+\x27" \x27+clickAttr+\x27 style="box-shadow:\x27+glowBox+\x27;border-color:\x27+accentColor+\x27;transition:box-shadow .4s">\x27+
3954
- // bubble
3955
- \x27<div class="iso-bubble\x27+(isActive?\x27 iso-bubble--active\x27:\x27\x27)+\x27" style="border-color:\x27+accentColor+\x27;color:\x27+accentColor+\x27;background:\x27+bubbleBg+\x27;visibility:\x27+(bubbleText||isOrch?\x27visible\x27:\x27hidden\x27)+\x27">\x27+esc(bubbleText)+\x27</div>\x27+
3956
- // tool badge above character
3957
- \x27<div class="iso-tool-badge">\x27+toolEmoji+\x27</div>\x27+
3958
- // character emoji
3959
- charHtml+
3960
- // desk
3961
- \x27<div class="iso-desk" style="width:85%;border-top-color:\x27+accentColor+\x2733"></div>\x27+
3962
- // monitor on desk
3963
- \x27<div class="iso-monitor" style="border-color:\x27+accentColor+\x2777"><div class="iso-monitor-screen">\x27+monScreen+\x27</div></div>\x27+
3964
- // name
3965
- \x27<div class="iso-name" style="color:\x27+nameColor+\x27;background:\x27+nameBg+\x27">\x27+(isOrch?\x27\u2666\xA0\x27:\x27\x27)+esc(label)+\x27</div>\x27+
3966
- \x27</div>\x27;
3967
- }
3968
-
3969
- var stationsHtml = \x27\x27;
3970
- // Orchestrator
3971
- var orchDone2 = !hasActive && doneCount===totalCount && totalCount>0;
3972
- stationsHtml += buildStation2(\x27Orchestratore\x27, String.fromCodePoint(0x1F4CB), true, hasActive, orchDone2, false, 99);
3973
- // Agents
3860
+ var agentsHtml = \x27\x27;
3974
3861
  nodes.forEach(function(n, idx) {
3975
- stationsHtml += buildStation2(
3976
- n.label || n.agent,
3977
- getNodeEmoji(n),
3978
- false,
3979
- n.status===\x27running\x27,
3980
- n.status===\x27done\x27,
3981
- n.status===\x27error\x27,
3982
- idx
3983
- );
3862
+ var isActive = n.status === \x27running\x27;
3863
+ var isDone = n.status === \x27done\x27;
3864
+ var isErr = n.status === \x27error\x27;
3865
+ var lbl = n.label || n.agent;
3866
+ var pal = agentPalette(lbl);
3867
+ var accentColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#374151\x27 : (isErr ? \x27#ef4444\x27 : \x27#999\x27));
3868
+
3869
+ // Spread agents evenly across front rows
3870
+ var colStep = ISO_COLS > 1 ? 5 / (ISO_COLS - 1) : 2;
3871
+ var col = (ISO_COLS === 1) ? 2.5 : idx * colStep;
3872
+ var row = 3.5;
3873
+ var pos = isoProject(col, row);
3874
+ var px = pos.x; var py = pos.y + 80;
3875
+ var charScale = 1.1;
3876
+ var zIdx = Math.round(py + 100);
3877
+
3878
+ // Bubble: only show when active (live text) or done (checkmark)
3879
+ var bubbleText = isActive ? \x27...lavora\x27 : (isDone ? \x27\u2714 fatto\x27 : (isErr ? \x27\u2715 errore\x27 : \x27\x27));
3880
+ var bubbleColor = isActive ? \x27#6366f1\x27 : (isDone ? \x27#374151\x27 : \x27#ef4444\x27);
3881
+ void pal; // palette no longer used for character rendering
3882
+ var charSvg = isoCharSvg({emojiIdx: idx, isActive: isActive, isDone: isDone, scale: charScale, accentColor: accentColor});
3883
+ var charW = Math.round(52 * charScale); var charH = Math.round(52 * charScale);
3884
+
3885
+ 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;
3886
+ // Bubble — bigger, left-aligned (no mirror issue)
3887
+ if (bubbleText || isActive) {
3888
+ 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;
3889
+ } else {
3890
+ agentsHtml += \x27<div class="iso-bubble" id="isobubble_\x27+idx+\x27" style="visibility:hidden;min-width:80px"></div>\x27;
3891
+ }
3892
+ agentsHtml += charSvg;
3893
+ agentsHtml += \x27<div class="iso-name" style="font-size:10px;font-weight:700;color:\x27+(isDone?\x27#111827\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;
3894
+ // Desk — lighter wood color for bright office
3895
+ agentsHtml += isoDeskSvg(px, py - charH/2, accentColor);
3896
+ agentsHtml += \x27</div>\x27;
3984
3897
  });
3985
3898
 
3986
- // Floor SVG — uses a fixed coordinate space (1000×600) scaled 100% via CSS
3987
- var FW = 1000; var FH = 600;
3988
- var wallH = Math.round(FH * 0.30);
3989
- var floorSvg = \x27<svg viewBox="0 0 \x27+FW+\x27 \x27+FH+\x27" 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;
3990
- floorSvg += \x27<defs>\x27;
3991
- floorSvg += \x27<filter id="bGlow2" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>\x27;
3992
- floorSvg += \x27<linearGradient id="wallGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#faf7f2"/><stop offset="1" stop-color="#ede8e0"/></linearGradient>\x27;
3993
- floorSvg += \x27</defs>\x27;
3994
- // Wall
3995
- floorSvg += \x27<rect x="0" y="0" width="\x27+FW+\x27" height="\x27+wallH+\x27" fill="url(#wallGrad)"/>\x27;
3996
- // Baseboard
3997
- floorSvg += \x27<rect x="0" y="\x27+(wallH-5)+\x27" width="\x27+FW+\x27" height="7" fill="#d4c4a8" rx="2"/>\x27;
3998
- // Floor parquet
3999
- var plankColors2 = [\x27#c8a06a\x27,\x27#bf9860\x27,\x27#d4aa72\x27,\x27#ba9458\x27,\x27#caa86e\x27];
4000
- var pH = 32; var pW = 120;
4001
- for (var fy = wallH; fy < FH+pH; fy += pH) {
4002
- var ro2 = (Math.floor((fy-wallH)/pH) % 2) * (pW/2);
4003
- for (var fx = -pW+ro2; fx < FW+pW; fx += pW) {
4004
- var pc2 = plankColors2[Math.abs(Math.round(fx/pW+fy/pH*1.3)) % plankColors2.length];
4005
- floorSvg += \x27<rect x="\x27+Math.round(fx)+\x27" y="\x27+fy+\x27" width="\x27+(pW-2)+\x27" height="\x27+(pH-2)+\x27" fill="\x27+pc2+\x27" rx="2"/>\x27;
4006
- floorSvg += \x27<line x1="\x27+Math.round(fx+pW*0.4)+\x27" y1="\x27+fy+\x27" x2="\x27+Math.round(fx+pW*0.4)+\x27" y2="\x27+(fy+pH-2)+\x27" stroke="rgba(0,0,0,.04)" stroke-width="1.5"/>\x27;
4007
- }
4008
- }
4009
- // Windows — 2 on left, 1 center-right
4010
- function svgWindow(wx, wy, ww, wh) {
4011
- var r = \x27<rect x="\x27+wx+\x27" y="\x27+wy+\x27" width="\x27+ww+\x27" height="\x27+wh+\x27" rx="4" fill="#c8e6f8" stroke="#a8cce0" stroke-width="3"/>\x27;
4012
- r += \x27<rect x="\x27+wx+\x27" y="\x27+wy+\x27" width="\x27+ww+\x27" height="\x27+wh+\x27" rx="4" fill="rgba(255,255,255,.2)"/>\x27;
4013
- r += \x27<line x1="\x27+(wx+ww/2)+\x27" y1="\x27+wy+\x27" x2="\x27+(wx+ww/2)+\x27" y2="\x27+(wy+wh)+\x27" stroke="#a8cce0" stroke-width="2"/>\x27;
4014
- r += \x27<line x1="\x27+wx+\x27" y1="\x27+(wy+wh/2)+\x27" x2="\x27+(wx+ww)+\x27" y2="\x27+(wy+wh/2)+\x27" stroke="#a8cce0" stroke-width="2"/>\x27;
4015
- return r;
3899
+ // ── Orchestrator ──────────────────────────────────────────────────────────
3900
+ var orchHtml = \x27\x27;
3901
+ if (showMaster) {
3902
+ var oPh = isoProject(ISO_COLS / 2 + 0.5, 1.2);
3903
+ var orchDone = !hasActive && doneCount === totalCount;
3904
+ var orchAnim = hasActive ? \x27prl-master-walk\x27 : (orchDone ? \x27prl-master-done\x27 : \x27\x27);
3905
+ var orchStatus = hasActive
3906
+ ? (\x27Step \x27+doneCount+\x27/\x27+totalCount)
3907
+ : (orchDone ? \x27Completato!\x27 : \x27Pianificazione\x27);
3908
+ 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+
3909
+ \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+
3910
+ isoOrchSvg(hasActive, doneCount / Math.max(totalCount,1))+
3911
+ \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+
3912
+ \x27</div>\x27;
4016
3913
  }
4017
- floorSvg += svgWindow(40, 20, 100, 80);
4018
- floorSvg += svgWindow(180, 20, 100, 80);
4019
- floorSvg += svgWindow(FW-200, 20, 120, 80);
4020
- // Door center
4021
- floorSvg += \x27<rect x="\x27+(FW/2-35)+\x27" y="0" width="70" height="\x27+wallH+\x27" rx="0" fill="#c8a87a" stroke="#a07848" stroke-width="2"/>\x27;
4022
- floorSvg += \x27<rect x="\x27+(FW/2-25)+\x27" y="8" width="50" height="36" rx="4" fill="rgba(255,255,255,.18)"/>\x27;
4023
- floorSvg += \x27<circle cx="\x27+(FW/2+22)+\x27" cy="\x27+(wallH/2)+\x27" r="5" fill="#8a6028"/>\x27;
4024
- // Chandelier
4025
- floorSvg += \x27<line x1="\x27+(FW/2)+\x27" y1="0" x2="\x27+(FW/2)+\x27" y2="30" stroke="#bbb" stroke-width="3"/>\x27;
4026
- floorSvg += \x27<ellipse cx="\x27+(FW/2)+\x27" cy="38" rx="50" ry="14" fill="#e8d960" stroke="#c8b030" stroke-width="2"/>\x27;
4027
- floorSvg += \x27<circle cx="\x27+(FW/2-28)+\x27" cy="46" r="8" fill="#fffde0" filter="url(#bGlow2)"/>\x27;
4028
- floorSvg += \x27<circle cx="\x27+(FW/2)+\x27" cy="50" r="8" fill="#fffde0" filter="url(#bGlow2)"/>\x27;
4029
- floorSvg += \x27<circle cx="\x27+(FW/2+28)+\x27" cy="46" r="8" fill="#fffde0" filter="url(#bGlow2)"/>\x27;
4030
- // Light cone
4031
- floorSvg += \x27<polygon points="\x27+(FW/2-60)+\x27,60 \x27+(FW/2+60)+\x27,60 \x27+(FW/2+160)+\x27,\x27+FH+\x27 \x27+(FW/2-160)+\x27,\x27+FH+\x27" fill="rgba(255,252,200,.06)"/>\x27;
4032
- floorSvg += \x27</svg>\x27;
4033
-
4034
- // Decorations (CSS positioned, z-index above floor SVG)
4035
- var decoHtml =
4036
- \x27<div style="position:absolute;bottom:10px;left:12px;font-size:40px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));z-index:5">\x27+bigPlant+\x27</div>\x27+
4037
- \x27<div style="position:absolute;bottom:10px;right:12px;font-size:40px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));z-index:5">\x27+bigPlant+\x27</div>\x27+
4038
- \x27<div style="position:absolute;top:12px;left:310px;font-size:24px;line-height:1;z-index:5">\x27+plantEmoji+\x27</div>\x27+
4039
- \x27<div style="position:absolute;top:12px;right:230px;font-size:24px;line-height:1;z-index:5">\x27+plantEmoji+\x27</div>\x27;
3914
+
3915
+ var phaseLabel2 = hasActive
3916
+ ? (\x27Workflow in esecuzione \u2014 \x27+doneCount+\x27/\x27+totalCount)
3917
+ : (doneCount===totalCount && totalCount>0 ? \x27Workflow completato\x27 : \x27Workflow pianificato\x27);
3918
+ var phaseColor2 = hasActive ? \x27#6366f1\x27 : (doneCount===totalCount && totalCount>0 ? \x27#1f2937\x27 : \x27#6b7280\x27);
4040
3919
 
4041
3920
  el.innerHTML =
4042
3921
  \x27<div class="prl-wrap" style="border-color:\x27+phaseColor2+\x2744;padding-bottom:8px">\x27+
4043
3922
  \x27<div class="prl-header"><span class="prl-phase-chip" style="--pc:\x27+phaseColor2+\x27">\x27+phaseLabel2+\x27</span></div>\x27+
4044
- \x27<div class="iso-scene" style="position:relative">\x27+
4045
- floorSvg+
4046
- decoHtml+
4047
- // Grid overlay for stations
4048
- \x27<div style="position:relative;z-index:10;display:grid;grid-template-columns:\x27+gridTpl+\x27;gap:0;padding:12px 16px;box-sizing:border-box;align-items:end;min-height:440px">\x27+
4049
- // Push agents to bottom half of scene (wall takes top ~30%)
4050
- \x27<div style="grid-column:1/-1;height:calc(30% - 12px)"></div>\x27+
4051
- stationsHtml+
3923
+ \x27<div style="display:flex;justify-content:center;width:100%;overflow-x:auto">\x27+
3924
+ \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+
3925
+ isoFloorSvg(ISO_COLS + 2, 5)+
3926
+ agentsHtml+
3927
+ orchHtml+
4052
3928
  \x27</div>\x27+
4053
3929
  \x27</div>\x27+
4054
3930
  \x27</div>\x27;
@@ -4688,24 +4564,21 @@ async function runStudio() {
4688
4564
  if (!parlBlockBuilt || !pb.innerHTML.trim()) {
4689
4565
  parlBlockBuilt = true;
4690
4566
 
4691
- // ── SEAT builder — same style as workflow office stations ──────────
4567
+ // ── Seat card builder — emoji + bubble + name ──────────────────────
4692
4568
  function buildSeat(prop, seatIdx) {
4693
4569
  var lbl = prop.label || prop.agent;
4694
4570
  var safeLbl = lbl.replace(new RegExp('[^a-zA-Z0-9_-]','g'),\x27_\x27);
4695
4571
  var emojiIdx = Math.abs(lbl.charCodeAt(0)+(lbl.charCodeAt(lbl.length-1)||0)) % AGENT_EMOJIS.length;
4696
4572
  var agentEmoji = AGENT_EMOJIS[emojiIdx];
4697
4573
  void seatIdx;
4698
- // Each seat: bubble + emoji char + name — states updated surgically later
4699
4574
  return \x27<div class="br-seat" id="brseat_\x27+safeLbl+\x27" data-lbl="\x27+esc(lbl)+\x27">\x27+
4700
4575
  \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+
4576
+ \x27<div class="br-char">\x27+agentEmoji+\x27</div>\x27+
4577
+ \x27<div class="br-seat-name" id="brname_\x27+safeLbl+\x27">\x27+esc(lbl)+\x27</div>\x27+
4703
4578
  \x27</div>\x27;
4704
4579
  }
4705
4580
 
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)
4581
+ // Split agents: even indices top, odd indices bottom
4709
4582
  var topSeats = [];
4710
4583
  var botSeats = [];
4711
4584
  proposals.forEach(function(prop, si) {
@@ -4714,55 +4587,41 @@ async function runStudio() {
4714
4587
  var topHtml = topSeats.map(buildSeat).join(\x27\x27);
4715
4588
  var botHtml = botSeats.map(buildSeat).join(\x27\x27);
4716
4589
 
4717
- // ── Orchestrator head seat ─────────────────────────────────────────
4590
+ // Orchestrator at left head of table
4718
4591
  var orchEmoji2 = String.fromCodePoint(0x1F9D1,0x200D,0x1F4BC);
4719
4592
  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+
4593
+ var orchHeadHtml = \x27<div class="br-orch" id="brOrch" style="display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;flex-shrink:0">\x27+
4721
4594
  \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+
4595
+ \x27<span style="font-size:18px;line-height:1">\x27+crownEm+\x27</span>\x27+
4596
+ \x27<span style="font-size:48px;line-height:1;filter:drop-shadow(0 0 14px #818cf8BB)">\x27+orchEmoji2+\x27</span>\x27+
4597
+ \x27<div class="br-orch-label">Orchestratore</div>\x27+
4725
4598
  \x27</div>\x27;
4726
4599
 
4727
- // ── Conference table SVG — wide rectangle ──────────────────────────
4728
- // Table is drawn as background SVG, fills the center area
4600
+ // Conference table SVG — wide walnut rectangle
4729
4601
  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
4602
+ \x27<defs><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></defs>\x27+
4731
4603
  \x27<rect x="8" y="12" width="984" height="176" rx="20" fill="rgba(0,0,0,.22)"/>\x27+
4732
- // Table body — rich dark walnut
4733
4604
  \x27<rect x="0" y="4" width="1000" height="176" rx="18" fill="url(#tblGrad)"/>\x27+
4734
- // Top edge highlight
4735
4605
  \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
4606
+ \x27<line x1="0" y1="60" x2="1000" y2="60" stroke="rgba(0,0,0,.07)" stroke-width="2"/>\x27+
4607
+ \x27<line x1="0" y1="100" x2="1000" y2="100" stroke="rgba(0,0,0,.09)" stroke-width="2"/>\x27+
4608
+ \x27<line x1="0" y1="140" x2="1000" y2="140" stroke="rgba(0,0,0,.07)" stroke-width="2"/>\x27+
4609
+ \x27<text x="500" y="115" text-anchor="middle" font-family="system-ui" font-size="52" font-weight="900" fill="rgba(150,130,255,.1)" letter-spacing="8">NHA</text>\x27+
4743
4610
  \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
4611
  \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
4612
  \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+
4613
+ \x27<circle cx="300" cy="90" r="14" fill="rgba(180,120,60,.4)" stroke="rgba(180,120,60,.6)" stroke-width="1.5"/>\x27+
4749
4614
  \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+
4753
4615
  \x27</svg>\x27;
4754
4616
 
4755
- // ── Floor + wall SVG background (same as workflow scene) ───────────
4617
+ // Background: parquet floor + white wall + windows + chandelier + door
4756
4618
  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
4619
  \x27<defs>\x27+
4758
4620
  \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
4621
  \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
4622
  \x27</defs>\x27+
4761
- // Wall
4762
4623
  \x27<rect x="0" y="0" width="1000" height="210" fill="url(#brWall)"/>\x27+
4763
- // Baseboard
4764
4624
  \x27<rect x="0" y="205" width="1000" height="7" fill="#d4c4a8" rx="2"/>\x27+
4765
- // Parquet floor
4766
4625
  function() {
4767
4626
  var s2 = \x27\x27;
4768
4627
  var pColors = [\x27#c8a06a\x27,\x27#bf9860\x27,\x27#d4aa72\x27,\x27#ba9458\x27,\x27#caa86e\x27];
@@ -4777,7 +4636,6 @@ async function runStudio() {
4777
4636
  }
4778
4637
  return s2;
4779
4638
  }()+
4780
- // Windows
4781
4639
  \x27<rect x="40" y="22" width="110" height="88" rx="5" fill="#c8e6f8" stroke="#a8cce0" stroke-width="3"/>\x27+
4782
4640
  \x27<line x1="95" y1="22" x2="95" y2="110" stroke="#a8cce0" stroke-width="2"/>\x27+
4783
4641
  \x27<line x1="40" y1="66" x2="150" y2="66" stroke="#a8cce0" stroke-width="2"/>\x27+
@@ -4786,11 +4644,9 @@ async function runStudio() {
4786
4644
  \x27<line x1="905" y1="22" x2="905" y2="110" stroke="#a8cce0" stroke-width="2"/>\x27+
4787
4645
  \x27<line x1="850" y1="66" x2="960" y2="66" stroke="#a8cce0" stroke-width="2"/>\x27+
4788
4646
  \x27<rect x="850" y="22" width="110" height="88" rx="5" fill="rgba(255,255,255,.18)"/>\x27+
4789
- // Door
4790
4647
  \x27<rect x="463" y="0" width="74" height="210" fill="#c8a87a" stroke="#a07848" stroke-width="2"/>\x27+
4791
4648
  \x27<rect x="472" y="10" width="56" height="50" rx="5" fill="rgba(255,255,255,.18)"/>\x27+
4792
4649
  \x27<circle cx="524" cy="108" r="6" fill="#8a6028"/>\x27+
4793
- // Chandelier
4794
4650
  \x27<line x1="500" y1="0" x2="500" y2="32" stroke="#bbb" stroke-width="3"/>\x27+
4795
4651
  \x27<ellipse cx="500" cy="42" rx="60" ry="16" fill="#e8d960" stroke="#c8b030" stroke-width="2"/>\x27+
4796
4652
  \x27<circle cx="468" cy="52" r="10" fill="#fffde0" filter="url(#brGlow)"/>\x27+
@@ -4799,7 +4655,6 @@ async function runStudio() {
4799
4655
  \x27<polygon points="440,66 560,66 680,600 320,600" fill="rgba(255,252,200,.05)"/>\x27+
4800
4656
  \x27</svg>\x27;
4801
4657
 
4802
- // ── Phase header ───────────────────────────────────────────────────
4803
4658
  var headerHtml = \x27<div class="br-header">\x27+
4804
4659
  \x27<span class="br-phase-chip" id="brPhaseChip"></span>\x27+
4805
4660
  \x27<div class="br-progress-wrap" id="brProgressWrap"><div class="br-progress-bar" id="brProgressBar"></div></div>\x27+
@@ -4807,30 +4662,20 @@ async function runStudio() {
4807
4662
 
4808
4663
  var convergeHtml = \x27<div class="br-convergence" id="brConvergence" style="display:none"></div>\x27;
4809
4664
 
4810
- // ── Assemble: full-width scene with table ──────────────────────────
4811
4665
  pb.innerHTML =
4812
4666
  \x27<div class="br-wrap">\x27+
4813
4667
  headerHtml+
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+
4668
+ \x27<div class="br-room">\x27+
4815
4669
  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
4670
+ \x27<div style="position:absolute;bottom:10px;left:12px;font-size:36px;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))">\x27+String.fromCodePoint(0x1FAB4)+\x27</div>\x27+
4671
+ \x27<div style="position:absolute;bottom:10px;right:12px;font-size:36px;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))">\x27+String.fromCodePoint(0x1FAB4)+\x27</div>\x27+
4822
4672
  \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
4673
+ \x27<div class="br-seats-row">\x27+topHtml+\x27</div>\x27+
4826
4674
  \x27<div style="position:relative;display:flex;align-items:center;width:100%;min-height:160px">\x27+
4827
- // Orch at left head of table
4828
4675
  orchHeadHtml+
4829
- // Table fills the rest of the middle row
4830
4676
  \x27<div style="position:relative;flex:1;min-height:140px">\x27+tblSvg+\x27</div>\x27+
4831
4677
  \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+
4678
+ \x27<div class="br-seats-row">\x27+botHtml+\x27</div>\x27+
4834
4679
  \x27</div>\x27+
4835
4680
  \x27</div>\x27+
4836
4681
  convergeHtml+
@@ -4956,417 +4801,7 @@ async function runStudio() {
4956
4801
  }
4957
4802
  });
4958
4803
 
4959
- // ── Old function stubs needed by remaining code paths ────────────────
4960
- function buildChar(prop, isDone, isActive, isOrchestratorTarget) {
4961
- var lbl = prop.label || prop.agent;
4962
- var ico = prop.icon || String.fromCharCode(9632);
4963
- // skin tones cycle through a palette for visual variety
4964
- var skinColors = [\x27#fbbf24\x27,\x27#f97316\x27,\x27#a78bfa\x27,\x27#34d399\x27,\x27#60a5fa\x27,\x27#f472b6\x27];
4965
- var skinIdx = Math.abs(lbl.charCodeAt(0)+lbl.charCodeAt(lbl.length-1)) % skinColors.length;
4966
- var skin = skinColors[skinIdx];
4967
- var deskColor = isDone ? \x27#253a25\x27 : (isActive ? \x27#282050\x27 : \x27#221c44\x27);
4968
- var deskBorder = isDone ? \x27#22c55e\x27 : (isActive ? phaseColor : \x27#4a3880\x27);
4969
- var shadow = isActive ? (\x270 0 18px \x27+phaseColor+\x2755\x27) : \x27none\x27;
4970
-
4971
- // Action text shown above character
4972
- var actionStr = \x27\x27;
4973
- if (phase===\x27r1\x27 && isActive) actionStr = \x27...analizza\x27;
4974
- else if (phase===\x27r1\x27 && isDone) actionStr = \x27\u2714 bozza pronta\x27;
4975
- else if (phase===\x27r2\x27 && isActive) actionStr = \x27...legge + raffina\x27;
4976
- else if (phase===\x27r2\x27 && isDone) actionStr = \x27\u2714 raffinato\x27;
4977
- else if (phase===\x27r3\x27 && isActive) actionStr = \x27...media\x27;
4978
- else if (phase===\x27done\x27) actionStr = \x27\u2714 consenso\x27;
4979
-
4980
- // SVG character (80px wide, 70px tall)
4981
- // Desk: rectangle at bottom. Chair back. Body. Head. Arms animated.
4982
- var armAnim = (isActive && phase!==\x27done\x27) ? \x27class="prl-arm"\x27 : \x27\x27;
4983
- var headAnim = (isActive && phase!==\x27done\x27) ? \x27class="prl-head"\x27 : \x27\x27;
4984
- var glowStyle = isActive ? (\x27filter:drop-shadow(0 0 6px \x27+phaseColor+\x27)\x27) : \x27\x27;
4985
-
4986
- // Document held up during R2 cross-reading
4987
- var docHtml = \x27\x27;
4988
- if (phase===\x27r2\x27 && isActive) {
4989
- docHtml = \x27<rect x="46" y="6" width="14" height="18" rx="2" fill="#0f0f1e" stroke="#22d3ee" stroke-width="1.5" class="prl-doc-hold"/>\x27+
4990
- \x27<line x1="49" y1="11" x2="57" y2="11" stroke="#22d3ee" stroke-width="1" opacity=".7"/>\x27+
4991
- \x27<line x1="49" y1="14" x2="57" y2="14" stroke="#22d3ee" stroke-width="1" opacity=".5"/>\x27+
4992
- \x27<line x1="49" y1="17" x2="54" y2="17" stroke="#22d3ee" stroke-width="1" opacity=".4"/>\x27;
4993
- }
4994
- if (phase===\x27r3\x27 && isActive) {
4995
- docHtml = \x27<rect x="46" y="6" width="14" height="18" rx="2" fill="#0f0f1e" stroke="#f59e0b" stroke-width="1.5" class="prl-doc-hold"/>\x27+
4996
- \x27<line x1="49" y1="11" x2="57" y2="11" stroke="#f59e0b" stroke-width="1" opacity=".7"/>\x27+
4997
- \x27<line x1="49" y1="14" x2="57" y2="14" stroke="#f59e0b" stroke-width="1" opacity=".5"/>\x27;
4998
- }
4999
-
5000
- // Shirt colors — vibrant, professional palette
5001
- var shirtColors = [\x27#4f46e5\x27,\x27#0891b2\x27,\x27#7c3aed\x27,\x27#059669\x27,\x27#dc2626\x27,\x27#d97706\x27];
5002
- var shirt = shirtColors[skinIdx];
5003
- // Hair colors — varied and realistic
5004
- var hairColors = [\x27#1a1a1a\x27,\x27#4a3728\x27,\x27#c4a35a\x27,\x27#8b0000\x27,\x27#2c4a7c\x27,\x27#3d2b1f\x27];
5005
- var hair = hairColors[skinIdx];
5006
- var monitorGlow = isActive ? (\x27filter:drop-shadow(0 0 5px \x27+phaseColor+\x2780)\x27) : \x27\x27;
5007
-
5008
- var svgChar = \x27<svg viewBox="0 0 80 96" width="76" height="90" xmlns="http://www.w3.org/2000/svg" style="\x27+glowStyle+\x27;display:block;margin:0 auto">\x27+
5009
- // ════ ISOMETRIC-STYLE DESK ════
5010
- // Desk top — parallelogram for 3D feel (top face)
5011
- \x27<path d="M4 55 L76 55 L76 63 L4 63 Z" fill="\x27+deskColor+\x27" stroke="\x27+deskBorder+\x27" stroke-width="1.2"/>\x27+
5012
- // Desk front face (darker) — 3D depth
5013
- \x27<path d="M4 63 L76 63 L76 70 L4 70 Z" fill="\x27+(isDone?\x27#0d2010\x27:(isActive?\x27#0c0c22\x27:\x27#0e0e1c\x27))+\x27"/>\x27+
5014
- // Desk left side face
5015
- \x27<path d="M4 55 L4 70 L4 70" fill="none"/>\x27+
5016
- // Desk front edge highlight
5017
- \x27<line x1="4" y1="63" x2="76" y2="63" stroke="\x27+deskBorder+\x2760" stroke-width=".8"/>\x27+
5018
- // Desk legs — rounded, tapered
5019
- \x27<path d="M10 70 C10 70 9 82 9 84 C9 86 11 87 13 87 C15 87 17 86 17 84 C17 82 16 70 16 70 Z" fill="#111128"/>\x27+
5020
- \x27<path d="M63 70 C63 70 62 82 62 84 C62 86 64 87 66 87 C68 87 70 86 70 84 C70 82 69 70 69 70 Z" fill="#111128"/>\x27+
5021
- // Desk shelf between legs
5022
- \x27<rect x="17" y="79" width="46" height="3" rx="1.5" fill="#161626"/>\x27+
5023
- // ════ MONITOR (sleek, thin-bezel) ════
5024
- // Monitor shadow on desk
5025
- \x27<ellipse cx="35" cy="56" rx="14" ry="2" fill="rgba(0,0,0,.4)"/>\x27+
5026
- // Monitor stand base
5027
- \x27<ellipse cx="35" cy="57" rx="7" ry="1.5" fill="#1a1a2e"/>\x27+
5028
- // Monitor stand pole
5029
- \x27<rect x="33" y="50" width="4" height="6" rx="1" fill="#1a1a2e"/>\x27+
5030
- // Monitor outer bezel — shadow/depth
5031
- \x27<rect x="17" y="26" width="36" height="25" rx="4" fill="#050510"/>\x27+
5032
- // Monitor bezel
5033
- \x27<rect x="18" y="27" width="34" height="23" rx="3" fill="#0d0d20" stroke="\x27+(isActive?phaseColor:\x27#252535\x27)+\x27" stroke-width="\x27+(isActive?\x272\x27:\x271\x27)+\x27" style="\x27+monitorGlow+\x27"/>\x27+
5034
- // Screen glass — idle=standby blue, done=green, active=lit
5035
- \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="\x27+(isDone?\x27#0a1a0a\x27:(isActive?\x27#0a0a18\x27:\x27#0e0e22\x27))+\x27"/>\x27+
5036
- // Screen content
5037
- (isActive ?
5038
- // Active: glowing code/data on screen
5039
- \x27<defs><linearGradient id="sg\x27+skinIdx+\x27" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="\x27+phaseColor+\x2722"/><stop offset="1" stop-color="\x27+phaseColor+\x2708"/></linearGradient></defs>\x27+
5040
- \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="url(#sg\x27+skinIdx+\x27)"/>\x27+
5041
- \x27<line x1="22" y1="32" x2="48" y2="32" stroke="\x27+phaseColor+\x27ee" stroke-width="1.2" stroke-linecap="round"/>\x27+
5042
- \x27<line x1="22" y1="35" x2="44" y2="35" stroke="\x27+phaseColor+\x27aa" stroke-width="1" stroke-linecap="round"/>\x27+
5043
- \x27<line x1="22" y1="38" x2="46" y2="38" stroke="\x27+phaseColor+\x2788" stroke-width="1" stroke-linecap="round"/>\x27+
5044
- \x27<line x1="22" y1="41" x2="40" y2="41" stroke="\x27+phaseColor+\x2766" stroke-width="1" stroke-linecap="round"/>\x27+
5045
- \x27<line x1="22" y1="44" x2="43" y2="44" stroke="\x27+phaseColor+\x2744" stroke-width="1" stroke-linecap="round"/>\x27+
5046
- \x27<rect x="22" y="30" width="10" height="2.5" rx="1" fill="\x27+phaseColor+\x2733"/>\x27
5047
- : isDone ?
5048
- // Done: green screen with completed output
5049
- \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="#0a1a0a88"/>\x27+
5050
- \x27<line x1="22" y1="32" x2="44" y2="32" stroke="#22c55e99" stroke-width="1" stroke-linecap="round"/>\x27+
5051
- \x27<line x1="22" y1="35" x2="46" y2="35" stroke="#22c55e77" stroke-width="1" stroke-linecap="round"/>\x27+
5052
- \x27<line x1="22" y1="38" x2="40" y2="38" stroke="#22c55e55" stroke-width="1" stroke-linecap="round"/>\x27+
5053
- \x27<line x1="22" y1="41" x2="43" y2="41" stroke="#22c55e44" stroke-width="1" stroke-linecap="round"/>\x27
5054
- :
5055
- // Idle: dim standby screen — waiting, lit but quiet
5056
- \x27<rect x="20" y="29" width="30" height="18" rx="2" fill="rgba(90,80,180,.35)"/>\x27+
5057
- \x27<line x1="22" y1="33" x2="46" y2="33" stroke="#9090cc" stroke-width="1" stroke-linecap="round" opacity=".8"/>\x27+
5058
- \x27<line x1="22" y1="36" x2="38" y2="36" stroke="#8080bb" stroke-width="1" stroke-linecap="round" opacity=".65"/>\x27+
5059
- \x27<line x1="22" y1="39" x2="44" y2="39" stroke="#7070aa" stroke-width="1" stroke-linecap="round" opacity=".5"/>\x27+
5060
- \x27<line x1="22" y1="42" x2="34" y2="42" stroke="#6060a0" stroke-width="1" stroke-linecap="round" opacity=".4"/>\x27+
5061
- \x27<circle cx="22" cy="45" r="1" fill="#6366f1" opacity=".6" class="prl-doc-hold"/>\x27
5062
- )+
5063
- // Monitor camera dot
5064
- \x27<circle cx="35" cy="28.2" r=".9" fill="\x27+(isActive?phaseColor:(isDone?\x27#22c55e\x27:\x27#6060c8\x27))+\x27"/>\x27+
5065
- // ════ KEYBOARD (detailed, realistic) ════
5066
- \x27<rect x="13" y="48" width="36" height="7" rx="2.5" fill="#0c0c1e" stroke="#202036" stroke-width="1"/>\x27+
5067
- // Key rows
5068
- \x27<rect x="14" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5069
- \x27<rect x="18" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5070
- \x27<rect x="22" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5071
- \x27<rect x="26" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5072
- \x27<rect x="30" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5073
- \x27<rect x="34" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5074
- \x27<rect x="38" y="49.5" width="3" height="2" rx=".5" fill="#181830"/>\x27+
5075
- \x27<rect x="15" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
5076
- \x27<rect x="21" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
5077
- \x27<rect x="27" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
5078
- \x27<rect x="33" y="52.5" width="5" height="2" rx=".5" fill="#181830"/>\x27+
5079
- // Spacebar
5080
- \x27<rect x="19" y="55" width="24" height="1.8" rx=".9" fill="#181830"/>\x27+
5081
- // ════ ERGONOMIC CHAIR ════
5082
- // Chair base
5083
- \x27<ellipse cx="34" cy="72" rx="12" ry="4" fill="#111124"/>\x27+
5084
- // Chair gas lift
5085
- \x27<rect x="32" y="65" width="4" height="8" rx="1" fill="#1a1a2c"/>\x27+
5086
- // Chair seat
5087
- \x27<path d="M22 60 Q22 56 34 56 Q46 56 46 60 L46 66 Q46 68 34 68 Q22 68 22 66 Z" fill="#1c1c2c" stroke="#2a2a3e" stroke-width="1"/>\x27+
5088
- // Chair backrest
5089
- \x27<path d="M24 44 Q23 38 34 37 Q45 38 44 44 L44 58 Q44 60 34 60 Q24 60 24 58 Z" fill="#191928" stroke="#2a2a3c" stroke-width="1"/>\x27+
5090
- // Chair backrest cushion
5091
- \x27<path d="M26 46 Q26 41 34 40 Q42 41 42 46 L42 57 Q42 58 34 58 Q26 58 26 57 Z" fill="#1e1e30"/>\x27+
5092
- // Chair headrest
5093
- \x27<path d="M28 37 Q28 33 34 33 Q40 33 40 37 L40 39 Q40 40 34 40 Q28 40 28 39 Z" fill="#191928" stroke="#2a2a3c" stroke-width="1"/>\x27+
5094
- // Chair armrests
5095
- \x27<path d="M22 55 L18 55 Q16 55 16 57 L16 60 Q16 62 18 62 L22 62 Q24 62 24 60 L24 55 Z" fill="#1c1c2c"/>\x27+
5096
- \x27<path d="M46 55 L50 55 Q52 55 52 57 L52 60 Q52 62 50 62 L46 62 Q44 62 44 60 L44 55 Z" fill="#1c1c2c"/>\x27+
5097
- // ════ TORSO / SHIRT ════
5098
- // shirt back visible above chair
5099
- \x27<path d="M27 58 Q27 54 34 53 Q41 54 41 58 L42 65 L26 65 Z" fill="\x27+shirt+\x27cc"/>\x27+
5100
- // shirt body
5101
- \x27<path d="M27 44 Q27 42 34 41 Q41 42 41 44 L42 58 L26 58 Z" fill="\x27+shirt+\x27"/>\x27+
5102
- // shirt shading (left side)
5103
- \x27<path d="M27 44 Q27 42 34 41 L34 58 L26 58 Z" fill="rgba(0,0,0,.12)"/>\x27+
5104
- // collar / V-neck
5105
- \x27<path d="M34 41 L31 46 L34 44.5 L37 46 Z" fill="\x27+skin+\x27ee"/>\x27+
5106
- // shirt wrinkle detail
5107
- \x27<line x1="34" y1="46" x2="34" y2="57" stroke="rgba(0,0,0,.08)" stroke-width="2" stroke-linecap="round"/>\x27+
5108
- // ════ ARMS (typing position) ════
5109
- \x27<g \x27+armAnim+\x27>\x27+
5110
- // Left upper arm
5111
- \x27<path d="M28 45 C24 47 22 50 21 53 C21 55 23 56 25 55 C27 54 27 52 28 49 Z" fill="\x27+shirt+\x27"/>\x27+
5112
- // Left forearm
5113
- \x27<path d="M21 53 C19 55 18 57 18 59 C18 61 20 62 22 61 C24 60 24 58 25 55 Z" fill="\x27+skin+\x27"/>\x27+
5114
- // Left hand
5115
- \x27<ellipse cx="19" cy="60" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(-10 19 60)"/>\x27+
5116
- // Right upper arm
5117
- \x27<path d="M40 45 C44 47 46 50 47 53 C47 55 45 56 43 55 C41 54 41 52 40 49 Z" fill="\x27+shirt+\x27"/>\x27+
5118
- // Right forearm
5119
- \x27<path d="M47 53 C49 55 50 57 50 59 C50 61 48 62 46 61 C44 60 44 58 43 55 Z" fill="\x27+skin+\x27"/>\x27+
5120
- // Right hand
5121
- \x27<ellipse cx="49" cy="60" rx="4" ry="3" fill="\x27+skin+\x27" transform="rotate(10 49 60)"/>\x27+
5122
- \x27</g>\x27+
5123
- // ════ HEAD (smooth, expressive) ════
5124
- \x27<g \x27+headAnim+\x27>\x27+
5125
- // Neck with shadow
5126
- \x27<path d="M30 40 L38 40 L38 43 Q38 45 34 45 Q30 45 30 43 Z" fill="\x27+skin+\x27"/>\x27+
5127
- \x27<path d="M30 40 L34 40 L34 45 Q30 45 30 43 Z" fill="rgba(0,0,0,.08)"/>\x27+
5128
- // Head — well-proportioned ellipse
5129
- \x27<ellipse cx="34" cy="29" rx="11" ry="12.5" fill="\x27+skin+\x27"/>\x27+
5130
- // Cheek blush (subtle)
5131
- \x27<ellipse cx="26" cy="32" rx="3.5" ry="2" fill="\x27+skin+\x27" opacity=".6"/>\x27+
5132
- \x27<ellipse cx="42" cy="32" rx="3.5" ry="2" fill="\x27+skin+\x27" opacity=".6"/>\x27+
5133
- // Head shadow (right)
5134
- \x27<ellipse cx="41" cy="29" rx="5" ry="11" fill="rgba(0,0,0,.06)"/>\x27+
5135
- // Ears — detailed
5136
- \x27<path d="M23 28 C21 28 20 30 20 31.5 C20 33 21 34.5 23 34.5 C24 34.5 24.5 33.5 24 31.5 C24.5 29.5 24 28 23 28" fill="\x27+skin+\x27"/>\x27+
5137
- \x27<path d="M45 28 C47 28 48 30 48 31.5 C48 33 47 34.5 45 34.5 C44 34.5 43.5 33.5 44 31.5 C43.5 29.5 44 28 45 28" fill="\x27+skin+\x27"/>\x27+
5138
- \x27<path d="M23.5 30 C22.5 30.5 22.5 32.5 23.5 33" stroke="\x27+skin+\x27" stroke-width="1" fill="none" opacity=".5"/>\x27+
5139
- // Hair — styled, voluminous
5140
- \x27<path d="M23 28 C22 22 24 16 34 15 C44 16 46 22 45 28 C44 22 42 18 34 17 C26 18 24 22 23 28" fill="\x27+hair+\x27"/>\x27+
5141
- \x27<path d="M23 27 C22 24 23 19 26 17 C24 20 23 24 24 27" fill="\x27+hair+\x2788"/>\x27+
5142
- // Hair highlight
5143
- \x27<path d="M28 17 C30 15 33 15 36 16 C33 14 29 15 28 17" fill="rgba(255,255,255,.12)"/>\x27+
5144
- // Eyebrows — expressive
5145
- \x27<path d="M27 23 Q29.5 21.5 32 23" stroke="\x27+hair+\x27" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27+
5146
- \x27<path d="M36 23 Q38.5 21.5 41 23" stroke="\x27+hair+\x27" stroke-width="1.6" fill="none" stroke-linecap="round"/>\x27+
5147
- // Eyes — full detail: white + iris + pupil + highlight
5148
- \x27<ellipse cx="30" cy="27.5" rx="3" ry="3.5" fill="#fff" stroke="\x27+skin+\x2740" stroke-width=".5"/>\x27+
5149
- \x27<ellipse cx="38" cy="27.5" rx="3" ry="3.5" fill="#fff" stroke="\x27+skin+\x2740" stroke-width=".5"/>\x27+
5150
- // Iris
5151
- \x27<circle cx="30" cy="28" r="2.2" fill="#3d4a6b"/>\x27+
5152
- \x27<circle cx="38" cy="28" r="2.2" fill="#3d4a6b"/>\x27+
5153
- // Pupil
5154
- \x27<circle cx="30" cy="28" r="1.3" fill="#0a0a14"/>\x27+
5155
- \x27<circle cx="38" cy="28" r="1.3" fill="#0a0a14"/>\x27+
5156
- // Eye shine
5157
- \x27<circle cx="31" cy="27" r=".8" fill="rgba(255,255,255,.9)"/>\x27+
5158
- \x27<circle cx="39" cy="27" r=".8" fill="rgba(255,255,255,.9)"/>\x27+
5159
- \x27<circle cx="29.5" cy="29" r=".35" fill="rgba(255,255,255,.4)"/>\x27+
5160
- // Lower eyelid line
5161
- \x27<path d="M27 30 Q30 31.5 33 30" stroke="\x27+skin+\x27" stroke-width=".7" fill="none" opacity=".5"/>\x27+
5162
- \x27<path d="M35 30 Q38 31.5 41 30" stroke="\x27+skin+\x27" stroke-width=".7" fill="none" opacity=".5"/>\x27+
5163
- // Nose — soft curved
5164
- \x27<path d="M33 31 Q33 33 34 33.5 Q35 34 35 33 Q36 33 36 31" stroke="\x27+skin+\x27" stroke-width="1.1" fill="none" stroke-linecap="round" opacity=".7"/>\x27+
5165
- \x27<ellipse cx="31.5" cy="33.5" rx="1.2" ry=".7" fill="rgba(0,0,0,.08)"/>\x27+
5166
- \x27<ellipse cx="36.5" cy="33.5" rx="1.2" ry=".7" fill="rgba(0,0,0,.08)"/>\x27+
5167
- // Mouth — expressive
5168
- (isDone ?
5169
- // Big smile when done
5170
- \x27<path d="M29 37 Q34 42 39 37" stroke="#8b4513" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
5171
- \x27<path d="M29 37 Q34 41 39 37" stroke="rgba(255,255,255,.3)" stroke-width=".5" fill="none" stroke-linecap="round"/>\x27+
5172
- // Teeth
5173
- \x27<path d="M30 37.5 Q34 41 38 37.5 Q34 40 30 37.5" fill="#fff" opacity=".8"/>\x27
5174
- :
5175
- // Focused expression
5176
- \x27<path d="M30.5 37 Q34 38.5 37.5 37" stroke="#8b4513" stroke-width="1.4" fill="none" stroke-linecap="round"/>\x27
5177
- )+
5178
- // Agent badge/pin on shirt
5179
- \x27<circle cx="38.5" cy="48" r="5.5" fill="#0f0f1e" stroke="\x27+shirt+\x2780" stroke-width="1.2"/>\x27+
5180
- \x27<circle cx="38.5" cy="48" r="4" fill="#161622"/>\x27+
5181
- \x27<text x="38.5" y="51" text-anchor="middle" font-size="6">\x27+ico+\x27</text>\x27+
5182
- \x27</g>\x27+
5183
- // ════ DONE BADGE (top right corner, polished) ════
5184
- (isDone ?
5185
- \x27<circle cx="67" cy="9" r="10" fill="#0a2010"/>\x27+
5186
- \x27<circle cx="67" cy="9" r="8" fill="#16a34a"/>\x27+
5187
- \x27<circle cx="67" cy="9" r="6" fill="#22c55e"/>\x27+
5188
- \x27<path d="M62.5 9 L65.5 12 L71.5 5" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>\x27
5189
- : \x27\x27)+
5190
- docHtml+
5191
- \x27</svg>\x27;
5192
-
5193
- return \x27<div class="prl-desk\x27+(isActive?\x27 prl-desk--active\x27:\x27\x27)+(isDone?\x27 prl-desk--done\x27:\x27\x27)+\x27" style="--dc:\x27+phaseColor+\x27;box-shadow:\x27+shadow+\x27">\x27+
5194
- (actionStr ? \x27<div class="prl-action-bubble\x27+(isActive?\x27 prl-action-bubble--active\x27:\x27\x27)+\x27">\x27+actionStr+\x27</div>\x27 : \x27\x27)+
5195
- svgChar+
5196
- \x27<div class="prl-desk-name" style="color:\x27+(isDone?\x27#4ade80\x27:(isActive?phaseColor:\x27#6b7280\x27))+\x27">\x27+esc(lbl)+\x27</div>\x27+
5197
- \x27</div>\x27;
5198
- }
5199
-
5200
- // ── MASTER ORCHESTRATOR walking animation ─────────────────────────
5201
- // In R1: walks left-right between desks (CSS animation).
5202
- // In R2: stands at the active agent's desk.
5203
- // In R3: stands center with lightning bolt.
5204
- var masterIcon = phase===\x27r3\x27 ? \x27\u26a1\x27 : (phase===\x27done\x27 ? \x27\u2714\x27 : \x27\u2666\x27);
5205
- var masterColor2 = {r1:\x27#818cf8\x27,r2:\x27#818cf8\x27,r3:\x27#f59e0b\x27,done:\x27#22c55e\x27}[phase]||\x27#818cf8\x27;
5206
- var masterAnim = (phase===\x27r1\x27) ? \x27prl-master-walk\x27 : (phase===\x27r2\x27 ? \x27prl-master-supervise\x27 : (phase===\x27done\x27 ? \x27prl-master-done\x27 : \x27prl-master-walk\x27));
5207
- var masterSvg = \x27<svg viewBox="0 0 60 90" width="56" height="86" xmlns="http://www.w3.org/2000/svg" font-family="system-ui,sans-serif" style="filter:drop-shadow(0 0 12px \x27+masterColor2+\x27aa)">\x27+
5208
- // ════ LEGS (walking when R1) ════
5209
- // Left leg — trouser
5210
- \x27<path d="M22 55 C21 63 19 72 18 77 C17 80 18 82 21 82 C23 82 24 80 24 77 C25 71 25 62 26 55 Z" fill="#1e1c4a" class="prl-master-leg-l"/>\x27+
5211
- // Right leg — trouser
5212
- \x27<path d="M28 55 C29 63 31 72 32 77 C33 80 32 82 29 82 C27 82 26 80 26 77 C25 71 25 62 24 55 Z" fill="#1e1c4a" class="prl-master-leg-r"/>\x27+
5213
- // Left shoe — detailed
5214
- \x27<path d="M16 79 C14 79 13 81 14 83 C15 85 18 85 21 84 C23 83 24 82 23 80 C22 79 19 79 16 79" fill="#0a0a14"/>\x27+
5215
- \x27<path d="M16 79 C15 80 14 82 15 83" stroke="#1a1a2e" stroke-width=".8" fill="none"/>\x27+
5216
- // Right shoe
5217
- \x27<path d="M34 79 C36 79 37 81 36 83 C35 85 32 85 29 84 C27 83 26 82 27 80 C28 79 31 79 34 79" fill="#0a0a14"/>\x27+
5218
- // Trouser crease
5219
- \x27<line x1="23" y1="55" x2="21" y2="77" stroke="rgba(255,255,255,.08)" stroke-width="1" stroke-linecap="round"/>\x27+
5220
- \x27<line x1="27" y1="55" x2="29" y2="77" stroke="rgba(255,255,255,.08)" stroke-width="1" stroke-linecap="round"/>\x27+
5221
- // ════ TORSO — Premium dark suit ════
5222
- // Suit jacket base
5223
- \x27<path d="M13 32 C12 30 15 27 25 25 C35 27 38 30 37 32 L38 55 L12 55 Z" fill="#252450"/>\x27+
5224
- // Left suit front panel
5225
- \x27<path d="M13 32 C12 30 15 27 25 25 L25 55 L12 55 Z" fill="#1e1d44"/>\x27+
5226
- // Right suit front panel (lighter)
5227
- \x27<path d="M25 25 C35 27 38 30 37 32 L38 55 L25 55 Z" fill="#272660"/>\x27+
5228
- // Suit lapels — left
5229
- \x27<path d="M25 25 L19 33 L22 36 L25 29 Z" fill="#1a1940" stroke="#252450" stroke-width=".5"/>\x27+
5230
- // Suit lapels — right
5231
- \x27<path d="M25 25 L31 33 L28 36 L25 29 Z" fill="#1a1940" stroke="#252450" stroke-width=".5"/>\x27+
5232
- // White shirt / tie visible between lapels
5233
- \x27<path d="M25 29 L22 36 L25 34 L28 36 Z" fill="#f0f0fa"/>\x27+
5234
- // Tie — authority color
5235
- \x27<path d="M25 33 L24 44 L25 48 L26 44 Z" fill="\x27+masterColor2+\x27"/>\x27+
5236
- \x27<path d="M24 44 L25 48 L26 44 L25 43 Z" fill="\x27+masterColor2+\x27cc"/>\x27+
5237
- // Tie knot
5238
- \x27<path d="M23.5 32 L26.5 32 L25 34 Z" fill="\x27+masterColor2+\x27"/>\x27+
5239
- // Suit pocket square
5240
- \x27<path d="M33 35 L36 33 L37 36 L34 37 Z" fill="\x27+masterColor2+\x2799"/>\x27+
5241
- // Suit buttons
5242
- \x27<circle cx="25" cy="42" r="1.2" fill="\x27+masterColor2+\x27aa"/>\x27+
5243
- \x27<circle cx="25" cy="46" r="1.2" fill="\x27+masterColor2+\x27aa"/>\x27+
5244
- // Suit lapel badge / NHA logo
5245
- \x27<circle cx="20" cy="36" r="2.5" fill="#0d0d1e" stroke="\x27+masterColor2+\x2799" stroke-width="1"/>\x27+
5246
- \x27<text x="20" y="39" text-anchor="middle" font-size="4" fill="\x27+masterColor2+\x27">N</text>\x27+
5247
- // ════ ARMS ════
5248
- \x27<g class="prl-master-arm-l">\x27+
5249
- // Left upper arm
5250
- \x27<path d="M13 34 C8 37 6 42 6 46 C6 49 9 50 11 49 C13 48 13 45 14 41 C15 38 14 35 13 34" fill="#252450"/>\x27+
5251
- // Left forearm
5252
- \x27<path d="M6 46 C4 48 4 51 5 53 C6 55 9 55 10 53 C11 51 10 48 10 46 Z" fill="#d4a97a"/>\x27+
5253
- // Left hand
5254
- \x27<ellipse cx="7" cy="54" rx="4.5" ry="3.5" fill="#d4a97a" transform="rotate(-15 7 54)"/>\x27+
5255
- \x27</g>\x27+
5256
- // Right arm — holds clipboard
5257
- \x27<g class="prl-master-arm-r">\x27+
5258
- // Right upper arm
5259
- \x27<path d="M37 34 C42 37 44 41 44 45 C44 48 41 49 39 48 C37 47 37 44 37 40 C37 37 37 35 37 34" fill="#252450"/>\x27+
5260
- // Right forearm
5261
- \x27<path d="M44 44 C46 46 47 49 46 52 C45 54 42 54 41 52 C40 50 41 47 41 45 Z" fill="#d4a97a"/>\x27+
5262
- // Right hand
5263
- \x27<ellipse cx="45" cy="52" rx="4" ry="3" fill="#d4a97a" transform="rotate(15 45 52)"/>\x27+
5264
- // Clipboard — premium design
5265
- \x27<rect x="43" y="32" width="14" height="19" rx="2.5" fill="#1a1a2e" stroke="\x27+masterColor2+\x2799" stroke-width="1.5"/>\x27+
5266
- // Clipboard clip
5267
- \x27<rect x="47" y="30" width="6" height="5" rx="1.5" fill="\x27+masterColor2+\x27" stroke="\x27+masterColor2+\x27" stroke-width="1"/>\x27+
5268
- \x27<rect x="48" y="31" width="4" height="3" rx="1" fill="#0f0f1e"/>\x27+
5269
- // Clipboard lines
5270
- \x27<line x1="46" y1="36" x2="54" y2="36" stroke="\x27+masterColor2+\x27cc" stroke-width="1" stroke-linecap="round"/>\x27+
5271
- \x27<line x1="46" y1="39" x2="54" y2="39" stroke="\x27+masterColor2+\x27aa" stroke-width="1" stroke-linecap="round"/>\x27+
5272
- \x27<line x1="46" y1="42" x2="54" y2="42" stroke="\x27+masterColor2+\x2788" stroke-width="1" stroke-linecap="round"/>\x27+
5273
- \x27<line x1="46" y1="45" x2="50" y2="45" stroke="\x27+masterColor2+\x2766" stroke-width="1" stroke-linecap="round"/>\x27+
5274
- // Data chart on clipboard
5275
- \x27<rect x="46" y="37" width="3" height="2" rx=".5" fill="\x27+masterColor2+\x2744"/>\x27+
5276
- \x27<rect x="50" y="36" width="3" height="3" rx=".5" fill="\x27+masterColor2+\x2766"/>\x27+
5277
- \x27</g>\x27+
5278
- // ════ HEAD — authoritative, confident ════
5279
- // Neck
5280
- \x27<path d="M22 25 L28 25 L28 29 Q28 31 25 31 Q22 31 22 29 Z" fill="#d4a97a"/>\x27+
5281
- \x27<path d="M22 25 L25 25 L25 31 Q22 31 22 29 Z" fill="rgba(0,0,0,.1)"/>\x27+
5282
- // Head shape
5283
- \x27<ellipse cx="25" cy="15" rx="12" ry="13" fill="#d4a97a"/>\x27+
5284
- // Jaw/chin
5285
- \x27<path d="M14 15 C14 22 18 26 25 27 C32 26 36 22 36 15" fill="#d4a97a"/>\x27+
5286
- // Head shading
5287
- \x27<ellipse cx="32" cy="15" rx="6" ry="11" fill="rgba(0,0,0,.07)"/>\x27+
5288
- // Ears
5289
- \x27<path d="M13 13 C11 13 10 15 10 17 C10 19 11 20 13 20 C14 20 14.5 19 14 17 C14.5 15 14 13 13 13" fill="#d4a97a"/>\x27+
5290
- \x27<path d="M37 13 C39 13 40 15 40 17 C40 19 39 20 37 20 C36 20 35.5 19 36 17 C35.5 15 36 13 37 13" fill="#d4a97a"/>\x27+
5291
- \x27<path d="M13.5 15 C12.5 16 12.5 18 13.5 19" stroke="#c4935a" stroke-width="1" fill="none"/>\x27+
5292
- // Hair — executive styled, neat
5293
- \x27<path d="M13 14 C12 7 16 2 25 1 C34 2 38 7 37 14 C36 7 32 4 25 3 C18 4 14 7 13 14" fill="#1a0e08"/>\x27+
5294
- // Side part
5295
- \x27<path d="M22 3 C21 4 21 6 22 8" stroke="rgba(255,255,255,.15)" stroke-width="1.5" fill="none" stroke-linecap="round"/>\x27+
5296
- // Hair sheen
5297
- \x27<path d="M20 3 C22 1 27 1 30 2 C27 0 22 1 20 3" fill="rgba(255,255,255,.1)"/>\x27+
5298
- // Eyebrows — thick, authoritative
5299
- \x27<path d="M16.5 11 Q19 9.5 21.5 11" stroke="#1a0e08" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
5300
- \x27<path d="M28.5 11 Q31 9.5 33.5 11" stroke="#1a0e08" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
5301
- // Eyes — confident, forward-looking
5302
- \x27<ellipse cx="19.5" cy="14.5" rx="3.2" ry="3.5" fill="#fff" stroke="#d4a97a" stroke-width=".4"/>\x27+
5303
- \x27<ellipse cx="30.5" cy="14.5" rx="3.2" ry="3.5" fill="#fff" stroke="#d4a97a" stroke-width=".4"/>\x27+
5304
- \x27<circle cx="19.5" cy="15" r="2.3" fill="#1e3a6e"/>\x27+
5305
- \x27<circle cx="30.5" cy="15" r="2.3" fill="#1e3a6e"/>\x27+
5306
- \x27<circle cx="19.5" cy="15" r="1.3" fill="#0a0a18"/>\x27+
5307
- \x27<circle cx="30.5" cy="15" r="1.3" fill="#0a0a18"/>\x27+
5308
- \x27<circle cx="20.5" cy="13.7" r=".9" fill="rgba(255,255,255,.95)"/>\x27+
5309
- \x27<circle cx="31.5" cy="13.7" r=".9" fill="rgba(255,255,255,.95)"/>\x27+
5310
- // Nose — subtle
5311
- \x27<path d="M24 18 Q24 20 25 20.5 Q26 21 26 19.5" stroke="#c4935a" stroke-width="1.1" fill="none" stroke-linecap="round" opacity=".8"/>\x27+
5312
- \x27<ellipse cx="22.5" cy="20.5" rx="1.3" ry=".8" fill="rgba(0,0,0,.1)"/>\x27+
5313
- \x27<ellipse cx="27.5" cy="20.5" rx="1.3" ry=".8" fill="rgba(0,0,0,.1)"/>\x27+
5314
- // Confident smile
5315
- \x27<path d="M19.5 24 Q25 27.5 30.5 24" stroke="#8b4513" stroke-width="1.8" fill="none" stroke-linecap="round"/>\x27+
5316
- \x27<path d="M20 24.5 Q25 27 30 24.5 Q25 26.5 20 24.5" fill="#fff" opacity=".7"/>\x27+
5317
- // Crown / authority badge above head — pure SVG geometry (no font-dependent text)
5318
- \x27<circle cx="25" cy="-4" r="9" fill="\x27+masterColor2+\x2722" stroke="\x27+masterColor2+\x2766" stroke-width="1.5"/>\x27+
5319
- (phase===\x27r3\x27 ?
5320
- // Lightning bolt for R3 mediation
5321
- \x27<path d="M27 -12 L22 -4 L25.5 -4 L23 4 L29 -3 L25.5 -3 Z" fill="\x27+masterColor2+\x27" stroke="\x27+masterColor2+\x2788" stroke-width=".6" stroke-linejoin="round"/>\x27
5322
- : phase===\x27done\x27 ?
5323
- // Checkmark for done
5324
- \x27<path d="M19 -4 L23.5 0.5 L31 -9" stroke="\x27+masterColor2+\x27" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>\x27
5325
- :
5326
- // Diamond (authority) for r1/r2
5327
- \x27<path d="M25 -13 L30 -4 L25 5 L20 -4 Z" fill="\x27+masterColor2+\x27" stroke="\x27+masterColor2+\x27cc" stroke-width=".8"/>\x27+
5328
- \x27<path d="M25 -13 L30 -4 L25 -3 L20 -4 Z" fill="\x27+masterColor2+\x27aa"/>\x27
5329
- )+
5330
- \x27</svg>\x27;
5331
-
5332
- var masterLabel2 = {r1:\x27Orchestratore\x27,r2:\x27Coordina\x27,r3:\x27HERALD\x27,done:\x27Completato\x27}[phase]||\x27MASTER\x27;
5333
- var masterHtml = \x27<div class="prl-master \x27+masterAnim+\x27">\x27+masterSvg+\x27<div class="prl-master-label" style="color:\x27+masterColor2+\x27">\x27+masterLabel2+\x27</div></div>\x27;
5334
-
5335
- // ── Flying document animation for R2 (agent-to-agent) ────────────
5336
- // One flying doc per active cross-reading event, CSS keyframe arc.
5337
- var flyingDocHtml = \x27\x27;
5338
- if (phase===\x27r2\x27 && activeLabel) {
5339
- var others2 = proposals.filter(function(x){return (x.label||x.agent)!==activeLabel;});
5340
- flyingDocHtml = \x27<div class="prl-fly-container" aria-hidden="true">\x27;
5341
- others2.forEach(function(other, oi) {
5342
- var delay = (oi * 0.35).toFixed(2);
5343
- flyingDocHtml += \x27<div class="prl-fly-doc" style="animation-delay:\x27+delay+\x27s;animation-duration:\x27+(1.5+oi*0.2).toFixed(1)+\x27s">\x27+
5344
- // Document — dog-ear corner, realistic paper look
5345
- \x27<svg viewBox="0 0 22 28" width="22" height="28">\x27+
5346
- \x27<defs><filter id="dsf\x27+oi+\x27" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="1" dy="2" stdDeviation="2" flood-color="#22d3ee" flood-opacity=".5"/></filter></defs>\x27+
5347
- // Paper body
5348
- \x27<path d="M2 1 L16 1 L21 6 L21 27 Q21 28 20 28 L2 28 Q1 28 1 27 L1 2 Q1 1 2 1" fill="#0c0c1e" stroke="#22d3ee" stroke-width="1.5" filter="url(#dsf\x27+oi+\x27)"/>\x27+
5349
- // Dog-ear fold
5350
- \x27<path d="M16 1 L16 6 L21 6" fill="none" stroke="#22d3ee" stroke-width="1.2"/>\x27+
5351
- \x27<path d="M16 1 L21 6 L16 6 Z" fill="#0f0f28"/>\x27+
5352
- // Header bar (colored)
5353
- \x27<rect x="2" y="2" width="13" height="3" rx="1" fill="#22d3ee22"/>\x27+
5354
- // Text lines
5355
- \x27<line x1="3" y1="9" x2="19" y2="9" stroke="#22d3ee" stroke-width="1" opacity=".8" stroke-linecap="round"/>\x27+
5356
- \x27<line x1="3" y1="12" x2="17" y2="12" stroke="#22d3ee" stroke-width="1" opacity=".6" stroke-linecap="round"/>\x27+
5357
- \x27<line x1="3" y1="15" x2="19" y2="15" stroke="#22d3ee" stroke-width="1" opacity=".5" stroke-linecap="round"/>\x27+
5358
- \x27<line x1="3" y1="18" x2="14" y2="18" stroke="#22d3ee" stroke-width="1" opacity=".4" stroke-linecap="round"/>\x27+
5359
- // Chart bar (mini)
5360
- \x27<rect x="3" y="21" width="3" height="5" rx=".5" fill="#22d3ee44"/>\x27+
5361
- \x27<rect x="7" y="19" width="3" height="7" rx=".5" fill="#22d3ee66"/>\x27+
5362
- \x27<rect x="11" y="22" width="3" height="4" rx=".5" fill="#22d3ee44"/>\x27+
5363
- \x27<rect x="15" y="20" width="3" height="6" rx=".5" fill="#22d3ee55"/>\x27+
5364
- \x27</svg></div>\x27;
5365
- });
5366
- flyingDocHtml += \x27</div>\x27;
5367
- }
5368
-
5369
- // Persist across tab navigations (snapshot — animations won\x27t replay but structure is preserved)
4804
+ // Persist across tab navigations
5370
4805
  if (pb.innerHTML && pb.innerHTML.length < 60000) { _parlPersistHtml = pb.innerHTML; }
5371
4806
 
5372
4807
  }
@@ -6625,37 +6060,38 @@ input:focus,textarea:focus{border-color:var(--green3)}
6625
6060
  .wf-sbraita-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#ef4444}
6626
6061
  @keyframes sbraitaPop{0%{transform:translateX(-50%) scale(1) rotate(-2deg)}100%{transform:translateX(-50%) scale(1.06) rotate(2deg)}}
6627
6062
  /* ── Parliament Boardroom — bright office, same palette as workflow scene ── */
6628
- /* Outer wrapper — matches prl-wrap but with slight warm tint */
6629
6063
  .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}
6630
- /* Header: phase chip + progress */
6631
6064
  .br-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
6632
6065
  .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
6066
  .br-progress-wrap{flex:1;height:3px;background:var(--border);border-radius:4px;overflow:hidden;min-width:60px}
6634
6067
  .br-progress-bar{height:100%;background:linear-gradient(90deg,#6366f1,#22d3ee);border-radius:4px;transition:width .5s ease;width:0%}
6635
- /* Boardroom scene — no background (bgSvg covers it) */
6068
+ /* Boardroom scene — bgSvg covers background */
6636
6069
  .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
6070
  /* 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 */
6071
+ .br-seats-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;justify-content:space-around}
6072
+ /* Individual seat card — light theme matching workflow stations */
6640
6073
  .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
6074
  .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
6075
  .br-seat--done{border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.06)}
6076
+ /* Emoji character */
6077
+ .br-char{font-size:36px;line-height:1;user-select:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2))}
6643
6078
  /* Orchestrator head seat */
6644
6079
  .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}
6080
+ .br-orch-speech{font-size:9px;font-weight:800;font-family:var(--mono);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
6081
  @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}
6082
+ .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}
6083
+ /* Bubble above seat */
6084
+ .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;line-height:1.45;word-break:break-word;max-width:140px;white-space:normal;box-shadow:0 2px 6px rgba(0,0,0,.1);margin-bottom:2px}
6650
6085
  /* 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}
6086
+ .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:140px;line-height:1.3;margin-top:1px;background:rgba(0,0,0,.04);border-radius:4px;padding:1px 4px;transition:color .3s}
6652
6087
  .br-seat--active .br-seat-name{color:#4338ca}
6653
6088
  .br-seat--done .br-seat-name{color:#111827}
6654
6089
  /* Convergence */
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}
6656
- .br-conv-bar-outer{height:4px;background:rgba(34,197,94,.15);border-radius:4px;overflow:hidden;margin-bottom:6px}
6657
- .br-conv-bar-inner{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:4px;transition:width .8s ease}
6658
- .br-conv-text{font-size:9px;color:#111827;line-height:1.55}
6090
+ .br-convergence{margin-top:10px;padding:8px 12px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:8px}
6091
+ .br-conv-bar-outer{height:4px;background:rgba(99,102,241,.15);border-radius:4px;overflow:hidden;margin-bottom:6px}
6092
+ .br-conv-bar-inner{height:100%;background:linear-gradient(90deg,#6366f1,#818cf8);border-radius:4px;transition:width .8s ease}
6093
+ .br-conv-text{font-size:9px;color:#86efac;line-height:1.55}
6094
+ @keyframes brDashFlow{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
6659
6095
  /* Keep old prl-* classes for workflow (not touched) */
6660
6096
  .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}
6661
6097
  @keyframes parlPulse{0%,100%{border-color:#6366f1;box-shadow:none}50%{border-color:#818cf8;box-shadow:0 0 20px rgba(99,102,241,.3)}}
@@ -6704,26 +6140,7 @@ input:focus,textarea:focus{border-color:var(--green3)}
6704
6140
  /* Plant right */
6705
6141
  .prl-office-plant2{position:absolute;bottom:14px;right:8px;width:22px;height:42px;z-index:2;pointer-events:none}
6706
6142
  /* ── ISOMETRIC JRPG SCENE ── */
6707
- .iso-scene-wrap{width:100%;overflow-x:auto;display:flex;justify-content:center}
6708
- .iso-scene{background:#f0ede6;cursor:default;overflow:hidden;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18);width:100%}
6709
- /* ── Station grid layout ── */
6710
- .iso-station{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:filter .2s,transform .2s;padding:8px 4px;border-radius:12px;border:1.5px solid transparent;position:relative}
6711
- .iso-station:hover{filter:brightness(1.06);transform:translateY(-2px)}
6712
- .iso-station.iso-orch-walking{animation:orchWalkGrid 1.8s ease-in-out infinite alternate}
6713
- @keyframes orchWalkGrid{0%{transform:translateX(0) scale(1)}100%{transform:translateX(var(--orch-tx,24px)) scale(1.04)}}
6714
- .iso-station.iso-orch-done{animation:orchBounce .7s ease forwards}
6715
- @keyframes orchBounce{0%{transform:scale(1)}40%{transform:scale(1.18) translateY(-6px)}100%{transform:scale(1)}}
6716
- /* Desk — CSS 3D look */
6717
- .iso-desk{width:90%;height:16px;background:linear-gradient(180deg,#d4a448 0%,#b8832a 100%);border-radius:4px 4px 2px 2px;box-shadow:0 4px 0 #8a5e18,0 6px 10px rgba(0,0,0,.3);border-top:2px solid #e8c060;position:relative;margin-top:4px}
6718
- .iso-desk::after{content:'';position:absolute;bottom:-4px;left:8px;right:8px;height:4px;background:#7a5010;border-radius:0 0 3px 3px}
6719
- /* Monitor — sits on desk */
6720
- .iso-monitor{width:56px;height:40px;background:#12101e;border:2px solid #3a3070;border-radius:5px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:-2px}
6721
- .iso-monitor::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:10px;height:5px;background:#252436;border-radius:0 0 3px 3px}
6722
- .iso-monitor-screen{width:44px;height:28px;background:rgba(60,40,160,.35);border-radius:2px;display:flex;align-items:center;justify-content:center}
6723
- .iso-monitor-blink{width:7px;height:7px;border-radius:50%;background:#6366f1;animation:monBlink .9s ease-in-out infinite}
6724
- @keyframes monBlink{0%,100%{opacity:1;box-shadow:0 0 8px #6366f1}50%{opacity:.25;box-shadow:none}}
6725
- /* Tool badge */
6726
- .iso-tool-badge{font-size:22px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));user-select:none;margin-bottom:1px}
6143
+ .iso-scene{background:#f0ede6;cursor:default;max-width:100%;overflow-x:auto;box-shadow:0 4px 24px rgba(0,0,0,.18)}
6727
6144
  /* Animated status chip for [bracket tokens] */
6728
6145
  .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}
6729
6146
  @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)}}
@@ -6736,8 +6153,8 @@ input:focus,textarea:focus{border-color:var(--green3)}
6736
6153
  .iso-orch-wrap{transition:transform .2s}
6737
6154
  .iso-orch-wrap.prl-head{animation:isoCharBob 1.4s ease-in-out infinite}
6738
6155
  /* Thought bubble / speech bubble above character */
6739
- .iso-bubble{font-size:9px;font-family:var(--mono);padding:3px 9px;border-radius:12px;border:1px solid #ccc;background:rgba(255,255,255,.9);color:#6b7280;white-space:normal;word-break:break-word;max-width:160px;line-height:1.4;transition:all .25s;pointer-events:none;backdrop-filter:blur(6px);text-align:center}
6740
- .iso-bubble--active{background:rgba(30,20,60,.9);border-color:#6366f1;color:#a5b4fc;animation:isoBubblePop .35s ease;white-space:normal;max-width:160px;word-break:break-word;line-height:1.35}
6156
+ .iso-bubble{font-size:8px;font-family:var(--mono);padding:2px 7px;border-radius:10px 10px 10px 2px;border:1px solid #3a3060;background:rgba(10,8,20,.85);color:#6b7280;white-space:normal;max-width:160px;line-height:1.4;transition:all .25s;pointer-events:none;backdrop-filter:blur(4px)}
6157
+ .iso-bubble--active{background:rgba(30,20,60,.9);border-color:#6366f1;color:#a5b4fc;animation:isoBubblePop .35s ease;white-space:normal;max-width:110px;word-break:break-word;line-height:1.35}
6741
6158
  .iso-bubble--orch{font-size:9px;padding:3px 9px;border-radius:12px;border-color:#818cf8;color:#a5b4fc;background:rgba(20,15,50,.9)}
6742
6159
  @keyframes isoBubblePop{0%{transform:scale(.8) translateY(4px);opacity:.4}100%{transform:scale(1) translateY(0);opacity:1}}
6743
6160
  .iso-name{font-size:10px;font-family:var(--mono);font-weight:700;letter-spacing:.3px;text-align:center;max-width:160px;white-space:normal;word-break:break-word;line-height:1.3;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 6px;pointer-events:none;backdrop-filter:blur(4px)}