privateboard 0.1.38 → 0.1.41

package/public/app.js

@@ -566,6 +566,17 @@
         // currentRoomId). Stage repaint still bails out when no
         // room is open, since the stage DOM isn't mounted there.
         this.refreshMiniPlayer();
+        // The Record button is offered while a replay runs (adjourned
+        // rooms), so re-render the header when the replay open-state
+        // flips. Guarded so we don't rebuild the header on every
+        // per-message item transition — only on open ↔ close.
+        const replOpen = this._isReplayActiveForRoom(this.currentRoomId);
+        if (replOpen !== this._lastReplayHeaderState) {
+          this._lastReplayHeaderState = replOpen;
+          if (this.currentRoomId && typeof this.renderHeader === "function") {
+            this.renderHeader();
+          }
+        }
         if (!this.currentRoomId) return;
         this.renderRoundTable();
       });
@@ -7287,6 +7298,19 @@
       }
     },
 
+    /** True when a voice replay is currently running for `roomId`.
+     *  Drives the Record button's visibility in adjourned rooms ·
+     *  recording the replay reconstructs a meeting video (3D stage
+     *  driven by the replay + the replay's TTS audio) the same way
+     *  a live room records. `getRoomId()` is null for legacy replays
+     *  that didn't pass a roomId · treat that as "matches". */
+    _isReplayActiveForRoom(roomId) {
+      const vr = (typeof window !== "undefined") ? window.boardroomVoiceReplay : null;
+      if (!vr || typeof vr.isOpen !== "function" || !vr.isOpen()) return false;
+      const rid = typeof vr.getRoomId === "function" ? vr.getRoomId() : null;
+      return !rid || rid === roomId;
+    },
+
     /** Toggle recording for the current voice room. Idempotent · if
      *  already recording, stops + downloads; otherwise starts. */
     async handleRecordToggle() {
@@ -7295,15 +7319,30 @@
         console.warn("[recorder] module not loaded");
         return;
       }
+      const room = this.currentRoom;
+      const isLive = !!(room && room.status === "live");
       if (rec.isRecording()) {
-        // Live recording · open the stop-choice modal instead of
-        // stopping immediately. The user picks whether to also end
-        // the live room (interrupt / wait for speaker / keep room).
-        this.openRecordingStopModal();
+        if (isLive) {
+          // Live recording · open the stop-choice modal instead of
+          // stopping immediately. The user picks whether to also end
+          // the live room (interrupt / wait for speaker / keep room).
+          this.openRecordingStopModal();
+        } else {
+          // Replay / adjourned recording · there's no live room to
+          // interrupt or pause, so skip the lifecycle modal and just
+          // stop + download the clip.
+          await this._stopRecordingAndToast();
+        }
         return;
       }
-      const room = this.currentRoom;
       if (!room || room.deliveryMode !== "voice") return;
+      // Replay / adjourned · the round-table stage is opt-in there
+      // (hidden by default), but the recorder crops the window capture
+      // to the stage's on-screen rect — so the stage MUST be visible
+      // before start() locks the composite size. Force the stage view
+      // and collapse the floating replay player so it doesn't bleed
+      // into the captured region.
+      if (!isLive) this._ensureStageVisibleForRecording();
       try {
         await rec.start(room.id, room.subject || room.title || "Meeting");
         // Recorder is now capturing chunks · play the cinematic
@@ -7318,6 +7357,44 @@
       }
     },
 
+    /** Stop + download the active recording and surface the saved
+     *  toast. Used by the replay / adjourned stop path where there's
+     *  no room lifecycle to reconcile (cf. handleRecordingStopChoice
+     *  for the live-room flow). */
+    async _stopRecordingAndToast() {
+      let blob = null;
+      try { blob = await window.BoardroomRecorder.stopAndDownload(); }
+      catch (e) { console.error("[recorder] stopAndDownload failed", e); }
+      if (blob && blob.size > 0) {
+        try {
+          this.showRoundTableToast({
+            kind: "settings",
+            glyph: "↓",
+            htmlText: this.escape(this._t("rec_saved_toast")),
+            lifetimeMs: 5200,
+          });
+        } catch (_) { /* toast best-effort */ }
+      }
+    },
+
+    /** Reveal the round-table stage (opt-in for adjourned rooms) so
+     *  the recorder has a non-empty region to crop, and collapse the
+     *  floating voice-replay player so its panel stays out of the
+     *  captured frame. */
+    _ensureStageVisibleForRecording() {
+      const roomId = this.currentRoomId;
+      if (!roomId) return;
+      try { localStorage.setItem("rt-view-" + roomId, "stage"); } catch (_) { /* noop */ }
+      if (typeof this.applyRoundTableVisibility === "function") {
+        this.applyRoundTableVisibility(roomId);
+      }
+      const vr = (typeof window !== "undefined") ? window.boardroomVoiceReplay : null;
+      if (vr && typeof vr.isOpen === "function" && vr.isOpen()
+          && typeof vr.collapse === "function") {
+        try { vr.collapse(); } catch (_) { /* noop */ }
+      }
+    },
+
     /** Movie-trailer countdown · 4 frames (Ready, 3, 2, 1) each
      *  ~850 ms with a pop+fade animation. Mounts inside the stage
      *  so the recording captures the overlay as an opening title
@@ -8827,29 +8904,42 @@
         meta = this._t("sidebar_host");
       }
 
-      // Avatar source-of-truth · prefs.avatarSeed (set by the
-      // preference overlay's "regenerate avatar" button). When a seed
-      // is present we render the AvatarSkill SVG so the sidebar foot
-      // matches what the user picked in settings; otherwise fall back
-      // to the initial-letter chip we shipped before AvatarSkill
-      // existed.
+      // Avatar source-of-truth · prefs.avatarUrl (rendered 3D PNG
+      // captured by the avatar customizer) wins. Otherwise we paint
+      // the seed-derived 3D snap (Avatar3DSnap.generate) and fall
+      // back to the initial-letter chip while the async render is
+      // in flight / when WebGL isn't available.
       // Sync every avatar slot · the full sidebar foot AND the
       // collapsed mini-rail foot both carry [data-user-avatar], so
       // querySelectorAll keeps them identical regardless of which is
       // currently visible.
+      const url = this.prefs?.avatarUrl;
       const seed = this.prefs?.avatarSeed;
-      const avHtml = (seed && window.AvatarSkill && typeof window.AvatarSkill.generate === "function")
-        ? window.AvatarSkill.generate(seed)
-        : null;
+      const snap = window.Avatar3DSnap;
+      const cachedSnap = (seed && snap && typeof snap.cacheGet === "function") ? snap.cacheGet(seed) : null;
+      const imgSrc = url || cachedSnap || null;
       document.querySelectorAll("[data-user-avatar]").forEach((av) => {
-        if (avHtml) {
+        if (imgSrc) {
           av.classList.add("has-pixel-av");
-          av.innerHTML = avHtml;
+          av.innerHTML = `<img src="${imgSrc}" alt="" style="width:100%;height:100%;object-fit:cover;image-rendering:auto">`;
         } else {
           av.classList.remove("has-pixel-av");
           av.textContent = initial;
         }
       });
+      if (!url && seed && !cachedSnap && snap && typeof snap.generate === "function") {
+        snap.generate(seed).then((dataUrl) => {
+          if (!dataUrl) return;
+          // Only repaint if the same seed is still in play — guard
+          // against fast-fire regenerate clicks landing stale renders.
+          if (this.prefs?.avatarSeed !== seed) return;
+          if (this.prefs?.avatarUrl) return;
+          document.querySelectorAll("[data-user-avatar]").forEach((av) => {
+            av.classList.add("has-pixel-av");
+            av.innerHTML = `<img src="${dataUrl}" alt="" style="width:100%;height:100%;object-fit:cover;image-rendering:auto">`;
+          });
+        }).catch(() => { /* */ });
+      }
       const nm = document.querySelector("[data-user-name]");
       if (nm) nm.textContent = name;
       const mt = document.querySelector("[data-user-meta]");
