fix: replace Three.js WebGL studio with pure SVG — zero dependencies

Three.js r167/r184 CDN URLs all 404'd; the new build dropped the UMD
global bundle entirely. SVG isometric studio (adapted from studio-v4)
renders instantly in any browser and inside sandboxed srcdoc iframes
with no external requests, no module loading, and 16 KB total HTML.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

studio.py

@@ -1,543 +1,413 @@
 """
-Self-contained Three.js r167 isometric game-dev studio scene for Gradio.
-Three.js and characters.js are inlined at module load so the HTML is fully
-self-contained and works in srcdoc iframes without any external requests.
+Self-contained SVG isometric studio scene for Gradio — zero external dependencies.
+No Three.js, no CDN. Pure SVG + HTML + vanilla JS.
 """
 import json
-import urllib.request
 from pathlib import Path
 
 
-def _fetch_threejs() -> str:
-    # Try local file first (committed to repo)
-    local = Path(__file__).parent / "sandbox_cache" / "three.min.js"
-    if local.exists() and local.stat().st_size > 100_000:
-        print("[studio] Using local three.min.js")
-        return local.read_text()
-    # Try CDNs
-    cdns = [
-        "https://cdnjs.cloudflare.com/ajax/libs/three.js/r167/three.min.js",
-        "https://unpkg.com/three@0.167.0/build/three.min.js",
-        "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.min.js",
-    ]
-    for url in cdns:
-        try:
-            with urllib.request.urlopen(url, timeout=15) as r:
-                data = r.read().decode("utf-8")
-                if len(data) > 100_000:
-                    # Cache locally for next startup
-                    try:
-                        local.write_text(data)
-                    except Exception:
-                        pass
-                    print(f"[studio] Fetched Three.js from {url} ({len(data):,} bytes)")
-                    return data
-        except Exception as e:
-            print(f"[studio] CDN {url} failed: {e}")
-    print("[studio] ERROR: All Three.js sources failed")
-    return "console.error('[IVDS] Three.js failed to load — studio will not render');"
-
-
 def _load_characters_js() -> str:
     p = Path(__file__).parent / "sandbox_cache" / "characters.js"
-    if p.exists():
-        return p.read_text()
-    return "/* characters.js not found */"
+    return p.read_text() if p.exists() else ""
 
 
-print("[studio] Loading Three.js from CDN...")
-_THREEJS_JS    = _fetch_threejs()
 _CHARACTERS_JS = _load_characters_js()
