privateboard 0.1.13 → 0.1.16

package/public/app.js

@@ -94,6 +94,20 @@
      *  miss falls back to the raw voiceId so the row never blocks on
      *  the fetch. */
     voiceLabels: {},
+    /** Interest-driven topic recommendations · the home composer's
+     *  "找你可能感兴趣的话题" tray. Always exactly 6 items (or
+     *  fewer if no batch has been generated yet) — every fresh
+     *  generation wipes the previous batch server-side, so
+     *  there's no pagination or history. `loaded` flips true
+     *  after the first `/api/topic-recs` fetch so first-paint
+     *  can show a sensible empty state. `job` is the live
+     *  generation job (id + phase + pct + detail) or null when
+     *  idle. */
+    topicRecs: {
+      items: [],
+      loaded: false,
+      job: null, // { id, phase, label, pct, detail, eventSource }
+    },
     rooms: [],
     currentRoomId: null,
     currentRoom: null,
@@ -108,6 +122,16 @@
     currentChair: null,            // chair agent for the current room
     currentQueue: [],
     voiceQueues: {},
+    /** Speaking-queue strip · auto expand/collapse state machine.
+     *  `_queueAutoCollapsed` is what the auto-logic computed last
+     *  paint (true = collapsed). `_queueUserOverride` is set true
+     *  when the user clicks the chevron; their inverse-of-auto
+     *  pick sticks until the room state changes "significantly"
+     *  (a flip in awaitingClarify / awaitingContinue / pending
+     *  user message / queue empty-vs-nonempty), at which point
+     *  the override resets. See `_applyQueueAutoState`. */
+    _queueAutoCollapsed: true,
+    _queueUserOverride: false,
     /** Round progress from the orchestrator: how many directors have
      *  spoken in the current round vs. the cap (= cast size). */
     currentRound: { spoken: 0, total: 0 },
@@ -144,6 +168,21 @@
      *  stays after the bubble dismisses; only this object resets.
      *  `dismissed: true` means no bubble is showing right now. */
     userBubble: { text: "", deadline: 0, intervalId: null, dismissed: true },
+    /** Ephemeral question bubble pinned to the CHAIR seat when the
+     *  chair drops a clarifying question in voice mode. Mirrors the
+     *  userBubble shape exactly so the render / tick / dismiss
+     *  surfaces stay parallel. 10s border countdown. */
+    chairBubble: { text: "", deadline: 0, intervalId: null, dismissed: true },
+    /** Set of chair messageIds whose voice synthesis hasn't started yet.
+     *  Bridges the gap between message-appended (the chair's round-prompt
+     *  / round-end placeholder lands instantly) and the first voice-chunk
+     *  arriving from the server's TTS pipeline (~0.5-2s later). Without
+     *  this, isChairBusy briefly returns false in that window and the
+     *  vote popover flashes onto the chair seat before the chair has
+     *  even started speaking — then hides again as audio kicks in, then
+     *  re-appears after audio ends. Cleared when the first voice-chunk
+     *  arrives (or after a 12s safety timeout if TTS never delivers). */
+    _chairVoiceAwaiting: null,
     currentBrief: null,
     /** All briefs filed for the current room · newest first. */
     currentBriefs: [],
@@ -272,6 +311,65 @@
         if (Array.isArray(this._reportsCache)) this.renderReportsPage(this._reportsCache);
         if (Array.isArray(this._notesCache)) this.renderNotesPage(this._notesCache);
       });
+
+      // Track the floating .ib-stack's height so the round-table
+      // stage can reserve exactly that much bottom space. Covers
+      // every height-changing event: speaking-queue expand /
+      // collapse, textarea auto-grow, paused-strip show / hide.
+      // The CSS fallback of 130px stays for the initial paint
+      // before the observer fires.
+      this._setupIbStackReserve();
+
+      // Ctrl+R / Cmd+R intercept · when the user tries to reload
+      // while a director is mid-stream, pop the reload-confirm
+      // modal so they can decide between (a) abort the speaker
+      // now and reload, (b) wait for the current speaker to
+      // finish and then reload, or (c) cancel. Without this,
+      // refreshing during voice playback used to drop the SSE
+      // mid-stream, kill the in-flight TTS, and leave the room
+      // partially paused on the server side · users had to dig
+      // around to recover.
+      //
+      // Browsers honour preventDefault on Ctrl+R / Cmd+R for the
+      // page-reload shortcut (it's not a reserved keystroke).
+      // Menu reload / URL-bar reload still get caught by the
+      // `beforeunload` handler below.
+      document.addEventListener("keydown", (e) => {
+        const isReload = (e.ctrlKey || e.metaKey)
+          && !e.altKey
+          && (e.key === "r" || e.key === "R" || e.code === "KeyR");
+        if (!isReload) return;
+        if (this._suppressReloadConfirm) return;
+        if (!this.currentRoomId) return;
+        if (!this.isAgentSpeaking()) return;
+        // Skip when the modal is already open · let the user
+        // pick a choice from the visible modal instead of
+        // spawning a duplicate.
+        if (document.getElementById("reload-choice-overlay")) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        this.openReloadChoiceModal();
+      });
+
+      // Defense-in-depth · the `beforeunload` event fires for
+      // menu reload, URL-bar reload, browser back/forward, tab
+      // close. Modern browsers don't let us replace the dialog
+      // with custom HTML — they show a generic "Reload site?"
+      // prompt — but returning a truthy value triggers that
+      // prompt, which is still better than silently dropping a
+      // live turn. Only arms while a speaker is mid-stream and
+      // the user hasn't already confirmed via the keydown
+      // modal (the `_suppressReloadConfirm` flag).
+      window.addEventListener("beforeunload", (e) => {
+        if (this._suppressReloadConfirm) return;
+        if (!this.currentRoomId) return;
+        if (!this.isAgentSpeaking()) return;
+        e.preventDefault();
+        e.returnValue = "";
+        return "";
+      });
       // Voice replay drives the round-table stage in adjourned rooms ·
       // every replay state transition (item start, thinking → speaking,
       // playlist end, close) emits `boardroom:replay-active` so the
@@ -717,6 +815,11 @@
       this.agentSpec = null;
       this.agentSpecGenerating = false;
       this.agentSpecError = null;
+      // Entering a room silences the agent-build ambient (the user
+      // has shifted focus away from the agent composer). If a
+      // build is still running, the sidebar Building row remains
+      // and the ambient resumes the moment they click back.
+      try { window.boardroomAgentBuildBgm?.stop?.(); } catch { /* */ }
 
       // Drop conveneState if it belongs to a different room — protects
       // against stale "preparing…" leaking into a sibling room when
@@ -768,6 +871,14 @@
         clearInterval(this.userBubble.intervalId);
       }
       this.userBubble = { text: "", deadline: 0, intervalId: null, dismissed: true };
+      if (this.chairBubble && this.chairBubble.intervalId) {
+        clearInterval(this.chairBubble.intervalId);
+      }
+      this.chairBubble = { text: "", deadline: 0, intervalId: null, dismissed: true };
+      // Drop any leftover voice-await IDs from a prior room · timeouts
+      // that fire later will harmlessly no-op (their messageId isn't
+      // in the set anymore).
+      if (this._chairVoiceAwaiting) this._chairVoiceAwaiting.clear();
       // Chairman's notes for this room · fetched in parallel-ish
       // with the room body so the in-room highlight overlay can
       // wrap saved spans on first paint. Stored as a Map keyed by
@@ -917,6 +1028,12 @@
     closeRoom() {
       this.disconnectSSE();
       this.cancelContinueCountdown();
+      // Thinking SFX loop is bound to a director thinking in THIS
+      // room · stop it explicitly so it doesn't keep pulsing after
+      // the user navigates away (renderRoundTable is the normal
+      // off-switch; without this guard, leaving the room before
+      // the next render leaves the interval orphaned).
+      try { window.boardroomTypingSfx?.setThinking?.(false); } catch { /* ignore */ }
       this.currentRoomId = null;
       this.currentRoom = null;
       this.currentMessages = [];
@@ -943,6 +1060,14 @@
         clearInterval(this.userBubble.intervalId);
       }
       this.userBubble = { text: "", deadline: 0, intervalId: null, dismissed: true };
+      if (this.chairBubble && this.chairBubble.intervalId) {
+        clearInterval(this.chairBubble.intervalId);
+      }
+      this.chairBubble = { text: "", deadline: 0, intervalId: null, dismissed: true };
+      // Drop any leftover voice-await IDs from a prior room · timeouts
+      // that fire later will harmlessly no-op (their messageId isn't
+      // in the set anymore).
+      if (this._chairVoiceAwaiting) this._chairVoiceAwaiting.clear();
       this.currentBrief = null;
       this.currentBriefs = [];
       this.currentParentRef = null;
@@ -1027,6 +1152,30 @@
           if (data.authorKind === "agent") {
             this.hideChairPending();
           }
+          // Chair vote-trigger message · register it as awaiting voice
+          // so the vote popover stays suppressed through the gap
+          // between message-appended and the first voice-chunk. Scoped
+          // to round-prompt + round-end (the two kinds that surface the
+          // chair-seat popover) so unrelated chair pings don't gate
+          // anything. Voice-mode only · text mode has no such gap.
+          if (
+            data.authorKind === "agent"
+            && this.currentChair && data.authorId === this.currentChair.id
+            && data.meta && (data.meta.kind === "round-prompt" || data.meta.kind === "round-end")
+            && this.currentRoom && this.currentRoom.deliveryMode === "voice"
+          ) {
+            this._chairVoiceAwaiting = this._chairVoiceAwaiting || new Set();
+            this._chairVoiceAwaiting.add(data.messageId);
+            const mid = data.messageId;
+            // Safety net · 12s ceiling in case TTS never delivers
+            // (network drop, server failure). Triggers a repaint so the
+            // panel can finally surface without the user being stuck.
+            setTimeout(() => {
+              if (this._chairVoiceAwaiting && this._chairVoiceAwaiting.delete(mid)) {
+                this.renderRoundTable();
+              }
+            }, 12000);
+          }
           // Convening card · clear the moment any chair message lands
           // (convening speech, clarify, anything). The card has done
           // its job; the chair is taking over from here. We re-render
@@ -1067,6 +1216,21 @@
             this.userSeatVisible = true;
             this.showUserBubble(data.body || "");
           }
+          // Chair clarify bubble · drop it the moment ANY new message
+          // arrives that isn't another chair clarify (a user reply, a
+          // director turn, or the chair moving past the clarify
+          // phase). Without this the 10s timer alone leaves the
+          // question hovering over the chair seat while the user's
+          // own reply bubble or the next speaker's turn already
+          // owns the stage — visually confusing.
+          if (this.chairBubble && !this.chairBubble.dismissed) {
+            const isAnotherClarify =
+              data.authorKind === "agent" &&
+              this.currentChair &&
+              data.authorId === this.currentChair.id &&
+              (data.meta || {}).kind === "clarify";
+            if (!isAnotherClarify) this.dismissChairBubble();
+          }
           // Round-table toasts · gamified surface for chair-emitted
           // template messages (round-open marker, etc.) that the
           // chat normally renders as system cards. Only toast for
@@ -1160,6 +1324,21 @@
           msg.meta.streaming = false;
           msg.meta.speakerStatus = "final";
         }
+        // Chair clarify · in voice mode, the chair's clarifying
+        // question just finished streaming. Pin the question text to
+        // the chair seat as a 10s countdown bubble (border-progress
+        // ring, same mechanic as the user bubble). Voice-mode only ·
+        // text mode users read the question inline in the scroll, so
+        // a duplicate bubble would just clutter the stage.
+        if (
+          msg && msg.authorKind === "agent"
+          && this.currentChair && msg.authorId === this.currentChair.id
+          && msg.meta && msg.meta.kind === "clarify"
+          && this.currentRoom && this.currentRoom.deliveryMode === "voice"
+          && this.currentRoom.status !== "adjourned"
+        ) {
+          this.showChairBubble(msg.body);
+        }
         // Round-table stage · the speaker just finished, so the
         // bubble should drop. Repaint the seats so the lime ring
         // / bubble migrate to whoever's next (director queue head)
@@ -1208,6 +1387,13 @@
         // meta.streaming. Skipping when a queue already exists keeps
         // the SSE hot path cheap (we don't repaint per chunk).
         const fresh = !this.voiceQueues[data.messageId];
+        // Voice has actually arrived for this messageId · clear it
+        // from the awaiting-voice set so isChairBusy hands off to the
+        // voiceQueues check (which keeps the panel suppressed until
+        // _fireVoiceDone removes the queue at audio end).
+        if (fresh && this._chairVoiceAwaiting) {
+          this._chairVoiceAwaiting.delete(data.messageId);
+        }
         // Chair gavel SFX · fire ONCE when fresh chair voice starts
         // streaming, so the user hears the courtroom "knock-knock"
         // calling for attention before the chair speaks. Detection:
@@ -1314,6 +1500,17 @@
           // pipeline failed (typically chair-llm-failed) so no bubble
           // is coming to replace it.
           this.hideChairPending();
+          // Deferred reload · the user picked "refresh after current
+          // speaker finishes" from the reload-confirm modal earlier.
+          // Now that the room is officially paused, the speaker's
+          // turn has concluded · safe to reload. We unset the flag
+          // first so a stray re-emit of room-paused doesn't trigger
+          // a second reload after the page comes back.
+          if (this._pendingReloadOnPause) {
+            this._pendingReloadOnPause = false;
+            this._suppressReloadConfirm = true;
+            location.reload();
+          }
         } else if (kind === "room-resumed") {
           if (this.currentRoom) {
             this.currentRoom.status = "live";
@@ -1321,15 +1518,12 @@
           }
           document.documentElement.setAttribute("data-status", "live");
           this.renderHeader();
-          // Resume · the input-bar's toggle is now visible again
-          // (paused-bar went display:none). Re-sync both twins so
-          // glyph/aria/hidden land correctly on the live one.
+          // Resume · the input-bar's left cluster swaps from
+          // Resume back to Pause/Adjourn/Vote; the round-table
+          // toggle re-syncs across all visible twins.
+          this.renderInputBarControls();
           this.applyRoundTableVisibility(this.currentRoomId);
           syncSidebar({ status: "live", pausedAt: null });
-          // Drop any paused-supplement overlay · the supplement endpoint
-          // 409s once the room is live, so leaving the modal up is just
-          // a confusing no-op for the user.
-          this.closePausedSupplementOverlay?.();
         } else if (kind === "room-adjourned") {
           const ts = payload.adjournedAt || Date.now();
           if (this.currentRoom) {
@@ -1693,6 +1887,11 @@
           if (this.currentBrief && target && this.currentBrief.id === target.id) {
             this.renderBrief();
           }
+          // Header was stuck in "Generating Report…" pending state · now
+          // that the brief errored, the generating check returns false
+          // and the regular [ View Report ] link mounts (its report page
+          // surfaces the error / retry UI).
+          this.renderHeader();
         } else if (kind === "settings-changed") {
           const ch = payload.changes || {};
           if (this.currentRoom) {
@@ -1711,7 +1910,9 @@
           // Server-driven deliveryMode flip · sync the round-table
           // stage's visibility so the user's view matches reality
           // even when the change came from another tab / device.
-          if (ch.deliveryMode) this.applyRoundTableVisibility(this.currentRoomId);
+          if (ch.deliveryMode) {
+            this.applyRoundTableVisibility(this.currentRoomId);
+          }
           // Server-driven voteTrigger flip · show/hide the bottom-
           // bar manual button immediately.
           if (ch.voteTrigger) this.refreshManualVoteButton();
@@ -1904,10 +2105,14 @@
           // Show "analyzing topic" stage on the convening card. The
           // card was seeded by createRoom so it's already on screen;
           // we just confirm the stage in case SSE arrived before the
-          // card was rendered.
+          // card was rendered. In voice mode the chat is hidden, so
+          // also repaint the stage — renderRoundTable cascades to
+          // the subtitle + HUD so the convene-stage label propagates
+          // to every visible surface.
           if (this.conveneState) {
             this.conveneState.stage = "analyzing";
             this.renderChat();
+            this.renderRoundTable();
           }
         } else if (kind === "member-added" && payload?.autoPicked) {
           // Director seated by the auto-picker · patch currentMembers
@@ -1924,7 +2129,10 @@
             this.renderQueue();
             // Convening card · advance to "seating" and append the
             // newly-seated director's avatar so the user watches the
-            // cast assemble in real time.
+            // cast assemble in real time. renderQueue above already
+            // re-paints the stage (and cascades to subtitle + HUD)
+            // so the convene-stage label propagates to every visible
+            // surface.
             if (this.conveneState) {
               this.conveneState.stage = "seating";
               if (!this.conveneState.seated.find((a) => a.id === agent.id)) {
@@ -1936,9 +2144,13 @@
         } else if (kind === "auto-pick-complete") {
           // Cast is fully seated. Advance the convening card to
           // "preparing" — chair's about to start streaming.
+          // renderRoundTable cascades to subtitle + HUD so the new
+          // stage label lands everywhere (voice mode hides the chat
+          // card so the stage surfaces are the only feedback).
           if (this.conveneState) {
             this.conveneState.stage = "preparing";
             this.renderChat();
+            this.renderRoundTable();
           }
         }
       });
@@ -1959,7 +2171,7 @@
     },
 
     // ── Actions ───────────────────────────────────────────────
-    async createRoom({ subject, agentIds, mode, intensity, briefStyle, autoPick, deliveryMode }) {
+    async createRoom({ subject, agentIds, mode, intensity, briefStyle, autoPick, deliveryMode, seedContext }) {
       const r = await fetch("/api/rooms", {
         method: "POST",
         headers: { "content-type": "application/json" },
@@ -1971,6 +2183,11 @@
           briefStyle: briefStyle || "auto",
           deliveryMode: deliveryMode === "voice" ? "voice" : "text",
           ...(autoPick ? { autoPick: true } : {}),
+          // seedContext · attached when the user opened this room
+          // from a topic-rec card. Backend writes it to the
+          // opening message's meta so the chair grounds clarify
+          // in the actual source snippets.
+          ...(seedContext ? { seedContext } : {}),
         }),
       });
       if (!r.ok) {
@@ -2065,6 +2282,36 @@
       // burst doesn't double-fire.
       if (this.sendInFlight) return false;
       if (Date.now() - this.lastSendAt < this.SEND_THROTTLE_MS) return false;
+      // Paused-room path · the textarea stays usable while the
+      // room is paused (no more dedicated "Add input" modal).
+      // Send routes through the supplement endpoint so the
+      // message lands in the transcript without auto-resuming
+      // the discussion. User clicks Resume separately to restart.
+      if (this.currentRoom && this.currentRoom.status === "paused") {
+        input.value = "";
+        if (input.matches?.(".ib-textarea[data-send-input]")) {
+          this.autosizeRoomInputTextarea();
+        }
+        this.lastSendAt = Date.now();
+        this.submitPausedInput(text.trim()).catch((err) => {
+          alert("Add input failed: " + (err && err.message ? err.message : err));
+        });
+        return true;
+      }
+      // Adjourned-room path · the textarea opens a follow-up room
+      // composer pre-filled with the typed text. The room itself is
+      // archived; Send is the "continue this thread elsewhere"
+      // gesture. User can refine the subject in the overlay before
+      // confirming.
+      if (this.currentRoom && this.currentRoom.status === "adjourned") {
+        input.value = "";
+        if (input.matches?.(".ib-textarea[data-send-input]")) {
+          this.autosizeRoomInputTextarea();
+        }
+        this.lastSendAt = Date.now();
+        this.openFollowUpOverlay({ subject: text.trim() });
+        return true;
+      }
       // If a director is mid-turn AND we don't already have a queued
       // message, ask the user how to proceed.
       if (this.isAgentSpeaking() && !this.pendingUserMessage) {
@@ -2072,6 +2319,14 @@
         return true;
       }
       input.value = "";
+      // Shrink the textarea back to its single-line baseline ·
+      // typed content may have grown the field, and the cleared
+      // value should snap it back. Only fires when the cleared
+      // input is the room input-bar textarea (not the legacy
+      // single-line input — that doesn't auto-grow).
+      if (input.matches?.(".ib-textarea[data-send-input]")) {
+        this.autosizeRoomInputTextarea();
+      }
       this.sendMessage(text).catch((err) => alert("Send failed: " + err.message));
       return true;
     },
@@ -2723,54 +2978,50 @@
       }
     },
 