@@ -9538,6 +9628,12 @@
       if (chat) {
         if (this.composerMode === "agent") {
           chat.innerHTML = this.renderAgentComposerHtml();
+          // Hire-a-known-mind portraits · upgrade the 2D placeholders
+          // to deterministic 3D voxel renders. Fire-and-forget · the
+          // hydrator lazy-loads three.js + avatar-3d.js on first use,
+          // caches per-seed dataURLs, and re-skips already-rendered
+          // cards. Safe against rapid re-renders (idempotent).
+          try { void this._hydrateCelebrityAvatars3D(); } catch (_) { /* */ }
           // Focus the description textarea unless we're showing a preview.
           setTimeout(() => {
             const ta = chat.querySelector("[data-agent-composer-desc]");
@@ -12149,19 +12245,25 @@
       });
     },
 
-    /** Card HTML for one celebrity seed. Avatar comes from
-     *  AvatarSkill (deterministic from seed.id), so the portrait
-     *  is the same every render. Intro picks the en/zh field
-     *  that matches the active locale; ja/es fall back to en. */
+    /** Card HTML for one celebrity seed. Avatar tile mounts empty
+     *  (or with a cached 3D snap if one is hot) and gets painted by
+     *  the deterministic 3D voxel renderer asynchronously when WebGL
+     *  is available — see `_hydrateCelebrityAvatars3D()`. The 3D
+     *  config is derived from `seed.id` via
+     *  `deriveDefaultAvatarConfig`, so the portrait is stable across
+     *  re-renders + matches the random face shipped with the persona
+     *  once it's hired. Intro picks the en/zh field that matches the
+     *  active locale; ja/es fall back to en. */
     celebrityCardHtml(seed) {
       const lang = this.composerLanguage();
       const intro = (seed.intro && (seed.intro[lang] || seed.intro.en || "")) || "";
-      const avatarUrl = (window.AvatarSkill && typeof window.AvatarSkill.generateDataUrl === "function")
-        ? window.AvatarSkill.generateDataUrl(seed.id)
-        : "";
-      const avatarHtml = avatarUrl
-        ? `<img class="cmp-celeb-img" src="${this.escape(avatarUrl)}" alt="${this.escape(seed.name)}">`
-        : `<span class="cmp-celeb-img-fallback" aria-hidden="true">·</span>`;
+      // Prefer the cached 3D render if a previous open already
+      // hydrated this seed (hot-path through the composer should NOT
+      // flash an empty tile on a second open).
+      const cached = (this._celebrityAvatar3dCache && this._celebrityAvatar3dCache.get(seed.id)) || null;
+      const avatarHtml = cached
+        ? `<img class="cmp-celeb-img" data-cmp-celeb-img="${this.escape(seed.id)}" src="${this.escape(cached)}" alt="${this.escape(seed.name)}">`
+        : `<span class="cmp-celeb-img-fallback" data-cmp-celeb-img="${this.escape(seed.id)}" aria-hidden="true">·</span>`;
       return `
         <button type="button" class="cmp-celeb-card" data-celebrity-seed="${this.escape(seed.id)}" title="${this.escape(seed.name)}">
           <span class="cmp-celeb-av">${avatarHtml}</span>
@@ -12174,6 +12276,172 @@
       `;
     },
 
+    /** Walk every `.cmp-celeb-card` currently mounted and render a
+     *  3D voxel portrait into each one (writes the image dataURL
+     *  back to its `<img data-cmp-celeb-img>` src). Idempotent · the
+     *  per-seed cache means subsequent calls only render new seeds.
+     *  Lazy-loads three.js + avatar-3d.js on the first call so the
+     *  composer's first paint isn't blocked. Skips silently when
+     *  WebGL isn't available (the 2D fallback already rendered). */
+    async _hydrateCelebrityAvatars3D() {
+      if (!this._celebrityAvatar3dCache) this._celebrityAvatar3dCache = new Map();
+      // Capability gate · skip on no-WebGL so the 2D fallback remains
+      // the visible portrait. Cheap test, runs every call (the user
+      // could plug in a WebGL-capable display between calls).
+      let canWebGL = false;
+      try {
+        const c = document.createElement("canvas");
+        canWebGL = !!(c.getContext("webgl2") || c.getContext("webgl"));
+      } catch (_) { canWebGL = false; }
+      if (!canWebGL) return;
+      const cards = Array.from(document.querySelectorAll("img[data-cmp-celeb-img], span[data-cmp-celeb-img]"));
+      if (cards.length === 0) return;
+      const want = [];
+      for (const el of cards) {
+        const id = el.getAttribute("data-cmp-celeb-img");
+        if (!id) continue;
+        // Already 3D-rendered? Skip (cached value was injected by the
+        // first paint). The check leans on the dataset marker rather
+        // than reading the src so a re-render that fell back to 2D
+        // gets reprocessed.
+        if (el.tagName === "IMG" && el.dataset.cmpCelebRendered === "1") continue;
+        want.push({ id, el });
+      }
+      if (want.length === 0) return;
+      // Cache hot · just paint and bail without loading three.
+      const hot = want.filter((j) => this._celebrityAvatar3dCache.has(j.id));
+      for (const j of hot) {
+        const url = this._celebrityAvatar3dCache.get(j.id);
+        this._paintCelebrityImg(j.el, url);
+      }
+      const cold = want.filter((j) => !this._celebrityAvatar3dCache.has(j.id));
+      if (cold.length === 0) return;
+
+      // Lazy-load three + avatar-3d once per session. The two imports
+      // race in parallel and resolve together.
+      let THREE, av;
+      try {
+        [THREE, av] = await Promise.all([
+          import("/vendor/three.module.min.js"),
+          import("/avatar-3d.js"),
+        ]);
+      } catch (e) {
+        try { console.warn("[celebrity-3d] dep load failed", e); } catch (_) {}
+        return;
+      }
+      // Preload every body / hair / outfit referenced by the cold
+      // seeds before rendering · cross-model swaps need the source
+      // GLB cached before buildAvatar3D walks the skeleton.
+      const cfgs = cold.map((j) => ({ id: j.id, cfg: av.deriveDefaultAvatarConfig(j.id) }));
+      const modelIds = new Set();
+      for (const { cfg } of cfgs) {
+        if (cfg.model) modelIds.add(cfg.model);
+        if (cfg.hairStyle && cfg.hairStyle !== "none") modelIds.add(cfg.hairStyle);
+        if (cfg.outfitStyle) modelIds.add(cfg.outfitStyle);
+      }
+      try {
+        await Promise.all(Array.from(modelIds).map((m) => av.loadAvatar3D(m).catch(() => null)));
+      } catch (_) { /* */ }
+
+      // Shared offscreen renderer · same recipe as home.html's
+      // (transparent BG, ACES tone-map, IBL via PMREM + RoomEnv).
+      // 112×112 is 2× retina for the 56-pixel display tile.
+      const SIZE = 112;
+      const off = document.createElement("canvas");
+      off.width = SIZE * 2; off.height = SIZE * 2;
+      let renderer;
+      try {
+        renderer = new THREE.WebGLRenderer({ canvas: off, antialias: true, alpha: true, preserveDrawingBuffer: true });
+      } catch (e) {
+        try { console.warn("[celebrity-3d] renderer init failed", e); } catch (_) {}
+        return;
+      }
+      renderer.setSize(SIZE * 2, SIZE * 2, false);
+      renderer.setClearColor(0x000000, 0);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.0;
+      renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+      const scene = new THREE.Scene();
+      scene.add(new THREE.HemisphereLight(0xffffff, 0x2a3140, 0.5));
+      const key = new THREE.DirectionalLight(0xffffff, 1.2);
+      key.position.set(2, 3, 2.5);
+      scene.add(key);
+      const rim = new THREE.DirectionalLight(0xbfd4ff, 0.4);
+      rim.position.set(-2, 2, -2);
+      scene.add(rim);
+      // Camera FOV mirrors avatar3d-editor's capturePng so the
+      // head-anchor framing math (`applyFaceFraming`) produces the
+      // SAME crop the agent-profile portrait does. Position is
+      // computed per-figure right before render — face mesh is
+      // present at that point.
+      const camera = new THREE.PerspectiveCamera(35, 1, 0.05, 20);
+
+      for (const { id, cfg } of cfgs) {
+        let figure = null;
+        try {
+          figure = av.buildAvatar3D(id, {
+            model: cfg.model,
+            hairStyle: cfg.hairStyle,
+            outfitStyle: cfg.outfitStyle,
+            accessory: cfg.accessory,
+            height: 1.7,
+            skin: cfg.skin, hair: cfg.hair, brow: cfg.brow, outfit: cfg.outfit,
+            browStyle: cfg.browStyle, tieStyle: cfg.tieStyle,
+            tie: cfg.tie, eye: cfg.eye,
+          });
+        } catch (_) { figure = null; }
+        if (!figure) continue;
+        // Faint 3/4 turn for visual interest, then frame on the
+        // face mesh (same routine the agent-profile capture uses)
+        // so every card shows the same head-and-shoulders crop.
+        figure.rotation.y = -0.18;
+        scene.add(figure);
+        try {
+          if (typeof av.applyFaceFraming === "function") {
+            av.applyFaceFraming(camera, figure);
+          }
+        } catch (_) { /* fallback to constructor defaults */ }
+        renderer.render(scene, camera);
+        const dataUrl = renderer.domElement.toDataURL("image/png");
+        this._celebrityAvatar3dCache.set(id, dataUrl);
+        // Find every mounted card with this id (composer can be open
+        // in two surfaces simultaneously in some flows) and paint.
+        document.querySelectorAll(`[data-cmp-celeb-img="${CSS.escape(id)}"]`)
+          .forEach((el) => this._paintCelebrityImg(el, dataUrl));
+        scene.remove(figure);
+        figure.traverse((n) => {
+          if (n.material) {
+            const ms = Array.isArray(n.material) ? n.material : [n.material];
+            for (const m of ms) { try { m.dispose(); } catch (_) {} }
+          }
+          if (n.geometry) { try { n.geometry.dispose(); } catch (_) {} }
+        });
+      }
+      renderer.dispose();
+    },
+
+    /** Internal · set a celebrity-card image to a dataURL, swapping
+     *  the placeholder `<span>` for an `<img>` when the initial
+     *  paint used the fallback dot. Marks the node so the next
+     *  hydrate pass skips it. */
+    _paintCelebrityImg(el, dataUrl) {
+      if (!el || !dataUrl) return;
+      if (el.tagName === "IMG") {
+        el.src = dataUrl;
+        el.dataset.cmpCelebRendered = "1";
+        return;
+      }
+      // Replace the fallback span with an img inside the same `.cmp-celeb-av` tile.
+      const img = document.createElement("img");
+      img.className = "cmp-celeb-img";
+      img.dataset.cmpCelebImg = el.getAttribute("data-cmp-celeb-img") || "";
+      img.src = dataUrl;
+      img.alt = "";
+      img.dataset.cmpCelebRendered = "1";
+      if (el.parentNode) el.parentNode.replaceChild(img, el);
+    },
+
     /** Click handler · kick the full-mode persona builder with the
      *  celebrity's seed description, tag the live job with the seed
      *  id so the save-success callback can mark it consumed. */
@@ -12419,8 +12687,8 @@
      *  topped up via the LLM-driven `_topUpCelebritySeeds` path.
      *
      *  Per-entry shape:
-     *    · id           · kebab-slug · doubles as `AvatarSkill` seed
-     *                     (deterministic 8-bit portrait)
+     *    · id           · kebab-slug · doubles as `Avatar3DSnap` seed
+     *                     (deterministic 3D voxel portrait)
      *    · name         · verbatim, no i18n (proper nouns)
      *    · roleTag      · short mono tag · kept English to match the
      *                     mono kicker register used elsewhere
@@ -12838,8 +13106,13 @@
 
     /** Preview card · all generated fields editable inline. */
     renderAgentSpecPreviewHtml(spec) {      const seed = this.agentSpecAvatarSeed;
-      const avatarSvg = (window.AvatarSkill && seed)
-        ? window.AvatarSkill.generate(seed, { size: 96 })
+      // Avatar paints async via Avatar3DSnap (see the post-render
+      // hydration that follows). The frame mounts with a cached
+      // snap if hot, otherwise empty + a CSS placeholder spinner.
+      const snap = window.Avatar3DSnap;
+      const cachedSnap = (seed && snap && typeof snap.cacheGet === "function") ? snap.cacheGet(seed) : null;
+      const avatarSvg = cachedSnap
+        ? `<img src="${cachedSnap}" alt="">`
         : `<div class="ag-prev-av-empty">—</div>`;
       // Reachable models only · filter by `/api/models` cache so the
       // user can't pick a model their active credential can't route
@@ -13284,9 +13557,14 @@
         this.personaJob.finalGuessRoleTag = data.guessRoleTag || "director";
         // Avatar seed · matches Signal-mode's pattern. Random per
         // build, user can re-roll on the save card.
-        this.personaJob.avatarSeed = (window.AvatarSkill && window.AvatarSkill.randomSeed)
-          ? window.AvatarSkill.randomSeed()
+        this.personaJob.avatarSeed = (window.Avatar3DSnap && window.Avatar3DSnap.randomSeed)
+          ? window.Avatar3DSnap.randomSeed()
           : null;
+        // Warm the 3D snap cache so the persona save overlay's
+        // portrait paints instantly when it opens.
+        if (this.personaJob.avatarSeed && window.Avatar3DSnap && typeof window.Avatar3DSnap.generate === "function") {
+          window.Avatar3DSnap.generate(this.personaJob.avatarSeed).catch(() => { /* */ });
+        }
         this._closePersonaSse();
         this._stopPersonaTick();
         this._personaRender();
@@ -13913,6 +14191,11 @@
             const e = await r.json().catch(() => ({}));
             throw new Error(e.error || ("HTTP " + r.status));
           }
+          // Swap the 8-bit avatar for a 3D screenshot (best-effort) before the
+          // roster refresh below picks the new director up.
+          const saved = await r.json().catch(() => null);
+          const newId = saved && (saved.id || (saved.agent && saved.agent.id));
+          if (newId) await this.apply3dPortrait(newId);
           // Capture the celebrity seed id (if any) BEFORE nulling
           // personaJob below · `_markCelebritySeedConsumed` needs
           // it to update localStorage. Tagging happens in
@@ -13998,9 +14281,19 @@
           const userModel = this.loadAgentComposerModel();
           if (userModel && MODEL_LABELS[userModel]) this.agentSpec.modelV = userModel;
         }