-print(f"[studio] Three.js: {len(_THREEJS_JS):,} bytes | characters.js: {len(_CHARACTERS_JS):,} bytes")
+
+
+# ---------------------------------------------------------------------------
+# Isometric helpers
+# ---------------------------------------------------------------------------
+
+def _pts(pairs, ox=0, oy=0):
+    return " ".join(f"{x+ox},{y+oy}" for x, y in pairs)
+
+
+def _darken(hex_color: str, factor: float = 0.65) -> str:
+    h = hex_color.lstrip("#")
+    if len(h) != 6:
+        return hex_color
+    r, g, b = int(h[:2], 16), int(h[2:4], 16), int(h[4:], 16)
+    return f"#{int(r*factor):02x}{int(g*factor):02x}{int(b*factor):02x}"
+
+
+# Base desk polygon coordinates (desk slot 0, no offset)
+_DESK_TABLETOP  = [(148,268),(240,220),(306,252),(214,300)]
+_DESK_LEFT      = [(148,268),(148,288),(214,320),(214,300)]
+_DESK_RIGHT     = [(214,300),(214,320),(306,270),(306,252)]
+_DESK_MAT       = [(158,262),(238,218),(298,248),(218,292)]
+_MON_BACK       = [(196,208),(218,198),(242,210),(220,220)]
+_MON_SCREEN     = [(200,210),(218,202),(238,212),(220,220)]
+_MON_LINES      = [(200,211,228,203),(200,215,224,207),(200,219,230,211)]
+
+# Base character polygons — head anchor at (174, 264) relative to slot 0
+_CHAR_HEAD_TOP   = [(174,264),(192,255),(202,259),(184,268)]
+_CHAR_HEAD_SIDE  = [(184,268),(202,259),(203,261),(185,270)]
+_CHAR_BODY_TOP   = [(176,276),(196,267),(204,271),(184,280)]
+_CHAR_BODY_SIDE  = [(184,280),(202,271),(204,273),(186,282)]
+_CHAR_LEG_L      = [(177,288),(185,284),(189,286),(181,290)]
+_CHAR_LEG_R      = [(184,285),(192,281),(196,283),(188,287)]
+_CHAR_ARM_L      = (186,270, 174,264)
+_CHAR_ARM_R      = (196,266, 210,260)
+_CHAR_EYE_L      = (178,258)
+_CHAR_EYE_R      = (189,255)
+
+# Five desk slot offsets (ox, oy)
+_SLOTS = [
+    (0,   0),    # back-left
+    (188, 34),   # back-center
+    (350, 2),    # back-right
+    (0,   95),   # front-left
+    (188, 129),  # front-center
+]
+
+
+def _svg_desk(ox: int, oy: int) -> str:
+    lines = "".join(
+        f'<line stroke="#00ff88" stroke-width=".9" x1="{x1+ox}" y1="{y1+oy}" x2="{x2+ox}" y2="{y2+oy}"/>'
+        if i == 0 else
+        f'<line stroke="#44aaff" stroke-width=".9" x1="{x1+ox}" y1="{y1+oy}" x2="{x2+ox}" y2="{y2+oy}"/>'
+        if i == 1 else
+        f'<line stroke="#ffcc00" stroke-width=".9" x1="{x1+ox}" y1="{y1+oy}" x2="{x2+ox}" y2="{y2+oy}"/>'
+        for i, (x1, y1, x2, y2) in enumerate(_MON_LINES)
+    )
+    return (
+        f'<polygon fill="#8a6038" stroke="#aa8050" stroke-width="1" points="{_pts(_DESK_TABLETOP,ox,oy)}"/>'
+        f'<polygon fill="#6a4020" points="{_pts(_DESK_LEFT,ox,oy)}"/>'
+        f'<polygon fill="#5a3010" points="{_pts(_DESK_RIGHT,ox,oy)}"/>'
+        f'<polygon fill="#5a8a3a" opacity=".7" points="{_pts(_DESK_MAT,ox,oy)}"/>'
+        f'<polygon fill="#222" stroke="#555" stroke-width=".9" points="{_pts(_MON_BACK,ox,oy)}"/>'
+        f'<polygon fill="#001812" points="{_pts(_MON_SCREEN,ox,oy)}"/>'
+        + lines
+    )
+
+
+def _svg_char(ox: int, oy: int, color: str) -> str:
+    dark = _darken(color)
+    al = _CHAR_ARM_L
+    ar = _CHAR_ARM_R
+    el = _CHAR_EYE_L
+    er = _CHAR_EYE_R
+    return (
+        f'<line stroke="{color}" stroke-width="3.5" x1="{al[0]+ox}" y1="{al[1]+oy}" x2="{al[2]+ox}" y2="{al[3]+oy}"/>'
+        f'<line stroke="{color}" stroke-width="3.5" x1="{ar[0]+ox}" y1="{ar[1]+oy}" x2="{ar[2]+ox}" y2="{ar[3]+oy}"/>'
+        f'<polygon fill="{dark}" points="{_pts(_CHAR_LEG_L,ox,oy)}"/>'
+        f'<polygon fill="{dark}" points="{_pts(_CHAR_LEG_R,ox,oy)}"/>'
+        f'<polygon fill="{color}" stroke="{dark}" stroke-width=".5" points="{_pts(_CHAR_BODY_TOP,ox,oy)}"/>'
+        f'<polygon fill="{dark}" points="{_pts(_CHAR_BODY_SIDE,ox,oy)}"/>'
+        f'<polygon fill="{color}" stroke="{dark}" stroke-width=".6" points="{_pts(_CHAR_HEAD_TOP,ox,oy)}"/>'
+        f'<polygon fill="{dark}" points="{_pts(_CHAR_HEAD_SIDE,ox,oy)}"/>'
+        f'<rect fill="#1a1a1a" x="{el[0]+ox}" y="{el[1]+oy}" width="5" height="5" rx=".8"/>'
+        f'<rect fill="#1a1a1a" x="{er[0]+ox}" y="{er[1]+oy}" width="5" height="5" rx=".8"/>'
+    )
 
 
 def build_studio_html(model_assignments: list[dict]) -> str:
     """
     model_assignments: list of dicts:
-        {{model_id: str, role: str, character_fn: str, color: str, desk: int (1-5)}}
+        {model_id, role, character_fn, color, desk (1-5)}
     Returns self-contained HTML string.
     """
     assignments_json = json.dumps(model_assignments)
