privateboard 0.1.32 → 0.1.37

package/public/app.js

@@ -148,6 +148,15 @@
      *  appendMessageDom, drained in _revealPrewarmedBubble, baked into
      *  messageHtml so every render preserves the hidden state. */
     _prewarmedHidden: new Set(),
+    /** Server-authoritative "currently-visible speaker" messageId.
+     *  Pushed via queue-update SSE (orchestrator/room.ts pumpQueue).
+     *  Drives the .streaming class gate in `updateMessageBodyDom` so
+     *  only the one director the server marks as the active turn
+     *  shows the typing-dots / pulse animation, even in the brief
+     *  same-frame window where A's finalize and B's appended SSE
+     *  events both reach the DOM. Null between turns / before first
+     *  turn. */
+    currentActiveMessageId: null,
     /** Mini-player anchor · when set, the cross-room bar persists
      *  for this voice room throughout its whole live/paused life
      *  (between speakers, during votes / clarify, idle phases) —
@@ -391,6 +400,31 @@
       // page-reload shortcut (it's not a reserved keystroke).
       // Menu reload / URL-bar reload still get caught by the
       // `beforeunload` handler below.
+      // Search overlay keyboard · Cmd+K / Ctrl+K toggles the
+      // floating search palette; Esc closes it when open. Both
+      // pre-empt other handlers — registered with capture so the
+      // overlay reliably opens / closes regardless of where focus
+      // sits in the document.
+      document.addEventListener("keydown", (e) => {
+        const isCmdK = (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey
+          && (e.key === "k" || e.key === "K" || e.code === "KeyK");
+        if (isCmdK) {
+          e.preventDefault();
+          const overlay = document.querySelector("[data-search-overlay]");
+          if (!overlay) return;
+          if (overlay.hasAttribute("hidden")) this.openSearch();
+          else this.closeSearchOverlay();
+          return;
+        }
+        if (e.key === "Escape") {
+          const overlay = document.querySelector("[data-search-overlay]");
+          if (overlay && !overlay.hasAttribute("hidden")) {
+            e.preventDefault();
+            this.closeSearchOverlay();
+          }
+        }
+      }, true);
+
       document.addEventListener("keydown", (e) => {
         const isReload = (e.ctrlKey || e.metaKey)
           && !e.altKey
@@ -528,6 +562,19 @@
         this.refreshMiniPlayer();
         if (!this.currentRoomId) return;
         this.renderRtSubtitle();
+        // Karaoke-style sentence highlight inside the chat bubble of
+        // the currently-playing message · long agent replies are easy
+        // to lose your place in when TTS reads them aloud, so the
+        // sentence at the audio cursor gets a theme-color tint.
+        this.updateTtsSentenceHighlight();
+      });
+      // Replay state transitions · when playback stops (manual close,
+      // playlist exhausted), clear any lingering sentence highlight
+      // so the chat doesn't keep glowing the last-read line.
+      document.addEventListener("boardroom:replay-active", () => {
+        const vr = (typeof window !== "undefined") ? window.boardroomVoiceReplay : null;
+        const active = (vr && typeof vr.getActive === "function") ? vr.getActive() : null;
+        if (!active) this._clearTtsSentenceHighlights();
       });
       window.addEventListener("hashchange", () => this.handleRoute());
       this.handleRoute();
@@ -1126,6 +1173,12 @@
         : (data.members || []).map((m) => ({ ...m, removedAt: null }));
       this.currentChair = data.chair || null;
       this.currentQueue = data.queue || [];
+      // Reset to null on room open · the queue-update SSE will push
+      // the real value if a director is currently speaking. The
+      // initial GET /api/rooms/:id snapshot doesn't carry this field
+      // (it's a transient pump state, not persisted to messages), so
+      // we wait for the first SSE tick.
+      this.currentActiveMessageId = null;
       this.currentRound = data.round || { spoken: 0, total: 0 };
       this.currentKeyPoints = data.keyPoints || [];
       // Reset the round-table HUD log when (re)opening a room. Past
@@ -1364,6 +1417,7 @@
       // re-opened (since `openRoom` re-sets it from data.chair),
       // but the empty + composer states looked broken.
       this.currentQueue = [];
+      this.currentActiveMessageId = null;
       this.currentRound = { spoken: 0, total: 0 };
       this.currentKeyPoints = [];
       this.rtChairLog = [];
@@ -1940,6 +1994,15 @@
           msg.body = data.body;
           msg.meta = data.meta || {};
         }
+        // Server cleared meta.preWarmed (pump just consumed this
+        // speaker · it is now the visible active turn). Drain from
+        // the hidden set BEFORE renderChat so the article re-paints
+        // without `data-prewarmed`. Otherwise the CSS `display:none`
+        // would persist across this re-render until the next event.
+        if (data.meta && data.meta.preWarmed === false
+            && this._prewarmedHidden && this._prewarmedHidden.has(data.messageId)) {
+          this._revealPrewarmedBubble(data.messageId);
+        }
         // Re-render via a chat repaint · the tool-use renderer is
         // selected by meta.kind so it rebuilds with the new status.
         this.renderChat();
@@ -1949,6 +2012,32 @@
         const data = JSON.parse(e.data);
         this.currentQueue = data.queue || [];
         if (data.round) this.currentRound = data.round;
+        // activeMessageId · server tells us which director's bubble
+        // is the currently-visible "speaking" turn. Two consumers:
+        // (1) `updateMessageBodyDom` gates the streaming animation
+        // on this id (suppresses the brief text-mode flash where
+        // A's finalize and B's append cross paths in the same rAF),
+        // (2) a hidden pre-warmed bubble whose id matches gets
+        // revealed here (defense in depth alongside the message-
+        // updated meta.preWarmed:false signal — whichever arrives
+        // first wins).
+        const prevActive = this.currentActiveMessageId || null;
+        this.currentActiveMessageId = (data && typeof data.activeMessageId === "string")
+          ? data.activeMessageId
+          : (data && data.activeMessageId === null ? null : prevActive);
+        if (this.currentActiveMessageId
+            && this._prewarmedHidden
+            && this._prewarmedHidden.has(this.currentActiveMessageId)) {
+          this._revealPrewarmedBubble(this.currentActiveMessageId);
+        }
+        // If the active id changed AND the streaming class is now on
+        // the wrong bubble, refresh both. Only affects bubbles that
+        // are still in streaming state; finalized bubbles never carry
+        // .streaming so they're not re-touched.
+        if (prevActive !== this.currentActiveMessageId) {
+          this._refreshStreamingClassForId(prevActive);
+          this._refreshStreamingClassForId(this.currentActiveMessageId);
+        }
         this.renderQueue();
       });
 
@@ -3504,12 +3593,53 @@
         `;
       }).join("");
       document.body.appendChild(pop);
-      // Anchor under the wrapper · `.ap-model-picker` is
-      // `position: fixed` so we set top/left relative to viewport.
+      // Anchor relative to the wrapper · `.ap-model-picker` is
+      // `position: fixed` so we set top/left in viewport coords.
+      // Flip-above logic · the house-style dropdown sits in the
+      // SECOND row of the modal and the modal is centred in the
+      // viewport, so the trigger often lands close to the lower
+      // half of the screen. A naive "always below" placement gets
+      // clipped at the viewport bottom (visually: half the list
+      // hidden under the chrome). We measure the rendered popover
+      // height and choose the side with more room — preferring
+      // below by default, flipping above when below is tight and
+      // above has more space. The base `.ap-model-picker` rule
+      // caps height at 60vh + scrolls inside, so a long menu still
+      // fits even after flip.
       const r = wrap.getBoundingClientRect();
-      pop.style.top = `${Math.round(r.bottom + 4)}px`;
       pop.style.left = `${Math.round(r.left)}px`;
       pop.style.width = `${Math.round(r.width)}px`;
+      // First paint to measure; the visible top is intentionally
+      // off-screen until the position decision lands (avoids a
+      // one-frame flash at the wrong location).
+      pop.style.top = "-9999px";
+      pop.style.visibility = "hidden";
+      const PAD = 8;
+      const GAP = 4;
+      const popH = pop.getBoundingClientRect().height;
+      const spaceBelow = Math.max(0, window.innerHeight - r.bottom - PAD);
+      const spaceAbove = Math.max(0, r.top - PAD);
+      let topPx;
+      if (popH + GAP <= spaceBelow) {
+        // Fits below comfortably.
+        topPx = Math.round(r.bottom + GAP);
+      } else if (popH + GAP <= spaceAbove) {
+        // Fits above comfortably · flip.
+        topPx = Math.round(r.top - popH - GAP);
+      } else if (spaceAbove > spaceBelow) {
+        // Neither side fits the full list — pick the bigger side
+        // (above) and cap max-height so the popover's own internal
+        // scroll (`.ap-model-picker { overflow-y: auto }`) handles
+        // the overflow rather than the viewport edge clipping us.
+        topPx = PAD;
+        pop.style.maxHeight = `${spaceAbove}px`;
+      } else {
+        // Stay below · same cap-and-scroll trick.
+        topPx = Math.round(r.bottom + GAP);
+        pop.style.maxHeight = `${spaceBelow}px`;
+      }
+      pop.style.top = `${topPx}px`;
+      pop.style.visibility = "";
       // Dismiss handlers · attached synchronously, but the trigger's
       // own wrap is whitelisted so the click that OPENED the popover
       // (which fires AFTER mousedown · same user gesture) doesn't
@@ -3745,6 +3875,14 @@
       if (choice === "cancel" || !text.trim()) return;
       if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
         input.value = "";
+        // Shrink the room input-bar textarea back to baseline · the
+        // user grew it by typing the message we're now sending, so
+        // the post-clear field would otherwise stay at the prior
+        // tall height. Mirrors the same call submitFromComposer
+        // makes on the direct (no-modal) send path.
+        if (input.matches?.(".ib-textarea[data-send-input]")) {
+          this.autosizeRoomInputTextarea();
+        }
       }
       if (choice === "interrupt") {
         this.sendMessage(text, mentions).catch((err) => alert("Send failed: " + err.message));
@@ -4798,6 +4936,217 @@
       this.refreshFollowUpCastButton();
     },
 
+    /* ─── Cast-edit popover · room-head "Add director" button ───
+       Anchored under the head icon. Lists every director with
+       checkboxes pre-checked for current cast members. Diffs against
+       initial state on confirm; PATCH /api/rooms/:id/members applies
+       adds + removes atomically. The orchestrator's announceMember-
+       Change posts a chair welcome / farewell in chat, and any newly-
+       added director gets injected into the live speaker queue. */
+    openCastEditOverlay(anchorBtn) {
+      this.closeCastEditOverlay();
+      if (!anchorBtn || !this.currentRoomId || !this.currentRoom) return;
+      if (this.currentRoom.status === "adjourned") return;
+
+      const dirs = (this.agents || [])
+        .filter((a) => a.roleKind !== "moderator")
+        .slice()
+        .sort((a, b) => (a.name || "").localeCompare(b.name || ""));
+      const currentIds = new Set(
+        (this.currentMembers || [])
+          .filter((m) => (m.roleKind || "director") !== "moderator")
+          .map((m) => m.id),
+      );
+      // State carries the INITIAL set (for diff on confirm) + the
+      // user's working selection (mutated by toggleCastEditDirector).
+      this._castEditState = {
+        initialIds: new Set(currentIds),
+        currentIds: new Set(currentIds),
+        saving: false,
+      };
+
+      const rows = dirs.map((a) => {
+        const checked = currentIds.has(a.id);
+        return `
+          <label class="composer-pick-row${checked ? " on" : ""}" data-cast-edit-pick-id="${this.escape(a.id)}">
+            <input type="checkbox" ${checked ? "checked" : ""}>
+            <img class="composer-pick-av" src="${this.escape(a.avatarPath || "")}" alt="${this.escape(a.name || "")}">
+            <span class="composer-pick-main">
+              <span class="composer-pick-name">${this.escape(a.name || "")}</span>
+              <span class="composer-pick-tag">${this.escape(a.roleTag || "")}</span>
+            </span>
+          </label>
+        `;
+      }).join("");
+
+      const pop = document.createElement("div");
+      pop.id = "cast-edit-pop";
+      pop.className = "cast-edit-pop";
+      pop.innerHTML = `
+        <div class="composer-pick-head">
+          <span class="composer-pick-title">${this.escape(this._t("cast_edit_title"))}</span>
+        </div>
+        <div class="composer-pick-list">${rows || `<div class="composer-pick-empty">${this.escape(this._t("cast_edit_empty"))}</div>`}</div>
+        <div class="cast-edit-foot">
+          <span class="cast-edit-floor-msg" data-cast-edit-floor>${this.escape(this._t("cast_edit_min_floor"))}</span>
+          <button type="button" class="cast-edit-btn" data-cast-edit-close>${this.escape(this._t("cast_edit_cancel"))}</button>
+          <button type="button" class="cast-edit-btn is-primary" data-cast-edit-confirm disabled>${this.escape(this._t("cast_edit_confirm"))}</button>
+        </div>
+      `;
+      document.body.appendChild(pop);
+
+      // Position · mirrors openFollowUpCastPicker · pick the side with
+      // more room (the head icon sits near the top so "below" usually
+      // wins). Cap max-height to the available space so the row list
+      // scrolls within view instead of overflowing.
+      const r = anchorBtn.getBoundingClientRect();
+      const MARGIN = 8;
+      const GAP = 6;
+      const popW = Math.min(340, window.innerWidth - MARGIN * 2);
+      const spaceBelow = window.innerHeight - r.bottom - GAP - MARGIN;
+      const spaceAbove = r.top - GAP - MARGIN;
+      const openAbove = spaceAbove > spaceBelow;
+      // Cap the popover height · without this the list stretches to
+      // every available pixel of `spaceBelow` and visually anchors to
+      // the window's bottom edge (~750px on a 13" laptop). The cap
+      // is `min(420px, 55vh)` — enough rows to scan ~6-7 directors
+      // without scrolling, short enough to read as a compact menu
+      // instead of a full-height panel.
+      const HEIGHT_CAP = Math.min(420, Math.round(window.innerHeight * 0.55));
+      const available = openAbove ? spaceAbove : spaceBelow;
+      const maxHeight = Math.max(180, Math.min(HEIGHT_CAP, available));
+      pop.style.width = popW + "px";
+      // Right-align to the anchor so the popover doesn't jut past the
+      // right edge of the window (head-actions sits flush right).
+      const left = Math.min(
+        Math.max(MARGIN, r.right - popW),
+        window.innerWidth - popW - MARGIN,
+      );
+      pop.style.left = left + "px";
+      pop.style.maxHeight = maxHeight + "px";
+      pop.style.top = openAbove
+        ? (r.top - GAP - Math.min(pop.scrollHeight || maxHeight, maxHeight)) + "px"
+        : (r.bottom + GAP) + "px";
+
+      // Outside-click + Esc dismiss · same dismiss vocabulary as the
+      // follow-up cast picker. We bind the outside-click on the NEXT
+      // tick so this open click doesn't immediately close.
+      this._castEditEsc = (ev) => {
+        if (ev.key === "Escape") {
+          ev.stopImmediatePropagation();
+          this.closeCastEditOverlay();
+        }
+      };
+      this._castEditOutside = (ev) => {
+        if (
+          !pop.contains(ev.target)
+          && !ev.target.closest("[data-cast-edit-trigger]")
+        ) {
+          this.closeCastEditOverlay();
+        }
+      };
+      document.addEventListener("keydown", this._castEditEsc, true);
+      setTimeout(() => document.addEventListener("click", this._castEditOutside, true), 0);
+
+      // Single source of truth for row toggling · listens at the
+      // popover root so both label-click (browser flips the input)
+      // and direct-checkbox-click reach us as one `change` event.
+      pop.addEventListener("change", (ev) => {
+        const cb = ev.target;
+        if (!cb || cb.type !== "checkbox") return;
+        const row = cb.closest("[data-cast-edit-pick-id]");
+        if (!row) return;
+        const id = row.getAttribute("data-cast-edit-pick-id");
+        this.setCastEditDirector(id, !!cb.checked);
+      });
+
+      this.refreshCastEditConfirm();
+    },
+
+    closeCastEditOverlay() {
+      const el = document.getElementById("cast-edit-pop");
+      if (el) el.remove();
+      if (this._castEditEsc) {
+        document.removeEventListener("keydown", this._castEditEsc, true);
+        this._castEditEsc = null;
+      }
+      if (this._castEditOutside) {
+        document.removeEventListener("click", this._castEditOutside, true);
+        this._castEditOutside = null;
+      }
+      this._castEditState = null;
+    },
+
+    /** Mirror the row's checkbox state into _castEditState · driven
+     *  by the `change` event in openCastEditOverlay. `on` reflects
+     *  the input.checked value AFTER the native flip, so this is
+     *  always a set/clear (never a flip) and is idempotent under
+     *  duplicate fires. */
+    setCastEditDirector(id, on) {
+      const state = this._castEditState;
+      if (!state || state.saving) return;
+      if (on) state.currentIds.add(id);
+      else state.currentIds.delete(id);
+      const row = document.querySelector(`[data-cast-edit-pick-id="${CSS.escape(id)}"]`);
+      if (row) row.classList.toggle("on", on);
+      this.refreshCastEditConfirm();
+    },
+
+    /** Recompute the confirm-button enabled state · enabled when the
+     *  selection differs from the initial AND keeps at least one
+     *  director (the server enforces the same floor; we mirror it
+     *  here so the button reflects validity). Also flips the floor-
+     *  message visibility. */
+    refreshCastEditConfirm() {
+      const state = this._castEditState;
+      const pop = document.getElementById("cast-edit-pop");
+      if (!state || !pop) return;
+      const confirmBtn = pop.querySelector("[data-cast-edit-confirm]");
+      const floorMsg = pop.querySelector("[data-cast-edit-floor]");
+      const sizeOk = state.currentIds.size >= 1;
+      const changed =
+        state.currentIds.size !== state.initialIds.size
+        || [...state.currentIds].some((id) => !state.initialIds.has(id));
+      if (confirmBtn) confirmBtn.disabled = state.saving || !changed || !sizeOk;
+      if (floorMsg) floorMsg.classList.toggle("is-visible", !sizeOk);
+    },
+
+    async submitCastEdit() {
+      const state = this._castEditState;
+      if (!state || state.saving || !this.currentRoomId) return;
+      if (state.currentIds.size < 1) return;
+      state.saving = true;
+      this.refreshCastEditConfirm();
+      const pop = document.getElementById("cast-edit-pop");
+      const confirmBtn = pop ? pop.querySelector("[data-cast-edit-confirm]") : null;
+      const origLabel = confirmBtn ? confirmBtn.textContent : "";
+      if (confirmBtn) confirmBtn.textContent = this._t("cast_edit_saving");
+      try {
+        const res = await fetch(
+          "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/members",
+          {
+            method: "PATCH",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ agentIds: [...state.currentIds] }),
+          },
+        );
+        if (!res.ok) {
+          const j = await res.json().catch(() => ({}));
+          throw new Error(j.error || "Failed to update cast");
+        }
+        // SSE `members-changed` config-event arrives moments later
+        // and triggers a member re-fetch in the openRoom path's
+        // handler. Close the popover immediately so the user sees the
+        // chair's join/leave announcement land in chat.
+        this.closeCastEditOverlay();
+      } catch (e) {
+        if (confirmBtn) confirmBtn.textContent = origLabel;
+        state.saving = false;
+        this.refreshCastEditConfirm();
+        alert((e && e.message) || "Failed to update cast");
+      }
+    },
+
     async submitFollowUp() {
       const overlay = document.getElementById("followup-overlay");
       if (!overlay) return;
@@ -6707,6 +7056,25 @@
         // when the agent profile takes focus, and otherwise the agent
         // rows shouldn't be highlighted at all.
       }