-    /** Paused-supplement overlay · lets the user drop in an extra
-     *  thought while the room is paused. The text is posted as a
-     *  user message immediately (lands in the chat as the freshest
-     *  user input) but the saved director queue is left untouched —
-     *  so when they click Resume, the previously-paused director
-     *  takes over with the supplement already in their context.
-     *  Effectively the supplement plays "first" in the resumed
-     *  flow, and the rest of the queue continues in order. Reuses
-     *  the existing .supplement-* CSS classes for visual parity. */
-    openPausedSupplementOverlay() {
-      if (!this.currentRoomId || !this.currentRoom) return;
-      if (this.currentRoom.status !== "paused") return;
-      this.closePausedSupplementOverlay();
-      // System UI · always English. Paused-supplement overlay chrome.
+    /** Open the divergence-report overlay for the current room.
+     *  Used to live as a panel inside the room-info modal; lifted
+     *  into its own overlay so it can be opened directly from the
+     *  input bar `[data-divergence-open]` button without forcing
+     *  the user to wade through room-settings chrome.
+     *
+     *  Empty / new rooms · the panel body shows a "not enough turns
+     *  yet" hint instead of hiding · the user explicitly asked for
+     *  this overlay, so we owe them an empty state rather than a
+     *  silent no-op. */
+    openDivergenceOverlay() {
+      if (!this.currentRoomId) return;
+      this.closeDivergenceOverlay();
       const t = {
-        classify: "room · paused supplement",
-        classifyRight: "// queued first",
-        title: "Add a supplemental input",
-        metaPrefix: "// Current room",
-        placeholder: "Drop in an extra thought, a follow-up question, or an angle you'd like the board to take into account.\n\nIt lands in the chat as your message right now; when you hit [ Resume ], the next director picks up with this in front of them.",
-        hint: "Posted while paused, the supplement lands as your message immediately; the saved speaker queue is untouched. After resume, the next director responds with the supplement first.",
-        cancel: "[ Cancel ]",
-        confirm: "[ Add to chat ]",
-        confirmBusy: "[ Posting… ]",
+        classify: "ROOM · DIVERGENCE REPORT",
+        classifyRight: "// local",
+        title: "Divergence report",
+        metaPrefix: "Room #" + (this.currentRoom?.number ?? "—"),
+        loading: "loading…",
+        empty: "Not enough turns yet · the room hasn't accumulated tagged messages for branches or behavioural scoring.",
+        kickerMap: "// topic map",
+        kickerCoverage: "// behavioural coverage",
+        close: "Close",
       };
-      const subject = (this.currentRoom.subject || "").trim() || "(no subject)";
       const html = `
-        <div class="supplement-overlay" id="paused-supplement-overlay" role="dialog" aria-modal="true">
-          <div class="supplement-backdrop" data-paused-supplement-close></div>
-          <div class="supplement-modal" role="document">
+        <div class="supplement-overlay" id="divergence-overlay" role="dialog" aria-modal="true">
+          <div class="supplement-backdrop" data-divergence-close></div>
+          <div class="supplement-modal divergence-modal" role="document">
             <div class="supplement-classification">
               <span><span class="dot">●</span> ${this.escape(t.classify)}</span>
               <span class="right">${this.escape(t.classifyRight)}</span>
             </div>
             <header class="supplement-head">
               <div>
-                <div class="meta">${this.escape(t.metaPrefix)} · <span>${this.escape(subject)}</span></div>
+                <div class="meta">${this.escape(t.metaPrefix)}</div>
                 <div class="title">${this.escape(t.title)}</div>
               </div>
-              <button type="button" class="supplement-close" data-paused-supplement-close aria-label="Close">✕</button>
+              <button type="button" class="supplement-close" data-divergence-close aria-label="Close">✕</button>
             </header>
-            <div class="supplement-body">
-              <textarea class="supplement-input" data-paused-supplement-input rows="6" placeholder="${this.escape(t.placeholder)}"></textarea>
-              <p class="supplement-hint">${this.escape(t.hint)}</p>
+            <div class="supplement-body" data-divergence-body>
+              <div class="dv-loading">${this.escape(t.loading)}</div>
             </div>
             <footer class="supplement-foot">
-              <button type="button" class="supplement-cancel" data-paused-supplement-close>${this.escape(t.cancel)}</button>
-              <button type="button" class="supplement-confirm" data-paused-supplement-confirm data-busy-label="${this.escape(t.confirmBusy)}">${this.escape(t.confirm)}</button>
+              <button type="button" class="supplement-cancel" data-divergence-close>${this.escape(t.close)}</button>
             </footer>
           </div>
         </div>
@@ -2779,76 +3030,231 @@
       wrap.innerHTML = html.trim();
       document.body.appendChild(wrap.firstChild);
       document.body.style.overflow = "hidden";
-      this._pausedSupplementEsc = (ev) => {
+      this._divergenceEsc = (ev) => {
         if (ev.key === "Escape") {
           ev.stopImmediatePropagation();
-          this.closePausedSupplementOverlay();
+          this.closeDivergenceOverlay();
         }
       };
-      document.addEventListener("keydown", this._pausedSupplementEsc, true);
-      // Cmd/Ctrl-Enter submits — long-form textarea convention.
-      this._pausedSupplementSubmit = (ev) => {
-        if ((ev.metaKey || ev.ctrlKey) && ev.key === "Enter") {
-          const overlay = document.getElementById("paused-supplement-overlay");
-          if (!overlay) return;
-          ev.preventDefault();
-          this.submitPausedSupplement();
-        }
+      document.addEventListener("keydown", this._divergenceEsc, true);
+      // Fire-and-forget fetch · idle "loading…" until the route
+      // returns. Failure paints the empty state.
+      void this._paintDivergenceOverlay();
+    },
+
+    async _paintDivergenceOverlay() {
+      const body = document.querySelector("[data-divergence-body]");
+      if (!body) return;
+      const roomId = this.currentRoomId;
+      if (!roomId) {
+        body.innerHTML = `<div class="dv-loading">no active room</div>`;
+        return;
+      }
+      let data;
+      try {
+        const r = await fetch(`/api/rooms/${encodeURIComponent(roomId)}/diversity`);
+        if (!r.ok) throw new Error("HTTP " + r.status);
+        data = await r.json();
+      } catch {
+        body.innerHTML = this._renderDivergenceEmpty();
+        return;
+      }
+      const branches = Array.isArray(data?.branches) ? data.branches : [];
+      const coverage = data?.coverage || { filled: 0, total: 64, pct: 0 };
+      const buckets = data?.buckets || { abstraction: [0,0,0,0], time: [0,0,0,0], stakeholder: [0,0,0,0] };
+      const scored = typeof data?.messagesScored === "number" ? data.messagesScored : 0;
+      const unexplored = Array.isArray(data?.unexplored) ? data.unexplored : [];
+      if (branches.length === 0 && scored === 0) {
+        body.innerHTML = this._renderDivergenceEmpty();
+        return;
+      }
+      body.innerHTML = this._renderDivergenceHtml({ branches, coverage, buckets, scored, unexplored });
+    },
+
+    _renderDivergenceEmpty() {
+      return `
+        <div class="dv-purpose">
+          <p>Once your directors have run a couple of rounds, this panel will tell you whether the conversation is exploring widely or collapsing into one frame — and which angles haven't been touched yet.</p>
+          <p class="dv-purpose-hint">Come back after a couple more turns.</p>
+        </div>
+      `;
+    },
+
+    /** Compute a plain-language health verdict from the branch +
+     *  coverage data. Returns { tone, headline, body }. Tones map
+     *  to CSS classes for the verdict pill (healthy / narrowing /
+     *  converging / early). */
+    _computeDivergenceVerdict(d) {
+      const branches = d.branches || [];
+      const totalTurns = branches.reduce((sum, b) => sum + (b.turnCount || 0), 0);
+      if (totalTurns < 4 || branches.length === 0) {
+        return {
+          tone: "early",
+          headline: "Too early to tell",
+          body: "Let the room run a couple more rounds and this view will show you how widely the conversation has spread.",
+        };
+      }
+      const top = branches[0]?.turnCount || 0;
+      const topShare = totalTurns > 0 ? top / totalTurns : 0;
+      if (branches.length >= 4 && topShare < 0.5) {
+        return {
+          tone: "healthy",
+          headline: "Healthy divergence",
+          body: `${branches.length} distinct angles across ${totalTurns} turns. No single thread dominates — the room is exploring widely.`,
+        };
+      }
+      if (branches.length >= 3 && topShare < 0.65) {
+        return {
+          tone: "moderate",
+          headline: "Reasonably broad",
+          body: `${branches.length} angles touched. "${branches[0].label}" is the dominant thread but other directions are still getting airtime.`,
+        };
+      }
+      if (topShare >= 0.65 || (branches.length <= 2 && totalTurns >= 6)) {
+        return {
+          tone: "narrowing",
+          headline: "Narrowing on one frame",
+          body: `${Math.round(topShare * 100)}% of recent turns are circling "${branches[0]?.label || "one angle"}". If you want fresh ground, try seeding a different lens in your next message.`,
+        };
+      }
+      return {
+        tone: "moderate",
+        headline: "Building up",
+        body: `${branches.length} angles touched over ${totalTurns} turns. Still developing — check back after the next round-end.`,
       };
-      document.addEventListener("keydown", this._pausedSupplementSubmit, true);
-      setTimeout(() => {
-        const input = document.querySelector("[data-paused-supplement-input]");
-        if (input) input.focus();
-      }, 30);
     },
 
-    closePausedSupplementOverlay() {
-      const el = document.getElementById("paused-supplement-overlay");
+    /** Pure render for the divergence overlay body.
+     *
+     *  Structure (top-down, in order of usefulness to the user):
+     *    1. Purpose line · one sentence telling them what this is for
+     *    2. Verdict pill + body · "Healthy / Narrowing / etc." with
+     *       a plain-language paragraph explaining what's happening
+     *    3. Angles explored · the topic-tree branches as a friendly
+     *       list (most-discussed first), each annotated with how
+     *       many turns went into it
+     *    4. Angles to explore next · negative-space data, only shown
+     *       when non-empty · actionable hooks the user can plug into
+     *       their next message
+     *    5. (Collapsed by default) Behavioural breadth · the 64-cell
+     *       QD coverage + the three histograms. This is the dev-data
+     *       view; most users won't expand it.
+     */
+    _renderDivergenceHtml(d) {
+      const esc = this.escape.bind(this);
+      const verdict = this._computeDivergenceVerdict(d);
+      const branchItems = d.branches.length > 0
+        ? d.branches.map((b) => {
+            const turns = b.turnCount || 0;
+            const widthPct = Math.min(100, Math.max(8, turns * 18));
+            const tone = turns >= 3 ? "dv-branch-hot" : turns === 2 ? "dv-branch-warm" : "dv-branch-cool";
+            return `
+              <li class="dv-branch-row ${tone}">
+                <span class="dv-branch-bar" style="width: ${widthPct}%"></span>
+                <span class="dv-branch-label">${esc(b.label)}</span>
+                <span class="dv-branch-count">${turns} ${turns === 1 ? "turn" : "turns"}</span>
+              </li>
+            `;
+          }).join("")
+        : `<li class="dv-branch-empty">no angles tagged yet</li>`;
+      const unexploredItems = (d.unexplored && d.unexplored.length > 0)
+        ? d.unexplored.map((u) => `<li class="dv-unexplored-row">${esc(u.angle)}</li>`).join("")
+        : "";
+      const unexploredSection = unexploredItems ? `
+        <section class="dv-section">
+          <h3 class="dv-section-title">Angles worth exploring next</h3>
+          <p class="dv-section-deck">The chair noticed these directions came up briefly but the room didn't follow them. Useful prompts for your next message.</p>
+          <ul class="dv-unexplored-list">${unexploredItems}</ul>
+        </section>
+      ` : "";
+      // Advanced section · collapsed by default. Uses native
+      // <details> so no JS toggle is needed.
+      const pctRound = Math.round((d.coverage.pct || 0) * 100);
+      const histogram = (label, arr, leftEnd, rightEnd) => {
+        const max = Math.max(1, ...arr);
+        const cells = arr.map((v) => {
+          const h = Math.max(4, Math.round((v / max) * 28));
+          const dim = v === 0 ? "dv-hist-cell-empty" : "dv-hist-cell-filled";
+          return `<span class="dv-hist-cell ${dim}" style="height: ${h}px" title="${v} ${v === 1 ? "turn" : "turns"}"></span>`;
+        }).join("");
+        return `
+          <div class="dv-hist-row">
+            <span class="dv-hist-label">${esc(label)}</span>
+            <span class="dv-hist-axis">${esc(leftEnd)}</span>
+            <span class="dv-hist-cells">${cells}</span>
+            <span class="dv-hist-axis dv-hist-axis-right">${esc(rightEnd)}</span>
+          </div>
+        `;
+      };
+      return `
+        <div class="dv-panel">
+          <p class="dv-purpose">A quick health check on how widely this brainstorm has explored your question — what's been covered, what's been missed, and whether the room is staying broad or narrowing.</p>
+
+          <section class="dv-section dv-verdict dv-verdict-${esc(verdict.tone)}">
+            <div class="dv-verdict-pill">${esc(verdict.headline)}</div>
+            <p class="dv-verdict-body">${esc(verdict.body)}</p>
+          </section>
+
+          <section class="dv-section">
+            <h3 class="dv-section-title">Angles the room has explored</h3>
+            <p class="dv-section-deck">Each line is one direction the conversation has taken. The bar shows how much airtime it got.</p>
+            <ul class="dv-branch-list">${branchItems}</ul>
+          </section>
+
+          ${unexploredSection}
+
+          <details class="dv-advanced">
+            <summary class="dv-advanced-summary">Behavioural breadth (advanced)</summary>
+            <div class="dv-advanced-body">
+              <p class="dv-section-deck">Each director's turn gets scored on three axes (how abstract · what time scale · whose perspective). The grid below shows how many distinct combinations the room has touched — wider coverage = the room is sampling more of the possibility space.</p>
+              <div class="dv-coverage-kpi">
+                <span class="dv-coverage-num">${d.coverage.filled}</span>
+                <span class="dv-coverage-sep">/</span>
+                <span class="dv-coverage-total">${d.coverage.total}</span>
+                <span class="dv-coverage-pct">combinations · ${pctRound}%</span>
+                <span class="dv-coverage-scored">${d.scored} ${d.scored === 1 ? "turn" : "turns"} scored</span>
+              </div>
+              ${histogram("abstraction", d.buckets.abstraction, "concrete", "principle")}
+              ${histogram("time scale", d.buckets.time, "this quarter", "civilisation")}
+              ${histogram("perspective", d.buckets.stakeholder, "individual", "society")}
+            </div>
+          </details>
+        </div>
+      `;
+    },
+
+    closeDivergenceOverlay() {
+      const el = document.getElementById("divergence-overlay");
       if (el) el.remove();
       document.body.style.overflow = "";
-      if (this._pausedSupplementEsc) {
-        document.removeEventListener("keydown", this._pausedSupplementEsc, true);
-        this._pausedSupplementEsc = null;
-      }
-      if (this._pausedSupplementSubmit) {
-        document.removeEventListener("keydown", this._pausedSupplementSubmit, true);
-        this._pausedSupplementSubmit = null;
+      if (this._divergenceEsc) {
+        document.removeEventListener("keydown", this._divergenceEsc, true);
+        this._divergenceEsc = null;
       }
     },
 
-    async submitPausedSupplement() {
-      const overlay = document.getElementById("paused-supplement-overlay");
-      if (!overlay) return;
-      const input = overlay.querySelector("[data-paused-supplement-input]");
-      const btn = overlay.querySelector("[data-paused-supplement-confirm]");
-      const text = input ? (input.value || "").trim() : "";
-      if (!text) {
-        if (input) input.focus();
-        return;
-      }
+    /** POST a supplement message to a paused room · the textarea
+     *  Send button routes here when room.status === "paused".
+     *  The endpoint inserts the body into the transcript as a
+     *  user message but doesn't resume the room — the user has
+     *  to click Resume to restart the discussion. */
+    async submitPausedInput(body) {
       if (!this.currentRoomId) return;
-      const origLabel = btn ? btn.textContent : "";
-      const busyLabel = btn ? btn.getAttribute("data-busy-label") || origLabel : "";
-      if (btn) { btn.disabled = true; btn.textContent = busyLabel; }
-      try {
-        const r = await fetch(
-          "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/paused-input",
-          {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({ body: text }),
-          },
-        );
-        if (!r.ok) {
-          const e = await r.json().catch(() => ({}));
-          throw new Error(e.error || ("HTTP " + r.status));
-        }
-        // SSE will push the message-appended event; chat updates itself.
-        this.closePausedSupplementOverlay();
-      } catch (e) {
-        if (btn) { btn.disabled = false; btn.textContent = origLabel; }
-        alert("Add input failed: " + (e && e.message ? e.message : e));
+      const text = String(body || "").trim();
+      if (!text) return;
+      const r = await fetch(
+        "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/paused-input",
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ body: text }),
+        },
+      );
+      if (!r.ok) {
+        const e = await r.json().catch(() => ({}));
+        throw new Error(e.error || ("HTTP " + r.status));
       }
+      // SSE pushes message-appended; chat updates itself.
     },
 
     /* ─── Convene Follow-up · overlay + submit ─────────────────────
@@ -2863,55 +3269,37 @@
      *  room's chair clarify + first tick fire server-side; the
      *  follow-up's directors get the parent brief + Stage-1 signals
      *  prepended to their system prompts (see room.ts orchestrator). */
-    openFollowUpOverlay() {
+    openFollowUpOverlay({ subject } = {}) {
       if (!this.currentRoomId || !this.currentRoom) return;
       if (this.currentRoom.status !== "adjourned") return;
       this.closeFollowUpOverlay();
 
-      const lang = this.composerLanguage();
-      const t = lang === "zh"
-        ? {
-            classify: "follow-up · 跟进会议",
-            classifyRight: "// continuing",
-            title: "开一场跟进会议",
-            metaPrefix: "// following up",
-            placeholder: "在上一场判断之上，下一个要追问的问题是什么？",
-            contextNote: "上一场的议题、最终判断（brief）和每位 director 的关键观察会作为这场 follow-up 房间的上下文交给新一组 director —— 他们可以直接在已成型的判断上推进，不会从零开始。",
-            castLabel: "Directors",
-            castHint: "建议 2-4 位",
-            castSame: "沿用上一场的 cast",
-            pickerLabel: "选择董事",
-            autoLabel: "directors",
-            autoVal: "自动挑选",
-            countersDirectors: (n) => `${n} 位董事`,
-            cancel: "[ Cancel ]",
-            confirm: "[ Convene → ]",
-            confirmBusy: "[ Convening… ]",
-            adjournedAtPrefix: "adjourned",
-            briefsCount: (n) => `${n} ${n === 1 ? "brief" : "briefs"} filed`,
-            noBrief: "no brief filed",
-          }
-        : {
-            classify: "follow-up · continuation room",
-            classifyRight: "// continuing",
-            title: "Convene a follow-up",
-            metaPrefix: "// following up",
-            placeholder: "What's the next question to chase, given what the prior session settled?",
-            contextNote: "The prior subject, the filed brief (room's settled judgement), and each director's load-bearing observations are bundled as context for this follow-up — the new cast picks up where the prior session left off rather than starting from scratch.",
-            castLabel: "Directors",
-            castHint: "2–4 recommended",
-            castSame: "Same cast as last session",
-            pickerLabel: "Pick directors",
-            autoLabel: "directors",
-            autoVal: "auto-pick",
-            countersDirectors: (n) => `${n} director${n === 1 ? "" : "s"}`,
-            cancel: "[ Cancel ]",
-            confirm: "[ Convene → ]",
-            confirmBusy: "[ Convening… ]",
-            adjournedAtPrefix: "adjourned",
-            briefsCount: (n) => `${n} ${n === 1 ? "brief" : "briefs"} filed`,
-            noBrief: "no brief filed",
-          };
+      // Pull copy from I18n · supports all 4 locales (en / zh /
+      // ja / es) with EN fallback for missing keys. Previously
+      // a `lang === "zh" ? <zh> : <en>` ternary that violated
+      // the "no per-locale ternaries in app code" rule.
+      const _t = this._t.bind(this);
+      const t = {
+        classify: _t("followup_classify"),
+        classifyRight: _t("followup_classify_right"),
+        title: _t("followup_title"),
+        metaPrefix: _t("followup_meta_prefix"),
+        placeholder: _t("followup_placeholder"),
+        contextNote: _t("followup_context_note"),
+        castLabel: _t("followup_cast_label"),
+        castHint: _t("followup_cast_hint"),
+        castSame: _t("followup_cast_same"),
+        pickerLabel: _t("followup_picker_label"),
+        autoLabel: _t("followup_auto_label"),
+        autoVal: _t("followup_auto_val"),
+        countersDirectors: (n) => _t(n === 1 ? "followup_directors_one" : "followup_directors_many", { n }),
+        cancel: _t("followup_cancel"),
+        confirm: _t("followup_confirm"),
+        confirmBusy: _t("followup_confirm_busy"),
+        adjournedAtPrefix: _t("followup_adjourned_at_prefix"),
+        briefsCount: (n) => _t(n === 1 ? "followup_briefs_one" : "followup_briefs_many", { n }),
+        noBrief: _t("followup_no_brief"),
+      };
       const room = this.currentRoom;
       const briefCount = Array.isArray(this.currentBriefs) ? this.currentBriefs.length : 0;
       const briefLine = briefCount > 0 ? t.briefsCount(briefCount) : t.noBrief;
@@ -3109,7 +3497,15 @@
       document.addEventListener("keydown", this._followupSubmit, true);
       setTimeout(() => {
         const input = document.querySelector("[data-followup-subject]");
-        if (input) input.focus();
+        if (!input) return;
+        if (subject) {
+          input.value = subject;
+          // Cursor at end so the user can keep refining the question
+          // without first having to navigate past their own prefill.
+          const end = input.value.length;
+          try { input.setSelectionRange(end, end); } catch { /* ignore */ }
+        }
+        input.focus();
       }, 30);
     },
 
@@ -3912,6 +4308,176 @@
       if (el) el.remove();
     },
 
+    /** Reload-confirm modal · shown when the user hits Ctrl+R /
+     *  Cmd+R while a director is actively speaking. Reuses the
+     *  `.pc-overlay / .pc-modal / .pc-choice` chrome so the
+     *  modal sits in the same visual register as the regular
+     *  pause-choice modal. Three options:
+     *    · hard  · interrupt now and reload (server abort + reload)
+     *    · soft  · wait for current speaker to finish, then reload
+     *             (sets `_pendingReloadOnPause`; the SSE handler
+     *             triggers `location.reload()` when room-paused
+     *             fires)
+     *    · cancel · close the modal; don't reload */
+    openReloadChoiceModal() {
+      this.closeReloadChoiceModal();
+      this.closePauseChoiceModal(); // never stack the two
+      const speaker = this.currentQueue[0]
+        ? this.agentsById[this.currentQueue[0].agentId]
+        : null;
+      const speakerName = speaker ? speaker.name : this._t("sc_speaker_fallback");
+      const html = `
+        <div id="reload-choice-overlay" class="pc-overlay">
+          <div class="pc-modal">
+            <div class="pc-classification">
+              <span><span class="dot">●</span> ${this.escape(this._t("reload_class"))}</span>
+              <span class="right">${this.escape(this._t("reload_right"))}</span>
+            </div>
+            <div class="pc-head">
+              <div class="pc-tag">${this.escape(this._t("reload_tag"))}</div>
+              <h2 class="pc-title">${this.escape(this._t("reload_title", { name: speakerName }))}</h2>
+              <p class="pc-deck">${this.escape(this._t("reload_deck"))}</p>
+            </div>
+            <div class="pc-body">
+              <button type="button" class="pc-choice danger" data-reload-choice="hard">
+                <div class="pc-choice-mark">${this.escape(this._t("reload_hard_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("reload_hard_deck"))}</div>
+              </button>
+              <button type="button" class="pc-choice primary" data-reload-choice="soft">
+                <div class="pc-choice-mark">${this.escape(this._t("reload_soft_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("reload_soft_deck", { name: speakerName }))}</div>
+              </button>
+              <button type="button" class="pc-choice ghost" data-reload-choice="cancel">
+                <div class="pc-choice-mark">${this.escape(this._t("reload_cancel_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("reload_cancel_deck"))}</div>
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+      document.body.insertAdjacentHTML("beforeend", html);
+    },
+
+    closeReloadChoiceModal() {
+      const el = document.getElementById("reload-choice-overlay");
+      if (el) el.remove();
+    },
+
+    /** Apply the user's pick from the reload-confirm modal. */
+    async handleReloadChoice(mode) {
+      this.closeReloadChoiceModal();
+      if (mode === "cancel") return;
+      if (mode === "hard") {
+        // Suppress the beforeunload re-prompt · this reload is
+        // user-confirmed via our modal. Then abort the in-flight
+        // turn server-side and reload. The server abort is
+        // async; we kick it off but don't wait — closing the
+        // SSE connection on reload also signals abort.
+        this._suppressReloadConfirm = true;
+        try { await this.pauseRoom("hard"); } catch (_) { /* server-side abort failure shouldn't block reload */ }
+        location.reload();
+        return;
+      }
+      if (mode === "soft") {
+        // Set the pending-reload flag · the SSE `room-paused`
+        // handler triggers `location.reload()` once the current
+        // speaker's turn finishes and the room enters paused
+        // state. Until then the modal closes and the user sees
+        // the room continuing normally to its current speaker
+        // end.
+        this._pendingReloadOnPause = true;
+        try {
+          await this.pauseRoom("soft");
+        } catch (e) {
+          this._pendingReloadOnPause = false;
+          alert("Pause failed: " + (e && e.message ? e.message : e));
+        }
+      }
+    },
+
+    /** Resume-choice modal · shown when the user clicks Resume on
+     *  a voice room with NO voice key configured. Replaces the
+     *  prior hard-block (which dead-ended the user with only one
+     *  way out: configure the same provider's key). Three
+     *  options:
+     *    · configure · open Settings → API Keys; room stays paused
+     *    · text · PATCH deliveryMode=text, then resumeRoom()
+     *    · cancel · close modal; room stays paused
+     *
+     *  Reuses the `.pc-overlay / .pc-modal / .pc-choice` chrome —
+     *  same visual register as pause-choice + reload-choice. */
+    openResumeChoiceModal() {
+      this.closeResumeChoiceModal();
+      // Never stack with the other choice modals.
+      this.closePauseChoiceModal();
+      this.closeReloadChoiceModal();
+      const html = `
+        <div id="resume-choice-overlay" class="pc-overlay">
+          <div class="pc-modal">
+            <div class="pc-classification">
+              <span><span class="dot">●</span> ${this.escape(this._t("resume_class"))}</span>
+              <span class="right">${this.escape(this._t("resume_right"))}</span>
+            </div>
+            <div class="pc-head">
+              <div class="pc-tag">${this.escape(this._t("resume_tag"))}</div>
+              <p class="pc-deck">${this.escape(this._t("resume_deck"))}</p>
+            </div>
+            <div class="pc-body">
+              <button type="button" class="pc-choice primary" data-resume-choice="configure">
+                <div class="pc-choice-mark">${this.escape(this._t("resume_configure_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("resume_configure_deck"))}</div>
+              </button>
+              <button type="button" class="pc-choice danger" data-resume-choice="text">
+                <div class="pc-choice-mark">${this.escape(this._t("resume_text_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("resume_text_deck"))}</div>
+              </button>
+              <button type="button" class="pc-choice ghost" data-resume-choice="cancel">
+                <div class="pc-choice-mark">${this.escape(this._t("resume_cancel_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("resume_cancel_deck"))}</div>
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+      document.body.insertAdjacentHTML("beforeend", html);
+    },
+
+    closeResumeChoiceModal() {
+      const el = document.getElementById("resume-choice-overlay");
+      if (el) el.remove();
+    },
+
+    /** Apply the user's pick from the resume-choice modal. */
+    async handleResumeChoice(mode) {
+      this.closeResumeChoiceModal();
+      if (mode === "cancel") return;
+      if (mode === "configure") {
+        // Same redirect the legacy hard-block did · keep the
+        // room paused, open Settings scoped to the voice
+        // provider so the user lands on the right field.
+        if (typeof window.openUserSettings === "function") {
+          window.openUserSettings({ section: "keys", focusProvider: "minimax" });
+        }
+        return;
+      }
+      if (mode === "text") {
+        // Flip the room to text mode, then resume. The PATCH
+        // helper broadcasts `settings-changed` over SSE so
+        // other tabs of the same room pick up the new mode.
+        try {
+          await this.updateRoomSettings({ deliveryMode: "text" });
+        } catch (e) {
+          alert(this._t("room_delivery_switch_err", { msg: e && e.message ? e.message : String(e) }));
+          return;
+        }
+        try {
+          await this.resumeRoom();
+        } catch (e) {
+          alert("Resume failed: " + (e && e.message ? e.message : e));
+        }
+      }
+    },
+
     /**
      * Patch room settings (tone, intensity, report style). Pushes to the
      * backend, then mirrors the result back into local state. The SSE
@@ -4068,6 +4634,12 @@
       this.continueCountdown.autoFiring = false;
       this.continueCountdown.interval = setInterval(() => this.tickContinueCountdown(), 1000);
       this.refreshContinueButton();
+      // First audible beep fires immediately so the 10-tick cadence
+      // (10, 9, 8 … 1) starts at the same instant the visible "10"
+      // appears on the button — without this the first beep would
+      // land 1s later at 9 and the user's mental "10!" cue would be
+      // silent. Subsequent beeps come from tickContinueCountdown.
+      try { window.boardroomTypingSfx?.countdownTick?.(total); } catch { /* ignore */ }
     },
 
     cancelContinueCountdown() {
@@ -4084,6 +4656,11 @@
       const left = Math.max(0, Math.ceil((this.continueCountdown.deadline - Date.now()) / 1000));
       this.continueCountdown.secondsLeft = left;
       this.refreshContinueButton();
+      // Audible countdown · square-wave beep on each visible tick so
+      // the user feels the timer urgency build up (last 3s flip to a
+      // higher / louder "alarm" register inside countdownTick). User-
+      // settings sound toggle controls all SFX uniformly.
+      try { window.boardroomTypingSfx?.countdownTick?.(left); } catch { /* ignore */ }
       if (left <= 0 && !this.continueCountdown.autoFiring) {
         this.continueCountdown.autoFiring = true;
         clearInterval(this.continueCountdown.interval);
@@ -4235,6 +4812,23 @@
       // Pre-flight · the next round will fire a fresh director queue,
       // each turn requiring a model key.
       if (!(await this.requireModelKey())) return;
+      // Paused-room handling · the chair's vote popover stays mounted
+      // through pause (the user can park the room mid-vote to think),
+      // so its Continue / Switch / Keep buttons must still work. The
+      // /continue endpoint requires `status === "live"`, so resume
+      // first when the room is paused — without this, the POST 409s
+      // and benignRace silently swallows the error, leaving the user
+      // clicking a dead button. The shift-accept flow funnels through
+      // here too via acceptModeShiftAndContinue, so this single hop
+      // covers both buttons.
+      if (this.currentRoom && this.currentRoom.status === "paused") {
+        try {
+          await this.resumeRoom();
+        } catch (err) {
+          alert("Resume failed: " + (err && err.message ? err.message : err));
+          return;
+        }
+      }
       const r = await fetch(
         "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/continue",
         { method: "POST" },
@@ -5231,8 +5825,14 @@
      *  reading order is analytics → brief → follow-ups. Idempotent:
      *  re-renders by removing the prior card first. */
     renderSessionAnalytics() {
-      const existing = document.querySelector(".session-analytics");
-      if (existing) existing.remove();
+      // Tear down the prior card + its sibling section-break marker
+      // so this function stays idempotent across re-renders. The
+      // marker is a `.round-open-card.is-adjourned` chip-on-lines
+      // that visually separates the chat above from the analytics
+      // tile below.
+      document
+        .querySelectorAll(".session-analytics, .session-end-marker")
+        .forEach((el) => el.remove());
       const stats = this.computeSessionStats();
       if (!stats) return;
       const briefCard = document.querySelector("[data-brief-card]");
@@ -5386,6 +5986,20 @@
           </div>
         `;
 
+      // Section break · reuses the `.round-open-card` chip-on-lines
+      // pattern (same as "Round 01 · parallel") but tinted amber via
+      // the `is-adjourned` variant. The marker is inserted right
+      // above the analytics block so the post-adjourn reading order
+      // is: chat … ──[SESSION ADJOURNED]── analytics → brief → follow-ups.
+      const marker = document.createElement("div");
+      marker.className = "round-open-card is-adjourned session-end-marker";
+      marker.innerHTML = `
+        <span class="ro-chip">
+          <span class="ro-mark">⊘</span>
+          <span class="ro-round">${this.escape(this._t("session_end_marker"))}</span>
+        </span>
+      `;
+
       const block = document.createElement("div");
       block.className = "session-analytics";
       block.innerHTML = `
@@ -5423,23 +6037,18 @@
         </div>
       `;
 
-      // Insert ABOVE the brief card BUT BELOW the `▼ session output ▼`
-      // divider, so the ceremonial header still frames everything in
-      // the post-adjourn section. Layout inside [data-brief-card]:
-      //
-      //   <header.ending-block-head> (the divider)
-      //   ← analytics tile inserted here
-      //   <div.brief-card>           (the report)
-      //   <footer.ending-block-foot>
-      //
-      // Falls back to inserting above the entire [data-brief-card]
-      // container when the divider isn't present (e.g. error state
-      // before renderBrief has populated the container).
-      const dividerHead = briefCard.querySelector(":scope > .ending-block-head");
+      // Insert marker + analytics tile as siblings ABOVE the
+      // [data-brief-card] container. The prior version peeked
+      // inside the brief card for a `.ending-block-head` divider
+      // to slot in between the divider and the brief, but that
+      // ceremonial header was retired — the amber adjourned marker
+      // alone is enough closing chrome.
       const briefInner = briefCard.querySelector(":scope > .brief-card");
-      if (dividerHead && briefInner) {
+      if (briefInner) {
+        briefCard.insertBefore(marker, briefInner);
         briefCard.insertBefore(block, briefInner);
       } else {
+        briefCard.parentNode.insertBefore(marker, briefCard);
         briefCard.parentNode.insertBefore(block, briefCard);
       }
 
@@ -5459,43 +6068,169 @@
       }
     },
 
+    /** Compatibility alias · existing call sites (room-paused
+     *  SSE handler, openRoom path, etc.) still call
+     *  `renderPausedBar`. After the paused-bar removal the
+     *  function just delegates to `renderInputBarControls` so
+     *  the room's left-cluster (Pause vs Resume + Adjourn)
+     *  reflects the new status. */
     renderPausedBar() {
-      const bar = document.querySelector(".paused-bar");
-      if (!bar || !this.currentRoom) return;
-      // Next director that would speak when discussion resumes · the
-      // only other piece of info still useful here. The "last input"
-      // line was dropped as redundant — the user's last message is
-      // visible right above the bar.
-      const nextSpeaker = this.currentQueue[0]
-        ? this.agentsById[this.currentQueue[0].agentId]
-        : this.currentMembers[0];
-      const nextHandle = nextSpeaker
-        ? this.escape(nextSpeaker.handle.replace(/^\//, ""))
-        : "";
+      this.renderInputBarControls();
+    },
+
+    /** Swap the input-bar's left-cluster buttons based on the
+     *  current room status. Live → [Pause][VoiceMode][Adjourn]
+     *  [Vote-if-manual]; Paused → [VoiceMode][Adjourn]; Adjourned
+     *  → [VoiceMode][Export][Replay][Followup]. The Resume
+     *  affordance lives in the `.paused-strip` above the textarea
+     *  (a quieter info-bar treatment). The head-rt-toggle
+     *  (voice-mode + stage/transcript) is included in every
+     *  branch and re-populated by `applyRoundTableVisibility`
+     *  immediately afterwards.
+     *
+     *  Called from openRoom (initial mount) and from the SSE
+     *  `room-paused` / `room-resumed` handlers so the cluster
+     *  swap follows the server-side state. */
+    renderInputBarControls() {
+      if (!this.currentRoom) return;
+      const leftCluster = document.querySelector(".input-bar .ib-controls-left");
+      if (!leftCluster) return;
+      const status = this.currentRoom.status;
+      const rtToggleHtml = `<button type="button" class="head-rt-toggle" data-room-rt-toggle aria-pressed="false" hidden></button>`;
+      // Divergence-report button · same shape across all room
+      // states. Sits in the left cluster so it's reachable
+      // alongside pause / adjourn / replay. Click opens the
+      // overlay; the overlay shows an empty-state hint when the
+      // room has no scored turns yet. `data-tip` drives the fast
+      // hover tooltip via the existing `.ib-action::after` CSS.
+      const dvBtnHtml = `<button type="button" class="ib-action ib-divergence" data-divergence-open title="Coverage check" aria-label="Coverage check" data-tip="See how widely the room has explored your question"></button>`;
+      // Jump-to-opener · same shape across all room states, hidden in
+      // voice-mode stage view via CSS. Click handler is doc-level
+      // delegation on [data-jump-to-opener]. i18n attrs get rewritten
+      // by I18n.applyDom further down.
+      const jtBtnHtml = `<button type="button" class="ib-action ib-jump-top" data-jump-to-opener data-i18n-title="ib_jump_top_tip" data-i18n-aria="ib_jump_top_label" data-i18n-tip="ib_jump_top_tip"></button>`;
+      if (status === "paused") {
+        leftCluster.innerHTML = `
+          ${rtToggleHtml}
+          <button type="button" class="ib-action ib-adjourn has-label" data-adjourn data-i18n-title="ib_adjourn_tip" data-i18n-aria="ib_adjourn_label"><span class="ib-action-label" data-i18n="ib_adjourn_text">Adjourn</span></button>
+          ${dvBtnHtml}
+          ${jtBtnHtml}
+        `;
+      } else if (status === "adjourned") {
+        // Adjourned state · the bottom bar becomes a follow-up
+        // entry point. Send routes the typed text through
+        // openFollowUpOverlay({ subject }) (see submitFromComposer).
+        // Export / Replay / Followup icons reuse the same data
+        // attributes the old `.adjourned-bar` exposed, so the
+        // existing doc-level click handlers fire unchanged.
+        leftCluster.innerHTML = `
+          ${rtToggleHtml}
+          <button type="button" class="ib-action ib-export" data-room-export data-i18n-title="adj_export_tip" data-i18n-aria="adj_export_label" data-i18n-tip="adj_export_tip"></button>
+          <button type="button" class="ib-action ib-replay" data-room-replay data-i18n-title="adj_replay_tip" data-i18n-aria="adj_replay_label" data-i18n-tip="adj_replay_tip"></button>
+          <button type="button" class="ib-action ib-followup" data-room-followup data-i18n-title="adj_followup_tip" data-i18n-aria="adj_followup_label" data-i18n-tip="adj_followup_tip"></button>
+          ${dvBtnHtml}
+          ${jtBtnHtml}
+        `;
+      } else {
+        // Live state · the standard action trio. Markup
+        // mirrors the static template in index.html so a
+        // round-trip through the SSE event keeps the controls
+        // identical to first-paint.
+        leftCluster.innerHTML = `
+          <button type="button" class="ib-action ib-pause" data-pause data-i18n-title="ib_pause_tip" data-i18n-aria="ib_pause_label" data-i18n-tip="ib_pause_tip"></button>
+          ${rtToggleHtml}
+          <button type="button" class="ib-action ib-adjourn has-label" data-adjourn data-i18n-title="ib_adjourn_tip" data-i18n-aria="ib_adjourn_label"><span class="ib-action-label" data-i18n="ib_adjourn_text">Adjourn</span></button>
+          <button type="button" class="ib-action ib-vote" data-room-end-manual hidden data-i18n-title="ib_vote_tip" data-i18n-aria="ib_vote_label" data-i18n-tip="ib_vote_tip"></button>
+          ${dvBtnHtml}
+          ${jtBtnHtml}
+        `;
+      }
+      // applyDom rewrites the i18n attrs we just inserted, otherwise
+      // the title / aria-label stay as literal "ib_pause_tip" string.
+      if (window.I18n && typeof window.I18n.applyDom === "function") {
+        try { window.I18n.applyDom(leftCluster); } catch { /* ignore */ }
+      }
+      // refreshManualVoteButton owns the ib-vote button's hidden
+      // state · re-run after the live-state markup mounts so the
+      // [hidden] attribute reflects current room.voteTrigger /
+      // queue state.
+      if (typeof this.refreshManualVoteButton === "function") {
+        try { this.refreshManualVoteButton(); } catch { /* ignore */ }
+      }
+      // Re-populate the round-table toggle · innerHTML rewrite above
+      // wiped its inner glyph + label + hover preview. Re-running
+      // applyRoundTableVisibility re-fills the freshly-mounted button
+      // and re-binds its hover handlers. Idempotent · safe even if
+      // the toggle ends up [hidden] (text room with no eligibility).
+      if (this.currentRoomId && typeof this.applyRoundTableVisibility === "function") {
+        try { this.applyRoundTableVisibility(this.currentRoomId); } catch { /* ignore */ }
+      }
+      // Swap the textarea's placeholder to match the active
+      // state. Paused → "this becomes a supplement"; adjourned →
+      // "this opens a follow-up room"; live → the regular
+      // interject prompt.
+      const ta = document.querySelector(".ib-textarea[data-send-input]");
+      if (ta) {
+        const placeholderKey =
+          status === "paused"    ? "ib_paused_placeholder" :
+          status === "adjourned" ? "ib_followup_placeholder" :
+                                   "send_placeholder";
+        ta.setAttribute("placeholder", this._t(placeholderKey));
+      }
+      // Populate the adjourned-strip's meta slot with the relative
+      // time since adjourn (e.g., "filed 2h"). Empty when the room
+      // isn't adjourned or the timestamp is missing — the CSS
+      // `:empty` selector hides the span so the strip head doesn't
+      // render a bare separator.
+      const adjMeta = document.querySelector("[data-adjourned-strip-meta]");
+      if (adjMeta) {
+        if (status === "adjourned" && this.currentRoom.adjournedAt) {
+          adjMeta.textContent = this._t("adjourned_strip_meta", {
+            time: this.relTime(this.currentRoom.adjournedAt),
+          });
+        } else {
+          adjMeta.textContent = "";
+        }
+      }
+    },
 
-      const addInputLabel = this._t("pause_bar_add_input");
-      const adjournLabel  = this._t("pause_bar_adjourn");
-      const resumeLabel   = this._t("pause_bar_resume");
-      const pausedLabel   = this._t("pause_bar_paused");
-      const nextLabel     = this._t("pause_bar_next");
-      const nextChunk = nextHandle
-        ? ` · ${nextLabel} → <span class="lime">${nextHandle}</span>`
-        : "";
-      bar.innerHTML = `
-        <button type="button" class="head-rt-toggle" data-room-rt-toggle aria-pressed="false" hidden></button>
-        <div class="paused-bar-text">
-          <strong>// ${pausedLabel}</strong>${nextChunk}
-        </div>
-        <div class="paused-bar-actions">
-          <a href="#" class="ghost-btn" data-paused-supplement>${this.escape(addInputLabel)}</a>
-          <a href="#" class="ghost-btn" data-adjourn>${this.escape(adjournLabel)}</a>
-          <a href="#" class="resume-btn-lg" data-resume>${this.escape(resumeLabel)}</a>
-        </div>
-      `;
-      // The innerHTML write just blew away our static toggle button ·
-      // re-paint it so the user keeps the voice/transcript switch
-      // available while paused. Idempotent · no-ops in non-voice rooms.
-      this.applyRoundTableVisibility(this.currentRoomId);
+    /** Observe the floating .ib-stack and write its measured height
+     *  to every visible .roundtable-stage as the CSS variable
+     *  `--rt-bottom-reserve`. The stage's inner wrapper shrinks by
+     *  that amount, so seats / table / subtitle / HUD all lift
+     *  exactly above the input group — covering speaking-queue
+     *  expand / collapse, textarea growth, paused-strip toggles.
+     *  When the stack is in `display: contents` mode (chat view),
+     *  offsetHeight is 0 and we clear the variable; the stage's
+     *  CSS fallback of 0 takes over.
+     *
+     *  MutationObserver on each stage's [hidden] attr fires the
+     *  re-apply when the stage first becomes visible (the size
+     *  observer doesn't always fire for display:contents → block
+     *  transitions). */
+    _setupIbStackReserve() {
+      const ibStack = document.querySelector(".ib-stack");
+      if (!ibStack || typeof ResizeObserver !== "function") return;
+      const apply = () => {
+        const h = ibStack.offsetHeight;
+        const stages = document.querySelectorAll(".roundtable-stage");
+        stages.forEach((stage) => {
+          if (h > 0 && !stage.hasAttribute("hidden")) {
+            stage.style.setProperty("--rt-bottom-reserve", `${h}px`);
+          } else {
+            stage.style.removeProperty("--rt-bottom-reserve");
+          }
+        });
+      };
+      const ro = new ResizeObserver(apply);
+      ro.observe(ibStack);
+      const mo = new MutationObserver(apply);
+      document.querySelectorAll(".roundtable-stage").forEach((s) => {
+        mo.observe(s, { attributes: true, attributeFilter: ["hidden"] });
+      });
+      apply();
+      this._ibStackRO = ro;
+      this._ibStackMO = mo;
     },
 
     /** Composer state · persisted to localStorage so each new-room
@@ -5517,10 +6252,19 @@
         const raw = localStorage.getItem("boardroom.composer");
         if (raw) saved = JSON.parse(raw);
       } catch { /* ignore */ }
+      // seedContext · pre-fetched web snippets the user attached
+      // by clicking a topic-rec card on the home composer. Round-
+      // tripped through localStorage so a page refresh between
+      // pick and convene doesn't lose the attached source
+      // material. Shape: { topicRecId?: string, snippets?: [] }.
+      const savedSeed = saved && typeof saved.seedContext === "object" && saved.seedContext
+        ? saved.seedContext
+        : null;
       this.composerState = {
         ...this.DEFAULT_COMPOSER,
         ...(saved || {}),
         subject: (saved && typeof saved.subject === "string") ? saved.subject : "",
+        seedContext: savedSeed,
       };
       return this.composerState;
     },
@@ -5528,10 +6272,10 @@
     saveComposerState() {
       if (!this.composerState) return;
       try {
-        const { directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject } = this.composerState;
+        const { directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject, seedContext } = this.composerState;
         localStorage.setItem(
           "boardroom.composer",
-          JSON.stringify({ directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject }),
+          JSON.stringify({ directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject, seedContext: seedContext || null }),
         );
       } catch { /* ignore */ }
     },
@@ -5574,6 +6318,15 @@
       // overlay — typing in this view + Enter creates the room.
       const head = document.querySelector("[data-room-head]");
       if (head) head.innerHTML = "";  // CSS hides via html.no-room
+      // One-shot lazy fetch · the composer's "or try a starter"
+      // tray renders the latest topic recommendations when any
+      // exist (replacing the legacy hardcoded starters). Skipping
+      // when already loaded keeps re-renders cheap; the trigger
+      // button's SSE path explicitly refreshes after a successful
+      // generation so the list lands without polling.
+      if (!this.topicRecs.loaded) {
+        void this.refreshTopicRecs();
+      }
 
       // Strip stale follow-up fragments inserted by renderFollowUp-
       // Fragments() when a follow-up room was previously open. These
@@ -5590,7 +6343,7 @@
       // this sweep, the previous room's analytics tile (totals /
       // models / upvoted points) bleeds through into the new-room
       // composer.
-      document.querySelectorAll(".followup-parent-banner, .followup-children, .session-analytics").forEach((el) => el.remove());
+      document.querySelectorAll(".followup-parent-banner, .followup-children, .session-analytics, .session-end-marker").forEach((el) => el.remove());
 
       const chat = document.querySelector("[data-chat-messages]");
       if (chat) {
@@ -5664,12 +6417,19 @@
     },
 
     /** Toggle `.chat--composer-overflow` on the chat scroller based on
-     *  whether the composer's natural height exceeds the visible chat
-     *  area. In overflow mode the hero (`.cmp-fold`) anchors at the
-     *  viewport centre and `.cmp-starters` flow below the fold;
-     *  without overflow, the parent's `align-content: center` keeps
-     *  the whole composer block centred. Called after composer render
-     *  and on window resize. */
+     *  whether the composer's natural height exceeds 70% of the
+     *  visible chat area. In overflow mode the hero pins to a fixed
+     *  120px top offset (`.cmp` `padding-top: 120px`) and the
+     *  starters tray flows below; without overflow, the parent's
+     *  `align-content: center` keeps the whole composer block
+     *  centred. Called after composer render and on window resize.
+     *
+     *  The 0.7 threshold (was "strictly > viewport") catches the
+     *  in-between case where the input + ~6 topic-rec cards fit
+     *  vertically but only just — centred layout would visually
+     *  cram the hero against the top edge. Flipping to overflow
+     *  mode at 70% gives the hero comfortable breathing room
+     *  before any actual scroll is needed. */
     updateComposerOverflow() {
       const chat = document.querySelector(".chat.chat--composer");
       if (!chat) return;
@@ -5677,7 +6437,21 @@
       if (!cmp) return;
       requestAnimationFrame(() => {
         chat.classList.remove("chat--composer-overflow");
-        const overflows = cmp.scrollHeight > chat.clientHeight + 1;
+        // Threshold · the default 0.7 * chat.clientHeight is tuned
+        // for the new-room / new-agent hero (input + ~6 starter cards).
+        // The persona-builder dashboard is a different beast: by
+        // design it's tall (header + dossier + intel feed + abort
+        // foot). For pb-stage, switch to a viewport-based threshold
+        // (0.9 * window.innerHeight) per user spec — only flip to
+        // overflow mode when the dashboard exceeds 90% of the
+        // visible window, so the natural `align-content: center`
+        // path handles the common case and we only pay the
+        // overflow-padding cost when there genuinely isn't room.
+        const hasPbStage = !!cmp.querySelector(".pb-stage");
+        const threshold = hasPbStage
+          ? (window.innerHeight || chat.clientHeight) * 0.9
+          : chat.clientHeight * 0.7;
+        const overflows = cmp.scrollHeight > threshold;
         chat.classList.toggle("chat--composer-overflow", overflows);
       });
       if (!this._composerResizeAttached) {
@@ -6951,40 +7725,538 @@
       const author = n.authorName || this._t("notes_director_fallback");
       // The jump link uses the room's hash route + the note id as a
       // fragment-style query so openRoom can scroll to + flash the
-      // matching span. The delete button sits as a SIBLING of the
-      // anchor (inside the .notes-item) so its click never bubbles
+      // matching span. The action buttons sit as siblings of the
+      // anchor (inside the .notes-item) so their clicks never bubble
       // through the navigation link — same pattern as session-row
       // delete in the rooms sidebar.
       const href = `#/r/${this.escape(n.roomId)}?note=${this.escape(n.id)}`;
-      const deleteTitle = "Delete this note";
       return `
-        <li class="notes-item" data-note-id="${this.escape(n.id)}">
-          <a class="notes-item-link" href="${href}" data-note-jump="${this.escape(n.id)}" data-note-room="${this.escape(n.roomId)}">
-            <div class="notes-item-meta">
-              <span class="notes-item-room">${this.escape(this._t("notes_item_room"))} ${this.escape(roomNum)}</span>
-              ${roomSubject ? `<span class="notes-item-sep">·</span><span class="notes-item-subject">${this.escape(roomSubject)}</span>` : ""}
-              <span class="notes-item-sep">·</span>
-              <span class="notes-item-director">${this.escape(author)}</span>
-              <span class="notes-item-time">${this.escape(time)}</span>
+        <li class="notes-item" data-note-id="${this.escape(n.id)}">
+          <a class="notes-item-link" href="${href}" data-note-jump="${this.escape(n.id)}" data-note-room="${this.escape(n.roomId)}">
+            <div class="notes-item-meta">
+              <span class="notes-item-room">${this.escape(this._t("notes_item_room"))} ${this.escape(roomNum)}</span>
+              ${roomSubject ? `<span class="notes-item-sep">·</span><span class="notes-item-subject">${this.escape(roomSubject)}</span>` : ""}
+              <span class="notes-item-sep">·</span>
+              <span class="notes-item-director">${this.escape(author)}</span>
+              <span class="notes-item-time">${this.escape(time)}</span>
+            </div>
+            <p class="notes-item-passage">${
+              n.contextBefore ? `<span class="note-context note-context-before">${this.escape(n.contextBefore)}</span>` : ""
+            }<span class="note-quote">${this.escape(n.quoteText)}</span>${
+              n.contextAfter ? `<span class="note-context note-context-after">${this.escape(n.contextAfter)}</span>` : ""
+            }</p>
+          </a>
+          <div class="notes-item-actions">
+            <button type="button" class="notes-item-action notes-item-share" data-note-share aria-label="Share this note">
+              <span class="notes-action-glyph" aria-hidden="true">↗</span>
+              <span class="notes-action-label">Share</span>
+            </button>
+            <button type="button" class="notes-item-action notes-item-unfav" data-note-delete aria-label="Remove this note from your saved list">
+              <span class="notes-action-glyph" aria-hidden="true">✕</span>
+              <span class="notes-action-label">Unfavorite</span>
+            </button>
+          </div>
+        </li>
+      `;
+    },
+
+    /** Share-card overlay · mounts a modal with multiple card
+     *  templates rendering the selected note as a shareable image.
+     *  Templates live in CSS (data-share-template attribute swaps
+     *  the visual register without re-rendering markup). PNG export
+     *  reuses the html-to-image CDN loader pattern from
+     *  `public/magazine.html` · lazy-loaded on first download so
+     *  the All Notes page doesn't pay the network cost upfront.
+     *
+     *  Each template is fixed at 540×675 (4:5 portrait) — a sweet
+     *  spot for IG / Weibo / WeChat moments / Twitter portrait. PNG
+     *  export captures at pixelRatio = 800/540 so the saved file
+     *  comes out at exactly 800 × 1185 (moderate-size PNG, easy to
+     *  share without being unwieldy). */
+    SHARE_CARD_TEMPLATES: ["boardroom", "terminal"],
+    DEFAULT_SHARE_CARD_TEMPLATE: "boardroom",
+
+    /** Open the share-card overlay for a given note id. Resolves the
+     *  note from the in-memory cache (`_notesCache`) so no network
+     *  round-trip is needed; the cache is populated by the All Notes
+     *  fetch and stays fresh through SSE note:created events. */
+    openShareCard(noteId) {
+      const note = (this._notesCache || []).find((n) => n && n.id === noteId);
+      if (!note) {
+        alert("Couldn't find that note — try reloading the page.");
+        return;
+      }
+      // Tear down any prior overlay first · prevents stacking when
+      // the user click-spams Share across different notes.
+      this.closeShareCard();
+      this._shareCardNote = note;
+      this._shareCardTemplate = this.DEFAULT_SHARE_CARD_TEMPLATE;
+      // Roll a fresh randomized boardroom cover (sky palette, river
+      // curve, stones, flowers, dirt, ground material). Cached for
+      // the lifetime of this modal so chip-switching between
+      // templates and back to "boardroom" keeps the SAME variation
+      // visible — only the next openShareCard() rerolls. Fallback
+      // to null if the module failed to load (CSS gradient + empty
+      // SVG keep the card paintable).
+      this._shareCardCover = (typeof window !== "undefined"
+          && window.shareCoverSvgCreator
+          && typeof window.shareCoverSvgCreator.generate === "function")
+        ? window.shareCoverSvgCreator.generate()
+        : null;
+
+      // Share-card overlay reuses the room-settings overlay chrome
+      // (`.room-settings-overlay` + `.room-settings-modal` + lime
+      // corner brackets + `.rs-classification` strip + `.rs-head`
+      // header + `.rs-body` scroll area + `.rs-foot` footer) so the
+      // app's overlays share a single visual register. Inner content
+      // (template chips + preview + download button) is local to
+      // this feature.
+      const roomNum = note.roomNumber != null
+        ? `#${String(note.roomNumber).padStart(3, "0")}` : "—";
+      const author = note.authorName || "Director";
+      const overlay = document.createElement("div");
+      overlay.className = "room-settings-overlay open";
+      overlay.id = "share-card-overlay";
+      overlay.setAttribute("role", "dialog");
+      overlay.setAttribute("aria-modal", "true");
+      overlay.setAttribute("aria-label", "Share this note");
+      overlay.innerHTML = `
+        <div class="room-settings-modal" role="document">
+          <div class="rs-classification">
+            <span><span class="dot">●</span> share · note</span>
+            <span class="right">// privateboard.ai</span>
+          </div>
+          <header class="rs-head">
+            <div class="rs-head-text">
+              <div class="meta">// from room ${this.escape(roomNum)} · ${this.escape(author)}</div>
+              <div class="rs-title-wrap">
+                <div class="title rs-title">Share this note as a card</div>
+              </div>
+            </div>
+            <button type="button" class="close-btn" data-share-card-close aria-label="Close">✕</button>
+          </header>
+          <div class="rs-body">
+            <div class="share-card-templates" role="tablist" aria-label="Card template">
+              ${this.SHARE_CARD_TEMPLATES.map((t) => `
+                <button type="button"
+                        class="share-card-template-chip${t === this._shareCardTemplate ? " active" : ""}"
+                        data-share-card-template="${t}"
+                        role="tab"
+                        aria-selected="${t === this._shareCardTemplate ? "true" : "false"}"
+                >${this.escape(t)}</button>
+              `).join("")}
+            </div>
+            <div class="share-card-preview" data-share-card-preview>
+              <div class="share-card-preview-inner" data-share-card-preview-inner>
+                ${this.renderShareCardHtml(note, this._shareCardTemplate)}
+              </div>
+            </div>
+          </div>
+          <footer class="rs-foot">
+            <span class="share-card-hint">// 800 × 1185 png</span>
+            <button type="button" class="rs-action dirty" data-share-card-download>
+              ↓ Download PNG
+            </button>
+          </footer>
+        </div>
+      `;
+      document.body.appendChild(overlay);
+
+      // Fit the 540×800 preview into whatever container the viewport
+      // gives us. CSS caps both width (max-width: 540) AND height
+      // (max-height: calc(100vh - 260px)) so on short viewports the
+      // preview shrinks proportionally — scaling must read whichever
+      // dimension landed smaller so the inner 540×800 native render
+      // fits cleanly without any scrollbars on the modal body.
+      const fitPreview = () => {
+        const preview = overlay.querySelector("[data-share-card-preview]");
+        const inner = overlay.querySelector("[data-share-card-preview-inner]");
+        if (!preview || !inner) return;
+        const rect = preview.getBoundingClientRect();
+        const w = rect.width || 540;
+        const h = rect.height || 800;
+        const scale = Math.min(1, w / 540, h / 800);
+        inner.style.setProperty("--share-card-scale", scale.toFixed(4));
+      };
+      fitPreview();
+      this._shareCardResize = fitPreview;
+      window.addEventListener("resize", this._shareCardResize);
+
+      // Esc closes · same shortcut family as other overlays.
+      this._shareCardEsc = (ev) => {
+        if (ev.key === "Escape") {
+          ev.preventDefault();
+          this.closeShareCard();
+        }
+      };
+      document.addEventListener("keydown", this._shareCardEsc, true);
+
+      // Pre-warm html-to-image so the first Download click doesn't
+      // pay the ~50KB CDN fetch latency. Best-effort; if the network
+      // is slow the download path awaits its own ensure() anyway.
+      this.ensureShareCardHtmlToImage().catch(() => { /* swallow */ });
+    },
+
+    closeShareCard() {
+      const el = document.getElementById("share-card-overlay");
+      if (el) el.remove();
+      if (this._shareCardEsc) {
+        document.removeEventListener("keydown", this._shareCardEsc, true);
+        this._shareCardEsc = null;
+      }
+      if (this._shareCardResize) {
+        window.removeEventListener("resize", this._shareCardResize);
+        this._shareCardResize = null;
+      }
+      this._shareCardNote = null;
+      this._shareCardTemplate = null;
+    },
+
+    /** Swap the active template · re-renders only the preview's
+     *  inner block (keeps the chip row + modal chrome stable). The
+     *  data-share-template attribute on `.share-card` is what every
+     *  template's CSS keys off, so the visual change is purely a
+     *  class swap — markup is identical across templates. */
+    setShareCardTemplate(key) {
+      if (!this.SHARE_CARD_TEMPLATES.includes(key)) return;
+      this._shareCardTemplate = key;
+      const overlay = document.getElementById("share-card-overlay");
+      if (!overlay) return;
+      overlay.querySelectorAll("[data-share-card-template]").forEach((btn) => {
+        const active = btn.getAttribute("data-share-card-template") === key;
+        btn.classList.toggle("active", active);
+        btn.setAttribute("aria-selected", active ? "true" : "false");
+      });
+      const inner = overlay.querySelector("[data-share-card-preview-inner]");
+      if (inner && this._shareCardNote) {
+        inner.innerHTML = this.renderShareCardHtml(this._shareCardNote, key);
+      }
+    },
+
+    /** Length-based font-size step-down for share-card quotes.
+     *  Quotes never get truncated — instead the font shrinks so the
+     *  full passage fits. Returns the font-size in px for a given
+     *  template at the supplied character count. Tiers were tuned
+     *  empirically against each template's content area: the
+     *  boardroom bubble is the smallest box (≈424 × 200); the
+     *  terminal card's tinted code-block has roughly the same
+     *  width but runs slightly shorter to leave room for the
+     *  ASCII logo / status bar / cursor lines above and below.
+     *
+     *  Length tiers are deliberately coarse — 5-6 buckets keep the
+     *  output predictable and avoid the "text snaps a pixel smaller
+     *  every keystroke" feel a continuous formula would produce. */
+    shareCardQuoteSize(template, len) {
+      const TIERS = {
+        boardroom: [
+          { max: 40,  size: 27 },
+          { max: 70,  size: 25 },
+          { max: 100, size: 23 },
+          { max: 140, size: 21 },
+          { max: 170, size: 20 },
+          { max: 200, size: 19 },
+        ],
+      };
+      // Floor: never render the boardroom quote below 19 px. Below
+      // that the 8-bit bubble starts to look cramped against the
+      // surrounding pixel-art; long quotes get line-clamped by the
+      // bubble's max-height instead.
+      const MIN_SIZE = 19;
+      const tiers = TIERS[template] || TIERS.boardroom;
+      for (const t of tiers) {
+        if (len <= t.max) return Math.max(MIN_SIZE, t.size);
+      }
+      // > 200 chars · keep the floor rather than shrinking further.
+      return MIN_SIZE;
+    },
+
+    /** Wrap CJK runs in `<span class="cjk">…</span>` so per-script
+     *  font + weight rules apply: CJK switches to PingFang at bold
+     *  weight (no italic-skew), Latin keeps the surrounding serif
+     *  italic. Always called AFTER `escape()` so the regex only
+     *  matches CJK glyphs and never sees raw `<` / `>` / `&`. */
+    wrapCjk(text) {
+      if (!text) return "";
+      return String(text).replace(
+        /([　-〿぀-ゟ゠-ヿ㐀-䶿一-鿿豈-﫿＀-￯]+)/g,
+        '<span class="cjk">$1</span>',
+      );
+    },
+
+    /** Render the 540×800 card HTML for a given note + template key.
+     *  All four templates share the SAME inner data slots — kicker,
+     *  quote, byline, watermark, stamp — so this single function
+     *  works for all of them; CSS handles the visual divergence. */
+    renderShareCardHtml(n, templateKey) {
+      const tpl = templateKey || this.DEFAULT_SHARE_CARD_TEMPLATE;
+      const quote = String(n.quoteText || "").trim();
+      const author = (n.authorName || "Director").trim();
+      const roomNum = n.roomNumber != null ? `#${String(n.roomNumber).padStart(3, "0")}` : "";
+      const stampDate = n.createdAt
+        ? new Date(n.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })
+        : "";
+      const esc = (s) => this.escape(String(s || ""));
+
+      // Template-specific markup · "boardroom" renders the
+      // 8-bit pixel-art scene, "terminal" renders a CLI / code
+      // card with an ASCII PRIVATE BOARD logo. Watermark on
+      // every template is the domain `Privateboard.ai`
+      // (lowercased / capitalised by the template's
+      // text-transform).
+      const DOMAIN = "Privateboard.ai";
+      // ISO-style date for the terminal status bar — looks more
+      // like real CLI output than a localised "May 12, 2026".
+      const isoDate = n.createdAt
+        ? new Date(n.createdAt).toISOString().slice(0, 10)
+        : "";
+
+      // Block-letter "PRIVATE BOARD" ASCII title — three typeface
+      // variants. All use the FULL BLOCK char (█) so the texture
+      // stays consistent; only the letter PROPORTIONS change per
+      // roll. PRIVATE sits on the top half, BOARD centred on the
+      // bottom half, separated by a blank line.
+      //   · block — 4-col-wide letters, total 34 cols (default)
+      //   · slim  — 3-col-wide letters, total 27 cols (sleek)
+      //   · thick — 5-col-wide letters, total 41 cols (chunky)
+      const LOGO_FONTS = {
+        block: [
+          "████ ████ ████ █  █  ██  ████ ████",
+          "█  █ █  █  ██  █  █ █  █  ██  █   ",
+          "████ ████  ██  █  █ ████  ██  ███ ",
+          "█    █ █   ██  █  █ █  █  ██  █   ",
+          "█    █  █ ████  ██  █  █  ██  ████",
+          "                                  ",
+          "     ███   ██   ██  ████ ███      ",
+          "     █  █ █  █ █  █ █  █ █  █     ",
+          "     ███  █  █ ████ ████ █  █     ",
+          "     █  █ █  █ █  █ █ █  █  █     ",
+          "     ███   ██  █  █ █  █ ███      ",
+        ].join("\n"),
+        slim: [
+          "███ ███ ███ █ █  █  ███ ███",
+          "█ █ █ █  █  █ █ █ █  █  █  ",
+          "███ ██   █  █ █ ███  █  ██ ",
+          "█   █ █  █  █ █ █ █  █  █  ",
+          "█   █ █ ███  █  █ █  █  ███",
+          "                           ",
+          "    ██  ███  █  ███ ██     ",
+          "    █ █ █ █ █ █ █ █ █ █    ",
+          "    ██  █ █ ███ ██  █ █    ",
+          "    █ █ █ █ █ █ █ █ █ █    ",
+          "    ██  ███ █ █ █ █ ██     ",
+        ].join("\n"),
+        thick: [
+          "█████ █████ █████ █   █   █   █████ █████",
+          "█   █ █   █   █   █   █  █ █    █  █     ",
+          "█████ █████   █   █   █ █████   █  ████  ",
+          "█     █  █    █    █ █  █   █   █  █     ",
+          "█     █   █ █████   █  █   █   █  █████  ",
+          "                                         ",
+          "      ████  █████   █   █████ ████       ",
+          "      █   █ █   █  █ █  █   █ █   █      ",
+          "      ████  █   █ █████ █████ █   █      ",
+          "      █   █ █   █ █   █ █  █  █   █      ",
+          "      ████  █████ █   █ █   █ ████       ",
+        ].join("\n"),
+      };
+
+      // Quote font-size · scaled by char count so long quotes (up
+      // to 200 chars) shrink to fit rather than getting truncated.
+      const qLen = quote.length;
+      const qFont = this.shareCardQuoteSize(tpl, qLen);
+      const qStyle = `font-size: ${qFont}px;`;
+
+      if (tpl === "boardroom") {
+        // Boardroom cover · randomized 8-bit landscape generated by
+        // the standalone `share-cover-svg-creator.js` skill. The
+        // module yields a fresh roll (sky palette, river curve,
+        // stones, flowers, dirt patches, ground material) once per
+        // `openShareCard()` and the result is cached on
+        // `this._shareCardCover`, so chip-switching between templates
+        // in the same modal keeps the SAME boardroom variation
+        // visible. If the module didn't load, fall back to an empty
+        // SVG layer + the CSS background-color set on `.share-card`.
+        const cover = this._shareCardCover || {
+          skyGradient: "",
+          skyDeco: "",
+          groundDeco: "",
+          groundFg: "",
+        };
+        // Inline style carries two things:
+        //   1. The randomized sky-gradient (overrides the flat
+        //      fallback color in CSS).
+        //   2. A `--sc-fg` CSS variable holding a watermark/stamp
+        //      color picked to stay legible against whatever ground
+        //      material rolled (dark cream on volcanic-dark grounds,
+        //      dark purple on light grounds).
+        const styleParts = [];
+        if (cover.skyGradient) styleParts.push(`background: ${cover.skyGradient}`);
+        if (cover.groundFg)    styleParts.push(`--sc-fg: ${cover.groundFg}`);
+        const bgStyle = styleParts.length
+          ? ` style="${styleParts.join("; ")}"`
+          : "";
+        // Per-roll ASCII-logo TYPEFACE · the creator picks one of
+        // three pre-baked letter-form designs (block / slim /
+        // thick). All three use the same FULL BLOCK char + same
+        // cream colour + same drop-shadow (defined in CSS) — the
+        // only thing that changes is the letter proportions.
+        const logoText = LOGO_FONTS[cover.logoFont] || LOGO_FONTS.block;
+        return `
+          <div class="share-card" data-share-template="boardroom"${bgStyle}>
+            <div class="sc-header">
+              <span>◆ PRIVATEBOARD<span class="sc-heart">♥</span></span>
+              <span class="sc-header-right">${esc(DOMAIN)}</span>
+            </div>
+            <svg class="sc-sky-deco" viewBox="0 0 540 800" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              ${cover.skyDeco}
+              ${cover.groundDeco}
+            </svg>
+            <pre class="sc-logo" aria-label="Private Board">${logoText}</pre>
+            <div class="sc-bubble">
+              <!-- Decorative pixel blocks · scattered colored squares
+                   echo the retro-party poster's color accents on the
+                   black panel. Each block is 4-8 px in pixel-art
+                   register. Sits behind the text rows via z-index. -->
+              <span class="sc-block" style="top:14px; left:18px; width:8px; height:8px; background:#E26AA0;"></span>
+              <span class="sc-block" style="top:8px; right:30px; width:6px; height:6px; background:#F0D848;"></span>
+              <span class="sc-block" style="top:42%; left:10px; width:6px; height:6px; background:#5BC0EB;"></span>
+              <span class="sc-block" style="top:24px; right:14px; width:4px; height:4px; background:#6FB572;"></span>
+              <span class="sc-block" style="bottom:18px; left:30px; width:6px; height:6px; background:#F86868;"></span>
+              <span class="sc-block" style="bottom:12px; right:24px; width:8px; height:8px; background:#ED8E48;"></span>
+              <!-- Section 1 · director name as the panel header.
+                   The "Distilled · X" prefix follows the user's i18n
+                   setting (en / zh / ja / es). CJK runs inside the
+                   resolved string render in STHeiti bold via .cjk. -->
+              <div class="sc-bubble-name">${this.wrapCjk(esc(this._t("share_card_distilled", { name: author })))}</div>
+              <!-- 8-bit pixel divider between name and quote -->
+              <div class="sc-divider" aria-hidden="true"></div>
+              <!-- Section 2 · the quote body -->
+              <p class="sc-bubble-text" style="${qStyle}">${this.wrapCjk(esc(quote))}</p>
+              ${n.roomSubject ? `
+                <!-- 8-bit pixel divider between quote and annotation -->
+                <div class="sc-divider" aria-hidden="true"></div>
+                <!-- Section 3 · room subject (initial question) -->
+                <div class="sc-bubble-meta">// re: ${this.wrapCjk(esc(String(n.roomSubject).trim()))}</div>
+              ` : ""}
+            </div>
+            <div class="share-card-watermark">${esc(DOMAIN)}</div>
+            <div class="share-card-stamp">${esc(stampDate)}</div>
+          </div>
+        `;
+      }
+      // terminal · CLI-style card with a big ASCII "PRIVATE
+      // BOARD" logo at the top, dashed frame, code-style body.
+      // Inspired by terminal-agent CLI screenshots: status bar
+      // top-right, ASCII title centred, `// tagline`, then the
+      // note rendered as `$ cat note.txt` with the quote as
+      // the file contents and a blinking cursor below.
+      // Terminal template uses a fixed block typeface (no per-roll
+      // typeface variation — that's a boardroom-card feature). The
+      // shared LOGO_FONTS dict is defined at the top of this
+      // function so the boardroom branch can pull its rolled variant
+      // from the same source.
+      const distilledLabel = this._t("share_card_distilled", { name: author });
+      return `
+        <div class="share-card" data-share-template="terminal">
+          <div class="sc-tt-frame">
+            <div class="sc-tt-statusbar">
+              <span class="sc-tt-version">pb-cli v0.1 · ${esc(isoDate)}</span>
             </div>
-            <p class="notes-item-passage">${
-              n.contextBefore ? `<span class="note-context note-context-before">${this.escape(n.contextBefore)}</span>` : ""
-            }<span class="note-quote">${this.escape(n.quoteText)}</span>${
-              n.contextAfter ? `<span class="note-context note-context-after">${this.escape(n.contextAfter)}</span>` : ""
-            }</p>
-          </a>
-          <button type="button" class="notes-item-delete" data-note-delete title="${this.escape(deleteTitle)}" aria-label="${this.escape(deleteTitle)}">✕</button>
-        </li>
+            <pre class="sc-tt-logo">${LOGO_FONTS.block}</pre>
+            <div class="sc-tt-tagline">// ${this.wrapCjk(esc(distilledLabel))}</div>
+            <div class="sc-tt-body">
+              <div class="sc-tt-line"><span class="sc-tt-prompt">$</span> cat note.txt</div>
+              <div class="sc-tt-quote">${this.wrapCjk(esc(quote))}</div>
+              ${n.roomSubject ? `<div class="sc-tt-comment"># re: ${this.wrapCjk(esc(String(n.roomSubject).trim()))}</div>` : ""}
+              ${roomNum ? `<div class="sc-tt-comment"># source: room ${esc(roomNum)}</div>` : ""}
+              <div class="sc-tt-line"><span class="sc-tt-prompt">$</span> <span class="sc-tt-cursor">▌</span></div>
+            </div>
+          </div>
+          <div class="share-card-watermark">${esc(DOMAIN)}</div>
+          <div class="share-card-stamp">${esc(stampDate)}</div>
+        </div>
       `;
     },
 
+    /** Lazy-load html-to-image from CDN. Same loader pattern as
+     *  `public/magazine.html`'s `ensureHtmlToImage` so the All Notes
+     *  page doesn't ship the lib unless the user actually exports. */
+    _h2iLoaded: null,
+    async ensureShareCardHtmlToImage() {
+      if (window.htmlToImage) return;
+      if (!this._h2iLoaded) {
+        this._h2iLoaded = new Promise((res, rej) => {
+          const s = document.createElement("script");
+          s.src = "https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.min.js";
+          s.onload = res;
+          s.onerror = rej;
+          document.head.appendChild(s);
+        });
+      }
+      await this._h2iLoaded;
+    },
+
+    /** Capture the current preview at native 540×675 and save it as
+     *  an 800×1185 PNG. The visible preview is scaled down for fit;
+     *  we capture the un-scaled inner card so the export resolution
+     *  is independent of viewport width. Errors surface as a soft
+     *  alert + console.warn — same pattern as magazine/ppt exports. */
+    async downloadShareCard() {
+      if (!this._shareCardNote) return;
+      const btn = document.querySelector("[data-share-card-download]");
+      const overlay = document.getElementById("share-card-overlay");
+      if (!overlay) return;
+      try {
+        if (btn) { btn.disabled = true; btn.textContent = "rendering…"; }
+        await this.ensureShareCardHtmlToImage();
+        if (document.fonts && document.fonts.ready) {
+          try { await document.fonts.ready; } catch { /* best-effort */ }
+        }
+        // Find the live card element (the inner-most .share-card div
+        // inside the preview, NOT the scaling wrapper). The native
+        // card is 540 × 800; we capture at `pixelRatio = 800/540`
+        // so the exported PNG comes out at exactly 800 × 1185 — a
+        // moderate file size that scales proportionally from the
+        // source layout. (Was previously pixelRatio: 2 → 1080 × 1600,
+        // which the user found a touch too large.)
+        const card = overlay.querySelector(".share-card");
+        if (!card) throw new Error("share card not mounted");
+        const TARGET_W = 800;
+        const NATIVE_W = 540;
+        const exportRatio = TARGET_W / NATIVE_W;
+        const dataUrl = await window.htmlToImage.toPng(card, {
+          pixelRatio: exportRatio,
+          cacheBust: true,
+          width: 540,
+          height: 800,
+          canvasWidth: 540,
+          canvasHeight: 800,
+          style: { transform: "none", margin: "0", width: "540px", height: "800px" },
+        });
+        const slug = (this._shareCardNote.authorName || "note")
+          .toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 40) || "note";
+        const a = document.createElement("a");
+        a.download = `privateboard-${slug}-${(this._shareCardNote.id || "").slice(0, 6)}.png`;
+        a.href = dataUrl;
+        a.click();
+      } catch (e) {
+        console.warn("[share-card] PNG export failed:", e);
+        alert("PNG export failed — check the browser console for details.");
+      } finally {
+        if (btn) {
+          btn.disabled = false;
+          btn.innerHTML = `<span aria-hidden="true">↓</span><span>Download PNG</span>`;
+        }
+      }
+    },
+
     /** DELETE /api/notes/:id · drops a saved excerpt from the index.
      *  Confirmation is light because the action is reversible only by
      *  re-saving the same passage; we keep the prompt as a single
      *  click-confirm rather than a full overlay. */
     async deleteNoteAt(id) {
       if (!id) return;
-      if (!confirm("Delete this note? You can save it again from the room.")) return;
+      if (!confirm("Remove this note from your saved list? You can re-save it any time by highlighting the same passage in the room.")) return;
       try {
         const r = await fetch("/api/notes/" + encodeURIComponent(id), { method: "DELETE" });
         if (!r.ok) {
@@ -7137,6 +8409,27 @@
      *  Returns true when the article was found + scrolled · the
      *  caller uses this to know whether to keep the pending flag
      *  armed. */
+    /** Scroll the chat to the room's first user message · the
+     *  convene-opener at the very top of the transcript. Bound to
+     *  the `[data-jump-to-opener]` button in the input-bar's left
+     *  cluster. Smooth-scrolls so the user sees the trip; bails
+     *  silently if the room has no opener yet (fresh room mid-
+     *  convene) or the article isn't mounted. Suppresses the
+     *  bottom-snap window in scrollChatToBottom so an SSE-driven
+     *  re-render doesn't immediately yank the view back to the
+     *  newest message. */
+    scrollToOpener() {
+      const openerId = this.firstUserMessageId();
+      if (!openerId) return;
+      const article = document.querySelector(`article[data-message-id="${openerId}"]`);
+      if (!article) return;
+      try {
+        article.scrollIntoView({ behavior: "smooth", block: "start" });
+      } catch { /* */ }
+      this.chatStuckToBottom = false;
+      this._suppressBottomScrollUntil = Date.now() + 2000;
+    },
+
     scrollToMessage(messageId) {
       if (!messageId) return false;
       const article = document.querySelector(`article[data-message-id="${messageId}"]`);
@@ -7611,6 +8904,12 @@
         this.renderEmptyState();
         this.markActiveRoom(null);
       }
+      // Composer mode just changed · re-evaluate whether the
+      // agent-build ambient should be playing. Entering "agent"
+      // with a live build resumes it; leaving "agent" silences it
+      // even if the build is still chugging away (it'll resume
+      // once the user navigates back via the sidebar building row).
+      this._syncAgentBuildBgm();
     },
 
     /** Pitch copy for the new-room composer's textarea placeholder.
@@ -7880,8 +9179,29 @@
       // unmistakeably a select) without taking up visual real estate.
       const toneLbl = this._t("cmp_tone_label");
       const intensityLbl = this._t("cmp_intensity_label");
-      // Starter grid · 2-col responsive cards.
-      const starters = Array.isArray(window.BOARDROOM_STARTERS) ? window.BOARDROOM_STARTERS : [];
+      // Starter grid · 2-col responsive cards. Two parallel
+      // pools render in the same `.cmp-starters-grid`:
+      //   1. Topic recommendations (newest-first, paged, visible
+      //      list, capped at 5 in the tray). Each card carries a
+      //      synthesiser-generated tag (e.g. "strategy") in the
+      //      left column. Clicking populates the composer with
+      //      the rec's subject + attaches its seedContext
+      //      snippets so the room opens grounded in the source
+      //      material.
+      //   2. Legacy hardcoded starters from window.BOARDROOM_STARTERS.
+      //      Show only when there are no recommendations yet (or
+      //      when recs are still loading on first paint) so a
+      //      brand-new user sees something useful in the tray.
+      const recs = (this.topicRecs.items || []).slice(0, 5);
+      // Card markup lives in `topicRecCardHtml` so the
+      // initial render path and any later append paths can't
+      // drift in shape / attributes.
+      const recCards = recs.map((rec) => this.topicRecCardHtml(rec)).join("");
+
+      const showLegacyStarters = recs.length === 0;
+      const starters = showLegacyStarters && Array.isArray(window.BOARDROOM_STARTERS)
+        ? window.BOARDROOM_STARTERS
+        : [];
       const starterCards = starters.map((q, idx) => {
         const tag = (q.tag || "").replace(/^\/\/\s*/, "");
         return `
@@ -7892,6 +9212,59 @@
           </button>
         `;
       }).join("");
+      // Trigger card · disguised as the first row in the
+      // starters grid, so the "recommend" action lives in the
+      // same visual rhythm as the suggestions it produces. The
+      // card has TWO states wired through the same DOM hooks
+      // ([data-trec-label] / [data-trec-detail] / [data-trec-pct]
+      // / [data-trec-bar]) so the SSE handler can patch them
+      // in place without re-rendering the whole composer:
+      //   · IDLE (no job) · tag = "✦ discover", text = the
+      //     localised label (EN/ZH via i18n), arrow = "+".
+      //     Looks like a starter but with a lime accent +
+      //     dashed bottom rule.
+      //   · BUSY (job live) · tag = phase label (LLM-emitted,
+      //     stays English — those come from the orchestrator's
+      //     phaseLabels constant), text = animated dots +
+      //     phase detail, arrow = "N%". A thin lime progress
+      //     bar lives along the bottom edge and fills as the
+      //     pipeline ticks.
+      //
+      // The trigger LABEL is i18n'd (cmp_recs_trigger_label)
+      // because it's user-facing prompt copy, parallel to
+      // `cmp_prompt` and the time-of-day greeting above. The
+      // tag column ("discover") and starting placeholder are
+      // also keyed so locale switches flip them together.
+      const job = this.topicRecs.job;
+      const triggerBusy = !!job;
+      const triggerLabel = this._t("cmp_recs_trigger_label");
+      const triggerTag = this._t("cmp_recs_trigger_tag");
+      const triggerStarting = this._t("cmp_recs_trigger_starting");
+      const triggerCard = `
+        <button type="button"
+          class="cmp-starter cmp-recs-trigger-card${triggerBusy ? " is-busy" : ""}"
+          data-cmp-recs-trigger
+          data-topic-rec-progress
+          ${triggerBusy ? "disabled" : ""}
+          title="${this.escape(triggerLabel)}">
+          <div class="cmp-starter-tag" data-trec-label>${this.escape(triggerBusy ? (job.label || triggerStarting) : `✦ ${triggerTag}`)}</div>
+          <div class="cmp-starter-text">
+            ${triggerBusy
+              ? `<span class="cmp-recs-trigger-dots" aria-hidden="true"><i></i><i></i><i></i></span><span data-trec-detail>${this.escape(job.detail || "")}</span>`
+              : `<span>${this.escape(triggerLabel)}</span>`}
+          </div>
+          <div class="cmp-starter-arrow" data-trec-pct>${this.escape(triggerBusy ? (job.pct ? `${job.pct}%` : "·") : "+")}</div>
+          <div class="cmp-recs-trigger-bar" aria-hidden="true"><div class="cmp-recs-trigger-fill" data-trec-bar style="width: ${triggerBusy ? (job.pct || 0) : 0}%"></div></div>
+        </button>
+      `;
+
+      // Trigger card always leads; suggestions (or legacy
+      // starters as empty-state fallback) follow.
+      const trayCards = triggerCard + (recs.length > 0 ? recCards : starterCards);
+      // Pagination is intentionally OFF — the server keeps only
+      // the latest batch (6 rows). Every fresh generation wipes
+      // the previous batch, so there's never "older" data to
+      // page back to. The "+ N more" surface is gone.
 
       return `
         <section class="cmp">
@@ -7967,50 +9340,52 @@
             </div>
           </div>
 
-          ${starters.length ? `
-            <div class="cmp-starters">
-              <div class="cmp-starters-rule">
-                <span class="cmp-starters-rule-line"></span>
-                <span class="cmp-starters-rule-label">${this.escape(t.starterCaption)}</span>
-                <span class="cmp-starters-rule-line"></span>
-              </div>
-              <div class="cmp-starters-grid">${starterCards}</div>
+          <div class="cmp-starters">
+            <div class="cmp-starters-rule">
+              <span class="cmp-starters-rule-line"></span>
+              <span class="cmp-starters-rule-label">${this.escape(t.starterCaption)}</span>
+              <span class="cmp-starters-rule-line"></span>
             </div>
-          ` : ""}
+            <div class="cmp-starters-grid">${trayCards}</div>
+          </div>
         </section>
       `;
     },
 
-    /** Time-of-day greeting like "// good evening, Kay" / "// 晚上好，Kay". */
-    composerGreeting(lang, name) {
-      // Follows composer chrome locale (`lang` · en or zh via I18n).
+    /** Time-of-day greeting like "// good evening, Kay" / "// 晚上好，Kay".
+     *  Four locale-agnostic buckets · the underlying greet_0..3 keys
+     *  are translated per-locale in i18n.js. Previously branched on
+     *  `lang === "zh"` to pick a 6-bucket zh variant; collapsed to 4
+     *  so adding new locales is mechanical (each locale just fills
+     *  the four keys). The `lang` arg is preserved for callers but
+     *  no longer drives bucket selection. */
+    composerGreeting(_lang, name) {
       const h = new Date().getHours();
-      const isZh = lang === "zh";
       let key;
-      if (isZh) {
-        if (h < 5) key = "greet_zh_0";
-        else if (h < 12) key = "greet_zh_1";
-        else if (h < 14) key = "greet_zh_2";
-        else if (h < 18) key = "greet_zh_3";
-        else if (h < 23) key = "greet_zh_4";
-        else key = "greet_zh_5";
-      } else if (h < 5) key = "greet_en_0";
-      else if (h < 12) key = "greet_en_1";
-      else if (h < 18) key = "greet_en_2";
-      else key = "greet_en_3";
-      return this._t(key, { name });    },
+      if (h < 5)       key = "greet_0";  // late night / early morning
+      else if (h < 12) key = "greet_1";  // morning
+      else if (h < 18) key = "greet_2";  // afternoon
+      else             key = "greet_3";  // evening
+      return this._t(key, { name });
+    },
 
+    /** Returns the active UI locale code · one of the 4 supported
+     *  locales (en / zh / ja / es). Used by composer chrome that
+     *  used to branch en/zh only — now passes through all four
+     *  so each locale can localise hero / greeting / placeholder. */
     composerLanguage() {
       try {
         if (window.I18n && typeof window.I18n.getLocale === "function") {
-          return window.I18n.getLocale() === "zh" ? "zh" : "en";
+          const supported = window.I18n.SUPPORTED_LOCALES || ["en", "zh"];
+          const loc = window.I18n.getLocale();
+          return supported.indexOf(loc) >= 0 ? loc : "en";
         }
       } catch { /* ignore */ }
       try {
         const lang = (navigator.language || "").toLowerCase();
-        if (lang.startsWith("zh") || lang.includes("cn") || lang.includes("hans") || lang.includes("hant")) {
-          return "zh";
-        }
+        if (lang.startsWith("zh")) return "zh";
+        if (lang.startsWith("ja")) return "ja";
+        if (lang.startsWith("es")) return "es";
       } catch { /* ignore */ }
       return "en";
     },
@@ -8034,6 +9409,24 @@
       ta.style.height = h + "px";
     },
 
+    /** Auto-grow the room input-bar's textarea. Smaller bounds
+     *  than the composer's autosize since the input-bar sits in
+     *  a tighter floating-card frame · 24px single-line baseline,
+     *  200px cap (then internal scroll). Always cycles through
+     *  `height: auto` so the field SHRINKS back to baseline after
+     *  the user sends + the value is cleared (the composer's
+     *  quick-path skip behaviour would leave a stale tall field
+     *  here). */
+    autosizeRoomInputTextarea() {
+      const ta = document.querySelector(".ib-textarea[data-send-input]");
+      if (!ta) return;
+      const MIN = 24;
+      const MAX = 200;
+      ta.style.height = "auto";
+      const h = Math.min(MAX, Math.max(MIN, ta.scrollHeight));
+      ta.style.height = h + "px";
+    },
+
     /* ─────────── New-agent composer ────────────────────────────────
        Inline AI-first agent creation. User describes what kind of
        director they want; LLM generates name / role / bio / cover
@@ -8884,11 +10277,20 @@
       };
       this._personaStartedAt = Date.now();
       this.renderEmptyState();
+      // Start the sci-fi ambient · runs while personaJob.status is
+      // "starting" or "running". SSE terminal handlers (final /
+      // error / aborted) and cancelPersonaBuild flip the status and
+      // call _syncAgentBuildBgm again to stop the loop.
+      this._syncAgentBuildBgm();
       try {
+        // Pass the active UI locale so the narrator pass at the end of
+        // phase 7 writes the build-log summary in the user's language.
+        // Falls back to "en" server-side if the field is missing.
+        const locale = (window.I18n && typeof window.I18n.getLocale === "function") ? window.I18n.getLocale() : "en";
         const r = await fetch("/api/agents/generate-persona", {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify({ description }),
+          body: JSON.stringify({ description, locale }),
         });
         if (!r.ok) {
           const e = await r.json().catch(() => ({}));
@@ -8912,6 +10314,7 @@
         this.personaJob.errorMessage = (e && e.message) ? e.message : String(e);
         this._personaRender();
         this.renderSidebarAgents();
+        this._syncAgentBuildBgm();
       }
     },
 
@@ -9044,6 +10447,10 @@
         // Sidebar row flips from "BUILD · phase X · Y%" to "READY"
         // so the user can spot it from anywhere.
         this.renderSidebarAgents();
+        // Build phase is over · stop the sci-fi ambient. The save
+        // overlay (if it opens immediately below) gets a clean
+        // audio backdrop.
+        this._syncAgentBuildBgm();
         // Auto-open the manual-config overlay one-shot · only when
         // the user is actually on the agent composer (no room
         // loaded). If they navigated into a room mid-build, opening
@@ -9067,6 +10474,7 @@
         // user recovers via the inline error card on the agent
         // composer view.
         this.renderSidebarAgents();
+        this._syncAgentBuildBgm();
       }));
       sse.addEventListener("persona-aborted", onMsg(() => {
         this.personaJob.status = "aborted";
@@ -9074,6 +10482,7 @@
         this._stopPersonaTick();
         this._personaRender();
         this.renderSidebarAgents();
+        this._syncAgentBuildBgm();
       }));
 
       sse.onerror = () => {
@@ -9146,6 +10555,7 @@
       if (silent) {
         this.personaJob = null;
       }
+      this._syncAgentBuildBgm();
     },
 
     /** User clicked Discard from the failed / aborted card. Drops
@@ -9155,6 +10565,7 @@
       this._stopPersonaTick();
       this.personaJob = null;
       this._personaOverlayShown = false;
+      this._syncAgentBuildBgm();
       // Close the manual overlay if it's still open · the user
       // explicitly discarded, no need to leave a stale form.
       if (typeof window.closeNewAgent === "function") {
@@ -9457,6 +10868,39 @@
       if (this._personaUiActive()) this.renderEmptyState();
     },
 
+    /** Agent-build ambient BGM controller · drives
+     *  `window.boardroomAgentBuildBgm` based on the user's current
+     *  view + the live build state. Plays during Signal-mode
+     *  generation OR Full-persona builds when the user is on the
+     *  agent composer (not buried inside a room). Stops the
+     *  moment any of those preconditions stops being true.
+     *  Idempotent · safe to call from anywhere; the module's own
+     *  start/stop are no-ops when already in the target state. */
+    _syncAgentBuildBgm() {
+      const bgm = window.boardroomAgentBuildBgm;
+      if (!bgm) return;
+      // Global SFX gate · the BGM module re-checks this internally,
+      // but checking here saves an audio-graph construction on the
+      // start path when the user already has SFX off.
+      let sfxOn = true;
+      try {
+        if (typeof window.boardroomTypingSfx?.isEnabled === "function") {
+          sfxOn = window.boardroomTypingSfx.isEnabled() !== false;
+        }
+      } catch { /* default permissive */ }
+      const onComposer = this.composerMode === "agent" && !this.currentRoomId;
+      const signalGenerating = this.agentSpecGenerating === true;
+      const personaActive = !!(this.personaJob && (
+        this.personaJob.status === "starting" ||
+        this.personaJob.status === "running"
+      ));
+      const shouldPlay = sfxOn && onComposer && (signalGenerating || personaActive);
+      try {
+        if (shouldPlay) bgm.start();
+        else bgm.stop();
+      } catch { /* audio failures must not break the build flow */ }
+    },
+
     /** Format seconds as MM:SS. Used by the build-stage header for
      *  elapsed + ETA. */
     _fmtMmSs(secs) {
@@ -9647,6 +11091,11 @@
       this._agentGenUsingWebSearch = this.loadAgentComposerWebSearch();
       this.renderEmptyState();
       this.startAgentGenTick();
+      // Start the sci-fi ambient · runs while agentSpecGenerating is
+      // true. The `finally` block below flips the flag and calls
+      // _syncAgentBuildBgm again, stopping the BGM. Same helper
+      // governs Full-mode (see startFullPersonaBuild).
+      this._syncAgentBuildBgm();
 
       // AbortController · used to enforce the 5-min hard timeout AND
       // to clean up cleanly if the user discards mid-flight.
@@ -9702,6 +11151,10 @@
         this.stopAgentGenTick();
         this.agentSpecGenerating = false;
         this.renderEmptyState();
+        // Stop the ambient · success and failure both end the build
+        // phase, and the overlay (if it opens) is its own UI moment
+        // that doesn't want lingering audio behind it.
+        this._syncAgentBuildBgm();
         // Successful fetch path · open the floating save overlay (same
         // component Full-mode uses) once the underlying empty composer
         // has painted. Skipped on the error path · the inline error
@@ -9830,6 +11283,7 @@
       this.agentSpecGenerating = false;
       this.agentSpecError = null;
       this.renderEmptyState();
+      this._syncAgentBuildBgm();
     },
 
     redoAgentSpec() {
@@ -10054,7 +11508,7 @@
         .filter((a) => a.roleKind !== "moderator")
         .sort((a, b) => (a.name || "").localeCompare(b.name || ""));
       // System UI · always English (composer director picker chrome).
-      const t = { title: "Pick directors", hint: "2-4 recommended", done: "Done", info: "View profile" };
+      const t = { title: "Pick directors", hint: "2-4 recommended", info: "View profile" };
       const rows = dirs.map((a) => {
         const checked = state.directorIds.includes(a.id);
         const modelLabel = MODEL_LABELS[a.modelV] || a.modelV || "";
@@ -10082,9 +11536,6 @@
           <span class="composer-pick-hint">${this.escape(t.hint)}</span>
         </div>
         <div class="composer-pick-list">${rows || `<div class="composer-pick-empty">${this.escape(this._t("picker_no_directors"))}</div>`}</div>
-        <div class="composer-pick-foot">
-          <button type="button" class="composer-pick-done" data-composer-pick-done>${this.escape(t.done)}</button>
-        </div>
       `;
       document.body.appendChild(pop);
       // Position with viewport collision detection. Generous buffer
@@ -10167,7 +11618,7 @@
       // it so the user can fall back to chair-pick by clearing.
       state.autoPickDirectors = state.directorIds.length === 0;
       this.saveComposerState();
-      // Don't close the picker — let the user toggle multiple before Done.
+      // Don't close the picker on each toggle — let the user pick multiple in one open.
       // But re-render the chip strip in the composer so the count updates.
       this.refreshComposerCast();
       // Update the picker row's visual state in place.
@@ -10259,6 +11710,19 @@
       }
     },
 
+    /** Flip the CURRENT room's delivery mode (text ↔ voice) ·
+     *  parallel to setComposerDeliveryMode but for an active
+     *  room. Optimistically repaints the toggle for instant
+     *  feedback, then PATCHes the server. The SSE
+     *  `settings-changed` event broadcasts to other tabs and
+     *  re-evaluates the round-table / transcript visibility.
+     *
+     *  When flipping TO voice without a voice key configured,
+     *  follows the composer's pattern: leaves the toggle in its
+     *  current state and opens Settings → API Keys (focused on
+     *  minimax). The server gracefully degrades to text-only
+     *  chunks regardless, so the worst case is "no audio" not
+     *  "broken room". */
     /** Generic option-list dropdown anchored under a tune trigger
      *  button. Used for both tone and intensity. Each option is a
      *  full-text row with a short hint (current/calmer/etc). Click an
@@ -10311,15 +11775,13 @@
           current = state.intensity;
         }
       } else if (kind === "delivery") {
-        opts = lang === "zh"
-          ? [
-              { v: "text", label: "Text", hint: "最快的文字会议" },
-              { v: "voice", label: "Voice", hint: "口语化 · 逐位播放" },
-            ]
-          : [
-              { v: "text", label: "Text", hint: "fast written meeting" },
-              { v: "voice", label: "Voice", hint: "spoken · paced turns" },
-            ];
+        // Delivery-mode picker · text vs voice. Labels stay
+        // "Text" / "Voice" (universally recognisable in this
+        // domain), hints flip with locale via i18n.
+        opts = [
+          { v: "text",  label: "Text",  hint: this._t("delivery_text_hint") },
+          { v: "voice", label: "Voice", hint: this._t("delivery_voice_hint") },
+        ];
         current = state.deliveryMode === "voice" ? "voice" : "text";
       } else if (kind === "locale") {
         // Interface language picker · routes through the shared
@@ -10327,10 +11789,17 @@
         // doesn't ship a separate two-button toggle. Hints describe
         // what the locale switch affects so the user knows it's the
         // chrome language, not the brief language.
-        opts = [
-          { v: "en", label: "EN",   hint: "interface in english" },
-          { v: "zh", label: "中文", hint: "界面语言切到中文" },
-        ];
+        // Locale picker · uses the I18n.SUPPORTED_LOCALES list as
+        // the source of truth so adding a new language only needs
+        // changes in i18n.js. Labels come from the `locale_<code>`
+        // keys translated in EACH locale's STR block.
+        const supported = (window.I18n && window.I18n.SUPPORTED_LOCALES) || ["en", "zh"];
+        const tr = (k) => (window.I18n && window.I18n.t ? window.I18n.t(k) : k);
+        opts = supported.map((code) => ({
+          v: code,
+          label: tr(`locale_${code}`),
+          hint: tr(`locale_${code}`),
+        }));
         current = (window.I18n && window.I18n.getLocale && window.I18n.getLocale()) || "en";
       } else if (kind === "agent-builder-mode") {
         // Build-mode picker · Signal vs Full persona. Same `.cmp-dd`
@@ -10575,11 +12044,16 @@
           intensity: state.intensity,
           deliveryMode: state.deliveryMode,
           autoPick: useAutoPick,
+          seedContext: state.seedContext || null,
         });
         // Clear the saved draft now that the room is convened — next
         // visit to "+ New Room" should land on a fresh textarea, not
-        // re-show the just-submitted subject.
+        // re-show the just-submitted subject. Also drop the attached
+        // seedContext — the snippets travelled into the room's
+        // opening message; we don't want them piggy-backing on the
+        // NEXT room the user opens.
         state.subject = "";
+        state.seedContext = null;
         this.saveComposerState();
       } catch (e) {
         if (btn) btn.classList.remove("busy");
@@ -10587,6 +12061,242 @@
       }
     },
 
+    /** Fetch the (single) page of topic recommendations · the
+     *  server keeps only the latest batch (6 rows), so one
+     *  request is the whole story. Idempotent — safe to call
+     *  from renderEmptyState() boot AND after a generation job
+     *  completes. Sets `topicRecs.loaded` so first-paint can
+     *  fall back to legacy hardcoded starters until this
+     *  resolves. */
+    async refreshTopicRecs() {
+      try {
+        const r = await fetch("/api/topic-recs?limit=6");
+        if (!r.ok) {
+          this.topicRecs.loaded = true;
+          this.renderEmptyState();
+          return;
+        }
+        const j = await r.json();
+        this.topicRecs.items = Array.isArray(j.items) ? j.items : [];
+        this.topicRecs.loaded = true;
+        // Re-render only when the user is still on the empty
+        // (composer) state · openRoom paths have already moved
+        // on and an unsolicited re-render would steal focus.
+        if (!this.currentRoomId) this.renderEmptyState();
+      } catch { /* network error · keep stale list, surface nothing */ }
+    },
+
+    /** Derive a short tag from a subject string · used as the
+     *  client-side fallback when a rec row has no `tag` field
+     *  (legacy rows from before migration 035, or the rare
+     *  case where the LLM forgot to include one and the
+     *  orchestrator's safety-net path also fired). Mirrors the
+     *  orchestrator's `deriveTagFromSubject` logic so the
+     *  vocabulary stays consistent across paths. */
+    _deriveTagFromSubject(subject) {
+      const STOP = new Set([
+        "the", "and", "for", "are", "you", "your", "what", "how",
+        "why", "when", "with", "from", "this", "that", "should",
+        "could", "would", "have", "has", "will", "into", "about",
+      ]);
+      const words = (subject || "")
+        .toLowerCase()
+        .replace(/[^a-z0-9\s-]/g, " ")
+        .split(/\s+/)
+        .filter((w) => w.length > 2 && !STOP.has(w));
+      return words.slice(0, 2).join(" ").slice(0, 28) || "topic";
+    },
+
+    /** Build the HTML for a single topic-rec card. Used both by
+     *  `renderComposerHtml` (initial render) and `loadMoreTopicRecs`
+     *  (in-place append). Keeping the markup in one helper means
+     *  the two paths can't drift in shape or attributes. */
+    topicRecCardHtml(rec) {
+      // Tag priority: synthesiser-produced category > derive
+      // from subject. We NEVER fall back to "web" / "memory"
+      // as the visible tag — those are data-provenance tokens,
+      // not topic categories. The `data-source` attribute still
+      // carries the provenance for CSS to colour-tint with.
+      const tag = (typeof rec.tag === "string" && rec.tag.trim().length > 0)
+        ? rec.tag
+        : this._deriveTagFromSubject(rec.subject);
+      const hint = rec.rationale || "";
+      return `
+        <button type="button" class="cmp-starter cmp-rec" data-cmp-rec="${this.escape(rec.id)}" data-source="${this.escape(rec.source)}">
+          <div class="cmp-starter-tag">${this.escape(tag)}</div>
+          <div class="cmp-starter-text">${this.escape(rec.subject || "")}</div>
+          ${hint ? `<div class="cmp-rec-hint" title="${this.escape(hint)}">${this.escape(hint)}</div>` : ""}
+          <div class="cmp-starter-arrow">→</div>
+        </button>
+      `;
+    },
+
+    // (no `loadMoreTopicRecs` — see comments at the
+    //  pagination-removed render block above.)
+
+    /** Kick off a new topic-recommendation generation job and
+     *  attach an SSE stream so the composer's progress strip
+     *  ticks through phases live. On `topic-final` we refresh
+     *  the tray from the API; on error we surface the message
+     *  inline so the user understands why nothing landed. */
+    async startTopicRecJob() {
+      if (this.topicRecs.job) return; // already running · idempotent click
+      // Pre-flight · API gate requires a model key. Surface the
+      // same prompt as Convene so the user fixes it once.
+      if (!(await this.requireModelKey())) return;
+      try {
+        const r = await fetch("/api/topic-recs", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({}),
+        });
+        if (!r.ok) {
+          const j = await r.json().catch(() => ({}));
+          alert("Couldn't start: " + (j.error || r.statusText));
+          return;
+        }
+        const { jobId } = await r.json();
+        this.topicRecs.job = {
+          id: jobId,
+          phase: 0,
+          label: this._t("cmp_recs_trigger_starting"),
+          pct: 0,
+          detail: "",
+          es: null,
+          error: null,
+        };
+        if (!this.currentRoomId) this.renderEmptyState();
+        this._attachTopicRecJobSSE(jobId);
+      } catch (e) {
+        alert("Couldn't start: " + (e && e.message ? e.message : e));
+      }
+    },
+
+    /** Internal · attach the EventSource for a running job and
+     *  wire each event type to the in-memory job state. */
+    _attachTopicRecJobSSE(jobId) {
+      const url = `/api/topic-recs/jobs/${encodeURIComponent(jobId)}/stream`;
+      const es = new EventSource(url);
+      this.topicRecs.job.es = es;
+      const updateStrip = () => {
+        const el = document.querySelector("[data-topic-rec-progress]");
+        if (!el || !this.topicRecs.job) return;
+        const j = this.topicRecs.job;
+        const labelEl = el.querySelector("[data-trec-label]");
+        if (labelEl) labelEl.textContent = j.label || "";
+        const detailEl = el.querySelector("[data-trec-detail]");
+        if (detailEl) detailEl.textContent = j.detail || "";
+        const pctEl = el.querySelector("[data-trec-pct]");
+        if (pctEl) pctEl.textContent = j.pct ? `${j.pct}%` : "·";
+        const bar = el.querySelector("[data-trec-bar]");
+        if (bar) bar.style.width = `${j.pct || 0}%`;
+      };
+      const terminate = () => {
+        try { es.close(); } catch { /* noop */ }
+        this.topicRecs.job = null;
+        if (!this.currentRoomId) this.renderEmptyState();
+      };
+      es.addEventListener("hello", (ev) => {
+        try {
+          const data = JSON.parse(ev.data);
+          if (this.topicRecs.job) {
+            this.topicRecs.job.phase = data.currentPhase || 0;
+            this.topicRecs.job.pct = data.progressPct || 0;
+          }
+          updateStrip();
+        } catch { /* noop */ }
+      });
+      es.addEventListener("topic-phase-start", (ev) => {
+        try {
+          const data = JSON.parse(ev.data);
+          if (this.topicRecs.job) {
+            this.topicRecs.job.phase = data.phase;
+            this.topicRecs.job.label = data.label;
+            this.topicRecs.job.detail = "";
+          }
+          updateStrip();
+        } catch { /* noop */ }
+      });
+      es.addEventListener("topic-phase-progress", (ev) => {
+        try {
+          const data = JSON.parse(ev.data);
+          if (this.topicRecs.job) {
+            this.topicRecs.job.phase = data.phase;
+            this.topicRecs.job.detail = data.detail || "";
+            this.topicRecs.job.pct = data.progressPct || this.topicRecs.job.pct;
+          }
+          updateStrip();
+        } catch { /* noop */ }
+      });
+      es.addEventListener("topic-phase-end", (ev) => {
+        try {
+          const data = JSON.parse(ev.data);
+          if (this.topicRecs.job) {
+            this.topicRecs.job.pct = data.progressPct || this.topicRecs.job.pct;
+          }
+          updateStrip();
+        } catch { /* noop */ }
+      });
+      es.addEventListener("topic-final", () => {
+        // Pull the freshest first page so the new cards land
+        // immediately; closing the EventSource is on the same
+        // tick so the next click doesn't see a stale job.
+        terminate();
+        void this.refreshTopicRecs();
+      });
+      es.addEventListener("topic-error", (ev) => {
+        let msg = "generation failed";
+        try { msg = (JSON.parse(ev.data).message) || msg; } catch { /* noop */ }
+        alert("Topic generation failed: " + msg);
+        terminate();
+      });
+      es.addEventListener("topic-aborted", () => {
+        terminate();
+      });
+      es.onerror = () => {
+        // Transport hiccup · treat as terminal so the UI doesn't
+        // stay stuck on a phantom progress strip.
+        if (this.topicRecs.job) terminate();
+      };
+    },
+
+    /** Click handler on a recommendation card · fetches the
+     *  full row (to recover seedContext) then applies it to the
+     *  composer state so the next Convene carries the snippets
+     *  through to the opening message's meta. */
+    async applyTopicRec(id) {
+      if (!id) return;
+      try {
+        const r = await fetch(`/api/topic-recs/${encodeURIComponent(id)}`);
+        if (!r.ok) return;
+        const row = await r.json();
+        if (!row || typeof row.subject !== "string") return;
+        const state = this.loadComposerState();
+        state.subject = row.subject;
+        state.seedContext = {
+          topicRecId: row.id,
+          // Rationale is the "why this fits you" line the
+          // synthesiser produced · it's hidden from the card
+          // UI but forwarded as background context so the
+          // chair's clarify prompt can ground its first turn
+          // in the same reasoning the recommendation was
+          // built on.
+          rationale: typeof row.rationale === "string" ? row.rationale : "",
+          snippets: Array.isArray(row.seedContext) ? row.seedContext : [],
+        };
+        this.saveComposerState();
+        this.renderEmptyState();
+        setTimeout(() => {
+          const ta = document.querySelector("[data-composer-subject]");
+          if (ta) {
+            ta.focus();
+            ta.setSelectionRange(ta.value.length, ta.value.length);
+            this.autosizeComposerTextarea?.();
+          }
+        }, 50);
+      } catch { /* noop */ }
+    },
+
     /** Apply a starter spec into the composer state — fills the
      *  textarea, swaps the cast / tone / intensity to the starter's
      *  presets, then re-renders. User can adjust before hitting Enter. */
@@ -10814,6 +12524,25 @@
                 const briefs = Array.isArray(this.currentBriefs) ? this.currentBriefs : [];
                 const multi = briefs.length > 1;
                 const directHref = this.briefViewerHref(this.currentBrief, r.id) || `/report.html?r=${this.escape(r.id)}`;
+                // Brief mid-pipeline · render the View Report slot in
+                // its pending shape: a non-anchor `<span>` so the
+                // browser can't navigate to a half-empty report, plus
+                // `data-pending="1"` so the shared CSS rule applies
+                // (cursor: progress, opacity 0.7, pointer-events: none).
+                // Exclude errored / interrupted / timed-out briefs ·
+                // those carry no body but are NOT generating, so the
+                // recovery UI inside the report page is the right
+                // destination (still clickable).
+                const errored = !!(this.currentBrief.error
+                  || this.currentBrief.interrupted
+                  || this.currentBrief.timedOut);
+                const generating = !errored
+                  && (this.currentBrief.isGenerating === true
+                    || !this.briefHasBody(this.currentBrief)
+                    || this.currentBrief.title === "Generating…");
+                if (generating) {
+                  return `<span class="view-report-btn generate-report" data-view-report data-pending="1" role="button" aria-disabled="true" title="${this.escape(this._t("room_view_report_generating_title"))}"><span class="vr-mark">·</span> ${this.escape(this._t("room_view_report_generating"))}</span>`;
+                }
                 if (!multi) {
                   return `<a href="${directHref}" target="_blank" rel="noopener" class="view-report-btn" data-view-report>${this.escape(this._t("room_view_report"))}</a>`;
                 }
@@ -11088,6 +12817,13 @@
 
     enqueueVoiceChunk(roomId, chunk) {
       if (!chunk || !chunk.messageId || !chunk.audioBase64 || !chunk.mimeType) return;
+      // Stop the thinking SFX loop proactively · the next render
+      // cycle would do this anyway via `anyVoiceQueued`, but doing
+      // it here guarantees the AudioContext is idle BEFORE
+      // `_createVoiceStream` calls `audio.play()`. On Safari / iOS
+      // a continuously-active AudioContext can claim the audio
+      // session and prevent the HTMLAudioElement from starting.
+      try { window.boardroomTypingSfx?.setThinking?.(false); } catch { /* ignore */ }
       let q = this.voiceQueues[chunk.messageId];
       if (!q) {
         // Serialize voice playback · only one TTS clip plays at a
@@ -11253,6 +12989,56 @@
       this.renderRoundTable();
     },
 
+    /** Chair clarify bubble · parallel surface to the user bubble.
+     *  Pins the chair's clarifying question to the chair seat with a
+     *  10s border countdown (same conic-gradient mechanic as the
+     *  user bubble). Voice-mode only · in text mode the question
+     *  appears as a normal chat bubble and the user can read it
+     *  inline. Calling again before timeout REPLACES the text and
+     *  resets the deadline. */
+    CHAIR_BUBBLE_TTL_MS: 10000,
+    showChairBubble(text) {
+      const trimmed = String(text || "").trim();
+      if (!trimmed) return;
+      if (this.currentRoom && this.currentRoom.status === "adjourned") return;
+      this.chairBubble.text = trimmed;
+      this.chairBubble.deadline = Date.now() + this.CHAIR_BUBBLE_TTL_MS;
+      this.chairBubble.dismissed = false;
+      if (!this.chairBubble.intervalId) {
+        this.chairBubble.intervalId = setInterval(() => this.tickChairBubble(), 1000);
+      }
+      this.renderRoundTable();
+    },
+
+    /** 1Hz tick · surgical update of the border-progress CSS var.
+     *  Mirrors tickUserBubble exactly · see that method for the
+     *  full reasoning around surgical-vs-full rerender. */
+    tickChairBubble() {
+      if (this.chairBubble.dismissed) return;
+      const now = Date.now();
+      if (now >= this.chairBubble.deadline) {
+        this.dismissChairBubble();
+        return;
+      }
+      const bubbleEl = document.querySelector("[data-rt-chair-bubble]");
+      if (bubbleEl) {
+        const elapsed = this.CHAIR_BUBBLE_TTL_MS - (this.chairBubble.deadline - now);
+        const progress = Math.min(1, Math.max(0, elapsed / this.CHAIR_BUBBLE_TTL_MS));
+        bubbleEl.style.setProperty("--rt-bubble-chair-progress", progress.toFixed(3));
+      }
+    },
+
+    dismissChairBubble() {
+      if (this.chairBubble.intervalId) {
+        clearInterval(this.chairBubble.intervalId);
+        this.chairBubble.intervalId = null;
+      }
+      this.chairBubble.dismissed = true;
+      this.chairBubble.text = "";
+      this.chairBubble.deadline = 0;
+      this.renderRoundTable();
+    },
+
     /** Cycle to the next preset rate · wraps around at the top.
      *  Persists to localStorage and applies the new rate to every
      *  audio element currently playing in `voiceQueues`. The HUD
@@ -11939,11 +13725,13 @@
             <div class="convene-eyebrow">${this.escape(this._t("convene_eyebrow"))}</div>
             ${originHtml}
             <h2 class="convene-body">${this.renderBody(m.body)}</h2>
-            ${toggleHtml}
             <div class="convene-meta">
-              <span class="convene-by">${who}</span>
-              <span class="convene-time">· ${this.timeFmt(m.createdAt)}</span>
-              <span class="convene-cast">· ${this.escape(this._t("convene_meta_to"))} ${this.currentMembers.map((a) => this.escape(a.handle)).join(" ")}</span>
+              <span class="convene-meta-info">
+                <span class="convene-by">${who}</span>
+                <span class="convene-time">· ${this.timeFmt(m.createdAt)}</span>
+                <span class="convene-cast">· ${this.escape(this._t("convene_meta_to"))} ${this.currentMembers.map((a) => this.escape(a.handle)).join(" ")}</span>
+              </span>
+              ${toggleHtml}
             </div>
           </article>
         `;
@@ -12159,45 +13947,12 @@
       }
 
       // No-brief closing marker · chair posts this when the user
-      // adjourned with skipBrief. Rendered as a milestone card (chip +
-      // flanking lines) instead of a chat bubble so the transcript
-      // ends on a clear "no report filed" beat that doesn't read as
-      // just another chair turn.
-      //
-      // CTA · "Generate report now" button surfaces when the room is
-      // adjourned + no brief exists yet. The user can change their
-      // mind without opening a follow-up room. Hidden once a brief
-      // has been filed (currentBrief !== null) — the card then reads
-      // as a historical marker only.
-      if (isChair && metaKind === "no-brief") {
-        const ts = this.timeFmt(m.createdAt);
-        // System UI · always English (no-brief card chrome).
-        const hasBrief = !!this.currentBrief;
-        const chairName = (this.prefs?.name || "").trim() || this._t("nb_chair_fallback");
-        const cta = hasBrief
-          ? ""
-          : `
-            <div class="nb-actions">
-              <button type="button" class="nb-cta" data-generate-brief>
-                <span class="nb-cta-mark">▸</span>
-                <span class="nb-cta-text">${this.escape(this._t("nb_cta"))}</span>
-              </button>
-            </div>
-          `;
-        return `
-          <div class="no-brief-card" data-message-id="${this.escape(m.id)}">
-            <span class="nb-chip">
-              <span class="nb-mark">⊘</span>
-              <span class="nb-eyebrow">${this.escape(this._t("nb_eyebrow"))}</span>
-            </span>
-            <div class="nb-body">
-              <strong>${this.escape(chairName)}</strong> ${this.escape(this._t("nb_body"))}
-            </div>
-            ${cta}
-            <div class="nb-meta">${this.escape(ts)}</div>
-          </div>
-        `;
-      }
+      // adjourned with skipBrief. Previously rendered as a special
+      // milestone card; now falls through to the regular chair
+      // bubble below so the closer reads as the chair speaking,
+      // not as separate UI chrome. The "Generate report" affordance
+      // still lives in the room header for users who change their
+      // mind.
 
       const baseCls = isUser
         ? "user"
@@ -12588,6 +14343,51 @@
       }
     },
 
+    /** Decide whether the speaking-queue strip should be collapsed
+     *  given the current room state. The rule: collapse by default
+     *  (one-liner is enough when a single director is streaming),
+     *  expand when the user benefits from seeing the full cast:
+     *    · awaitingClarify · cast preview before chair releases them
+     *    · awaitingContinue · vote pending, next-round preview
+     *    · pendingUserMessage · user just queued, show what comes
+     *      before / after their message
+     *  Empty queue + idle stays collapsed (nothing to expand to).
+     *
+     *  This is the "auto" baseline; manual user clicks on the
+     *  chevron inverse it until the next significant state shift
+     *  (see `_applyQueueAutoState`). */
+    _computeQueueAutoCollapsed() {
+      const room = this.currentRoom;
+      if (!room) return true;
+      if (room.awaitingClarify) return false;
+      if (room.awaitingContinue) return false;
+      if (this.pendingUserMessage) return false;
+      // Default collapsed otherwise · the one-liner summary is the
+      // right shape when a director is streaming or queued.
+      return true;
+    },
+
+    /** Apply the auto-collapse decision to the speaking-queue
+     *  DOM. Resets the user override when the auto state would
+     *  flip (so a clarify→continue transition picks up the new
+     *  auto baseline rather than carrying a stale manual pick). */
+    _applyQueueAutoState() {
+      const queue = document.getElementById("speaking-queue");
+      if (!queue) return;
+      const newAuto = this._computeQueueAutoCollapsed();
+      if (newAuto !== this._queueAutoCollapsed) {
+        this._queueAutoCollapsed = newAuto;
+        // Auto baseline flipped · drop the user override so the
+        // new auto-target shows through. The user can re-flip
+        // explicitly any time by clicking the chevron.
+        this._queueUserOverride = false;
+      }
+      const finalCollapsed = this._queueUserOverride ? !newAuto : newAuto;
+      queue.classList.toggle("collapsed", finalCollapsed);
+      const btn = queue.querySelector(".queue-toggle");
+      if (btn) btn.setAttribute("aria-expanded", finalCollapsed ? "false" : "true");
+    },
+
     /** Build the one-line summary shown in the collapsed speaking-queue
      *  strip. Mirrors the expanded queue: speaking, pending, or idle. */
     renderQueueCollapsed(items) {
@@ -12678,6 +14478,13 @@
       // Update the collapsed summary alongside the expanded list so the
       // collapsed strip never shows stale text.
       this.renderQueueCollapsed(renderItems);
+      // Auto-expand/collapse logic · the strip flips based on the
+      // room state (clarify / continue / pending user message
+      // expand it; everything else collapses). User can still
+      // override via the chevron — see _applyQueueAutoState. Has
+      // to run after we've populated renderItems so the auto
+      // decision sees the current queue shape.
+      this._applyQueueAutoState();
 
       if (renderItems.length === 0) {
         list.innerHTML = "";
@@ -13218,23 +15025,58 @@
         speakingId = this.currentChair.id;
         speakerState = "thinking";
       }
+      // (3b) Convening sequence active (auto-pick + chair prep) ·
+      //      the chat-side convening card is hidden in voice mode,
+      //      so without this the stage shows nothing happening for
+      //      the 3-4s the picker LLM + chair tools + LLM startup
+      //      take. chairPending above only fires AFTER auto-pick-
+      //      complete; conveneState covers the EARLIER picker phase
+      //      too. Cleared on the chair's first message-appended.
+      if (!speakingId && this.conveneState && this.currentChair) {
+        speakingId = this.currentChair.id;
+        speakerState = "thinking";
+      }
       if (!speakingId && Array.isArray(this.currentQueue) && this.currentQueue[0] && this.currentQueue[0].status === "speaking") {
         speakingId = this.currentQueue[0].agentId;
         speakerState = "thinking";
       }
 
-      // Speaker-change SFX · fire a soft chime when the active
-      // speaker flips (idle → first speaker, or A → B). Skips
-      // speaker → idle (no chime when the room goes quiet) and
-      // skips repeated calls within the same speaker. Same toggle
-      // gate as the typing tick · user-settings "sound" toggle.
-      if (speakingId !== this._lastSpeakerId) {
-        if (speakingId && window.boardroomTypingSfx
-            && typeof window.boardroomTypingSfx.speakerChange === "function") {
-          window.boardroomTypingSfx.speakerChange();
-        }
-        this._lastSpeakerId = speakingId;
-      }
+      // Speaker / thinking SFX · two distinct cues:
+      //   · `setThinking(true)` starts a looping 8-bit pulse hum
+      //     while a seat shows the thought-bubble. Idempotent ·
+      //     calling repeatedly during the thinking phase is free.
+      //     Switched off as soon as the speaker starts streaming
+      //     (state flips to "speaking") OR the room goes idle.
+      //   · `speakerChange()` (legacy triangle-wave chime) only
+      //     fires for the rarer direct-to-speaking transition
+      //     where there's no thinking phase between A → B (e.g.
+      //     chair templated announcements that stream voice
+      //     immediately). Skips speaker → idle.
+      // Critical · the thinking loop's AudioContext oscillators
+      // overlap with the HTMLAudioElement used for TTS playback,
+      // and on some browsers (Safari / iOS) a continuously-active
+      // AudioContext claims the audio session and prevents a fresh
+      // `audio.play()` from proceeding. Gate the loop on
+      // `voiceQueues` being empty so the moment any director's
+      // TTS audio is queued the loop stops and the audio session
+      // is free for the media element to grab.
+      // Same toggle gate as the typing tick · user-settings
+      // "sound" toggle controls all of these uniformly.
+      const sfx = window.boardroomTypingSfx;
+      const anyVoiceQueued = !!(this.voiceQueues && Object.keys(this.voiceQueues).length > 0);
+      const shouldBeThinking = !!speakingId
+        && speakerState === "thinking"
+        && !anyVoiceQueued;
+      if (sfx && typeof sfx.setThinking === "function") {
+        sfx.setThinking(shouldBeThinking);
+      }
+      const speakerChanged = speakingId !== this._lastSpeakerId;
+      if (speakerChanged && speakingId && speakerState === "speaking"
+          && sfx && typeof sfx.speakerChange === "function") {
+        sfx.speakerChange();
+      }
+      if (speakerChanged) this._lastSpeakerId = speakingId;
+      this._lastSpeakerState = speakerState;
 
       const html = seatsByZ.map(({ seat, i }) => {
         const m = seat.member;
@@ -13280,9 +15122,23 @@
         // word ("thinking" / "speaking") is rendered as a smaller
         // mono kicker beneath the name. Color + dots animation still
         // distinguishes thinking (amber) from speaking (lime).
-        const statusWord = bubbleState === "thinking"
+        // Convene override · while the room is mid-convening, the
+        // chair seat shows the current stage label ("Analyzing topic"
+        // / "Seating directors" / "Preparing remarks") instead of the
+        // generic "Thinking" so the user knows WHICH part of the
+        // setup is in flight. Falls back to the generic label for
+        // every non-chair speaker and for chair turns post-convene.
+        let statusWord = bubbleState === "thinking"
           ? this._t("rt_thinking")
           : this._t("rt_speaking");
+        if (bubbleState === "thinking" && isChair && this.conveneState) {
+          const stageKey = ({
+            analyzing: "conv_stage_analyzing_title",
+            seating: "conv_stage_seating_title",
+            preparing: "conv_stage_preparing_title",
+          })[this.conveneState.stage];
+          if (stageKey) statusWord = this._t(stageKey);
+        }
         const bubbleCls = bubbleState === "thinking"
           ? "rt-bubble is-thinking"
           : "rt-bubble";
@@ -13304,6 +15160,19 @@
               `<button type="button" class="rt-bubble-user-close" data-rt-user-bubble-close aria-label="Dismiss">✕</button>` +
               `</div>`;
           }
+        } else if (isChair && this.chairBubble && !this.chairBubble.dismissed
+            && this.chairBubble.text && Date.now() < this.chairBubble.deadline) {
+          // Chair clarify question · pinned to the chair seat with
+          // border countdown. Takes precedence over the "Speaking"
+          // status bubble since the chair has already finished its
+          // turn at this point (message-final flipped streaming off).
+          const cb = this.chairBubble;
+          const elapsed = this.CHAIR_BUBBLE_TTL_MS - (cb.deadline - Date.now());
+          const progress = Math.min(1, Math.max(0, elapsed / this.CHAIR_BUBBLE_TTL_MS));
+          bubble = `<div class="rt-bubble rt-bubble-chair-clarify" data-rt-chair-bubble style="--rt-bubble-chair-progress: ${progress.toFixed(3)}">` +
+            `<span class="rt-bubble-chair-clarify-text">${this.escape(cb.text)}</span>` +
+            `<button type="button" class="rt-bubble-chair-clarify-close" data-rt-chair-bubble-close aria-label="Dismiss">✕</button>` +
+            `</div>`;
         } else if (isSpeaking) {
           bubble = `<div class="${bubbleCls}"><span class="rt-bubble-name">${this.escape(m.name || "")}</span><span class="rt-bubble-status">${this.escape(statusWord)}</span><span class="rt-bubble-dots" aria-hidden="true"><i></i><i></i><i></i></span></div>`;
         }
@@ -13328,6 +15197,11 @@
           : false;
         const isChairBusy = (() => {
           if (this.chairPending === true) return true;
+          // Chair message landed but voice synthesis hasn't reached
+          // the client yet · the popover would otherwise flash for
+          // 0.5-2s before audio kicks in. See `_chairVoiceAwaiting`
+          // doc + the message-appended hook for the full reasoning.
+          if (this._chairVoiceAwaiting && this._chairVoiceAwaiting.size > 0) return true;
           const allMsgs = this.currentMessages || [];
           for (let k = allMsgs.length - 1; k >= 0; k--) {
             const mm = allMsgs[k];
@@ -13516,6 +15390,35 @@
           }
         }
       }
+      // (3) Convene fallback · no live speaker, but the room is
+      //     mid-convening (auto-pick + chair preparing). Surface the
+      //     stage's deck text so the subtitle bar gives the user
+      //     explicit textual feedback during the 3-4s of silent
+      //     setup. Falls back to hide-when-empty for non-convening
+      //     idle states (the prior behaviour).
+      if (!speakerId && this.conveneState && this.currentChair) {
+        const stage = this.conveneState.stage;
+        const titleKey = ({
+          analyzing: "conv_stage_analyzing_title",
+          seating: "conv_stage_seating_title",
+          preparing: "conv_stage_preparing_title",
+        })[stage];
+        const deckKey = ({
+          analyzing: "conv_stage_analyzing_deck",
+          seating: "conv_stage_seating_deck",
+          preparing: "conv_stage_preparing_deck",
+        })[stage];
+        if (titleKey && deckKey) {
+          slot.hidden = false;
+          slot.innerHTML =
+            `<span class="rt-sub-kicker">${this.escape(this.currentChair.name || "")} · ${this.escape(this._t(titleKey))}</span>` +
+            `<p class="rt-sub-text rt-sub-thinking">` +
+              `<span class="rt-sub-dots" aria-hidden="true"><i></i><i></i><i></i></span>` +
+              `<span class="rt-sub-thinking-label">${this.escape(this._t(deckKey))}</span>` +
+            `</p>`;
+          return;
+        }
+      }
       if (!speakerId) {
         slot.hidden = true;
         slot.innerHTML = "";
@@ -13539,6 +15442,22 @@
         .replace(/\s+/g, " ")
         .trim();
       if (!text) {
+        // Empty body but the speaker placeholder IS streaming ·
+        // director is "thinking" (no tokens yet). Show a loading
+        // panel with the speaker's name + animated dots so the
+        // subtitle band doesn't pop in/out as the first token
+        // lands. When the body fills in this branch falls through
+        // to the normal caption render below.
+        if (isStreaming) {
+          slot.hidden = false;
+          slot.innerHTML =
+            `<span class="rt-sub-kicker">${this.escape(speaker.name || "")}</span>` +
+            `<p class="rt-sub-text rt-sub-thinking">` +
+              `<span class="rt-sub-dots" aria-hidden="true"><i></i><i></i><i></i></span>` +
+              `<span class="rt-sub-thinking-label">${this.escape(this._t("rt_thinking"))}</span>` +
+            `</p>`;
+          return;
+        }
         slot.hidden = true;
         slot.innerHTML = "";
         return;
@@ -13661,6 +15580,11 @@
         else if (r.awaitingClarify)       { stateLabel = "WAIT";  stateKind = "wait";  }
         else if (r.awaitingContinue)      { stateLabel = "VOTE";  stateKind = "vote";  }
       }
+      // Convening overrides the live-state label for the 3-4s of
+      // auto-pick + chair-prep. Without this the HUD reads "LIVE"
+      // while nothing visible is happening — the user wonders if
+      // the room is broken. Cleared on chair's first message.
+      if (this.conveneState) { stateLabel = "CONVENE"; stateKind = "wait"; }
       const replayOn = !!(typeof window !== "undefined"
         && window.boardroomVoiceReplay
         && typeof window.boardroomVoiceReplay.isOpen === "function"
@@ -13909,6 +15833,7 @@
             + `</svg>`;
         const innerHTML =
           `<span class="ib-rt-glyph" aria-hidden="true">${currentGlyphSvg}</span>` +
+          `<span class="ib-rt-label">${this.escape(destLabel)}</span>` +
           `<div class="ib-rt-preview" role="tooltip" aria-hidden="true" data-rt-preview>` +
             `<div class="ib-rt-preview-kicker">// ${this.escape(destLabel)}</div>` +
             previewSvg +
@@ -13916,6 +15841,7 @@
           `</div>`;
         btns.forEach((btn) => {
           btn.innerHTML = innerHTML;
+          btn.classList.add("has-label");
           // Aria-pressed reflects "round-table view active" not the
           // toggle's destination · `inStage` is the active state.
           btn.setAttribute("aria-pressed", inStage ? "true" : "false");
@@ -14246,15 +16172,14 @@
       // `tabsStripHtml` so both error and success paths can mount it.
       const tabsHtml = tabsStripHtml;
 
-      // Ceremonial wrapper · the deliverable hits the table inside an
-      // ending-block frame.
+      // Brief-card wrapper · the ceremonial `.ending-block-head`
+      // divider that used to live above this block was removed — the
+      // amber `.round-open-card.is-adjourned` marker that
+      // `renderSessionAnalytics()` injects right above the analytics
+      // tile already provides the closing-section break for the
+      // room, so a second lime "BRIEF OUTPUT" rule below it was
+      // redundant.
       card.innerHTML = `
-        <header class="ending-block-head">
-          <span class="ending-block-line"></span>
-          <span class="ending-block-label">${this.escape(this._t("brief_output_head"))}</span>
-          <span class="ending-block-line"></span>
-        </header>
-
         <div class="brief-card">
           ${tabsHtml}
 
@@ -14439,12 +16364,10 @@
       const open = b.llmLogOpen === true;
       const running = logs.filter((l) => l.status === "running").length;
       const failed = logs.filter((l) => l.status === "failed").length;
-      const label = open
-        ? (b.language === "zh" ? "收起模型流水" : "Hide model stream")
-        : (b.language === "zh" ? "查看模型流水" : "View model stream");
+      const label = this._t(open ? "brief_llm_hide_stream" : "brief_llm_view_stream");
       const countText = logs.length
         ? `${logs.length} call${logs.length === 1 ? "" : "s"}${running ? ` · ${running} running` : ""}${failed ? ` · ${failed} failed` : ""}`
-        : (b.language === "zh" ? "等待首个调用" : "waiting for first call");
+        : this._t("brief_llm_waiting_first");
       const button = `
         <button type="button" class="brief-llm-toggle" data-brief-llm-toggle data-brief-id="${this.escape(b.id || "")}" aria-expanded="${open ? "true" : "false"}">
           <span class="brief-llm-toggle-mark">${open ? "−" : "+"}</span>
@@ -14463,7 +16386,7 @@
         const text = (l.text || "").trim();
         const preview = text
           ? this.escape(text)
-          : `<span class="brief-llm-empty">${this.escape(b.language === "zh" ? "等待模型输出…" : "waiting for output…")}</span>`;
+          : `<span class="brief-llm-empty">${this.escape(this._t("brief_llm_waiting_output"))}</span>`;
         const meta = [
           l.modelV || "",
           elapsed,
@@ -15111,6 +17034,13 @@
       app.dismissUserBubble();
       return;
     }
+    // Same `×` pattern on the chair clarify bubble.
+    const chairBubbleClose = e.target.closest("[data-rt-chair-bubble-close]");
+    if (chairBubbleClose) {
+      e.preventDefault();
+      app.dismissChairBubble();
+      return;
+    }
     // Web Search · click the badge to expand / collapse the source list
     // beneath the bubble.
     const wsBtn = e.target.closest("[data-msg-ws-toggle]");
@@ -15199,27 +17129,103 @@
       app.closePauseChoiceModal();
       return;
     }
-    // Resume (paused → live)
+    // Reload-confirm modal buttons (Ctrl+R intercept). Same
+    // three-option grammar as pause-choice but the action is
+    // "reload after handling the in-flight speaker."
+    const rChoice = e.target.closest("[data-reload-choice]");
+    if (rChoice) {
+      e.preventDefault();
+      app.handleReloadChoice(rChoice.getAttribute("data-reload-choice"));
+      return;
+    }
+    if (e.target.id === "reload-choice-overlay") {
+      app.closeReloadChoiceModal();
+      return;
+    }
+    // Resume (paused → live). Voice rooms need a TTS provider
+    // key · if the user previously configured one, opened the
+    // room, then later removed the key from settings, every
+    // director's speech would silently degrade to text-only
+    // chunks. Instead of hard-blocking (the old behaviour,
+    // which dead-ended the user), surface the resume-choice
+    // modal so they can configure a key OR convert the room
+    // to text mode and resume.
     if (e.target.closest("[data-resume]")) {
       e.preventDefault();
+      const room = app.currentRoom;
+      const needsVoiceKey = !!room
+        && room.deliveryMode === "voice"
+        && typeof app.hasAnyVoiceKey === "function"
+        && !app.hasAnyVoiceKey();
+      if (needsVoiceKey) {
+        app.openResumeChoiceModal();
+        return;
+      }
       app.resumeRoom().catch((err) => alert("Resume failed: " + err.message));
       return;
     }
-    // Export · adjourned-bar action. Browser handles the download
-    // natively from the route's Content-Disposition header.
+    // Resume-choice modal buttons. Same three-option grammar as
+    // pause-choice / reload-choice modals.
+    const resChoice = e.target.closest("[data-resume-choice]");
+    if (resChoice) {
+      e.preventDefault();
+      app.handleResumeChoice(resChoice.getAttribute("data-resume-choice"));
+      return;
+    }
+    if (e.target.id === "resume-choice-overlay") {
+      app.closeResumeChoiceModal();
+      return;
+    }
+    // Export · adjourned-room action (input-bar's left cluster).
+    // Browser handles the download natively from the route's
+    // Content-Disposition header.
     if (e.target.closest("[data-room-export]")) {
       e.preventDefault();
       if (!app.currentRoomId) return;
       window.location.href = "/api/rooms/" + encodeURIComponent(app.currentRoomId) + "/export.md";
       return;
     }
-    // Voice Replay · adjourned-bar action. Plays the transcript
+    // Divergence report · opens a read-only overlay for the
+    // current room. Available across live / paused / adjourned.
+    if (e.target.closest("[data-divergence-open]")) {
+      e.preventDefault();
+      app.openDivergenceOverlay();
+      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.
+    if (e.target.closest("[data-jump-to-opener]")) {
+      e.preventDefault();
+      app.scrollToOpener();
+      return;
+    }
+    if (e.target.closest("[data-divergence-close]")) {
+      e.preventDefault();
+      app.closeDivergenceOverlay();
+      return;
+    }
+    // Voice Replay · adjourned-room action (input-bar's left cluster). Plays the transcript
     // back via TTS in chronological order, each director in their
     // own voice. Routed through the standalone voice-replay module
     // so the playback state machine + overlay live in one place.
     if (e.target.closest("[data-room-replay]")) {
       e.preventDefault();
       if (!app.currentRoomId) return;
+      // Key gate · the replay module also checks /api/voices and
+      // shows an in-overlay [Configure] CTA when no TTS key is set,
+      // but that's a two-step (click replay → click Configure). For
+      // the common case where the user previously had a key, opened
+      // a voice room, then later removed the key, deep-link straight
+      // to user-settings → keys → minimax so they're one click from
+      // pasting the key. Falls through to the overlay path on
+      // platforms where openUserSettings isn't wired (degrades to
+      // the existing CTA).
+      if (typeof app.hasAnyVoiceKey === "function" && !app.hasAnyVoiceKey()
+          && typeof window.openUserSettings === "function") {
+        window.openUserSettings({ section: "keys", focusProvider: "minimax" });
+        return;
+      }
       if (window.boardroomVoiceReplay && typeof window.boardroomVoiceReplay.open === "function") {
         // Pass historicalMembers (includes excused directors) so
         // past messages from a director the chair has excused still
@@ -15304,8 +17310,11 @@
       // does the navigation.
     }
 
-    // Convene Follow-up · adjourned-bar action. Opens the follow-up
-    // overlay with parent reference + form for the new question.
+    // Convene Follow-up · adjourned-room action (input-bar's left
+    // cluster icon, or via the input-bar's Send button which routes
+    // through submitFromComposer with a prefilled subject). Opens
+    // the follow-up overlay with parent reference + form for the
+    // new question.
     if (e.target.closest("[data-room-followup]")) {
       e.preventDefault();
       app.openFollowUpOverlay();
@@ -15557,24 +17566,6 @@
       app.submitSupplement();
       return;
     }
-    // Paused-bar · open the supplement overlay (add a thought while paused).
-    if (e.target.closest("[data-paused-supplement]")) {
-      e.preventDefault();
-      app.openPausedSupplementOverlay();
-      return;
-    }
-    // Paused-supplement overlay · close / cancel / backdrop.
-    if (e.target.closest("[data-paused-supplement-close]")) {
-      e.preventDefault();
-      app.closePausedSupplementOverlay();
-      return;
-    }
-    // Paused-supplement overlay · confirm.
-    if (e.target.closest("[data-paused-supplement-confirm]")) {
-      e.preventDefault();
-      app.submitPausedSupplement();
-      return;
-    }
     // Continue · resume the directors after a chair-driven round-end.
     {
       const cont = e.target.closest("[data-continue]");
@@ -15840,7 +17831,12 @@
       if (!configured) {
         // Stale `data-configured` may say 1 if the user added then
         // removed a key without a re-render; live cache wins.
-        if (typeof window.openUserSettings === "function") {
+        // First-stop: voice-mode onboarding overlay (themed promo).
+        // Its CTA opens user-settings → MiniMax key row.
+        if (typeof window.openVoiceOnboarding === "function") {
+          window.openVoiceOnboarding();
+        } else if (typeof window.openUserSettings === "function") {
+          // Defensive fallback if the onboarding module fails to load.
           window.openUserSettings({ section: "keys", focusProvider: "minimax" });
         }
         return;
@@ -15987,11 +17983,8 @@
     // ALSO toggle on label clicks, but it skipped checkbox clicks,
     // which left direct-checkbox clicks dead. Owning toggling from
     // the change event is the simpler, correct path.
-    if (e.target.closest("[data-composer-pick-done]")) {
-      e.preventDefault();
-      app.closeComposerDirectorPicker();
-      return;
-    }
+    // (Done button removed · checkbox toggles take effect immediately;
+    //  the picker auto-dismisses on outside click.)
     // Tune dropdown trigger (tone / intensity)
     const ddTrigger = e.target.closest("[data-cmp-dropdown]");
     if (ddTrigger) {
@@ -16065,8 +18058,8 @@
           }
           if (trigger) {
             const valSpan = trigger.querySelector("[data-cmp-dd-value]");
-            if (valSpan) {
-              valSpan.textContent = v === "zh" ? "中文" : "EN";
+            if (valSpan && window.I18n && typeof window.I18n.t === "function") {
+              valSpan.textContent = window.I18n.t(`locale_${v}`);
             }
           }
         }
@@ -16096,6 +18089,23 @@
       if (Number.isFinite(idx)) app.applyComposerStarter(idx);
       return;
     }
+    // Topic-rec card → apply via /api/topic-recs/:id so the
+    // full seedContext lands in composer state.
+    const composerRec = e.target.closest("[data-cmp-rec]");
+    if (composerRec) {
+      e.preventDefault();
+      const id = composerRec.getAttribute("data-cmp-rec");
+      if (id) app.applyTopicRec(id);
+      return;
+    }
+    // Topic-rec trigger button → start a fresh generation job.
+    if (e.target.closest("[data-cmp-recs-trigger]")) {
+      e.preventDefault();
+      void app.startTopicRecJob();
+      return;
+    }
+    // ("+ N more" pagination removed · tray now always shows
+    //  the latest 6 recs and wipes on each fresh generation.)
     // Delete a room (any state): confirm, then real DELETE on the backend.
     const del = e.target.closest("[data-room-delete]");
     if (del) {
@@ -16106,6 +18116,42 @@
       if (id) app.deleteRoom(id);
       return;
     }
+    // Share a saved note · opens the share-card overlay.
+    const noteShare = e.target.closest("[data-note-share]");
+    if (noteShare) {
+      e.preventDefault();
+      e.stopPropagation();
+      const item = noteShare.closest("[data-note-id]");
+      const id = item?.dataset.noteId;
+      if (id) app.openShareCard(id);
+      return;
+    }
+    // Share-card overlay · template chip click swaps the visual.
+    const shareTplBtn = e.target.closest("[data-share-card-template]");
+    if (shareTplBtn) {
+      e.preventDefault();
+      const key = shareTplBtn.getAttribute("data-share-card-template");
+      if (key) app.setShareCardTemplate(key);
+      return;
+    }
+    // Share-card overlay · download.
+    if (e.target.closest("[data-share-card-download]")) {
+      e.preventDefault();
+      app.downloadShareCard();
+      return;
+    }
+    // Share-card overlay · close button.
+    if (e.target.closest("[data-share-card-close]")) {
+      e.preventDefault();
+      app.closeShareCard();
+      return;
+    }
+    // Share-card overlay · backdrop click dismisses (mirrors the
+    // pause-choice / vote-trigger overlay convention).
+    if (e.target.id === "share-card-overlay") {
+      app.closeShareCard();
+      return;
+    }
     // Delete a saved note from the All Notes list. The button is a
     // sibling of the note's anchor (inside .notes-item) so its click
     // never bubbles through the navigation link — but we still
@@ -16136,11 +18182,38 @@
   // submit. Browsers signal this via:
   //   · `e.isComposing === true` (standard, all modern browsers)
   //   · `e.keyCode === 229` (legacy fallback for old WebKit / Chromium)
-  // Either of those means "this Enter belongs to the IME, leave it
-  // alone." Without the guard, every pinyin confirmation accidentally
-  // sends the message — a constant misclick for CJK users.
+  // ··· third case ···
+  //   · Safari (and some Chrome builds) fire `compositionend` SLIGHTLY
+  //     BEFORE the Enter keydown that confirmed the candidate. By the
+  //     time JS reads the keydown, `isComposing` is already false and
+  //     `keyCode === 13`, so the first two signals miss it and the
+  //     pinyin confirmation accidentally fires submit. We patch this
+  //     by tracking the time of the most recent `compositionend` per
+  //     input element and treating a keydown within ~120 ms of it as
+  //     IME-owned.
+  //
+  // The map is keyed by the input element; the global compositionend
+  // listener stamps the timestamp; the per-input grace window survives
+  // re-renders because the map is GC'd when the element is detached.
+  const _compositionEndAt = new WeakMap();
+  document.addEventListener("compositionend", (ev) => {
+    const t = ev.target;
+    if (t && (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement)) {
+      _compositionEndAt.set(t, Date.now());
+    }
+  }, true);
   function isImeComposing(ev) {
-    return !!(ev && (ev.isComposing || ev.keyCode === 229));
+    if (!ev) return false;
+    if (ev.isComposing || ev.keyCode === 229) return true;
+    const t = ev.target;
+    if (t && _compositionEndAt.has(t)) {
+      // 120 ms covers the Safari / Chrome window between
+      // compositionend and the IME-confirm Enter without
+      // affecting genuine post-paste Enter taps (those land
+      // well after the grace window).
+      if (Date.now() - _compositionEndAt.get(t) < 120) return true;
+    }
+    return false;
   }
   document.addEventListener("keydown", (e) => {
     const target = e.target;
@@ -16189,6 +18262,13 @@
       app.autosizeAgentComposerTextarea();
     } else if (e.target && e.target.matches && e.target.matches("[data-search-input]")) {
       app.runSearch(e.target.value);
+    } else if (e.target && e.target.matches && e.target.matches(".ib-textarea[data-send-input]")) {
+      // Room input-bar textarea · autosize as the user types so
+      // the floating card grows up to the max-height cap, then
+      // scrolls internally. No state persistence here · the
+      // input-bar's value is fired-and-cleared on send (unlike
+      // the composer's persistent draft).
+      app.autosizeRoomInputTextarea();
     }
   });
   // Keep agentSpec in sync as the user edits any preview field — guards
@@ -16325,6 +18405,28 @@
     }
   });
 
+  // Input-bar textarea scrollbar reveal · the scrollbar is
+  // permanently hidden via `.ib-textarea { scrollbar-width: none }`
+  // and only flips visible while the user is actively scrolling.
+  // We toggle a `.is-scrolling` class on the SCROLLING element with
+  // a debounced removal so the scrollbar fades back out ~800 ms
+  // after the last scroll event. Scroll events don't bubble, so the
+  // listener is in capture phase to catch them from any textarea
+  // anywhere in the document.
+  const _scrollDecayTimers = new WeakMap();
+  document.addEventListener("scroll", (ev) => {
+    const t = ev.target;
+    if (!t || !(t instanceof HTMLTextAreaElement)) return;
+    if (!t.classList.contains("ib-textarea")) return;
+    t.classList.add("is-scrolling");
+    const prev = _scrollDecayTimers.get(t);
+    if (prev) clearTimeout(prev);
+    _scrollDecayTimers.set(t, setTimeout(() => {
+      t.classList.remove("is-scrolling");
+      _scrollDecayTimers.delete(t);
+    }, 800));
+  }, true);
+
   // Global one-shot listener: unlock audio playback on first user
   // interaction so voice mode works regardless of which button was
   // clicked first.