-        this.agentSpecAvatarSeed = (window.AvatarSkill && window.AvatarSkill.randomSeed)
-          ? window.AvatarSkill.randomSeed()
+        this.agentSpecAvatarSeed = (window.Avatar3DSnap && window.Avatar3DSnap.randomSeed)
+          ? window.Avatar3DSnap.randomSeed()
           : null;
+        // Kick off the 3D portrait render so the cache is hot by the
+        // time the preview card mounts + the save handler reads it.
+        if (this.agentSpecAvatarSeed && window.Avatar3DSnap && typeof window.Avatar3DSnap.generate === "function") {
+          const seed = this.agentSpecAvatarSeed;
+          window.Avatar3DSnap.generate(seed).then((dataUrl) => {
+            if (!dataUrl || this.agentSpecAvatarSeed !== seed) return;
+            const f = document.querySelector(".ag-prev-av-frame");
+            if (f) f.innerHTML = `<img src="${dataUrl}" alt="">`;
+          }).catch(() => { /* */ });
+        }
         this.agentSpecError = null;
       } catch (e) {
         const isAbort = (e && (e.name === "AbortError" || /aborted/i.test(String(e.message))));
@@ -14091,12 +14384,14 @@
             throw new Error(e.error || ("HTTP " + r.status));
           }
           const j = await r.json();
+          const newId = j && (j.id || (j.agent && j.agent.id));
+          // 3D screenshot avatar (before refresh, so the roster shows it).
+          if (newId) await this.apply3dPortrait(newId);
           await this.refreshAgents?.();
           this.agentSpec = null;
           this.agentSpecAvatarSeed = null;
           this.clearAgentComposerDraft();
           this.composerMode = "room";