+      // Collapsed mini-rail · light the "rooms" icon when an actual
+      // room is the main view; clear it for composers (the new-room /
+      // new-agent mini icon carries the highlight there instead).
+      this.setMiniRailContext(roomId !== null ? "rooms" : null);
+    },
+
+    /** Highlight the rooms / agents switcher in the collapsed mini
+     *  rail. Mutually exclusive · passing `null` clears both (used by
+     *  the reports / notes / composer destinations, which light their
+     *  own mini icon via the shared trigger attributes). Mirrors the
+     *  full sidebar's tab selection but scoped to the icon rail so the
+     *  collapsed sidebar still shows "where you are". */
+    setMiniRailContext(ctx) {
+      document.querySelectorAll('.mini-tab[data-mini-tab="rooms"]').forEach((el) => {
+        el.classList.toggle("active", ctx === "rooms");
+      });
+      document.querySelectorAll('.mini-tab[data-mini-tab="agents"]').forEach((el) => {
+        el.classList.toggle("active", ctx === "agents");
+      });
     },
 
     /** Sidebar focus when an agent profile takes the main view. The
@@ -6736,6 +7104,9 @@
       document.querySelectorAll(".agent-row").forEach((r) => {
         r.classList.toggle("active", r.dataset.agentProfile === slug);
       });
+      // Collapsed mini-rail · an agent profile is the main view → light
+      // the agents switcher icon.
+      this.setMiniRailContext("agents");
       // Reset composer mode so subsequent transitions are clean — the
       // user is no longer "creating" anything.
       this.composerMode = "room";
@@ -6863,13 +7234,9 @@
       const sectionHeader = (label, kind) => {
         const pinned = kind === "pinned";
         const chair = kind === "chair";
-        const glyph = pinned
-          ? `<svg class="pin-glyph" viewBox="0 0 24 24"><path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5v6h2v-6h5v-2l-2-2z"/></svg>`
-          : "";
         const cls = "agents-section-header" + (pinned ? " pinned" : "") + (chair ? " chair" : "");
         return `
           <div class="${cls}">
-            ${glyph}
             <span>${this.escape(label)}</span>
             <span class="line"></span>
           </div>
@@ -7002,17 +7369,23 @@
       // matches what the user picked in settings; otherwise fall back
       // to the initial-letter chip we shipped before AvatarSkill
       // existed.
-      const av = document.querySelector("[data-user-avatar]");
-      if (av) {
-        const seed = this.prefs?.avatarSeed;
-        if (seed && window.AvatarSkill && typeof window.AvatarSkill.generate === "function") {
+      // 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 seed = this.prefs?.avatarSeed;
+      const avHtml = (seed && window.AvatarSkill && typeof window.AvatarSkill.generate === "function")
+        ? window.AvatarSkill.generate(seed)
+        : null;
+      document.querySelectorAll("[data-user-avatar]").forEach((av) => {
+        if (avHtml) {
           av.classList.add("has-pixel-av");
-          av.innerHTML = window.AvatarSkill.generate(seed);
+          av.innerHTML = avHtml;
         } else {
           av.classList.remove("has-pixel-av");
           av.textContent = initial;
         }
-      }
+      });
       const nm = document.querySelector("[data-user-name]");
       if (nm) nm.textContent = name;
       const mt = document.querySelector("[data-user-meta]");
@@ -7073,7 +7446,10 @@
       const kids = Array.isArray(this.currentFollowUps) ? this.currentFollowUps : [];
       if (briefCard && kids.length > 0) {
         // System UI · always English (sidebar / brief-card chrome head).
-        const headLabel = `Follow-up rooms · ${kids.length}`;
+        // `// ` prefix matches the `.sa-banner-tag` kicker convention
+        // (`// session analytics`) so both post-adjourn cards read as
+        // the same component family.
+        const headLabel = `// Follow-up rooms · ${kids.length}`;
         const block = document.createElement("div");
         block.className = "followup-children";
         block.innerHTML = [
@@ -7868,6 +8244,9 @@
       document.querySelectorAll("[data-notes-trigger].active").forEach((el) => el.classList.remove("active"));
       document.querySelectorAll("[data-search-trigger].active").forEach((el) => el.classList.remove("active"));
       document.querySelectorAll("[data-reports-trigger]").forEach((el) => el.classList.add("active"));
+      // Reports is its own destination · clear the mini-rail rooms /
+      // agents switchers so only the reports mini icon reads active.
+      this.setMiniRailContext(null);
 
       // Persist the view via URL hash so refresh / back-button restore
       // both the page content AND the sidebar highlight. replaceState
@@ -8354,6 +8733,9 @@
       document.querySelectorAll("[data-reports-trigger].active").forEach((el) => el.classList.remove("active"));
       document.querySelectorAll("[data-search-trigger].active").forEach((el) => el.classList.remove("active"));
       document.querySelectorAll("[data-notes-trigger]").forEach((el) => el.classList.add("active"));
+      // Notes is its own destination · clear the mini-rail rooms /
+      // agents switchers so only the notes mini icon reads active.
+      this.setMiniRailContext(null);
 
       if (location.hash !== "#/notes") {
         try { history.replaceState(null, "", "#/notes"); } catch { /* ignore */ }