-    
+
+    # Build SVG for each assigned desk + character
+    desk_svg_parts = []
+    char_svg_parts = []
+    for i, a in enumerate(model_assignments[:5]):
+        ox, oy = _SLOTS[i]
+        desk_svg_parts.append(_svg_desk(ox, oy))
+        char_svg_parts.append(_svg_char(ox, oy, a.get("color", "#aaaaaa")))
+
+    desks_svg  = "\n".join(desk_svg_parts)
+    chars_svg  = "\n".join(char_svg_parts)
+
+    # Speech bubble anchor positions (SVG coords) per slot — above character head
+    bubble_anchors = json.dumps([
+        {"svgX": 174 + ox, "svgY": 255 + oy}
+        for ox, oy in _SLOTS
+    ])
+
     return f"""<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Three.js Studio</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Studio</title>
 <style>
-* {{ margin: 0; padding: 0; box-sizing: border-box; }}
-body {{ background: #1a1a2e; overflow: hidden; font-family: 'Courier New', monospace; }}
-#studio-canvas {{ display: block; width: 100%; height: 100vh; }}
-#bubble-layer {{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }}
+* {{ box-sizing:border-box; margin:0; padding:0; }}
+body {{ background:#1a1a1a; font-family:system-ui,sans-serif; overflow:hidden; }}
+.scene-wrap {{ position:relative; width:100vw; height:calc(100vh - 28px); }}
+svg.iso {{ width:100%; height:100%; display:block; }}
+#phase-bar {{
+  position:fixed; bottom:0; left:0; right:0; height:28px;
+  background:#111; display:flex; align-items:center; gap:12px;
+  padding:0 14px; font-size:11px; color:#eee; z-index:20;
+}}
+#phase-label {{ flex:1; }}
+#phase-progress {{ width:180px; height:7px; background:#333; border-radius:4px; overflow:hidden; }}
+#phase-fill {{ height:100%; background:#7c3aed; border-radius:4px; transition:width .5s; }}
 .speech-bubble {{
-  position: absolute; background: rgba(255,255,255,0.95);
-  border: 2px solid #333; border-radius: 8px; padding: 6px 10px;
-  font-size: 12px; max-width: 200px; line-height: 1.4;
-  box-shadow: 2px 2px 6px rgba(0,0,0,0.4); transition: opacity 0.5s;
-  display: none;
+  position:absolute; background:rgba(255,255,255,.95);
+  border:2px solid #333; border-radius:6px; padding:5px 9px;
+  font-size:11px; max-width:180px; line-height:1.35;
+  box-shadow:2px 2px 6px rgba(0,0,0,.4); pointer-events:none;
+  transition:opacity .5s; display:none;
 }}
 .speech-bubble::after {{
-  content: ''; position: absolute; bottom: -10px; left: 20px;
-  border: 5px solid transparent; border-top-color: #333;
+  content:''; position:absolute; bottom:-9px; left:16px;
+  border:5px solid transparent; border-top-color:#333;
 }}
 .floating-popup {{
-  position: absolute; padding: 4px 10px; border-radius: 12px;
-  font-size: 11px; font-weight: bold; color: white;
-  animation: floatUp 2s ease-out forwards; pointer-events: none;
+  position:absolute; padding:3px 9px; border-radius:6px;
+  font-size:11px; font-weight:700; color:#fff;
+  animation:floatUp 2.5s ease-out forwards; pointer-events:none;
 }}
 @keyframes floatUp {{
-  0%   {{ transform: translateY(0); opacity: 1; }}
-  100% {{ transform: translateY(-60px); opacity: 0; }}
+  0%   {{ transform:translateY(0);   opacity:1; }}
+  100% {{ transform:translateY(-60px); opacity:0; }}
 }}
-#phase-bar {{
-  position: fixed; bottom: 0; left: 0; right: 0;
-  background: rgba(0,0,0,0.7); color: #fff;
-  padding: 6px 16px; font-size: 12px;
-  display: flex; align-items: center; gap: 12px; z-index: 20;
-}}
-#phase-label {{ flex: 1; }}
-#phase-progress {{ width: 200px; height: 8px; background: #333; border-radius: 4px; overflow: hidden; }}
-#phase-fill {{ height: 100%; background: #7c3aed; border-radius: 4px; transition: width 0.5s; }}
+/* floor tiles */
+.f0 {{ fill:#d4a060; stroke:#b07838; stroke-width:.7; }}
+.f1 {{ fill:#c8924a; stroke:#a06830; stroke-width:.7; }}
+/* walls */
+.wb {{ fill:#dce8c4; stroke:#bccca4; stroke-width:.8; }}
+.wl {{ fill:#ccdcb0; stroke:#accc90; stroke-width:.8; }}
+.wr {{ fill:#c4d4a8; stroke:#a4c488; stroke-width:.8; }}
+.sk {{ fill:#a09070; stroke:#807050; stroke-width:.5; }}
 </style>
 </head>
 <body>
-<canvas id="studio-canvas"></canvas>
-<div id="bubble-layer"></div>
+<div class="scene-wrap" id="scene-wrap">
+
+<svg class="iso" viewBox="0 0 860 540" xmlns="http://www.w3.org/2000/svg">
+
+<!-- WALLS -->
+<polygon class="wb" points="60,30 430,215 800,30 430,-155"/>
+<polygon class="wl" points="60,30 60,250 430,435 430,215"/>
+<polygon class="wr" points="430,215 430,435 800,250 800,30"/>
+<polygon class="sk" points="60,242 430,427 430,435 60,250"/>
+<polygon class="sk" style="fill:#908060" points="430,427 800,242 800,250 430,435"/>
+
+<!-- FLOOR -->
+<polygon class="f0" points="60,215 245,120 430,215 245,310"/>
+<polygon class="f1" points="245,120 430,25 615,120 430,215"/>
+<polygon class="f0" points="430,25 615,-70 800,25 615,120"/>
+<polygon class="f1" points="152,167 337,72 430,120 245,215"/>
+<polygon class="f0" points="337,72 522,-23 615,25 430,120"/>
+<polygon class="f1" points="522,-23 707,-118 800,-70 615,25"/>
+<polygon class="f1" points="60,310 245,215 430,310 245,405"/>
+<polygon class="f0" points="245,215 430,120 615,215 430,310"/>
+<polygon class="f1" points="430,120 615,25 800,120 615,215"/>
+<polygon class="f0" points="152,262 337,167 430,215 245,310"/>
+<polygon class="f1" points="337,167 522,72 615,120 430,215"/>
+<polygon class="f0" points="522,72 707,-23 800,25 615,120"/>
+<polygon class="f0" points="60,405 245,310 430,405 245,500"/>
+<polygon class="f1" points="245,310 430,215 615,310 430,405"/>
+<polygon class="f0" points="430,215 615,120 800,215 615,310"/>
+<polygon class="f1" points="152,357 337,262 430,310 245,405"/>
+<polygon class="f0" points="337,262 522,167 615,215 430,310"/>
+<polygon class="f1" points="522,167 707,72 800,120 615,215"/>
+
+<!-- WHITEBOARDS -->
+<rect fill="#f5f5ee" stroke="#ccc" stroke-width="1.5" x="70" y="10" width="115" height="82" rx="3"/>
+<rect fill="#e5e5dc" x="70" y="10" width="115" height="10" rx="3"/>
+<text fill="#5a7a3a" font-size="7" font-weight="700" x="75" y="18">ASSET MANIFEST</text>
+<line stroke="#99aacc" stroke-width="1" x1="78" y1="28" x2="178" y2="28"/>
+<line stroke="#99aacc" stroke-width="1" x1="78" y1="39" x2="165" y2="39"/>
+<line stroke="#99aacc" stroke-width="1" x1="78" y1="50" x2="172" y2="50"/>
+<rect fill="#298" x="78" y="56" width="13" height="17" rx="1.5"/>
+<rect fill="#f5c542" x="81" y="52" width="9" height="8" rx="1.5"/>
+
+<rect fill="#f5f5ee" stroke="#ccc" stroke-width="1.5" x="298" y="-5" width="136" height="72" rx="3"/>
+<rect fill="#e5e5dc" x="298" y="-5" width="136" height="10" rx="3"/>
+<text fill="#5a7a3a" font-size="7" font-weight="700" x="303" y="4">DESIGN SPEC</text>
+<line stroke="#cc8888" stroke-width="1.5" x1="303" y1="10" x2="426" y2="10"/>
+<text fill="#333" font-size="6" x="303" y="22">gravity: 18    jumpForce: 9.5</text>
+<text fill="#333" font-size="6" x="303" y="33">laneWidth: 2   snapSpeed: 8</text>
+<text fill="#4488cc" font-size="6.5" font-weight="700" x="303" y="46">AI · COLLAB · BUILD</text>
+
+<!-- VENDING MACHINE -->
+<polygon fill="#cc2222" stroke="#ee4444" stroke-width="1.2" points="60,176 60,296 102,273 102,153"/>
+<polygon fill="#aa1111" stroke="#cc2222" stroke-width="1" points="60,153 102,130 102,153 60,176"/>
+<rect fill="#ffcc00" x="64" y="196" width="30" height="10" rx="2.5"/>
+<rect fill="#00ccff" x="64" y="209" width="30" height="10" rx="2.5"/>
+<rect fill="#ff8800" x="64" y="222" width="30" height="10" rx="2.5"/>
+<rect fill="#111" x="64" y="167" width="30" height="12" rx="2"/>
+<rect fill="#00ff88" opacity=".55" x="66" y="169" width="26" height="8" rx="1.5"/>
+
+<!-- PLANTS -->
+<polygon fill="#c8681a" stroke="#a04808" stroke-width="1" points="660,100 680,90 680,110 660,120"/>
+<ellipse fill="#3a8a1a" cx="676" cy="78" rx="16" ry="13"/>
+<ellipse fill="#2a7a0a" cx="664" cy="73" rx="11" ry="10"/>
+<ellipse fill="#4a9a2a" cx="685" cy="70" rx="11" ry="10"/>
+<ellipse fill="#5aaa3a" cx="676" cy="62" rx="8" ry="7"/>
+
+<!-- RESULT MONITOR — glowing purple -->
+<polygon fill="#201030" stroke="#9944dd" stroke-width="2.5" points="646,76 728,33 756,48 674,91">
+  <animate attributeName="stroke-opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
+</polygon>
+<polygon fill="#050d05" points="650,78 724,37 752,51 678,92"/>
+<line stroke="#3aaa3a" stroke-width="3" x1="658" y1="82" x2="746" y2="40"/>
+<text fill="#bb77ff" font-size="7" font-weight="700" x="665" y="108">GENERATING...</text>
+<ellipse fill="none" stroke="#9944dd" stroke-width="2" opacity=".45" cx="700" cy="64" rx="40" ry="22">
+  <animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.8s" repeatCount="indefinite"/>
+</ellipse>
+
+<!-- PIZZA BOX (hidden initially, shown at phase 7+) -->
+<polygon id="pizza-box" fill="#c8a060" stroke="#a88040" stroke-width=".8" visibility="hidden"
+  points="464,278 498,260 514,268 480,286"/>
+<polygon id="pizza-box2" fill="#e0b878" stroke="#c09848" stroke-width=".6" visibility="hidden"
+  points="464,274 498,256 514,264 480,282"/>
+<text id="pizza-emoji" visibility="hidden" fill="#aa6622" font-size="10" x="477" y="272" transform="rotate(-20,477,272)">🍕</text>
+
+<!-- DESKS (back-to-front for correct z-order) -->
+{desks_svg}
+
+<!-- CHARACTERS -->
+{chars_svg}
+
+</svg>
+
+<!-- Speech bubble overlay (absolute-positioned HTML) -->
+<div id="bubble-layer" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none">
+</div>
+
+</div>
+
 <div id="phase-bar">
   <span id="phase-label">Waiting…</span>
   <div id="phase-progress"><div id="phase-fill" style="width:0%"></div></div>
 </div>
 
-<script>{_THREEJS_JS}</script>
-<script>{_CHARACTERS_JS}</script>
 <script>
-const assignments = {assignments_json};
-
-const DESK_POSITIONS = [
-  [-2.5, 0, -1.5],
-  [-0.8, 0, -1.5],
-  [ 0.8, 0, -1.5],
-  [ 2.0, 0,  0.5],
-  [-1.5, 0,  1.0],
-];
-
-// Scene setup
-const canvas = document.getElementById('studio-canvas');
-const renderer = new THREE.WebGLRenderer({{ canvas, antialias: false }});
-renderer.toneMapping = THREE.NoToneMapping;
-renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-renderer.setSize(window.innerWidth, window.innerHeight);
-
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x1a1a2e);
-
-// Isometric camera
-const aspect = window.innerWidth / window.innerHeight;
-const zoom = 8;
-const camera = new THREE.OrthographicCamera(
-  -aspect * zoom, aspect * zoom,
-  zoom, -zoom,
-  0.1, 100
-);
-camera.position.set(10, 8.165, 10);
-camera.lookAt(0, 0, 0);
-
-// Lighting
-const ambientLight = new THREE.AmbientLight(0xffeedd, 0.8);
-scene.add(ambientLight);
-
-const dirLight = new THREE.DirectionalLight(0xffffff, 0.9);
-dirLight.position.set(8, 12, 6);
-scene.add(dirLight);
-
-// Floor (InstancedMesh)
-const floorGeo = new THREE.PlaneGeometry(2, 2);
-floorGeo.rotateX(-Math.PI / 2);
-const floorMat = new THREE.MeshLambertMaterial({{ color: 0xc8924a }});
-const floorMesh = new THREE.InstancedMesh(floorGeo, floorMat, 16);
-
-let idx = 0;
-const matrix = new THREE.Matrix4();
-for (let x = 0; x < 4; x++) {{
-  for (let z = 0; z < 4; z++) {{
-    matrix.setPosition(x * 2 - 3, 0, z * 2 - 3);
-    floorMesh.setMatrixAt(idx++, matrix);
-  }}
-}}
-floorMesh.instanceMatrix.needsUpdate = true;
-scene.add(floorMesh);
-
-// Walls
-const wallMat = new THREE.MeshToonMaterial({{ color: 0xdce8c4 }});
-
-const backWall = new THREE.Mesh(
-  new THREE.BoxGeometry(8, 4, 0.2),
-  wallMat
-);
-backWall.position.set(0, 2, -4);
-scene.add(backWall);
-
-const rightWall = new THREE.Mesh(
-  new THREE.BoxGeometry(0.2, 4, 8),
-  wallMat
-);
-rightWall.position.set(4, 2, 0);
-scene.add(rightWall);
-
-// Helper to add boxes
-function addBox(w, h, d, color, x, y, z) {{
-  const mesh = new THREE.Mesh(
-    new THREE.BoxGeometry(w, h, d),
-    new THREE.MeshToonMaterial({{ color }})
-  );
-  mesh.position.set(x, y, z);
-  scene.add(mesh);
-  return mesh;
-}}
+const assignments  = {assignments_json};
+const bubbleAnchors = {bubble_anchors};
 
-// Props
-// Vending machine
-addBox(0.5, 1.5, 0.5, 0xe74c3c, -3.5, 0.75, -3.5);
-addBox(0.3, 0.2, 0.02, 0x2c3e50, -3.5, 1.2, -3.25);
-
-// Plants
-const pot1 = addBox(0.2, 0.15, 0.2, 0x8b4513, 3.0, 0.075, -3.5);
-const foliage1 = new THREE.Mesh(
-  new THREE.SphereGeometry(0.2, 8, 8),
-  new THREE.MeshToonMaterial({{ color: 0x27ae60 }})
-);
-foliage1.position.set(3.0, 0.35, -3.5);
-scene.add(foliage1);
-
-const pot2 = addBox(0.2, 0.15, 0.2, 0x8b4513, 3.5, 0.075, -2.8);
-const foliage2 = new THREE.Mesh(
-  new THREE.SphereGeometry(0.2, 8, 8),
-  new THREE.MeshToonMaterial({{ color: 0x27ae60 }})
-);
-foliage2.position.set(3.5, 0.35, -2.8);
-scene.add(foliage2);
-
-// Whiteboards
-addBox(0.8, 0.5, 0.05, 0xf5f5f5, -1.0, 2.0, -3.95);
-addBox(0.8, 0.5, 0.05, 0xf5f5f5, 1.5, 2.0, -3.95);
-
-// Result monitor
-addBox(0.4, 0.6, 0.1, 0x2c3e50, 3.5, 1.8, -3.5);
-const monitorScreen = addBox(0.35, 0.5, 0.02, 0x8e44ad, 3.5, 1.8, -3.42);
-monitorScreen.material.emissive = new THREE.Color(0x8e44ad);
-monitorScreen.material.emissiveIntensity = 0.3;
-
-// Pizza box (hidden initially)
-const pizzaBox = addBox(0.3, 0.05, 0.3, 0xf39c12, DESK_POSITIONS[1][0], 1.0, DESK_POSITIONS[1][2]);
-pizzaBox.visible = false;
-
-// Build desks and characters
-const characters = [];
-
-function buildDesk(x, y, z) {{
-  const deskGroup = new THREE.Group();
-  
-  // Tabletop
-  const top = new THREE.Mesh(
-    new THREE.BoxGeometry(1.0, 0.08, 0.6),
-    new THREE.MeshToonMaterial({{ color: 0x8b6f47 }})
-  );
-  top.position.set(x, 0.9, z);
-  deskGroup.add(top);
-  
-  // Legs
-  const legGeo = new THREE.BoxGeometry(0.05, 0.9, 0.05);
-  const legMat = new THREE.MeshToonMaterial({{ color: 0x5a4a2a }});
-  const offsets = [
-    [-0.45, 0, -0.25],
-    [ 0.45, 0, -0.25],
-    [-0.45, 0,  0.25],
-    [ 0.45, 0,  0.25],
-  ];
-  offsets.forEach(([ox, oy, oz]) => {{
-    const leg = new THREE.Mesh(legGeo, legMat);
-    leg.position.set(x + ox, 0.45, z + oz);
-    deskGroup.add(leg);
-  }});
-  
-  // Small monitor on desk
-  const mon = new THREE.Mesh(
-    new THREE.BoxGeometry(0.15, 0.12, 0.02),
-    new THREE.MeshToonMaterial({{ color: 0x2c3e50 }})
-  );
-  mon.position.set(x, 1.0, z - 0.15);
-  deskGroup.add(mon);
-  
-  scene.add(deskGroup);
-  return deskGroup;
-}}
+// Pre-create one speech bubble per slot
+const bubbleLayer = document.getElementById('bubble-layer');
+const bubbles = bubbleAnchors.map((_, i) => {{
+  const d = document.createElement('div');
+  d.className = 'speech-bubble';
+  d.id = 'bubble-' + i;
+  bubbleLayer.appendChild(d);
+  return d;
+}});
 
-function buildFallbackCharacter(color) {{
-  const charGroup = new THREE.Group();
-  
-  const body = new THREE.Mesh(
-    new THREE.BoxGeometry(0.35, 0.4, 0.25),
-    new THREE.MeshToonMaterial({{ color }})
-  );
-  body.position.y = 1.1;
-  charGroup.add(body);
-  
-  const head = new THREE.Mesh(
-    new THREE.BoxGeometry(0.28, 0.28, 0.28),
-    new THREE.MeshToonMaterial({{ color }})
-  );
-  head.position.y = 1.45;
-  charGroup.add(head);
-  
-  return charGroup;
-}}
+// Map role → slot index
+const roleToSlot = {{}};
+assignments.forEach((a, i) => {{ roleToSlot[a.role] = i; }});
 
-assignments.forEach((assignment, i) => {{
-  if (i >= 5) return;
-  
-  const deskIdx = assignment.desk - 1;
-  const [x, y, z] = DESK_POSITIONS[deskIdx];
-  
-  buildDesk(x, y, z);
-  
-  let charMesh;
-  try {{
-    if (window[assignment.character_fn]) {{
-      charMesh = window[assignment.character_fn]();
-    }} else {{
-      charMesh = buildFallbackCharacter(assignment.color);
-    }}
-  }} catch (e) {{
-    console.warn('Character fn failed:', e);
-    charMesh = buildFallbackCharacter(assignment.color);
-  }}
-  
-  charMesh.position.set(x + 0.3, 0, z + 0.2);
-  scene.add(charMesh);
-  
-  characters.push({{
-    mesh: charMesh,
-    role: assignment.role,
-    color: assignment.color,
-    bubbleEl: null,
-    _bobPhase: Math.random() * Math.PI * 2,
-    activePhase: false,
-    _typeBuffer: ''
-  }});
-}});
+const phaseLabel = document.getElementById('phase-label');
+const phaseFill  = document.getElementById('phase-fill');
+const svgEl      = document.querySelector('svg.iso');
+const sceneWrap  = document.getElementById('scene-wrap');
+
+function svgToHtml(svgX, svgY) {{
+  const vbW = 860, vbH = 540;
+  const bbox  = svgEl.getBoundingClientRect();
+  const swRect = sceneWrap.getBoundingClientRect();
+  return {{
+    x: (svgX / vbW) * bbox.width  + (bbox.left - swRect.left),
+    y: (svgY / vbH) * bbox.height + (bbox.top  - swRect.top),
+  }};
+}}
 
-// Speech bubble pool
-const bubbleLayer = document.getElementById('bubble-layer');
-const bubblePool = [];
-for (let i = 0; i < 6; i++) {{
-  const bubble = document.createElement('div');
-  bubble.className = 'speech-bubble';
-  bubbleLayer.appendChild(bubble);
-  bubblePool.push(bubble);
+function positionBubble(bubble, slotIdx) {{
+  const anchor = bubbleAnchors[slotIdx];
+  const pos = svgToHtml(anchor.svgX, anchor.svgY);
+  bubble.style.left = (pos.x - 90) + 'px';
+  bubble.style.top  = (pos.y - 70) + 'px';
 }}
 
-function getBubble() {{
-  return bubblePool.find(b => b.style.display === 'none') || bubblePool[0];
+function showBubble(slotIdx, text, borderColor) {{
+  const b = bubbles[slotIdx];
+  if (!b) return;
+  b.textContent = text;
+  b.style.display = 'block';
+  b.style.opacity = '1';
+  b.style.borderColor = borderColor || '#333';
+  positionBubble(b, slotIdx);
+  clearTimeout(b._timer);
+  b._timer = setTimeout(() => {{
+    b.style.opacity = '0';
+    setTimeout(() => {{ b.style.display = 'none'; }}, 500);
+  }}, 2500);
 }}
 
-// Floating popup pool
 const popupPool = [];
-for (let i = 0; i < 6; i++) {{
-  const popup = document.createElement('div');
-  popup.className = 'floating-popup';
-  popup.style.display = 'none';
-  bubbleLayer.appendChild(popup);
-  popupPool.push(popup);
+for (let i = 0; i < 8; i++) {{
+  const d = document.createElement('div');
+  d.className = 'floating-popup';
+  d.style.display = 'none';
+  bubbleLayer.appendChild(d);
+  popupPool.push(d);
 }}
 
-function spawnPopup(text, color, x, y) {{
+function spawnPopup(text, color, svgX, svgY) {{
   const popup = popupPool.find(p => p.style.display === 'none') || popupPool[0];
+  const pos = svgToHtml(svgX, svgY);
   popup.textContent = text;
   popup.style.backgroundColor = color;
-  popup.style.left = x + 'px';
-  popup.style.top = y + 'px';
+  popup.style.left = pos.x + 'px';
+  popup.style.top  = pos.y + 'px';
   popup.style.display = 'block';
   popup.style.animation = 'none';
-  setTimeout(() => {{
-    popup.style.animation = 'floatUp 2s ease-out forwards';
-  }}, 10);
-  setTimeout(() => {{
-    popup.style.display = 'none';
-  }}, 2000);
+  void popup.offsetWidth; // reflow
+  popup.style.animation = 'floatUp 2.5s ease-out forwards';
+  setTimeout(() => {{ popup.style.display = 'none'; }}, 2500);
 }}
 
-// Phase bar elements
-const phaseLabel = document.getElementById('phase-label');
-const phaseFill = document.getElementById('phase-fill');
-
-// Project to screen coords
-function projectToScreen(worldPos) {{
-  const vector = worldPos.clone();
-  vector.project(camera);
-  return {{
-    x: (vector.x * 0.5 + 0.5) * window.innerWidth,
-    y: (-vector.y * 0.5 + 0.5) * window.innerHeight
-  }};
-}}
+// typeBuffers per slot
+const typeBuffers = assignments.map(() => '');
 
-// studioUpdate event router
 window.studioUpdate = function(msg) {{
   if (msg.type === 'text') {{
-    const char = characters.find(c => c.role === msg.role);
-    if (!char) return;
-    
-    char._typeBuffer += msg.text;
-    if (char._typeBuffer.length > 160) {{
-      char._typeBuffer = char._typeBuffer.slice(-160);
-    }}
-    
-    if (!char.bubbleEl) {{
-      char.bubbleEl = getBubble();
-    }}
-    
-    const lines = char._typeBuffer.split('\\n').slice(-2);
-    char.bubbleEl.textContent = lines.join('\\n');
-    char.bubbleEl.style.display = 'block';
-    char.bubbleEl.style.opacity = '1';
-    
-    clearTimeout(char._fadeTimer);
-    char._fadeTimer = setTimeout(() => {{
-      char.bubbleEl.style.opacity = '0';
-      setTimeout(() => {{
-        char.bubbleEl.style.display = 'none';
-      }}, 500);
-    }}, 1500);
+    const slot = roleToSlot[msg.role];
+    if (slot === undefined) return;
+    typeBuffers[slot] += msg.text;
+    if (typeBuffers[slot].length > 160) typeBuffers[slot] = typeBuffers[slot].slice(-160);
+    const lines = typeBuffers[slot].split('\\n').slice(-2).join('\\n');
+    showBubble(slot, lines);
   }}
-  
   else if (msg.type === 'phase_start') {{
     phaseLabel.textContent = `Phase ${{msg.phase}}: ${{msg.name}}`;
-    const progress = Math.round((msg.phase / 9) * 100);
-    phaseFill.style.width = progress + '%';
-    
-    if (msg.role) {{
-      characters.forEach(c => c.activePhase = false);
-      const char = characters.find(c => c.role === msg.role);
-      if (char) char.activePhase = true;
-    }}
-    
+    phaseFill.style.width = Math.round((msg.phase / 9) * 100) + '%';
     if (msg.phase >= 7) {{
-      pizzaBox.visible = true;
+      ['pizza-box','pizza-box2','pizza-emoji'].forEach(id => {{
+        const el = document.getElementById(id);
+        if (el) el.setAttribute('visibility','visible');
+      }});
     }}
   }}
-  
   else if (msg.type === 'phase_complete') {{
-    const pos = projectToScreen(new THREE.Vector3(0, 2, -2));
-    spawnPopup(`✓ ${{msg.name}}`, '#f39c12', pos.x, pos.y);
+    spawnPopup(`✓ ${{msg.name}}`, '#f39c12', 430, 200);
   }}
-  
   else if (msg.type === 'commit') {{
-    const pos = projectToScreen(new THREE.Vector3(0, 1.5, 0));
-    spawnPopup(`📁 ${{msg.file}}`, '#27ae60', pos.x, pos.y);
+    spawnPopup(`📁 ${{msg.file}}`, '#27ae60', 430, 240);
   }}
-  
   else if (msg.type === 'error') {{
-    const char = characters.find(c => c.role === msg.role);
-    if (char) {{
-      if (!char.bubbleEl) char.bubbleEl = getBubble();
-      char.bubbleEl.textContent = `❌ ${{msg.text}}`;
-      char.bubbleEl.style.display = 'block';
-      char.bubbleEl.style.opacity = '1';
-      char.bubbleEl.style.borderColor = '#e74c3c';
-    }}
+    const slot = roleToSlot[msg.role];
+    if (slot !== undefined) showBubble(slot, `❌ ${{msg.text}}`, '#e74c3c');
   }}
-  
   else if (msg.type === 'done') {{
     phaseLabel.textContent = '✅ Generation Complete!';
     phaseFill.style.width = '100%';
-    
-    // Celebrate jump
-    characters.forEach((char, i) => {{
-      setTimeout(() => {{
-        const startY = char.mesh.position.y;
-        const jumpDuration = 500;
-        const jumpHeight = 0.5;
-        const startTime = Date.now();
-        
-        function jumpAnim() {{
-          const elapsed = Date.now() - startTime;
-          const progress = Math.min(elapsed / jumpDuration, 1);
-          const eased = Math.sin(progress * Math.PI);
-          char.mesh.position.y = startY + eased * jumpHeight;
-          
-          if (progress < 1) {{
-            requestAnimationFrame(jumpAnim);
-          }} else {{
-            char.mesh.position.y = startY;
-          }}
-        }}
-        jumpAnim();
-      }}, i * 100);
-    }});
-    
-    if (window.onStudioDone) {{
-      window.onStudioDone();
-    }}
+    spawnPopup('🎉 Done!', '#7c3aed', 430, 180);
+    if (window.onStudioDone) window.onStudioDone();
   }}
-  
   else if (msg.type === 'cancelled') {{
     phaseLabel.textContent = '⛔ Cancelled';
   }}
 }};
 
-// Listen for messages from parent (Gradio bridge)
 window.addEventListener('message', function(e) {{
-  if (e.data && e.data.type) {{
-    window.studioUpdate(e.data);
-  }}
+  if (e.data && e.data.type) window.studioUpdate(e.data);
 }});
 
-// Animation loop
-const clock = new THREE.Clock();
-const tmpVec = new THREE.Vector3();
-
-function animate() {{
-  requestAnimationFrame(animate);
-  const t = clock.getElapsedTime();
-  
-  // Monitor glow pulse
-  monitorScreen.material.emissiveIntensity = 0.2 + 0.2 * Math.sin(t * 2);
-  
-  // Character idle bob and wobble
-  characters.forEach((ch, i) => {{
-    ch._bobPhase += 0.03;
-    ch.mesh.position.y = Math.sin(ch._bobPhase) * 0.04;
-    
-    if (ch.activePhase) {{
-      ch.mesh.rotation.z = Math.sin(t * 3 + i) * 0.06;
-    }} else {{
-      ch.mesh.rotation.z *= 0.9;
-    }}
-    
-    // Update bubble position
-    if (ch.bubbleEl && ch.bubbleEl.style.display !== 'none') {{
-      ch.mesh.getWorldPosition(tmpVec);
-      tmpVec.y += 0.8;
-      const s = projectToScreen(tmpVec);
-      ch.bubbleEl.style.left = (s.x - 100) + 'px';
-      ch.bubbleEl.style.top = (s.y - 80) + 'px';
-    }}
-  }});
-  
-  renderer.render(scene, camera);
-}}
-animate();
-
-// Resize handler
+// Keep bubbles in position on resize
 window.addEventListener('resize', () => {{
-  const w = window.innerWidth, h = window.innerHeight;
-  renderer.setSize(w, h);
-  const a = w / h;
-  camera.left = -a * zoom;
-  camera.right = a * zoom;
-  camera.top = zoom;
-  camera.bottom = -zoom;
-  camera.updateProjectionMatrix();
+  bubbles.forEach((b, i) => {{
+    if (b.style.display !== 'none') positionBubble(b, i);
+  }});
 }});
 </script>
 </body>