-          const newId = j && (j.id || (j.agent && j.agent.id));
           // Land on the new agent's full profile (mirrors the prior
           // inline-preview save flow's post-success navigation).
           if (newId && typeof window.boardroomFocusAgent === "function") {
@@ -14130,14 +14425,19 @@
     },
 
     rerollAgentSpecAvatar() {
-      if (!window.AvatarSkill || !window.AvatarSkill.randomSeed || !window.AvatarSkill.generate) return;
-      this.agentSpecAvatarSeed = window.AvatarSkill.randomSeed();
-      // In-place re-render of just the avatar frame. AvatarSkill exposes
-      // `generate(seed, opts)` (returns SVG markup) — there's no
-      // renderSeedSvg helper, hence the previous reroll silently
-      // failed.
+      const snap = window.Avatar3DSnap;
+      if (!snap || !snap.randomSeed || !snap.generate) return;
+      const seed = snap.randomSeed();
+      this.agentSpecAvatarSeed = seed;
       const frame = document.querySelector(".ag-prev-av-frame");
-      if (frame) frame.innerHTML = window.AvatarSkill.generate(this.agentSpecAvatarSeed, { size: 96 });
+      if (!frame) return;
+      frame.innerHTML = '<div class="ag-prev-av-empty">…</div>';
+      snap.generate(seed).then((dataUrl) => {
+        if (!dataUrl) return;
+        if (this.agentSpecAvatarSeed !== seed) return; // user rolled again
+        const f2 = document.querySelector(".ag-prev-av-frame");
+        if (f2) f2.innerHTML = `<img src="${dataUrl}" alt="">`;
+      }).catch(() => { /* */ });
     },
 
     discardAgentSpec() {
@@ -14167,6 +14467,28 @@
       this._runAgentSpecGeneration(desc);
     },
 
+    /** Give a freshly-created director a 3D screenshot avatar. Renders the
+     *  director's deterministic default 3D config (derived from its id — the
+     *  same look the room + editor show) to a head-and-shoulders PNG and PATCHes
+     *  it as the avatar, plus persists the config. Best-effort: on any failure
+     *  the director keeps the 8-bit SVG avatar it was created with. Call AFTER
+     *  creation (id known) and BEFORE refreshAgents so the roster picks it up. */
+    async apply3dPortrait(agentId) {
+      try {
+        if (!agentId || !window.Avatar3D || typeof window.renderAvatar3DPortrait !== "function") return;
+        const cfg = window.Avatar3D.deriveDefaultAvatarConfig(agentId);
+        const png = await window.renderAvatar3DPortrait(cfg);
+        if (!png) return;
+        await fetch("/api/agents/" + encodeURIComponent(agentId), {
+          method: "PATCH",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ avatarPath: png, avatar3d: cfg }),
+        });
+      } catch (e) {
+        console.warn("[avatar3d] new-director portrait failed; keeping fallback avatar", e);
+      }
+    },
+
     /** Read inline-edited values from the Signal preview card and
      *  POST to /api/agents. Persona-mode save is a separate path
      *  (`openPersonaConfirmOverlay` → manual-config overlay → its
@@ -14187,10 +14509,15 @@
         instruction: read("instruction").trim(),
         modelV: read("modelV").trim(),
       };
-      // Avatar — generated SVG from current seed, embedded as data: URL.
+      // Avatar — rendered 3D portrait from the current seed, embedded
+      // as a PNG data URL. Render is async (lazy three.js init) but
+      // we already kicked it off when the user landed on the preview
+      // card, so the seed should be hot in the per-seed cache by the
+      // time they click save.
       let avatarPath = null;
-      if (window.AvatarSkill && this.agentSpecAvatarSeed && window.AvatarSkill.generateDataUrl) {
-        avatarPath = window.AvatarSkill.generateDataUrl(this.agentSpecAvatarSeed);
+      const snap = window.Avatar3DSnap;
+      if (snap && this.agentSpecAvatarSeed && typeof snap.generate === "function") {
+        try { avatarPath = await snap.generate(this.agentSpecAvatarSeed); } catch (_) { avatarPath = null; }
       }
       // Ability axes · lifted from the spec produced by /api/agents/generate-spec.
       // The server validates + clamps + falls back to a heuristic if missing.
@@ -14214,6 +14541,11 @@
           throw new Error(e.error || ("HTTP " + r.status));
         }
         const j = await r.json();
+        // POST /api/agents returns the agent record directly (not wrapped).
+        const newId = j && (j.id || (j.agent && j.agent.id));
+        // Replace the 8-bit avatar with a 3D screenshot before the roster
+        // refresh so the sidebar + profile show the 3D portrait immediately.
+        if (newId) await this.apply3dPortrait(newId);
         // Refresh local agent catalog so the new director shows up
         // in pickers + sidebar immediately.
         await this.refreshAgents?.();
@@ -14223,8 +14555,6 @@
         // a future visit to "+ New Agent" should land on a fresh textarea.
         this.clearAgentComposerDraft();
         this.composerMode = "room";
-        // POST /api/agents returns the agent record directly (not wrapped).
-        const newId = j && (j.id || (j.agent && j.agent.id));
         // Land the user on the new agent's full profile page · also
         // switches the sidebar to the Agents tab and persists the
         // sub-state so a refresh keeps them on the same agent.
@@ -15293,6 +15623,9 @@
         <div class="head-actions">
           <a href="#" class="resume-btn" data-resume>[ ▶ ${this.escape(this._t("room_resume_verb"))} ]</a>
           <a href="#" class="pause-btn" data-pause>[ <span class="pause-icon">❚❚</span> ${this.escape(this._t("room_pause_verb"))} ]</a>
+          ${this._isReplayActiveForRoom(r.id)
+            ? `<a href="#" class="replay-stop-btn" data-vr-header-stop aria-label="${this.escape(this._t("head_replay_stop_label") || "Stop")}">[ <span class="replay-stop-icon">■</span> ${this.escape(this._t("head_replay_stop_label") || "Stop")} ]</a>`
+            : ""}
           <div class="head-cast">${castHtml}</div>
           <a href="#" class="head-icon-btn head-add-cast" data-cast-edit-trigger data-tip="${this.escape(this._t("head_add_cast_tip"))}" aria-label="${this.escape(this._t("head_add_cast_label"))}"></a>
           <a href="#" class="head-icon-btn head-threads" data-threads-trigger data-tip="${this.escape(this._t("head_threads_tip") || "All private threads in this room")}" aria-label="${this.escape(this._t("head_threads_label") || "All threads")}"></a>
@@ -15345,10 +15678,12 @@
             ? `<a href="#" class="head-icon-btn head-followup" data-room-followup data-tip="${this.escape(this._t("adj_followup_label"))}" aria-label="${this.escape(this._t("adj_followup_label"))}"></a>`
             : `<a href="#" class="head-icon-btn head-adjourn" data-adjourn data-tip="${this.escape(this._t("ib_adjourn_tip"))}" aria-label="${this.escape(this._t("ib_adjourn_label"))}"></a>`}
           ${(r.deliveryMode === "voice"
-              && r.status === "live"
               && window.BoardroomRecorder
               && typeof window.BoardroomRecorder.isAvailable === "function"
-              && window.BoardroomRecorder.isAvailable()) ? (() => {
+              && window.BoardroomRecorder.isAvailable()
+              && (r.status === "live"
+                  || this._isReplayActiveForRoom(r.id)
+                  || window.BoardroomRecorder.isRecording())) ? (() => {
             const isRec = window.BoardroomRecorder.isRecording();
             const tip = isRec ? this._t("head_record_stop_tip") : this._t("head_record_tip");
             const cls = "head-icon-btn head-record" + (isRec ? " is-recording" : "");
@@ -17843,22 +18178,35 @@
       // profile" kept regressing for custom directors.
       const agentTag = !isUser && author ? ` data-agent="${this.escape(author.id)}"` : "";
       // User avatar mirrors the preference-overlay setting · when
-      // prefs.avatarSeed is present we render the AvatarSkill SVG
-      // (same seed as the sidebar foot's user-av), otherwise fall back
-      // to the initial-letter chip we shipped before AvatarSkill
-      // existed.
+      // prefs.avatarUrl (a captured 3D PNG) is present we use that
+      // directly. Otherwise, if the avatarSeed has a cached 3D snap
+      // we paint it synchronously; if not we fall back to the
+      // initial-letter chip (the async snap render kicks in on the
+      // next renderUserBlock paint).
       let userAvHtml;
       if (isUser) {
+        const url = this.prefs?.avatarUrl;
         const seed = this.prefs?.avatarSeed;
-        if (seed && window.AvatarSkill && typeof window.AvatarSkill.generate === "function") {
-          userAvHtml = `<div class="msg-av msg-av-pixel">${window.AvatarSkill.generate(seed)}</div>`;
+        const snap = window.Avatar3DSnap;
+        const cachedSnap = (seed && snap && typeof snap.cacheGet === "function") ? snap.cacheGet(seed) : null;
+        const src = url || cachedSnap || "";
+        if (src) {
+          userAvHtml = `<img class="msg-av" src="${this.escape(src)}" alt="">`;
         } else {
           userAvHtml = `<div class="msg-av">${this.escape((this.prefs?.name || "Y").charAt(0).toUpperCase())}</div>`;
+          // Kick off the async render so future paints hit cache.
+          if (seed && snap && typeof snap.generate === "function") {
+            snap.generate(seed).then(() => {
+              if (typeof this.renderChat === "function") {
+                try { this.renderChat(); } catch (_) {}
+              }
+            }).catch(() => { /* */ });
+          }
         }
       }
       const avatarHtml = isUser
         ? userAvHtml