@@ -8387,367 +8769,58 @@
       this.renderNotesPage(notesList);
     },
 
-    // ── Search view · cross-room keyword search ────────────────
-    /** Open the Search page · same main-view-replacement pattern as
-     *  openAllReports / openAllNotes. Mounts a search input + an
-     *  empty results panel; user-typed input triggers debounced
-     *  /api/search calls (see runSearch). Result rows route back
-     *  into rooms with `?q=<term>&m=<msgId>` so the message gets
-     *  scrolled into view + flashed on arrival. */
+    // ── Search overlay · cross-room keyword search ─────────────
+    /** Open the floating search overlay. Layers above whatever
+     *  view is mounted (room / agent / reports / notes stay
+     *  underneath). Esc / scrim-click / X close — see
+     *  closeSearchOverlay + the doc-level handlers in
+     *  index.html. Restores the last query on re-open so the
+     *  user sees their prior results without retyping. */
     openSearch() {
-      document.documentElement.classList.add("no-room");
-      if (this.currentRoomId) {
-        this.disconnectSSE?.();
-        this.currentRoomId = null;
-        this.currentRoom = null;
-        this.currentMessages = [];
-        this.currentMembers = [];
-        this.currentHistoricalMembers = [];
-        this.currentQueue = [];
-        this.currentBrief = null;
-        if (/^#\/r\//.test(location.hash)) {
-          history.replaceState(null, "", location.pathname + location.search);
-        }
-      }
-      if (typeof window.closeAgentProfile === "function") {
-        try { window.closeAgentProfile(); } catch { /* ignore */ }
-      }
-      const room = document.querySelector('[data-main-view="room"]');
-      const agent = document.querySelector('[data-main-view="agent"]');
-      const reports = document.querySelector('[data-main-view="reports"]');
-      const notes = document.querySelector('[data-main-view="notes"]');
-      const search = document.querySelector('[data-main-view="search"]');
-      if (room) room.setAttribute("hidden", "");
-      if (agent) agent.setAttribute("hidden", "");
-      if (reports) reports.setAttribute("hidden", "");
-      if (notes) notes.setAttribute("hidden", "");
-      if (search) search.removeAttribute("hidden");
-
-      this.composerMode = "room";
-      document.querySelectorAll("[data-convene-trigger], [data-agent-composer-trigger]").forEach((el) => el.classList.remove("active"));
-      document.querySelectorAll(".session-row-shell.active, .agent-row.active").forEach((el) => el.classList.remove("active"));
-      document.querySelectorAll("[data-reports-trigger].active").forEach((el) => el.classList.remove("active"));
-      document.querySelectorAll("[data-notes-trigger].active").forEach((el) => el.classList.remove("active"));
+      const overlay = document.querySelector("[data-search-overlay]");
+      if (!overlay) return;
+      overlay.removeAttribute("hidden");
+      overlay.setAttribute("aria-hidden", "false");
+      document.documentElement.classList.add("has-search-overlay");
       document.querySelectorAll("[data-search-trigger]").forEach((el) => el.classList.add("active"));
-
-      if (location.hash !== "#/search") {
-        try { history.replaceState(null, "", "#/search"); } catch { /* ignore */ }
-      }
-
-      const page = document.querySelector("[data-search-page]");
-      if (!page) return;
-      // Initial paint · Google-style two-state markup. Both the
-      // hero (kicker / wordmark / caption) and the head row (input
-      // + result-count meta) live in the DOM together so the
-      // `.is-initial` ↔ `.has-results` flip is purely a CSS class
-      // change — the input element stays put so its value / focus
-      // / cursor survive the swap. The doc-level `[data-search-
-      // input]` listener (~line 15486) calls `runSearch(value)` on
-      // every input event; the clear button (~line 14577) routes
-      // back through `runSearch("")`.
-      const lastQuery = this._searchLastQuery || "";
-      const startsInResults = lastQuery.length > 0;
-      page.className = "search-page " + (startsInResults ? "has-results" : "is-initial");
-      // Perplexity-style hero · calm conversational tagline above
-      // a substantial card-style input with an internal footer
-      // toolbar (mono hint left, lime send button right). Starter
-      // chips below give one-click into common queries. The same
-      // input element serves both states; `.is-initial` styles
-      // make the wrapping `.search-card` look like a standalone
-      // card, while `.has-results` strips the card chrome and
-      // collapses input + meta into a compact head row.
-      // 8-bit ambient deco · scattered pixel constellation that
-      // gives the page texture without competing with the hero.
-      // All coordinates picked by hand to avoid the "regular
-      // grid" feel · varied densities + 3 lime accents land
-      // the eye softly. CSS masks the bottom edge to a fade so
-      // it never crowds the card. Static · no animation,
-      // pointer-events: none, aria-hidden.
-      const BG_DECO_SVG = `
-        <svg viewBox="0 0 800 280" preserveAspectRatio="xMidYMin slice"
-             shape-rendering="crispEdges" aria-hidden="true">
-          <!-- Faint pixel dots · scattered, mostly 2×2. -->
-          <g fill="var(--line-bright, #2A2A26)">
-            <rect x="32"  y="38"  width="2" height="2"/>
-            <rect x="78"  y="22"  width="2" height="2"/>
-            <rect x="118" y="62"  width="2" height="2"/>
-            <rect x="156" y="30"  width="2" height="2"/>
-            <rect x="206" y="78"  width="2" height="2"/>
-            <rect x="254" y="44"  width="2" height="2"/>
-            <rect x="298" y="92"  width="2" height="2"/>
-            <rect x="342" y="26"  width="2" height="2"/>
-            <rect x="388" y="68"  width="2" height="2"/>
-            <rect x="436" y="38"  width="2" height="2"/>
-            <rect x="486" y="86"  width="2" height="2"/>
-            <rect x="528" y="50"  width="2" height="2"/>
-            <rect x="572" y="22"  width="2" height="2"/>
-            <rect x="618" y="74"  width="2" height="2"/>
-            <rect x="664" y="42"  width="2" height="2"/>
-            <rect x="708" y="88"  width="2" height="2"/>
-            <rect x="752" y="32"  width="2" height="2"/>
-            <rect x="60"  y="118" width="2" height="2"/>
-            <rect x="146" y="142" width="2" height="2"/>
-            <rect x="222" y="116" width="2" height="2"/>
-            <rect x="316" y="148" width="2" height="2"/>
-            <rect x="402" y="124" width="2" height="2"/>
-            <rect x="488" y="158" width="2" height="2"/>
-            <rect x="572" y="118" width="2" height="2"/>
-            <rect x="654" y="146" width="2" height="2"/>
-            <rect x="734" y="124" width="2" height="2"/>
-            <rect x="92"  y="180" width="2" height="2"/>
-            <rect x="186" y="206" width="2" height="2"/>
-            <rect x="278" y="186" width="2" height="2"/>
-            <rect x="370" y="216" width="2" height="2"/>
-            <rect x="462" y="194" width="2" height="2"/>
-            <rect x="554" y="222" width="2" height="2"/>
-            <rect x="646" y="198" width="2" height="2"/>
-            <rect x="724" y="226" width="2" height="2"/>
-          </g>
-          <!-- Mid accents · 4×4 squares, lime-dim. -->
-          <g fill="var(--lime-dim, #2D5532)">
-            <rect x="226" y="46"  width="4" height="4"/>
-            <rect x="514" y="100" width="4" height="4"/>
-            <rect x="694" y="170" width="4" height="4"/>
-          </g>
-          <!-- Pixel "plus" accents · evoke the 8-bit
-               star/sparkle vocabulary. Lime-dim. -->
-          <g fill="var(--lime-dim, #2D5532)">
-            <!-- top-left plus -->
-            <rect x="98"  y="78"  width="6" height="2"/>
-            <rect x="100" y="76"  width="2" height="6"/>
-            <!-- mid-right plus -->
-            <rect x="640" y="62"  width="6" height="2"/>
-            <rect x="642" y="60"  width="2" height="6"/>
-            <!-- lower-left plus -->
-            <rect x="354" y="178" width="6" height="2"/>
-            <rect x="356" y="176" width="2" height="6"/>
-          </g>
-          <!-- Bright accents · sparse, lime. Catch-the-eye
-               points scattered at the visual rule-of-thirds. -->
-          <g fill="var(--lime, #6FB572)">
-            <rect x="170" y="98"  width="3" height="3"/>
-            <rect x="540" y="38"  width="3" height="3"/>
-            <rect x="416" y="170" width="3" height="3"/>
-          </g>
-          <!-- Pixel "frame" segments · short hairline brackets at
-               the very top corners · evoke a CRT scanlines feel
-               without a full grid. -->
-          <g fill="var(--line-bright, #2A2A26)">
-            <rect x="14"  y="14"  width="20" height="2"/>
-            <rect x="14"  y="14"  width="2"  height="20"/>
-            <rect x="766" y="14"  width="20" height="2"/>
-            <rect x="784" y="14"  width="2"  height="20"/>
-          </g>
-        </svg>
-      `;
-      // Results-only deco · second 8-bit layer that mounts on
-      // top of the constellation when .has-results is active.
-      // Adds proper "search station" character: pixel antennas
-      // anchoring the corners, scattered "+" sparkles between
-      // them, denser dot field, and a horizon-tick floor at
-      // the bottom of the band. CSS scanlines (declared in
-      // index.html) sit underneath via background-image.
-      const RESULTS_DECO_SVG = `
-        <svg viewBox="0 0 800 130" preserveAspectRatio="xMidYMin slice"
-             shape-rendering="crispEdges" aria-hidden="true">
-          <!-- Left antenna · vertical mast + 2 crossbars +
-               base tile. Reads as a pixel radio tower. -->
-          <g fill="var(--line-bright, #2A2A26)">
-            <rect x="22"  y="40"  width="2"  height="74"/>
-            <rect x="18"  y="56"  width="10" height="2"/>
-            <rect x="20"  y="74"  width="6"  height="2"/>
-            <rect x="14"  y="114" width="18" height="3"/>
-          </g>
-          <!-- Left antenna blink tip · static lime accent. -->
-          <rect x="22"  y="36"  width="2" height="2" fill="var(--lime, #6FB572)"/>
-          <!-- Right antenna · mirror of the left. -->
-          <g fill="var(--line-bright, #2A2A26)">
-            <rect x="776" y="44"  width="2"  height="70"/>
-            <rect x="772" y="60"  width="10" height="2"/>
-            <rect x="774" y="78"  width="6"  height="2"/>
-            <rect x="768" y="114" width="18" height="3"/>
-          </g>
-          <rect x="776" y="40"  width="2" height="2" fill="var(--lime, #6FB572)"/>
-          <!-- Pixel "+" sparkles · scattered in the central
-               band between the antennas. Reads as scanner
-               pings. -->
-          <g fill="var(--lime-dim, #2D5532)">
-            <rect x="138" y="44"  width="6" height="2"/>
-            <rect x="140" y="42"  width="2" height="6"/>
-            <rect x="324" y="68"  width="6" height="2"/>
-            <rect x="326" y="66"  width="2" height="6"/>
-            <rect x="498" y="34"  width="6" height="2"/>
-            <rect x="500" y="32"  width="2" height="6"/>
-            <rect x="612" y="86"  width="6" height="2"/>
-            <rect x="614" y="84"  width="2" height="6"/>
-            <rect x="220" y="92"  width="6" height="2"/>
-            <rect x="222" y="90"  width="2" height="6"/>
-            <rect x="700" y="50"  width="6" height="2"/>
-            <rect x="702" y="48"  width="2" height="6"/>
-          </g>
-          <!-- Dense pixel-dot field · layered on top of the
-               existing constellation to thicken the header. -->
-          <g fill="var(--line-bright, #2A2A26)">
-            <rect x="62"  y="28"  width="2" height="2"/>
-            <rect x="106" y="78"  width="2" height="2"/>
-            <rect x="170" y="34"  width="2" height="2"/>
-            <rect x="248" y="56"  width="2" height="2"/>
-            <rect x="288" y="22"  width="2" height="2"/>
-            <rect x="370" y="50"  width="2" height="2"/>
-            <rect x="412" y="92"  width="2" height="2"/>
-            <rect x="468" y="68"  width="2" height="2"/>
-            <rect x="544" y="84"  width="2" height="2"/>
-            <rect x="588" y="44"  width="2" height="2"/>
-            <rect x="668" y="76"  width="2" height="2"/>
-            <rect x="722" y="32"  width="2" height="2"/>
-            <rect x="84"  y="98"  width="2" height="2"/>
-            <rect x="262" y="100" width="2" height="2"/>
-          </g>
-          <!-- Bright lime accent dots · 2 only, at rule-of-
-               thirds positions. Catches the eye. -->
-          <g fill="var(--lime, #6FB572)">
-            <rect x="266" y="40"  width="3" height="3"/>
-            <rect x="566" y="74"  width="3" height="3"/>
-          </g>
-          <!-- Horizon ticks · faint dashed pixel line near
-               the bottom edge of the band. Acts as visual
-               "floor" the antennas plant on. -->
-          <g fill="var(--line, #1A1A18)">
-            <rect x="40"  y="122" width="6" height="1"/>
-            <rect x="60"  y="122" width="2" height="1"/>
-            <rect x="76"  y="122" width="6" height="1"/>
-            <rect x="96"  y="122" width="2" height="1"/>
-            <rect x="112" y="122" width="6" height="1"/>
-            <rect x="132" y="122" width="2" height="1"/>
-            <rect x="148" y="122" width="6" height="1"/>
-            <rect x="168" y="122" width="2" height="1"/>
-            <rect x="184" y="122" width="6" height="1"/>
-            <rect x="204" y="122" width="2" height="1"/>
-            <rect x="220" y="122" width="6" height="1"/>
-            <rect x="240" y="122" width="2" height="1"/>
-            <rect x="256" y="122" width="6" height="1"/>
-            <rect x="276" y="122" width="2" height="1"/>
-            <rect x="292" y="122" width="6" height="1"/>
-            <rect x="312" y="122" width="2" height="1"/>
-            <rect x="328" y="122" width="6" height="1"/>
-            <rect x="348" y="122" width="2" height="1"/>
-            <rect x="364" y="122" width="6" height="1"/>
-            <rect x="384" y="122" width="2" height="1"/>
-            <rect x="400" y="122" width="6" height="1"/>
-            <rect x="420" y="122" width="2" height="1"/>
-            <rect x="436" y="122" width="6" height="1"/>
-            <rect x="456" y="122" width="2" height="1"/>
-            <rect x="472" y="122" width="6" height="1"/>
-            <rect x="492" y="122" width="2" height="1"/>
-            <rect x="508" y="122" width="6" height="1"/>
-            <rect x="528" y="122" width="2" height="1"/>
-            <rect x="544" y="122" width="6" height="1"/>
-            <rect x="564" y="122" width="2" height="1"/>
-            <rect x="580" y="122" width="6" height="1"/>
-            <rect x="600" y="122" width="2" height="1"/>
-            <rect x="616" y="122" width="6" height="1"/>
-            <rect x="636" y="122" width="2" height="1"/>
-            <rect x="652" y="122" width="6" height="1"/>
-            <rect x="672" y="122" width="2" height="1"/>
-            <rect x="688" y="122" width="6" height="1"/>
-            <rect x="708" y="122" width="2" height="1"/>
-            <rect x="724" y="122" width="6" height="1"/>
-            <rect x="744" y="122" width="2" height="1"/>
-            <rect x="760" y="122" width="6" height="1"/>
-          </g>
-        </svg>
-      `;
-      page.innerHTML = `
-        <!-- 8-bit ambient deco · top-of-page background overlay
-             for the is-initial state. Stays visible (dimmer)
-             in has-results as the base atmosphere layer. -->
-        <div class="search-bg-deco">${BG_DECO_SVG}</div>
-        <!-- Results-only deco · second layer with antennas +
-             sparkles + horizon ticks + CSS scanlines (in CSS).
-             Hidden in is-initial via opacity. -->
-        <div class="search-results-deco">${RESULTS_DECO_SVG}</div>
-        <!-- Hero · matches the new-room composer's two-row header ·
-             a mono caps greeting (cmp-greet · "Good afternoon, Kay")
-             above the headline. The old "across every room ..." sub-
-             line moved INSIDE the search-card's topbar so the card
-             itself surfaces its scope, matching .cmp-input-frame. -->
-        <div class="search-hero">
-          <div class="cmp-greet">${this.escape(this.composerGreeting(this.composerLanguage(), (this.prefs?.name || "you").trim() || "you"))}</div>
-          <h1 class="search-hero-title">Search every conversation</h1>
-        </div>
-        <!-- Card · is-initial = framed input with a brand-tinted
-             topbar hosting the scope hint, then the input below;
-             has-results = flex row with the meta beside it, topbar
-             collapsed via CSS. Mirrors new-room .cmp-input-frame. -->
-        <div class="search-card${lastQuery ? "" : " is-empty"}" data-search-card>
-          <div class="search-topbar">
-            <span class="search-topbar-hint">across every room · keyword · message body · room name</span>
-          </div>
-          <div class="search-input-wrap">
-            <span class="search-input-icon" aria-hidden="true">
-              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
-                <circle cx="7" cy="7" r="4.5"/>
-                <line x1="10.3" y1="10.3" x2="13.5" y2="13.5"/>
-              </svg>
-            </span>
-            <input type="text" class="search-input" data-search-input
-                   placeholder="Find a keyword, decision, or name across rooms"
-                   value="${this.escape(lastQuery)}"
-                   spellcheck="false"
-                   autocomplete="off">
-            <button type="button" class="search-input-clear" data-search-clear aria-label="Clear" title="Clear">✕</button>
-          </div>
-          <!-- Sort filter · only visible in .has-results. Toggle
-               between newest-first (default) and oldest-first.
-               Click handler in the doc-level delegate updates
-               app._searchSort and re-renders from the cached
-               result list (no re-fetch). -->
-          <div class="search-results-sort" data-search-sort>
-            <span class="srs-label">sort</span>
-            <button type="button" data-search-sort-by="newest" class="active">Newest</button>
-            <button type="button" data-search-sort-by="oldest">Oldest</button>
-          </div>
-          <span class="search-results-meta" data-search-results-meta></span>
-        </div>
-        <!-- Static starter chips · one click pre-fills the input
-             and triggers the search. Hidden once the user types
-             anything (.has-results). System UI English-only. -->
-        <div class="search-starters" data-search-starters>
-          <span class="search-starters-label">try</span>
-          <button type="button" class="search-starter" data-search-starter="decision">decision</button>
-          <button type="button" class="search-starter" data-search-starter="next step">next step</button>
-          <button type="button" class="search-starter" data-search-starter="risk">risk</button>
-          <button type="button" class="search-starter" data-search-starter="ship">ship</button>
-        </div>
-        <div class="search-results" data-search-results></div>
-      `;
-      // Initialise the sort default · defaults to "newest"
-      // (most recent matches first). The chip group reads from
-      // this on every render to set the active state.
-      if (this._searchSort !== "oldest") this._searchSort = "newest";
-      this._refreshSortChips();
-      const inputEl = page.querySelector("[data-search-input]");
-      if (inputEl) {
-        // Defer focus so the layout settles + view is visible.
-        setTimeout(() => inputEl.focus(), 50);
-        if (lastQuery) {
-          // Re-run last search on re-open so the user sees their
-          // prior results without retyping.
-          this.runSearch(lastQuery);
-        }
+      const input = overlay.querySelector("[data-search-input]");
+      if (input) {
+        const last = this._searchLastQuery || "";
+        if (input.value !== last) input.value = last;
+        setTimeout(() => { input.focus(); input.select(); }, 30);
+        if (last) this.runSearch(last);
       }
     },
 
-    /** Flip the page-level state class. `is-initial` mounts the
-     *  vertical-centre hero; `has-results` collapses the hero and
-     *  shrinks the input into a head row beside the meta. Called
-     *  from runSearch whenever the query crosses the empty
-     *  threshold (and on cold mount in renderSearchPage). */
-    _setSearchPageState(state) {
-      const page = document.querySelector("[data-search-page]");
-      if (!page) return;
-      page.classList.toggle("is-initial", state === "initial");
-      page.classList.toggle("has-results", state !== "initial");
+    /** Close the floating search overlay. Leaves the underlying
+     *  view exactly as it was. Doesn't clear the input or cached
+     *  query — re-open restores them via openSearch. */
+    closeSearchOverlay() {
+      const overlay = document.querySelector("[data-search-overlay]");
+      if (!overlay) return;
+      overlay.setAttribute("hidden", "");
+      overlay.setAttribute("aria-hidden", "true");
+      document.documentElement.classList.remove("has-search-overlay");
+      document.querySelectorAll("[data-search-trigger]").forEach((el) => el.classList.remove("active"));
+    },
+
+    /** Static HTML for the empty-state placeholder · captured
+     *  here so runSearch("") can restore the same markup that
+     *  index.html mounts initially. */
+    _searchOverlayEmptyHtml() {
+      const title = (this._t && this._t("search_overlay_empty_title")) || "Search across rooms and messages";
+      const hint = (this._t && this._t("search_overlay_empty_hint")) || "Type to filter live · click a result to jump";
+      return `<div class="search-overlay-empty">
+        <svg class="search-overlay-empty-icon" viewBox="0 0 64 64" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <circle cx="27" cy="27" r="17"/>
+          <line x1="50" y1="50" x2="39" y2="39"/>
+          <line x1="21" y1="27" x2="33" y2="27" opacity="0.45"/>
+          <line x1="21" y1="22" x2="28" y2="22" opacity="0.3"/>
+          <line x1="21" y1="32" x2="30" y2="32" opacity="0.3"/>
+        </svg>
+        <div class="search-overlay-empty-text">${this.escape(title)}</div>
+        <div class="search-overlay-empty-hint">${this.escape(hint)}</div>
+      </div>`;
     },
 
     /** Debounced search · 200ms after last keystroke we hit
@@ -8763,118 +8836,55 @@
       }
       const seq = (this._searchSeq = (this._searchSeq || 0) + 1);
       const target = document.querySelector("[data-search-results]");
-      const metaEl = document.querySelector("[data-search-results-meta]");
-      // Keep the card's empty-state class in sync with the live
-      // query · the CSS class hides the trailing ✕ when the
-      // input is genuinely empty so the hero's right edge stays
-      // clean before the user has typed anything.
-      const card = document.querySelector("[data-search-card]");
-      if (card) card.classList.toggle("is-empty", q.length === 0);
       if (!target) return;
       if (q.length === 0) {
-        // Empty query · snap back to the hero (initial state),
-        // clear the results list + meta. The CSS hides both via
-        // `.is-initial`; we still wipe innerHTML so a later
-        // .has-results flip doesn't briefly show stale rows.
-        this._setSearchPageState("initial");
-        target.innerHTML = "";
-        if (metaEl) metaEl.textContent = "";
+        target.innerHTML = this._searchOverlayEmptyHtml();
         return;
       }
-      // Non-empty query · flip to results state (CSS fades the
-      // hero out, shrinks the input into the head row) and show
-      // a small "searching…" placeholder while the fetch is in
-      // flight. The meta line takes a beat to populate.
-      this._setSearchPageState("results");
-      target.innerHTML = `<div class="search-empty"><span class="search-empty-kicker">// searching</span><div class="search-empty-msg">…</div></div>`;
-      if (metaEl) metaEl.textContent = "";
+      target.innerHTML = `<div class="search-overlay-status"><span class="search-overlay-status-kicker">// searching</span><div class="search-overlay-status-msg">…</div></div>`;
       this._searchDebounceTimer = setTimeout(async () => {
         try {
           const r = await fetch("/api/search?q=" + encodeURIComponent(q));
           if (!r.ok) throw new Error("HTTP " + r.status);
           const j = await r.json();
-          if (seq !== this._searchSeq) return; // stale
+          if (seq !== this._searchSeq) return;
           this.renderSearchResults(j.results || [], q);
         } catch (e) {
           if (seq !== this._searchSeq) return;
-          target.innerHTML = `<div class="search-empty"><span class="search-empty-kicker">// error</span><div class="search-empty-msg">${this.escape(String(e && e.message ? e.message : e))}</div></div>`;
+          target.innerHTML = `<div class="search-overlay-status"><span class="search-overlay-status-kicker">// error</span><div class="search-overlay-status-msg">${this.escape(String(e && e.message ? e.message : e))}</div></div>`;
         }
       }, 200);
     },
 
-    /** Render the search results list · flat ordered list with
-     *  Google-style 3-line rows (mono source breadcrumb → sans
-     *  link title → sans snippet body). Per-row chrome is defined
-     *  in `renderSearchResultRow`. The sort order ("newest" /
-     *  "oldest") is read from `app._searchSort` (default
-     *  "newest") and re-applied client-side by `_applySearchSort`
-     *  whenever the user clicks a sort chip — no re-fetch. */
+    /** Render the result list · flat `<ul.search-overlay-list>` of
+     *  `.so-row` rows, sorted newest-first by createdAt. 0-match
+     *  shows a status block in place of the list. */
     renderSearchResults(results, query) {
       const target = document.querySelector("[data-search-results]");
-      const metaEl = document.querySelector("[data-search-results-meta]");
       if (!target) return;
-      // Cache the raw response so the sort chip click can re-
-      // render without hitting the server again. Also store the
-      // query so the row builder knows what to highlight.
       this._searchLastResults = Array.isArray(results) ? results.slice() : [];
       this._searchLastQueryRendered = query || "";
       if (!results || results.length === 0) {
-        if (metaEl) metaEl.textContent = `0 matches`;
-        target.innerHTML = `<div class="search-empty"><span class="search-empty-kicker">// no matches</span><div class="search-empty-msg">No messages match "${this.escape(query)}". Try a shorter or different term.</div></div>`;
+        target.innerHTML = `<div class="search-overlay-status"><span class="search-overlay-status-kicker">// no matches</span><div class="search-overlay-status-msg">No messages match "${this.escape(query)}". Try a shorter or different term.</div></div>`;
         return;
       }
-      const sorted = this._applySearchSort(results);
-      const roomSet = new Set(sorted.map((r) => r.roomId));
-      if (metaEl) {
-        metaEl.textContent =
-          `${sorted.length} match${sorted.length === 1 ? "" : "es"} · ` +
-          `${roomSet.size} room${roomSet.size === 1 ? "" : "s"}`;
-      }
+      const sorted = results.slice().sort((a, b) => ((b && b.createdAt) || 0) - ((a && a.createdAt) || 0));
       const rows = sorted.map((hit) => this.renderSearchResultRow(hit, query)).join("");
-      target.innerHTML = `<ul class="search-results-list">${rows}</ul>`;
-    },
-
-    /** Sort a results array by createdAt according to the current
-     *  `app._searchSort` setting. Returns a NEW array so the
-     *  cached `_searchLastResults` stays in original order. */
-    _applySearchSort(results) {
-      const order = this._searchSort === "oldest" ? "oldest" : "newest";
-      const sorted = (results || []).slice();
-      sorted.sort((a, b) => {
-        const aT = (a && a.createdAt) || 0;
-        const bT = (b && b.createdAt) || 0;
-        return order === "oldest" ? aT - bT : bT - aT;
-      });
-      return sorted;
+      target.innerHTML = `<ul class="search-overlay-list">${rows}</ul>`;
     },
 
-    /** Sync the active state on the sort chips so the lit button
-     *  reflects `app._searchSort`. Called from the chip click
-     *  handler + on initial mount. */
-    _refreshSortChips() {
-      const order = this._searchSort === "oldest" ? "oldest" : "newest";
-      document.querySelectorAll("[data-search-sort-by]").forEach((btn) => {
-        btn.classList.toggle("active", btn.getAttribute("data-search-sort-by") === order);
-      });
-    },
-
-    /** Build one Google-style result row · three stacked text
-     *  lines:
-     *    1. Source breadcrumb (mono caption, faint) · author name
-     *       + time-ago — the "URL row" equivalent.
-     *    2. Title (sans link, lime on hover) · the room subject
-     *       (truncated). Clicking jumps to `#/r/<id>?m=<mid>&q=
-     *       <q>` exactly like the previous flat-list row.
-     *    3. Snippet (sans body, soft tone) · 2-line clamp of the
-     *       message context with `<mark>` highlight on the
-     *       matched keyword.
-     *  Snippet window (~110 lead, ~180 trail) is unchanged from
-     *  the prior implementation — the change is purely visual. */
+    /** Build one overlay result row · grid layout (icon | title |
+     *  meta · snippet spans cols 2-3). `<mark>` wraps the matched
+     *  fragment inside the snippet so the keyword stays visible
+     *  inside the truncated context. Click → `#/r/{roomId}?m=
+     *  {msgId}&q={q}` — same hash-router path the prior page used,
+     *  so message-jump + keyword-flash on the destination is
+     *  unchanged. */
     renderSearchResultRow(hit, query) {
       const body = hit.body || "";
       const offset = Math.max(0, hit.matchOffset || 0);
       const ql = (query || "").length;
-      const LEAD = 110, TRAIL = 180;
+      const LEAD = 60, TRAIL = 120;
       const start = Math.max(0, offset - LEAD);
       const end = Math.min(body.length, offset + ql + TRAIL);
       const prefix = start > 0 ? "…" : "";
@@ -8888,31 +8898,12 @@
         `<mark>${this.escape(flat(matched))}</mark>` +
         this.escape(flat(after) + suffix);
       const roomTitle = (hit.roomTitle || "Untitled room").trim() || "Untitled room";
-      const author = (hit.authorName || "").trim() || "Director";
       const timeAgo = hit.createdAt ? this.relTime(hit.createdAt) : "";
       const qParam = query ? `&q=${encodeURIComponent(query)}` : "";
-      // Source breadcrumb · author + relative time. No "from"
-      // label · room title is now the prominent title line (where
-      // the user navigates to), so the breadcrumb only needs to
-      // identify the speaker + when.
-      const sourceLine =
-        `<span class="sr-source-author">${this.escape(author)}</span>` +
-        (timeAgo
-          ? `<span class="sr-source-sep">·</span><span class="sr-source-time">${this.escape(timeAgo)}</span>`
-          : "");
-      return `
-        <li>
-          <a href="#/r/${this.escape(hit.roomId)}?m=${this.escape(hit.messageId)}${qParam}"
-             class="sr-row"
-             data-search-jump-room="${this.escape(hit.roomId)}"
-             data-search-jump-msg="${this.escape(hit.messageId)}"
-             data-search-jump-q="${this.escape(query || "")}">
-            <div class="sr-source">${sourceLine}</div>
-            <div class="sr-title">${this.escape(roomTitle)}</div>
-            <div class="sr-snippet">${snippet}</div>
-          </a>
-        </li>
-      `;
+      // Lucide MessageSquare · chat-bubble icon matching the
+      // Claude search.png reference. Inherit currentColor.
+      const icon = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>`;
+      return `<li><a href="#/r/${this.escape(hit.roomId)}?m=${this.escape(hit.messageId)}${qParam}" class="so-row" data-search-jump-room="${this.escape(hit.roomId)}" data-search-jump-msg="${this.escape(hit.messageId)}" data-search-jump-q="${this.escape(query || "")}"><span class="so-row-icon">${icon}</span><span class="so-row-title">${this.escape(roomTitle)}</span><span class="so-row-meta">${this.escape(timeAgo)}</span><span class="so-row-snippet">${snippet}</span></a></li>`;
     },
 
     /** Render the All Notes timeline · same filter-strip + date-
@@ -10241,182 +10232,6 @@
      *  tune live as a slim toolbar inside its bottom edge so the page
      *  has one clear gravitational centre, not three competing form
      *  fields. */
-    /** 8-bit ambient backdrop · same vocabulary as the Search page's
-     *  `.search-bg-deco` (crispEdges pixel motifs, lime accents) but
-     *  scene-tuned for each composer:
-     *    · room  → mini boardroom (pixel table + 4 chair silhouettes)
-     *    · agent → row of pixel character heads w/ speech bubbles
-     *  Constellation dots + corner brackets are shared. Returns plain
-     *  SVG markup ready to drop into `.cmp-bg-deco`. */
-    composerBgDecoSvg(scene) {
-      // Helper · stagger animation-delays so siblings don't pulse in
-      // lockstep. Returns a string like `style="animation-delay: 1.2s"`.
-      // The pseudo-random offset is index-based so it's deterministic
-      // (no flicker between renders).
-      const _delay = (i, base) => `style="animation-delay: ${(((i * 137) % 100) / 100 * base).toFixed(2)}s"`;
-      // Constellation dots + lime accents + corner brackets · shared
-      // ambient "8-bit sky" the user singled out as the visual goal.
-      // Each dot animates with `deco-twinkle` keyframes for a slow
-      // opacity blink, staggered by index so the field shimmers
-      // organically instead of pulsing as a single beat.
-      const scatterDots = [
-        [32, 38], [78, 22], [118, 62], [156, 30], [206, 78], [254, 44],
-        [298, 92], [342, 26], [388, 68], [436, 38], [486, 86], [528, 50],
-        [572, 22], [618, 74], [664, 42], [708, 88], [752, 32], [60, 200],
-        [186, 216], [278, 196], [554, 222], [646, 198], [734, 226],
-      ];
-      const limeAccents = [
-        // Dropped the centre-lower lime dot (416, 170) — it sat
-        // directly behind the H1 prompt and read as a typo.
-        [170, 98], [540, 38],
-      ];
-      const scatter = `
-        <g fill="var(--line-bright, #2A2A26)">
-          ${scatterDots.map(([x, y], i) =>
-            `<rect class="deco-twinkle" ${_delay(i, 4.5)} x="${x}" y="${y}" width="2" height="2"/>`
-          ).join("")}
-        </g>
-        <g fill="var(--lime, #6FB572)">
-          ${limeAccents.map(([x, y], i) =>
-            `<rect class="deco-shine" ${_delay(i + 7, 2.8)} x="${x}" y="${y}" width="3" height="3"/>`
-          ).join("")}
-        </g>
-        <g fill="var(--line-bright, #2A2A26)">
-          <rect x="14"  y="14"  width="20" height="2"/>
-          <rect x="14"  y="14"  width="2"  height="20"/>
-          <rect x="766" y="14"  width="20" height="2"/>
-          <rect x="784" y="14"  width="2"  height="20"/>
-        </g>
-      `;
-      // Scene-specific MINI motifs · small scattered 8-bit glyphs that
-      // theme the constellation without occupying the centre stage.
-      // Replaces the previous big centred tableau (table + chairs /
-      // row of character heads) — the user wanted ambient dots /
-      // sparkles tinted with each composer's flavour, not a literal
-      // scene in the hero band. Each motif is ≤ 14×14 px so the band
-      // still reads as scatter, not a feature illustration.
-      let motif = "";
-      if (scene === "room") {
-        // Room scene · tiny pixel chairs + mics + plus-sparkles + a
-        // few pixel "speech-mark" pairs (boardroom vocabulary). All
-        // in the warm wood / cyan moderator palette so the scatter
-        // tints toward "meeting" without ever forming a tableau.
-        // Each group carries an animation class · `deco-bob` for
-        // chairs, `deco-spark` for "+" glyphs, `deco-twinkle` for
-        // quote dots. Inline animation-delays stagger across siblings
-        // so the field never pulses in lockstep.
-        // Center-lower zone (roughly x ∈ [280, 520], y > 140) is
-        // where the H1 "What's on your mind today?" prompt lands.
-        // Cleared of motif elements so the chairs / mics / sparks /
-        // quote dots never collide with the title text · the deco
-        // stays visible only at the periphery + along the top band.
-        // Same hygiene pass as the agent composer's motif.
-        // All motif fills below pull from theme tokens (`--accent-line`
-        // is the brand-tinted hairline = very subtle in both themes)
-        // so the backdrop adopts the page's palette instead of staying
-        // a fixed wood-brown patch that looks "dirty" on a light bg.
-        const chairs = [
-          { x: 108, y: 138 },
-          { x: 372, y: 46 },
-          { x: 678, y: 148 },
-        ];
-        const sparks = [
-          [98, 78], [640, 62], [588, 156],
-        ];
-        const quotes = [
-          [148, 110], [152, 110], [716, 98], [720, 98],
-        ];
-        motif = `
-          <g shape-rendering="crispEdges">
-            <!-- Mini chair silhouettes — fill pulled from theme token -->
-            ${chairs.map((c, i) => `
-              <g class="deco-bob" ${_delay(i + 3, 3.2)} fill="var(--accent-line)">
-                <rect x="${c.x}" y="${c.y + 10}" width="6" height="2"/>
-                <rect x="${c.x}" y="${c.y}"      width="2" height="10"/>
-                <rect x="${c.x + 6}" y="${c.y}"  width="2" height="10"/>
-              </g>
-            `).join("")}
-            <!-- Tiny microphones · static (small, would feel busy). -->
-            <g fill="var(--accent-line)">
-              <rect x="226" y="46"  width="3" height="2"/>
-              <rect x="227" y="42"  width="1" height="4"/>
-              <rect x="514" y="100" width="3" height="2"/>
-              <rect x="515" y="96"  width="1" height="4"/>
-            </g>
-            <!-- Wood-tone "+" sparkles · scale-pulse animation -->
-            ${sparks.map(([x, y], i) => `
-              <g class="deco-spark" ${_delay(i + 11, 2.4)} fill="var(--amber-dim, #5C3A1F)">
-                <rect x="${x}"     y="${y + 2}" width="6" height="2"/>
-                <rect x="${x + 2}" y="${y}"     width="2" height="6"/>
-              </g>
-            `).join("")}
-            <!-- Pixel "quote marks" · 2-dot pairs, twinkle in sync -->
-            ${quotes.map(([x, y], i) =>
-              `<rect class="deco-twinkle" ${_delay(i + 17, 3.5)} x="${x}" y="${y}" width="2" height="2" fill="var(--lime-dim, #2D5532)"/>`
-            ).join("")}
-          </g>
-        `;
-      } else if (scene === "agent") {
-        // Agent scene · tiny pixel character heads (4×4) + mini
-        // speech bubbles (5×3) + lime sparkles · evokes "cast / new
-        // persona" without ever forming a centre tableau. Heads are
-        // small enough to read as constellation, not as portraits.
-        // Heads bob, bubbles blink in / out, sparkles pulse.
-        // Center-lower zone (roughly x ∈ [280, 520], y > 140) is
-        // where the H1 "What do you want to build?" prompt lands.
-        // Cleared of motif elements so the heads / bubbles / sparks
-        // never collide with the title text · the deco stays
-        // visible only at the periphery + along the top band.
-        const heads = [
-          [124, 48], [498, 64], [676, 178], [218, 200],
-        ];
-        const bubbles = [
-          [170, 68], [362, 92], [552, 46], [612, 206],
-        ];
-        const ideaSparks = [
-          [68, 118], [724, 138], [84, 186],
-        ];
-        motif = `
-          <g shape-rendering="crispEdges">
-            <!-- Mini character heads · fills pulled from theme tokens
-                 so the heads stop reading as out-of-place skin-tan +
-                 dark-brown patches against a white bg. -->
-            ${heads.map(([x, y], i) => `
-              <g class="deco-bob" ${_delay(i + 21, 3.0)}>
-                <rect x="${x}" y="${y}" width="4" height="4" fill="var(--accent-line)"/>
-                <rect x="${x}" y="${y}" width="4" height="1" fill="var(--lime-dim)"/>
-              </g>
-            `).join("")}
-            <!-- Tiny speech bubbles · 10×6 pill with 1-pixel tail · blink -->
-            ${bubbles.map(([x, y], i) => `
-              <g class="deco-blink" ${_delay(i + 27, 4.0)}>
-                <rect x="${x}"     y="${y}"     width="10" height="6" fill="var(--panel-3, #1A1A18)"/>
-                <rect x="${x}"     y="${y}"     width="10" height="1" fill="var(--lime-dim, #2D5532)"/>
-                <rect x="${x}"     y="${y + 5}" width="10" height="1" fill="var(--lime-dim, #2D5532)"/>
-                <rect x="${x}"     y="${y}"     width="1"  height="6" fill="var(--lime-dim, #2D5532)"/>
-                <rect x="${x + 9}" y="${y}"     width="1"  height="6" fill="var(--lime-dim, #2D5532)"/>
-                <rect x="${x + 2}" y="${y + 6}" width="2"  height="1" fill="var(--lime-dim, #2D5532)"/>
-              </g>
-            `).join("")}
-            <!-- Idea sparkles · "+" glyphs in lime-dim · scale pulse -->
-            ${ideaSparks.map(([x, y], i) => `
-              <g class="deco-spark" ${_delay(i + 33, 2.6)} fill="var(--lime-dim, #2D5532)">
-                <rect x="${x}"     y="${y + 2}" width="6" height="2"/>
-                <rect x="${x + 2}" y="${y}"     width="2" height="6"/>
-              </g>
-            `).join("")}
-          </g>
-        `;
-      }
-      return `
-        <svg viewBox="0 0 800 280" preserveAspectRatio="xMidYMin slice"
-             shape-rendering="crispEdges" aria-hidden="true">
-          ${scatter}
-          ${motif}
-        </svg>
-      `;
-    },
-
     renderComposerHtml(state) {
       const userName = (this.prefs?.name || "you").trim() || "you";
       const lang = this.composerLanguage();
@@ -10508,7 +10323,6 @@
 
       return `
         <section class="cmp">
-          <div class="cmp-bg-deco" aria-hidden="true">${this.composerBgDecoSvg("room")}</div>
           <header class="cmp-hero">
             <div class="cmp-greet">${this.escape(t.greet)}</div>
             <h1 class="cmp-prompt">${this.escape(t.prompt)}</h1>
@@ -10679,6 +10493,18 @@
       if (!ta) return;
       const MIN = 24;
       const MAX = 200;
+      // Empty value · clear the inline `height` entirely so CSS
+      // `min-height: 24px` reasserts the single-line baseline.
+      // Without this, a `style.height = "auto"` + scrollHeight cycle
+      // can leave the field at the prior tall value · Chromium
+      // sometimes returns the OLD scrollHeight when value was just
+      // cleared synchronously (layout invalidation doesn't always
+      // flush by the next read), so the post-send "shrink back"
+      // visually fails. Explicit unset bypasses the read entirely.
+      if (!ta.value) {
+        ta.style.removeProperty("height");
+        return;
+      }
       ta.style.height = "auto";
       const h = Math.min(MAX, Math.max(MIN, ta.scrollHeight));
       ta.style.height = h + "px";
@@ -11406,15 +11232,14 @@
       const ctaHint = builderMode === "full"
         ? "5–10 min · ReAct research + 7-phase build"
         : t.ctaHint;
-      // Celebrity seed cards · 6 random portraits from the pool of
+      // Celebrity seed cards · 4 random portraits from the pool of
       // (CELEBRITY_SEEDS_V1 ∪ generated) − consumed. New random
       // pick on every render so users browse a rotating set.
-      const celebrityCards = this._pickRandomCelebrities(6)
+      const celebrityCards = this._pickRandomCelebrities(4)
         .map((seed) => this.celebrityCardHtml(seed))
         .join("");
       return `
         <section class="cmp ag-cmp">
-          <div class="cmp-bg-deco" aria-hidden="true">${this.composerBgDecoSvg("agent")}</div>
           <header class="cmp-hero">
             <div class="cmp-greet">${this.escape(t.greet)}</div>
             <h1 class="cmp-prompt">${this.escape(t.prompt)}</h1>
@@ -13787,13 +13612,13 @@
       return pool.slice(0, take);
     },
 
-    /** Build the markup for the 4 visible scenario cards. Compact
+    /** Build the markup for the 2 visible scenario cards. Compact
      *  2-col grid layout — matches the celebrity seed cards on the
      *  new-agent page (mono kicker → serif italic headline → italic
      *  intro). No pills, no avatars, no CTA arrow — the entire card
      *  is one click target. */
     scenarioAdCardsHtml() {
-      return this._pickRandomScenarios(4)
+      return this._pickRandomScenarios(2)
         .map((c) => this.scenarioCardHtml(c))
         .join("");
     },
@@ -13961,7 +13786,6 @@
       // tokens are not routed through `_t()`.
       const statusWord = r.status !== "live" ? String(r.status).toUpperCase() : "";
       head.innerHTML = `
-        <button type="button" class="room-head-expand" data-sidebar-expand title="${this.escape(this._t("sidebar_expand"))}" aria-label="${this.escape(this._t("sidebar_expand"))}" data-tip="${this.escape(this._t("sidebar_expand"))}"></button>
         <div class="room-info">
           <div class="room-kicker">
             <span class="kicker-num">// ROOM #${r.number}</span>
@@ -13974,9 +13798,10 @@
           <h1 class="room-subject" title="${this.escape(r.subject)}">${this.escape(this._truncateRoomSubject(r.name || r.subject, 60))}</h1>
         </div>
         <div class="head-actions">
+          <a href="#" class="resume-btn" data-resume>[ ▶ ${this.escape(this._t("room_resume_verb"))} ]</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="pause-btn" data-pause>[ <span class="pause-icon">❚❚</span> ${this.escape(this._t("room_pause_verb"))} ]</a>
-          <a href="#" class="resume-btn" data-resume>[ ▶ ${this.escape(this._t("room_resume_verb"))} ]</a>
           <a href="#" class="head-icon-btn head-divergence" data-divergence-open data-tip="See how widely the room has explored your question" aria-label="Coverage check"></a>
           ${this.currentBrief
             ? (() => {
@@ -15830,14 +15655,36 @@
       const isChairCard =
         article.classList.contains("chair-direct") ||
         article.classList.contains("chair-intervention");
-      if (empty && streaming) {
+      // Single-active-speaker gate · the streaming animation belongs
+      // only to the director whose turn is currently visible per the
+      // server's queue-update activeMessageId field. In text mode this
+      // erases the brief same-frame flash where A's finalize and B's
+      // appended SSE events both run their DOM mutations in the same
+      // rAF — without the gate, both bubbles render `.streaming` and
+      // the user reads "two directors speaking at once." Chair cards
+      // and non-agent messages (user, system) keep their own
+      // streaming semantics; the gate only applies to director
+      // (agent.roleKind === "director") bubbles. We can't read
+      // roleKind here without a getter, so use the same heuristic
+      // updateMessageBodyDom already trusts: a regular .msg article
+      // that is NOT a chair-card is a director or user; user
+      // messages don't carry the streaming class anyway, so this
+      // narrows safely.
+      const isAgentArticle =
+        article.classList.contains("msg") &&
+        !article.classList.contains("user") &&
+        !isChairCard;
+      const activeId = this.currentActiveMessageId || null;
+      const speakingGate = !isAgentArticle || !activeId || messageId === activeId;
+      const wantStreaming = !!streaming && speakingGate;
+      if (empty && wantStreaming) {
         bubble.innerHTML = this.thinkingHtml();
         article.classList.add("thinking");
         article.classList.add(isChairCard ? "is-streaming" : "streaming");
       } else {
         bubble.innerHTML = this.renderBody(display);
         article.classList.toggle("thinking", false);
-        article.classList.toggle(isChairCard ? "is-streaming" : "streaming", !!streaming);
+        article.classList.toggle(isChairCard ? "is-streaming" : "streaming", wantStreaming);
         // Re-apply chairman's-notes highlights · the bubble's
         // innerHTML rewrite above wipes any previously-injected
         // .note-highlight spans. Skip mid-stream (offsets won't match
@@ -15848,6 +15695,21 @@
       }
     },
 
+    /** Re-evaluate the streaming class on a single bubble using its
+     *  current `meta.streaming` and the current activeMessageId. Used
+     *  by the queue-update SSE handler to flip the speaking animation
+     *  between A (finalized) and B (newly active) without waiting
+     *  for a token tick. No-op when the message isn't streaming or
+     *  the article isn't in the DOM yet. */
+    _refreshStreamingClassForId(messageId) {
+      if (!messageId) return;
+      const msg = this.currentMessages.find((m) => m.id === messageId);
+      if (!msg) return;
+      const streaming = !!(msg.meta && msg.meta.streaming);
+      if (!streaming) return;
+      this.updateMessageBodyDom(messageId, msg.body || "", true);
+    },
+
     /** Count of prior non-empty messages this speaker would see as context. */
     contextCountAt(messageId) {
       const idx = this.currentMessages.findIndex((m) => m.id === messageId);
@@ -16512,12 +16374,22 @@
 
       const empty = !displayBody;
       const streaming = m.meta && m.meta.streaming === true;
+      // Single-active-speaker gate · mirrors `updateMessageBodyDom`.
+      // For director (non-chair, non-user, agent) messages, only the
+      // bubble whose id matches the server's activeMessageId may
+      // wear the .streaming + .thinking classes. This keeps the
+      // first-paint and the live-update class state consistent so
+      // the text-mode "two directors flashing" race vanishes.
+      const isDirectorMsg = !isUser && !isChair;
+      const activeId = this.currentActiveMessageId || null;
+      const speakingGate = !isDirectorMsg || !activeId || m.id === activeId;
+      const wantStreaming = !!streaming && speakingGate;
       const stateCls = [];
-      if (streaming) stateCls.push("streaming");
-      if (empty && streaming && !isUser) stateCls.push("thinking");
+      if (wantStreaming) stateCls.push("streaming");
+      if (empty && wantStreaming) stateCls.push("thinking");
       if (metaKind) stateCls.push(`kind-${metaKind}`);
 
-      const bubbleHtml = (empty && streaming && !isUser)
+      const bubbleHtml = (empty && wantStreaming)
         ? this.thinkingHtml()
         : this.renderBody(displayBody);
 
@@ -18169,6 +18041,184 @@
      *  `.roundtable-stage`, so it's automatically hidden by the
      *  stage's `[hidden]` attribute when in chat view — no separate
      *  visibility gate needed. */
+    /** TTS sentence-highlight regex · matches one sentence including
+     *  the trailing punctuation. CJK punctuation (。！？；) + English
+     *  punctuation (.!?;) + newline boundaries. Mirrors the same regex
+     *  the subtitle picker uses in `renderRtSubtitle` so the chat
+     *  highlight and the stage subtitle agree on sentence boundaries. */
+    _TTS_SENT_RE: /[^。！？.!?；;\n]+[。！？.!?；;\n]?/g,
+
+    /** Wrap each sentence inside a message's bubble in a `.tts-sentence`
+     *  span so the replay-tick listener can light up one at a time. No-op
+     *  when already wrapped, when there's no recognisable bubble, or
+     *  when the message only contains one sentence (no benefit to
+     *  wrapping a single-sentence body). Idempotent · safe to call
+     *  on every tick. */
+    _wrapMessageSentencesForTts(article) {
+      if (!article) return false;
+      if (article.dataset.ttsWrapped === "1") return true;
+      // Mid-stream bodies change as tokens arrive · wrapping now would
+      // be torn down by the next innerHTML rewrite. Skip until the
+      // streaming flag clears.
+      if (article.classList.contains("streaming") || article.classList.contains("is-streaming")) {
+        return false;
+      }
+      const bubble =
+        article.querySelector(".cd-body") ||
+        article.querySelector(".ci-body") ||
+        article.querySelector(".msg-bubble");
+      if (!bubble) return false;
+      // Walk text nodes IN ORDER · sentence boundaries cut across
+      // inline formatting (a sentence can include <strong>, <em>,
+      // <a>...) so we have to operate on the concatenated plain text.
+      const walker = document.createTreeWalker(bubble, NodeFilter.SHOW_TEXT, null);
+      const textNodes = [];
+      let n;
+      while ((n = walker.nextNode())) textNodes.push(n);
+      if (textNodes.length === 0) return false;
+      let combined = "";
+      const nodeRanges = [];
+      for (const tn of textNodes) {
+        const start = combined.length;
+        combined += tn.textContent;
+        nodeRanges.push({ node: tn, start, end: combined.length });
+      }
+      // Find sentence boundaries in the combined text.
+      const sentences = [];
+      const re = new RegExp(this._TTS_SENT_RE.source, "g");
+      let mtch;
+      while ((mtch = re.exec(combined)) !== null) {
+        const sStart = mtch.index;
+        const sEnd = mtch.index + mtch[0].length;
+        if (mtch[0].trim()) sentences.push({ start: sStart, end: sEnd });
+      }
+      if (sentences.length <= 1) return false;
+      // Bucket per-node ranges by which sentence each character belongs
+      // to · one text node may carry pieces of multiple sentences,
+      // one sentence may span multiple text nodes.
+      const nodeSplits = new Map();
+      for (let sIdx = 0; sIdx < sentences.length; sIdx++) {
+        const { start, end } = sentences[sIdx];
+        for (const nr of nodeRanges) {
+          const overlapStart = Math.max(start, nr.start);
+          const overlapEnd = Math.min(end, nr.end);
+          if (overlapStart >= overlapEnd) continue;
+          if (!nodeSplits.has(nr.node)) nodeSplits.set(nr.node, []);
+          nodeSplits.get(nr.node).push({
+            idx: sIdx,
+            ls: overlapStart - nr.start,
+            le: overlapEnd - nr.start,
+          });
+        }
+      }
+      // Replace each text node with a fragment of (raw text gaps +
+      // sentence spans). Gaps cover whitespace/leading characters
+      // that fell between matched sentences.
+      for (const [tn, splits] of nodeSplits) {
+        const text = tn.textContent;
+        const frag = document.createDocumentFragment();
+        splits.sort((a, b) => a.ls - b.ls);
+        let cursor = 0;
+        for (const s of splits) {
+          if (s.ls > cursor) {
+            frag.appendChild(document.createTextNode(text.slice(cursor, s.ls)));
+          }
+          const span = document.createElement("span");
+          span.className = "tts-sentence";
+          span.dataset.ttsIdx = String(s.idx);
+          span.textContent = text.slice(s.ls, s.le);
+          frag.appendChild(span);
+          cursor = s.le;
+        }
+        if (cursor < text.length) {
+          frag.appendChild(document.createTextNode(text.slice(cursor)));
+        }
+        tn.parentNode.replaceChild(frag, tn);
+      }
+      bubble.dataset.ttsSentenceCount = String(sentences.length);
+      // Store per-sentence character bounds so the tick picker can do
+      // character-cursor-based matching (more accurate than even-split
+      // sentence count division because sentences vary in length).
+      bubble.dataset.ttsSentenceEnds = sentences.map((s) => s.end).join(",");
+      bubble.dataset.ttsTotalChars = String(combined.length);
+      article.dataset.ttsWrapped = "1";
+      return true;
+    },
+
+    _clearTtsSentenceHighlights() {
+      const prior = document.querySelectorAll(".tts-sentence.is-current");
+      prior.forEach((el) => el.classList.remove("is-current"));
+    },
+
+    /** Drive the karaoke-style highlight · reads the live replay
+     *  cursor (currentTime / duration) and turns it into the matching
+     *  sentence index, then toggles `.is-current` on the right span.
+     *  Called from the `boardroom:replay-tick` event listener; no-op
+     *  when replay isn't active or the message isn't in the visible
+     *  chat (e.g. user scrolled it off, or the room is in stage view). */
+    updateTtsSentenceHighlight() {
+      const vr = (typeof window !== "undefined") ? window.boardroomVoiceReplay : null;
+      if (!vr || typeof vr.getActive !== "function") return;
+      const active = vr.getActive();
+      if (!active || !active.messageId) {
+        this._clearTtsSentenceHighlights();
+        return;
+      }
+      const audio = (typeof vr.getActiveAudio === "function") ? vr.getActiveAudio() : null;
+      if (!audio || !isFinite(audio.duration) || audio.duration <= 0) return;
+      const article = document.querySelector(`[data-message-id="${active.messageId}"]`);
+      if (!article) return;
+      if (!this._wrapMessageSentencesForTts(article)) {
+        // Single-sentence message · no per-sentence highlight needed.
+        return;
+      }
+      const bubble =
+        article.querySelector(".cd-body") ||
+        article.querySelector(".ci-body") ||
+        article.querySelector(".msg-bubble");
+      if (!bubble) return;
+      const totalChars = parseInt(bubble.dataset.ttsTotalChars || "0", 10);
+      const endsRaw = bubble.dataset.ttsSentenceEnds || "";
+      if (!totalChars || !endsRaw) return;
+      const ends = endsRaw.split(",").map((s) => parseInt(s, 10)).filter((n) => Number.isFinite(n));
+      if (ends.length === 0) return;
+      // Same picker as the subtitle's replay branch · character-cursor
+      // based, so a long sentence holds the highlight for the right
+      // proportion of audio time even when sentence lengths vary.
+      const progress = Math.max(0, Math.min(1, audio.currentTime / audio.duration));
+      const cursor = Math.floor(totalChars * progress);
+      let pickIdx = ends.length - 1;
+      for (let i = 0; i < ends.length; i++) {
+        if (ends[i] >= cursor) { pickIdx = i; break; }
+      }
+      // Diff-apply · only update DOM when the picked sentence
+      // changed since the last tick (avoids reflows ~4×/sec).
+      if (article.dataset.ttsCurrentIdx === String(pickIdx)) return;
+      article.dataset.ttsCurrentIdx = String(pickIdx);
+      // Clear any prior current spans inside THIS article first; spans
+      // in other articles are dropped via the `getActive` change path.
+      const prior = article.querySelectorAll(".tts-sentence.is-current");
+      prior.forEach((el) => el.classList.remove("is-current"));
+      // Also clear highlights in any other articles · the active
+      // message changed (handled below).
+      const stale = document.querySelectorAll(`.tts-sentence.is-current`);
+      stale.forEach((el) => {
+        if (!article.contains(el)) el.classList.remove("is-current");
+      });
+      const spans = article.querySelectorAll(`.tts-sentence[data-tts-idx="${pickIdx}"]`);
+      spans.forEach((el) => el.classList.add("is-current"));
+      // Auto-scroll the current sentence into view · long messages
+      // are the whole reason for this feature, so we shouldn't make
+      // the user scroll manually to follow the cursor. `block: "nearest"`
+      // only scrolls when the sentence is outside the visible area;
+      // no-op when it's already on screen.
+      if (spans.length > 0) {
+        try {
+          spans[0].scrollIntoView({ block: "nearest", behavior: "smooth" });
+        } catch (_) { /* old browsers · noop */ }
+      }
+    },
+
     /** Live subtitle · paints the speaker's name + the tail of their
      *  body text into the `[data-rt-subtitle]` panel pinned to the
      *  bottom of the round-table stage. Cheap DOM update only — no
@@ -19736,15 +19786,55 @@
     CHAT_STICK_THRESHOLD: 96,
 
     /** Bind a scroll listener once · the listener flips chatStuckToBottom
-     *  based on how far from the bottom the user has scrolled. Idempotent —
-     *  re-bind is fine since we tag the element. */
+     *  based on direction-aware reasoning (scroll-up = unstick, near-
+     *  bottom = stick). Idempotent — re-bind is fine since we tag the
+     *  element.
+     *
+     *  Earlier implementation used pure distance-from-bottom: any time
+     *  `scrollHeight - clientHeight - scrollTop > 96 px` the user was
+     *  treated as "reading history" and auto-scroll stopped. That
+     *  broke during fast director token streams · content grew faster
+     *  than the rAF-batched scroll could catch up, dist temporarily
+     *  exceeded the threshold (sometimes by hundreds of pixels mid-
+     *  paragraph), the watcher unstuck the user, and from that moment
+     *  on no further auto-scroll fired even though the user hadn't
+     *  touched the wheel. Net effect: director content rolled off the
+     *  bottom and the user had to scroll manually.
+     *
+     *  Direction-aware logic instead:
+     *    · User scrolled UP (scrollTop decreased ≥ 4 px) → unstick.
+     *      The 4 px hysteresis tolerates browser-level micro-jitter so
+     *      a smooth-scroll animation overshooting by 1-2 px doesn't
+     *      look like a user scroll-up.
+     *    · scrollTop landed within CHAT_STICK_THRESHOLD of the bottom
+     *      → stick. Restores the bottom-feed after a manual scroll
+     *      back to the tail.
+     *    · Neither (scroll-down but not at bottom, or content-growth
+     *      pushed dist > threshold without user action) → keep current
+     *      state. This is the critical clause that fixes the bug —
+     *      auto-content-growth alone never unsticks. */
     bindChatScrollWatch() {
       const chat = document.querySelector(".chat");
       if (!chat || chat.dataset.scrollWatch === "1") return;
       chat.dataset.scrollWatch = "1";
+      let prevScrollTop = chat.scrollTop;
       const update = () => {
-        const dist = chat.scrollHeight - chat.clientHeight - chat.scrollTop;
-        this.chatStuckToBottom = dist <= this.CHAT_STICK_THRESHOLD;
+        const cur = chat.scrollTop;
+        const dist = chat.scrollHeight - chat.clientHeight - cur;
+        if (cur < prevScrollTop - 4) {
+          // User-initiated scroll-up · leave the stick now so token
+          // streaming doesn't keep snapping them back down.
+          this.chatStuckToBottom = false;
+        } else if (dist <= this.CHAT_STICK_THRESHOLD) {
+          // Near the bottom (auto-scroll just landed there, or the
+          // user scrolled back down to the tail) · re-engage stick.
+          this.chatStuckToBottom = true;
+        }
+        // The "else" branch · scroll-down but not yet at bottom, OR
+        // content-growth pushed dist > threshold without the user
+        // touching anything · DO NOTHING. Keeps the prior state
+        // intact so a stuck user stays stuck through fast streams.
+        prevScrollTop = cur;
       };
       chat.addEventListener("scroll", update, { passive: true });
       update();
@@ -20027,6 +20117,30 @@
       app.openDivergenceOverlay();
       return;
     }
+    // Cast-edit · header "Add director" icon → popover with
+    // checkboxes + explicit Confirm. Anchor is the icon button.
+    const castEditTrigger = e.target.closest("[data-cast-edit-trigger]");
+    if (castEditTrigger) {
+      e.preventDefault();
+      app.openCastEditOverlay(castEditTrigger);
+      return;
+    }
+    // Row toggle is wired via a `change` listener inside
+    // openCastEditOverlay · not the global click delegation. Reason:
+    // <label> wraps the <input>, so a single click fires both a label
+    // click AND a synthetic input click — both bubble through any
+    // `[data-cast-edit-pick-id]` `closest()` match → double toggle.
+    // The `change` event fires exactly once per state flip.
+    if (e.target.closest("[data-cast-edit-confirm]")) {
+      e.preventDefault();
+      app.submitCastEdit();
+      return;
+    }
+    if (e.target.closest("[data-cast-edit-close]")) {
+      e.preventDefault();
+      app.closeCastEditOverlay();
+      return;
+    }
     // Jump-to-opener · scroll the chat back to the room's first
     // user message (the convene question). Useful when a long room
     // has scrolled the opener many screens up.
@@ -20115,67 +20229,27 @@
       app.downloadRoomVoiceMp3s().catch((err) => alert(String(err && err.message ? err.message : err)));
       return;
     }
-    // Search view · clear-input button (X) inside the input wrap.
-    if (e.target.closest("[data-search-clear]")) {
+    // Search overlay · close button (X) or scrim click. Either
+    // element carries `[data-search-overlay-close]`. Closes the
+    // overlay without touching the underlying view.
+    if (e.target.closest("[data-search-overlay-close]")) {
       e.preventDefault();
-      const input = document.querySelector("[data-search-input]");
-      if (input) {
-        input.value = "";
-        input.focus();
-        app.runSearch("");
-      }
+      if (typeof app.closeSearchOverlay === "function") app.closeSearchOverlay();
       return;
     }
-    // Search view · starter chip click. Pre-fills the input with
-    // the chip's keyword and triggers a search. Dispatching an
-    // input event ensures the existing doc-level input listener
-    // (which calls runSearch) fires too, so the debounced fetch
-    // path stays canonical.
-    const starter = e.target.closest("[data-search-starter]");
-    if (starter) {
-      e.preventDefault();
-      const term = starter.getAttribute("data-search-starter") || "";
-      const input = document.querySelector("[data-search-input]");
-      if (input && term) {
-        input.value = term;
-        input.focus();
-        input.dispatchEvent(new Event("input", { bubbles: true }));
-      }
-      return;
-    }
-    // Search view · sort chip ("Newest" / "Oldest"). Updates the
-    // sort key + re-renders the cached result list client-side.
-    // No re-fetch · the API doesn't expose a sort param and the
-    // dataset is small (≤ 200 hits per query) so an in-memory
-    // sort is the right call.
-    const sortChip = e.target.closest("[data-search-sort-by]");
-    if (sortChip) {
-      e.preventDefault();
-      const next = sortChip.getAttribute("data-search-sort-by") === "oldest" ? "oldest" : "newest";
-      if (app._searchSort === next) return; // already active
-      app._searchSort = next;
-      app._refreshSortChips();
-      // Re-render from the cached results · skip the no-cache
-      // path (search not yet run) since the chip group is hidden
-      // in is-initial.
-      const cached = Array.isArray(app._searchLastResults) ? app._searchLastResults : null;
-      const cachedQuery = app._searchLastQueryRendered || app._searchLastQuery || "";
-      if (cached && cached.length > 0) {
-        app.renderSearchResults(cached, cachedQuery);
-      }
-      return;
-    }
-    // Search view · result row click. Anchor's href is
+    // Search overlay · result row click. Anchor's href is
     // `#/r/<id>?m=<mid>&q=<query>`, which the hashchange route
     // handler picks up. We stash the pending message id + query
     // here too as a belt-and-braces in case the hash is consumed
-    // by another listener before handleRoute runs.
+    // by another listener before handleRoute runs. Also closes
+    // the overlay so the destination room is visible immediately.
     const searchJumpMsg = e.target.closest("[data-search-jump-msg]");
     if (searchJumpMsg) {
       const mid = searchJumpMsg.getAttribute("data-search-jump-msg");
       const qry = searchJumpMsg.getAttribute("data-search-jump-q") || "";
       if (mid) app._pendingMessageScroll = mid;
       app._pendingMessageQuery = qry;
+      if (typeof app.closeSearchOverlay === "function") app.closeSearchOverlay();
       // Let the anchor navigate naturally (hash change → handleRoute
       // → openRoom). No `return` since the link's default action
       // does the navigation.
@@ -21140,7 +21214,15 @@
     // Restore the text into the composer so the user can edit/resend.
     const input = document.querySelector('.input-bar input, [data-send-input]');
     if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
-      if (!input.value.trim()) input.value = app.pendingUserMessage;
+      if (!input.value.trim()) {
+        input.value = app.pendingUserMessage;
+        // Re-grow the textarea to fit the restored body · without
+        // this a multi-line queued message reappears clipped to
+        // the single-line baseline.
+        if (input.matches?.(".ib-textarea[data-send-input]")) {
+          app.autosizeRoomInputTextarea();
+        }
+      }
     }
     app.pendingUserMessage = null;
     app.pendingForSpeakerId = null;