-        : `<img class="msg-av" src="${this.escape(author?.avatarPath || "/avatars/socrates.svg")}" alt=""${agentTag}>`;
+        : `<img class="msg-av" src="${this.escape(author?.avatarPath || "/avatars/3d/socrates.png")}" alt=""${agentTag}>`;
 
       // Chair round-end: trim the POINTS: block from the bubble; the
       // vote card below the bubble surfaces the points as toggles.
@@ -18681,7 +19029,7 @@
     },
 
     /** Inline pixel-art chair sprite · 32×40 viewBox, painted as 1×1
-     *  rect cells in the same vocabulary as /public/avatars/chair.svg.
+     *  rect cells in the same vocabulary as /public/avatars/3d/chair.png.
      *  `isModerator: true` adds two cyan side-rails + a cyan headrest
      *  gem to distinguish the chair's seat from the directors'. */
     renderRoundTableChairSvg(isModerator) {
@@ -18754,8 +19102,12 @@
         members.push({
           id: "__user__",
           name: prefs.name || "You",
-          avatarPath: null,
+          // Prefer the 3D portrait PNG; the seat sprite shows it directly.
+          avatarPath: prefs.avatarUrl || null,
           __seed: prefs.avatarSeed || null,
+          // When the user has a saved 3D avatar, the room renders them as a
+          // full 3D figure (like directors) rather than a flat billboard.
+          avatar3d: prefs.avatar3d || null,
           __isUser: true,
         });
       }
@@ -19048,6 +19400,38 @@
       return { id: null, state: null };
     },
 
+    /** Is `authorId`'s TTS audio actually PRODUCING SOUND right now? Used by
+     *  the 3D room to sync the talking-mouth animation to real audio — the
+     *  "speaking" stage state can lead the audio (a streaming-text turn shows
+     *  "speaking" before its TTS chunk starts), which made mouths move
+     *  silently. This reads the live <audio> element, so it's frame-accurate.
+     *  Read each frame from voice-3d's tick (cheap · 0-2 queues). */
+    isSpeakerAudible(authorId) {
+      if (!authorId) return false;
+      // Voice-replay (adjourned playback) drives the seat itself · audible
+      // exactly when its playback state is "speaking".
+      const replay = (typeof window !== "undefined" && window.boardroomVoiceReplay
+        && typeof window.boardroomVoiceReplay.getActive === "function")
+        ? window.boardroomVoiceReplay.getActive() : null;
+      if (replay && replay.authorId) {
+        return replay.authorId === authorId && replay.state === "speaking";
+      }
+      // Live room · a voice queue for this author whose <audio> is playing.
+      const qs = this.voiceQueues;
+      if (qs) {
+        for (const k in qs) {
+          const vq = qs[k];
+          if (!vq || vq.playState !== "playing" || vq.authorId !== authorId) continue;
+          const a = vq.audio;
+          // The "playing" flag is set when audio.play() is invoked; confirm the
+          // element is genuinely running (not paused/ended/buffering at 0).
+          if (!a) return true; // flagged playing, no element to inspect → trust it
+          if (!a.paused && !a.ended && a.currentTime > 0) return true;
+        }
+      }
+      return false;
+    },
+
     /** Stage SFX driver · used by BOTH the 3D delegate path and the
      *  legacy 2D path so the thinking-blip loop + speaker-change
      *  chime fire regardless of which stage renderer is active.
@@ -19093,35 +19477,23 @@
       const floorMode = VALID_FLOORS.includes(tone) ? tone : "constructive";
       stage.setAttribute("data-floor", floorMode);
 
-      // ── 3D stage delegate ─────────────────────────────────────
-      // When the user's "voxel 3D stage" toggle is on (default) AND
-      // the voice-3d module loaded AND WebGL is available, hand off
-      // to VoiceStage3D and skip the legacy 2D seat DOM render.
-      // Falls through to the 2D path on toggle off / no WebGL / no
-      // module · the legacy SVG table + seats DOM stay in place
-      // for that case (we never delete them, only `.is-3d` hides).
-      const stage3dPref = (() => {
-        try { return localStorage.getItem("boardroom.stage3d") !== "off"; }
-        catch (_) { return true; }
-      })();
+      // ── 3D stage · the only path now ──────────────────────────
+      // The legacy 2D SVG stage was retired · the voice room is
+      // 3D-only. WebGL is required; if it's not available, the stage
+      // simply doesn't paint (caller is expected to gate room entry
+      // on `VS3D.isSupported()` if a no-WebGL fallback ever returns).
+      // The aria-label + HUD + subtitle + SFX tail still runs so
+      // screen readers and the status panels stay in sync regardless.
+      const members = this.roundTableMembers();
+      const positions = this.computeSeatPositions(members);
       const VS3D = window.VoiceStage3D;
-      const use3d = stage3dPref && VS3D && typeof VS3D.mount === "function" && VS3D.isSupported();
-      const members3d = this.roundTableMembers();
-      const positions3d = this.computeSeatPositions(members3d);
-      if (use3d) {
+      const sp = this._resolveStageSpeaker();
+      let speakingId = sp && sp.id ? sp.id : null;
+
+      if (VS3D && typeof VS3D.mount === "function" && VS3D.isSupported()) {
         try {
           VS3D.mount(stage);
-          // Compact speaker resolution · mirrors the longer 2D path
-          // below (priority: voice-replay → audible voice queue →
-          // streaming agent message → chair pending / convene →
-          // queue head). Enough to drive the 3D overlay's bubble +
-          // nameplate-hide while-speaking behaviour.
-          const sp = this._resolveStageSpeaker();
           const votePopHtml = this._resolveStageVotePop();
-          // User-spoke bubble · mirrors the 2D `data-rt-user-bubble`
-          // element. Active when the latest user message landed
-          // within the last USER_BUBBLE_TTL_MS, computed once per
-          // render so the bubble's countdown progress is fresh.
           const ub = this.userBubble;
           const nowMs = Date.now();
           const ubActive = !!(ub && ub.text && !ub.dismissed && nowMs < ub.deadline);
@@ -19130,8 +19502,8 @@
                 (this.USER_BUBBLE_TTL_MS - (ub.deadline - nowMs)) / this.USER_BUBBLE_TTL_MS))
             : 0;
           VS3D.update({
-            members: members3d,
-            positions: positions3d,
+            members,
+            positions,
             mode: floorMode,
             speakerId: sp.id,
             speakerState: sp.state,
@@ -19143,444 +19515,18 @@
             userWait: !!this.pendingUserMessage,
             userBubble: ubActive ? { text: ub.text, progress: ubProgress } : null,
           });
-          // The 2D path below ends with calls to renderRoundTableHud
-          // + renderRtSubtitle so the status panel + live subtitle
-          // stay in sync with each renderRoundTable. The 3D delegate
-          // `return`s above the 2D code, so without these two calls
-          // here the HUD div stays empty until some unrelated SSE
-          // (config-event / queue-update) happens to fire them ·
-          // user reported "HUD shows as a thin line, fixed by
-          // toggling the tone" which was exactly that race.
-          this.renderRoundTableHud();
-          this.renderRtSubtitle();
-          // Stage SFX · same call the 2D tail makes (thinking loop +
-          // speaker-change chime). Reuses `sp` resolved above so the
-          // helper sees the exact speaker/state the 3D scene rendered.
-          this._applyStageSfx(sp.id, sp.state);
-          return;
         } catch (e) {
-          // 3D path blew up · fall through to the legacy 2D render
-          // so the user still gets a working stage. Logged so we can
-          // diagnose later · the toggle stays on (user-flipped only).
-          console.warn("[voice-3d] mount/update failed, falling back to 2D:", e);
-          try { VS3D.unmount(); } catch (_) {}
-        }
-      } else if (VS3D && typeof VS3D.unmount === "function" && stage.classList.contains("is-3d")) {
-        // Toggle just flipped off · tear down the 3D canvas so the
-        // 2D path below paints into a clean stage.
-        try { VS3D.unmount(); } catch (_) {}
-      }
-
-      const seatsHost = stage.querySelector("[data-rt-seats]");
-      if (!seatsHost) return;
-      const members = members3d;
-      const positions = positions3d;
-
-      // Build seat HTML. Z-order via inline style based on the y
-      // coordinate so seats with larger y (front) paint last and
-      // occlude back-row seats / the table edge.
-      const seatsByZ = positions
-        .map((seat, i) => ({ seat, i, zScore: Math.round(seat.y * 10) }))
-        .sort((a, b) => a.zScore - b.zScore);
-
-      // Determine the active speaker AND whether they're thinking
-      // (warming up · no tokens yet) or actively speaking (tokens
-      // flowing). Priority:
-      //  1. Most recent streaming message → that author. State
-      //     depends on body content: empty body = thinking,
-      //     non-empty = speaking.
-      //  2. Most recent message with an ACTIVE VOICE QUEUE (audio
-      //     is being streamed/played for it). Catches chair
-      //     templated announcements (announceRoundPrompt +
-      //     announceIntervention) that emit voice-chunks without
-      //     setting meta.streaming · the user hears them speaking,
-      //     so the bubble must surface even though the streaming
-      //     flag is false.
-      //  3. currentQueue[0] when status === "speaking" → queue head
-      //     just promoted, no message-appended yet → thinking.
-      //  4. Otherwise null (idle).
-      let speakingId = null;
-      let speakerState = null; // "thinking" | "speaking"
-      let replayBody = null;   // populated only during voice-replay
-      // (0) Voice-replay override · when an adjourned room is playing
-      //     back its transcript via the replay overlay, the live
-      //     `streaming` / queue signals are absent (the room is
-      //     done). Read the replay's active speaker so the seat
-      //     lights up + the bubble + subtitle reflect the playback.
-      //     The `body` field powers the subtitle bar at the foot of
-      //     the stage (`renderRoundTableSubtitle`). Falls through to
-      //     the live-detection paths below when replay isn't active.
-      const replayActive = (typeof window !== "undefined"
-        && window.boardroomVoiceReplay
-        && typeof window.boardroomVoiceReplay.getActive === "function")
-        ? window.boardroomVoiceReplay.getActive()
-        : null;
-      if (replayActive && replayActive.authorId) {
-        speakingId = replayActive.authorId;
-        speakerState = replayActive.state === "speaking" ? "speaking" : "thinking";
-        replayBody = replayActive.body || "";
-      }
-      const msgs = this.currentMessages || [];
-      // (1) Audible voice queue takes precedence · with cross-director
-      //     pipelining, the most-recent streaming message is often the
-      //     PRE-WARMED next speaker (B's placeholder lands while A's
-      //     audio still plays). The seat that lights up must match
-      //     whoever the user is HEARING — not whoever's text is
-      //     streaming in the background. Scan voiceQueues for the
-      //     playing one and resolve back to its message's author.
-      if (!speakingId && this.voiceQueues) {
-        for (let i = msgs.length - 1; i >= 0; i--) {
-          const mm = msgs[i];
-          if (!mm || mm.authorKind !== "agent") continue;
-          const vq = this.voiceQueues[mm.id];
-          if (vq && vq.playState === "playing") {
-            speakingId = mm.authorId;
-            speakerState = "speaking";
-            break;
-          }
-        }
-      }
-      // (2) Streaming message fallback · only relevant when no audible
-      //     queue exists (text mode, OR the brief warmup between
-      //     message-appended and first voice-chunk). Picks the most
-      //     recent streaming agent message that ISN'T pre-warmed —
-      //     pre-warmed messages have a voiceQueue with playState
-      //     "queued" and should NOT light up a seat.
-      if (!speakingId) {
-        for (let i = msgs.length - 1; i >= 0; i--) {
-          const mm = msgs[i];
-          if (!(mm && mm.meta && mm.meta.streaming === true && mm.authorKind === "agent")) continue;
-          // Skip queued (pre-warmed) speakers · their voice waits for
-          // the playing speaker's audio to finish.
-          const vq = this.voiceQueues && this.voiceQueues[mm.id];
-          if (vq && vq.playState === "queued") continue;
-          speakingId = mm.authorId;
-          const body = String(mm.body || "").trim();
-          speakerState = body.length > 0 ? "speaking" : "thinking";
-          break;
-        }
-      }
-      // (2b) Dead branch removed · the old "voice queue exists at all"
-      //      path was replaced by the playing-queue priority above.
-      if (false && !speakingId && this.voiceQueues) {
-        for (let i = msgs.length - 1; i >= 0; i--) {
-          const mm = msgs[i];
-          if (!mm || mm.authorKind !== "agent") continue;
-          const vq = this.voiceQueues[mm.id];
-          if (vq && vq.playState === "playing") {
-            speakingId = mm.authorId;
-            speakerState = "speaking";
-            break;
-          }
-        }
-      }
-      // (3) Chair preparing (silent prep phase between user input
-      //     and the chair's message-appended) · without this hook
-      //     the user has no visual signal during the seconds the
-      //     chair spends on tools + LLM startup. Show the thinking
-      //     bubble on the chair seat so they know the chair is
-      //     working. Cleared the moment the chair's real message
-      //     appends (hideChairPending fires).
-      if (!speakingId && this.chairPending === true && this.currentChair) {
-        speakingId = this.currentChair.id;
-        speakerState = "thinking";
-      }
-      // (3b) Convening sequence active (auto-pick + chair prep) ·
-      //      the chat-side convening card is hidden in voice mode,
-      //      so without this the stage shows nothing happening for
-      //      the 3-4s the picker LLM + chair tools + LLM startup
-      //      take. chairPending above only fires AFTER auto-pick-
-      //      complete; conveneState covers the EARLIER picker phase
-      //      too. Cleared on the chair's first message-appended.
-      if (!speakingId && this.conveneState && this.currentChair) {
-        speakingId = this.currentChair.id;
-        speakerState = "thinking";
-      }
-      if (!speakingId && Array.isArray(this.currentQueue) && this.currentQueue[0] && this.currentQueue[0].status === "speaking") {
-        speakingId = this.currentQueue[0].agentId;
-        speakerState = "thinking";
-      }
-
-      // Speaker's messageId · derived from the same priority chain
-      // above. Used by the stalled-audio bubble (per-queue watchdog
-      // surfaces on the speaker's bubble + the Skip click needs the
-      // messageId to POST /voice-done). Null when the speaker is
-      // thinking-only (no message id yet) or during replay.
-      let speakingMsgId = null;
-      if (speakingId && this.voiceQueues) {
-        for (let i = msgs.length - 1; i >= 0; i--) {
-          const mm = msgs[i];
-          if (!mm || mm.authorKind !== "agent") continue;
-          if (mm.authorId !== speakingId) continue;
-          if (this.voiceQueues[mm.id]) { speakingMsgId = mm.id; break; }
+          console.warn("[voice-3d] mount/update failed:", e);
         }
       }
-      const stalledQ = (speakingMsgId && this.voiceQueues && this.voiceQueues[speakingMsgId] && this.voiceQueues[speakingMsgId].stalled)
-        ? this.voiceQueues[speakingMsgId]
-        : null;
 
-      // Stage SFX · thinking loop + speaker-change chime. Logic
-      // lives in _applyStageSfx so the 3D delegate path can reuse
-      // it; see that helper for the AudioContext / voice-queue
-      // gating rationale.
-      this._applyStageSfx(speakingId, speakerState);
-
-      const html = seatsByZ.map(({ seat, i }) => {
-        const m = seat.member;
-        const isChair = seat.kind === "chair";
-        const isUser = !!m.__isUser;
-        const qIdx = isUser ? -1 : this.roundTableQueueIndex(m.id);
-        const isSpeaking = !isUser && m.id === speakingId;
-        const isQueued   = qIdx >= 1; // anyone after the head
-
-        // Chair sprite · user gets the plain (no-moderator-gem) chair
-        // sprite; the seat reads as "joined the table" not "running it".
-        const chairSvg = this.renderRoundTableChairSvg(isChair);
-        // Avatar · user takes prefs.avatarSeed via AvatarSkill when
-        // available, otherwise falls back to an initial-letter chip
-        // (mirrors the sidebar pattern at app.js:4847). Directors /
-        // chair use their stored avatarPath image.
-        let avatar;
-        if (isUser) {
-          const seed = m.__seed;
-          if (seed && window.AvatarSkill && typeof window.AvatarSkill.generate === "function") {
-            avatar = `<div class="rt-avatar rt-avatar-user has-pixel-av">${window.AvatarSkill.generate(seed)}</div>`;
-          } else {
-            const initial = this.escape(((m.name || "?")[0] || "?").toUpperCase());
-            avatar = `<div class="rt-avatar rt-avatar-user rt-avatar-initial">${initial}</div>`;
-          }
-        } else {
-          // `data-agent` opens the lightweight director overlay (see
-          // public/agent-overlay.js bubble-phase click handler). Tagged
-          // on directors AND the chair so the user can peek at any
-          // seated voice from the stage; user seat is a div, not an
-          // img, and is intentionally not tagged.
-          avatar = `<img class="rt-avatar" data-agent="${this.escape(m.id)}" src="${this.escape(m.avatarPath || "")}" alt="${this.escape(m.name || "")}">`;
-        }
-        // Name plate · adds a small "Chairman / 董事长" title beneath
-        // the user's name so the user seat reads as the room owner /
-        // chairman. Pulled from i18n (`rt_user_title`) so the label
-        // follows the active UI locale: defaults to "Chairman" in
-        // English, "董事长" in Chinese. Directors and the chair
-        // render the plain single-line name.
-        const name = isUser
-          ? `<div class="rt-name">${this.escape(m.name || "")}<div class="rt-name-title">${this.escape(this._t("rt_user_title"))}</div></div>`
-          : `<div class="rt-name">${this.escape(m.name || "")}</div>`;
-        const bubbleState = isSpeaking ? speakerState : null;
-        // Bubble carries the speaker's NAME so the user always knows
-        // who's speaking — the name plate beneath/above the seat is
-        // hidden during speaking (display:none in CSS), and without a
-        // name on the bubble itself the user could only guess. Status
-        // word ("thinking" / "speaking") is rendered as a smaller
-        // mono kicker beneath the name. Color + dots animation still
-        // distinguishes thinking (amber) from speaking (lime).
-        // Convene override · while the room is mid-convening, the
-        // chair seat shows the current stage label ("Analyzing topic"
-        // / "Seating directors" / "Preparing remarks") instead of the
-        // generic "Thinking" so the user knows WHICH part of the
-        // setup is in flight. Falls back to the generic label for
-        // every non-chair speaker and for chair turns post-convene.
-        let statusWord = bubbleState === "thinking"
-          ? this._t("rt_thinking")
-          : this._t("rt_speaking");
-        if (bubbleState === "thinking" && isChair && this.conveneState) {
-          const stageKey = ({
-            analyzing: "conv_stage_analyzing_title",
-            seating: "conv_stage_seating_title",
-            preparing: "conv_stage_preparing_title",
-          })[this.conveneState.stage];
-          if (stageKey) statusWord = this._t(stageKey);
-        }
-        // Chair-pending phase (server-driven · chair-pending payload.phase).
-        // Maps known phase strings to i18n keys so the bubble label
-        // reflects WHAT silent work is happening — picker LLM, clarify
-        // gate, vote summary, brief stages, etc. Falls back to the
-        // existing convene-stage / "Thinking" label when phase is
-        // empty or unrecognised.
-        if (bubbleState === "thinking" && isChair && this.chairPending && this.chairPendingPhase) {
-          const phaseKey = ({
-            "clarify-deciding": "rt_phase_clarify_deciding",
-            "picker-deciding":  "rt_phase_picker_deciding",
-            "next-speaker":     "rt_phase_next_speaker",
-            "llm-warming":      "rt_phase_llm_warming",
-            "vote-summary":     "rt_phase_vote_summary",
-            "brief-extracting": "rt_phase_brief_extracting",
-            "brief-composing":  "rt_phase_brief_composing",
-            "brief-writing":    "rt_phase_brief_writing",
-          })[this.chairPendingPhase];
-          if (phaseKey) statusWord = this._t(phaseKey);
-        }
-        // Per-message LLM first-token watchdog · client-side belt for
-        // the server's 60s hard cap. When a streaming director message
-        // has gone >8s with no message-token arriving, _localPhase is
-        // flipped to "llm-warming" and the bubble shows that label
-        // until the first token lands (or the server auto-skips).
-        if (bubbleState === "thinking" && !isChair) {
-          const streamingMsg = (this.currentMessages || []).slice().reverse().find(
-            (mm) => mm && mm.authorKind === "agent" && mm.authorId === m.id
-                 && mm.meta && mm.meta.streaming === true,
-          );
-          if (streamingMsg && streamingMsg.meta && streamingMsg.meta._localPhase === "llm-warming") {
-            statusWord = this._t("rt_phase_llm_warming");
-          }
-        }
-        const bubbleCls = bubbleState === "thinking"
-          ? "rt-bubble is-thinking"
-          : "rt-bubble";
-        // User bubble · ephemeral, shows latest typed message plus
-        // an `×` close button. Visible only when not dismissed and
-        // the deadline hasn't elapsed. The 10s countdown is
-        // rendered AS the bubble's border via a conic-gradient
-        // driven by `--rt-bubble-user-progress` (0 → 1 over 10s);
-        // the inline-text countdown digit was removed so prose
-        // can use the bubble's full interior width.
-        let bubble = "";
-        if (isUser) {
-          const ub = this.userBubble;
-          if (ub && !ub.dismissed && ub.text && Date.now() < ub.deadline) {
-            const elapsed = this.USER_BUBBLE_TTL_MS - (ub.deadline - Date.now());
-            const progress = Math.min(1, Math.max(0, elapsed / this.USER_BUBBLE_TTL_MS));
-            bubble = `<div class="rt-bubble rt-bubble-user" data-rt-user-bubble style="--rt-bubble-user-progress: ${progress.toFixed(3)}">` +
-              `<span class="rt-bubble-user-text">${this.escape(ub.text)}</span>` +
-              `<button type="button" class="rt-bubble-user-close" data-rt-user-bubble-close aria-label="Dismiss">✕</button>` +
-              `</div>`;
-          }
-        } else if (isChair && this.chairBubble && !this.chairBubble.dismissed
-            && this.chairBubble.text && Date.now() < this.chairBubble.deadline) {
-          // Chair clarify question · pinned to the chair seat with
-          // border countdown. Takes precedence over the "Speaking"
-          // status bubble since the chair has already finished its
-          // turn at this point (message-final flipped streaming off).
-          const cb = this.chairBubble;
-          const elapsed = this.CHAIR_BUBBLE_TTL_MS - (cb.deadline - Date.now());
-          const progress = Math.min(1, Math.max(0, elapsed / this.CHAIR_BUBBLE_TTL_MS));
-          bubble = `<div class="rt-bubble rt-bubble-chair-clarify" data-rt-chair-bubble style="--rt-bubble-chair-progress: ${progress.toFixed(3)}">` +
-            `<span class="rt-bubble-chair-clarify-text">${this.escape(cb.text)}</span>` +
-            `<button type="button" class="rt-bubble-chair-clarify-close" data-rt-chair-bubble-close aria-label="Dismiss">✕</button>` +
-            `</div>`;
-        } else if (isSpeaking) {
-          // Stalled-audio variant · the chunk-arrival watchdog flipped
-          // q.stalled when no new TTS chunks arrived for ~8s. Repaint
-          // the bubble amber to signal the issue; the 15s auto-skip
-          // inside the watchdog will recover automatically.
-          if (stalledQ && stalledQ.messageId === (this.voiceQueues[speakingMsgId]?.messageId)) {
-            // Audio stalled · the chunk-arrival watchdog flipped
-            // q.stalled when no new TTS chunks arrived for ~8s. Show
-            // an amber state on the bubble so the user understands
-            // why playback paused. The 15s auto-skip in the watchdog
-            // recovers automatically · no manual click affordance.
-            const stalledText = this._t("rt_audio_stalled");
-            bubble = `<div class="${bubbleCls} is-stalled"`
-              + ` title="${this.escape(stalledText)}">`
-              + `<span class="rt-bubble-name">${this.escape(m.name || "")}</span>`
-              + `<span class="rt-bubble-status">${this.escape(stalledText)}</span>`
-              + `</div>`;
-          } else {
-            bubble = `<div class="${bubbleCls}"><span class="rt-bubble-name">${this.escape(m.name || "")}</span><span class="rt-bubble-status">${this.escape(statusWord)}</span><span class="rt-bubble-dots" aria-hidden="true"><i></i><i></i><i></i></span></div>`;
-          }
-        }
-        const badge = (isQueued && !isSpeaking)
-          ? `<div class="rt-badge">${String(qIdx + 1).padStart(2, "0")}</div>`
-          : "";
-
-        // Vote popover on the chair seat · single voice-mode surface
-        // for both phases of the vote flow:
-        //   (A) round-prompt phase · chair has just prompted at round
-        //       wrap; popover shows [Open vote] [Continue] [Adjourn].
-        //   (B) round-end vote phase · awaitingContinue === true;
-        //       popover shows the 3 key-points + Continue / Adjourn
-        //       AFTER the chair has finished its TTS turn.
-        // The popover is suppressed while the chair is mid-presenting
-        // (preparing, streaming text, or audio still playing). The
-        // user wants to hear the chair speak first, THEN see the
-        // panel — without this gate the panel popped up under the
-        // chair's voice and split the user's attention.
-        const hasActivePrompt = (typeof this.activeRoundPromptId === "function")
-          ? !!this.activeRoundPromptId()
-          : false;
-        const isChairBusy = (() => {
-          if (this.chairPending === true) return true;
-          // Chair message landed but voice synthesis hasn't reached
-          // the client yet · the popover would otherwise flash for
-          // 0.5-2s before audio kicks in. See `_chairVoiceAwaiting`
-          // doc + the message-appended hook for the full reasoning.
-          if (this._chairVoiceAwaiting && this._chairVoiceAwaiting.size > 0) return true;
-          const allMsgs = this.currentMessages || [];
-          for (let k = allMsgs.length - 1; k >= 0; k--) {
-            const mm = allMsgs[k];
-            if (!mm || mm.authorKind !== "agent") continue;
-            // Most recent agent turn · streaming text OR active voice
-            // playback counts as "busy". Voice queues stay live for
-            // templated chair messages too (announceRoundPrompt), so
-            // this catches round-prompt voice as well as the LLM
-            // round-end stream.
-            if (mm.meta && mm.meta.streaming === true) return true;
-            if (this.voiceQueues && this.voiceQueues[mm.id]) return true;
-            return false;
-          }
-          return false;
-        })();
-        const showVotePop = isChair && this.currentRoom
-          && this.currentRoom.status !== "adjourned"
-          && (this.currentRoom.awaitingContinue === true || hasActivePrompt)
-          && !isChairBusy;
-        const votePop = showVotePop ? this.renderRoundTableVotePop() : "";
-
-        // Seats whose y is below the stage midline (chair + any
-        // front-row directors) get `rt-seat-below`. CSS flips the
-        // name plate to sit BELOW the chair sprite for these so
-        // names of front-row seats don't land on the table surface
-        // and obscure the props.
-        const isBelow = seat.y > 50;
-        const cls = [
-          "rt-seat",
-          isChair ? "rt-seat-chair" : (isUser ? "rt-seat-user" : "rt-seat-director"),
-          isSpeaking ? "rt-seat-speaking" : "",
-          isSpeaking && speakerState === "thinking" ? "rt-seat-thinking" : "",
-          showVotePop ? "rt-seat-voting" : "",
-          isBelow ? "rt-seat-below" : "",
-        ].filter(Boolean).join(" ");
+      // Stage SFX · thinking loop + speaker-change chime. The 2D
+      // path used to compute speakingId/state itself; we reuse the
+      // resolver above so this stays single-source.
+      this._applyStageSfx(sp.id, sp.state);
 
-        // Inline style carries position + scaleHint + stagger index.
-        const style = [
-          `left: ${seat.x.toFixed(2)}%`,
-          `top: ${seat.y.toFixed(2)}%`,
-          `--rt-scale: ${seat.scaleHint.toFixed(3)}`,
-          `--seat-i: ${i}`,
-        ].join("; ");
-
-        // Wait-marker · only on the user seat, only when the user
-        // has picked "wait — flush after current speaker finishes"
-        // (pendingUserMessage is set). Reads as a small pixel pill
-        // anchored to the seat so a glance at the table answers
-        // "is my queued message still parked?" — clears the moment
-        // the message-appended SSE for the user's body lands.
-        const waitMark = (isUser && this.pendingUserMessage)
-          ? `<div class="rt-seat-wait-mark" aria-label="Waiting for current speaker to finish">⌛&nbsp;WAIT</div>`
-          : "";
-
-        return `
-          <div class="${cls}" data-seat-index="${i}" data-agent-id="${this.escape(m.id)}" style="${style}">
-            ${chairSvg}
-            ${avatar}
-            ${bubble}
-            ${badge}
-            ${waitMark}
-            ${name}
-            ${votePop}
-          </div>
-        `;
-      }).join("");
-
-      // Empty state · no directors yet.
-      const empty = members.length <= 1
-        ? `<div class="rt-empty"><span>// awaiting directors</span></div>`
-        : "";
-
-      seatsHost.innerHTML = html + empty;
-
-      // Update aria-label to keep screen readers in sync with the
-      // visual state · the speaking-queue strip below remains the
+      // Aria-label keeps screen readers in sync with the visible
+      // speaker · the speaking-queue strip below remains the
       // canonical accessible source of truth, this is just a hint.
       const speaker = members.find((m) => m.id === speakingId);
       const queuedNames = (this.currentQueue || [])
@@ -19599,18 +19545,15 @@
       }
       stage.setAttribute("aria-label", aria);
 
-      // Persistent HUD repaint · cheap (single template literal +
-      // innerHTML write) and the data sources are the same room
-      // state already consulted above. Always called on round-table
-      // re-render so the stat block stays in sync with round /
-      // member / vote changes that don't fire toasts.
+      // Persistent HUD + live subtitle repaint · cheap and the data
+      // sources are the same room state already consulted above. The
+      // message-token hot path calls renderRtSubtitle directly to
+      // bypass full re-render cost; this call covers queue-update /
+      // config-event / SSE hello cases that flow through here.
       this.renderRoundTableHud();
-      // Live subtitle · keep in sync with the same speaker-detection
-      // signals the seats use. Repaints triggered from message-token
-      // already call renderRtSubtitle directly to bypass the full
-      // seat re-render cost; this call covers queue-update / config-
-      // event / SSE hello cases that flow through renderRoundTable.
       this.renderRtSubtitle();
+      return;
+
     },
 
     /** Paint the top-left HUD console · gamified RPG-style status