privateboard 0.1.9 → 0.1.11

package/public/app.js

@@ -34,6 +34,7 @@
     "grok-4-1-fast":    "Grok 4.1 Fast",
     "grok-4-20":        "Grok 4.20",
     "deepseek-v4-pro":  "DeepSeek V4 Pro",
+    "deepseek-v4-flash": "DeepSeek Lite",
   };
 
   /** Full model catalog for the new-agent composer dropdown. Mirrors
@@ -47,8 +48,7 @@
     { v: "sonnet-4-6",       label: "Claude Sonnet 4.6",    provider: "Anthropic", deck: "balanced · default" },
     { v: "opus-4-6",         label: "Claude Opus 4.6",      provider: "Anthropic", deck: "prior-gen flagship" },
     { v: "opus-4-6-fast",    label: "Claude Opus 4.6 Fast", provider: "Anthropic", deck: "faster 4.6 · same intelligence" },
-    { v: "haiku-4-5",        label: "Claude Haiku 4.5",     provider: "Anthropic", deck: "fast · low-cost" },
-    { v: "gpt-5-5-pro",      label: "GPT-5.5 Pro",       provider: "OpenAI",    deck: "flagship · 1M ctx" },
+    { v: "haiku-4-5",        label: "Claude Haiku 4.5",     provider: "Anthropic", deck: "fast · low-cost" },    { v: "gpt-5-5-pro",      label: "GPT-5.5 Pro",       provider: "OpenAI",    deck: "flagship · 1M ctx" },
     { v: "gpt-5-5",          label: "GPT-5.5",           provider: "OpenAI",    deck: "1M ctx" },
     { v: "gpt-5-4",          label: "GPT-5.4",           provider: "OpenAI",    deck: "general · 1M ctx" },
     { v: "gpt-5-4-mini",     label: "GPT-5.4 Mini",      provider: "OpenAI",    deck: "fast · 400k ctx" },
@@ -60,6 +60,7 @@
     { v: "grok-4-1-fast",    label: "Grok 4.1 Fast",     provider: "xAI",       deck: "fast · 256k ctx" },
     { v: "grok-4-20",        label: "Grok 4.20",         provider: "xAI",       deck: "2M ctx · big context" },
     { v: "deepseek-v4-pro",  label: "DeepSeek V4 Pro",   provider: "DeepSeek",  deck: "reasoning · open weights" },
+    { v: "deepseek-v4-flash", label: "DeepSeek Lite",   provider: "DeepSeek",  deck: "V4 Flash · fast · 1M ctx" },
   ];
 
   /** Tone tooltips · short, user-readable summary of how each tone
@@ -93,6 +94,7 @@
     currentMembers: [],            // directors only (chair excluded)
     currentChair: null,            // chair agent for the current room
     currentQueue: [],
+    voiceQueues: {},
     /** Round progress from the orchestrator: how many directors have
      *  spoken in the current round vs. the cap (= cast size). */
     currentRound: { spoken: 0, total: 0 },
@@ -181,10 +183,20 @@
         if (!card) return;
         const expanded = card.classList.toggle("expanded");
         const label = expanded
-          ? (btn.getAttribute("data-less") || "Show less")
-          : (btn.getAttribute("data-more") || "Show more");
+          ? (btn.getAttribute("data-less") || this._t("convene_show_less"))
+          : (btn.getAttribute("data-more") || this._t("convene_show_more"));
         btn.textContent = label;
       });
+      document.addEventListener("boardroom:locale", () => {
+        this.renderSidebarRooms();
+        this.renderSidebarAgents();
+        this.renderSidebarCounts();
+        this.renderUserBlock();
+        if (this.currentRoomId) this.renderRoom();
+        else this.renderEmptyState();
+        if (Array.isArray(this._reportsCache)) this.renderReportsPage(this._reportsCache);
+        if (Array.isArray(this._notesCache)) this.renderNotesPage(this._notesCache);
+      });
       window.addEventListener("hashchange", () => this.handleRoute());
       this.handleRoute();
 
@@ -294,11 +306,10 @@
 
       const count = fresh.length;
       const names = fresh.map((m) => m.name).join(", ");
-      // System UI · always English (storage-migration banner).
+      const bodyKey = count === 1 ? "migrate_body_one" : "migrate_body";
       const copy = {
-        head: `Storage upgraded`,
-        body: `${count} new migration${count > 1 ? "s" : ""} applied · your existing rooms, agents, briefs, and settings were preserved.`,
-        tooltip: names,
+        head: this._t("migrate_head"),
+        body: this._t(bodyKey, { count }),        tooltip: names,
       };
       textEl.innerHTML =
         `<span class="sys-notice-strong">${this.escape(copy.head)}</span> · ${this.escape(copy.body)}`;
@@ -806,12 +817,32 @@
 
       this.sse.addEventListener("message-removed", (e) => {
         const data = JSON.parse(e.data);
+        // Stop any voice playback for this message (e.g. READY control token)
+        const vq = this.voiceQueues[data.messageId];
+        if (vq) {
+          if (vq.audio) { try { vq.audio.pause(); } catch(_) {} }
+          delete this.voiceQueues[data.messageId];
+        }
         // Drop the empty placeholder bubble.
         this.currentMessages = this.currentMessages.filter((m) => m.id !== data.messageId);
         const article = document.querySelector(`[data-message-id="${data.messageId}"]`);
         if (article) article.remove();
       });
 
+      this.sse.addEventListener("voice-chunk", (e) => {
+        const data = JSON.parse(e.data);
+        this.enqueueVoiceChunk(roomId, data);
+      });
+
+      this.sse.addEventListener("voice-final", (e) => {
+        const data = JSON.parse(e.data);
+        const q = this.voiceQueues[data.messageId] || (this.voiceQueues[data.messageId] = { chunks: [], final: false, scheduled: false, roomId, messageId: data.messageId });
+        q.final = true;
+        q.messageId = data.messageId;
+        q.roomId = roomId;
+        this.drainVoiceQueue(roomId, data.messageId);
+      });
+
       // Full body+meta replacement · used by tool-use rows whose
       // status flips running → done|failed once the side-effect
       // (URL fetch) completes. We re-render the affected message in
@@ -854,6 +885,11 @@
             this.currentRoom.status = "paused";
             this.currentRoom.pausedAt = ts;
           }
+          // Hard pause: stop audio immediately (speaker was aborted mid-stream).
+          // Soft pause: let current audio finish naturally (speaker completed their turn).
+          if (payload.mode === "hard") {
+            this.stopVoicePlayback();
+          }
           document.documentElement.classList.remove("pause-pending");
           document.documentElement.setAttribute("data-status", "paused");
           this.renderHeader();
@@ -955,13 +991,9 @@
             language: payload.language === "zh" ? "zh" : "en",
             pipelineStartedAt: Date.now(),
             createdAt: Date.now(),
-            // Stage checklist · seeded according to the brief mode (see
-            // briefMode resolution above). brief-stage events flip
-            // them active → done as the pipeline progresses.
-            // startedAt is captured when each stage first becomes
-            // active so the UI can display elapsed time alongside the
-            // ETA range.
             stages: seededStages,
+            llmLogs: [],
+            llmLogOpen: false,
           };
           this.currentBrief = newBrief;
           // Insert the in-progress brief into currentBriefs so the tab
@@ -1067,6 +1099,51 @@
               this.renderBrief();
             }
           }
+        } else if (kind === "brief-llm-start") {
+          this.markBriefEvent();
+          const target = this._briefById(payload.briefId);
+          if (target && payload.log) {
+            const logs = target.llmLogs || (target.llmLogs = []);
+            const idx = logs.findIndex((l) => l.id === payload.log.id);
+            const log = { ...payload.log, text: payload.log.text || "" };
+            if (idx >= 0) logs[idx] = log;
+            else logs.push(log);
+            if (this.currentBrief && this.currentBrief.id === target.id) this.renderBrief();
+          }
+        } else if (kind === "brief-llm-token") {
+          this.markBriefEvent();
+          const target = this._briefById(payload.briefId);
+          if (target && payload.logId) {
+            const logs = target.llmLogs || (target.llmLogs = []);
+            const log = logs.find((l) => l.id === payload.logId);
+            if (log) {
+              const limit = 6000;
+              if ((log.text || "").length < limit) {
+                log.text = ((log.text || "") + (payload.delta || "")).slice(0, limit);
+              }
+              if (this.currentBrief && this.currentBrief.id === target.id && target.llmLogOpen) {
+                const now = Date.now();
+                if (!this._briefLlmLastRender || (now - this._briefLlmLastRender) > 500) {
+                  this._briefLlmLastRender = now;
+                  this.renderBrief();
+                }
+              }
+            }
+          }
+        } else if (kind === "brief-llm-end") {
+          this.markBriefEvent();
+          const target = this._briefById(payload.briefId);
+          if (target && payload.logId) {
+            const logs = target.llmLogs || (target.llmLogs = []);
+            const log = logs.find((l) => l.id === payload.logId);
+            if (log) {
+              log.status = payload.status || log.status;
+              log.finishedAt = typeof payload.finishedAt === "number" ? payload.finishedAt : Date.now();
+              if (typeof payload.totalTokens === "number") log.totalTokens = payload.totalTokens;
+              if (typeof payload.error === "string") log.error = payload.error;
+              if (this.currentBrief && this.currentBrief.id === target.id) this.renderBrief();
+            }
+          }
         } else if (kind === "brief-token") {
           this.markBriefEvent();
           // Append tokens to the brief identified by payload.briefId,
@@ -1198,6 +1275,7 @@
             if (ch.mode) this.currentRoom.mode = ch.mode.to;
             if (ch.intensity) this.currentRoom.intensity = ch.intensity.to;
             if (ch.briefStyle) this.currentRoom.briefStyle = ch.briefStyle.to;
+            if (ch.deliveryMode) this.currentRoom.deliveryMode = ch.deliveryMode.to;
           }
           this.renderHeader();
           syncSidebar({
@@ -1361,7 +1439,7 @@
     },
 
     // ── Actions ───────────────────────────────────────────────
-    async createRoom({ subject, agentIds, mode, intensity, briefStyle, autoPick }) {
+    async createRoom({ subject, agentIds, mode, intensity, briefStyle, autoPick, deliveryMode }) {
       const r = await fetch("/api/rooms", {
         method: "POST",
         headers: { "content-type": "application/json" },
@@ -1371,6 +1449,7 @@
           mode: mode || "constructive",
           intensity: intensity || "sharp",
           briefStyle: briefStyle || "auto",
+          deliveryMode: deliveryMode === "voice" ? "voice" : "text",
           ...(autoPick ? { autoPick: true } : {}),
         }),
       });
@@ -1704,27 +1783,55 @@
       return MODEL_PROVIDERS.some((p) => keys[p] && keys[p].configured);
     },
 
+    /** Pure cache read · true when at least one voice provider
+     *  (MiniMax / ElevenLabs) is configured. The composer's voice
+     *  toggle calls this before flipping ON; if false, we redirect
+     *  the user to the keys panel rather than silently enabling a
+     *  feature that has no provider behind it. */
+    hasAnyVoiceKey() {
+      const VOICE_PROVIDERS = ["minimax", "elevenlabs"];
+      const keys = this.keys || {};
+      return VOICE_PROVIDERS.some((p) => keys[p] && keys[p].configured);
+    },
+
+    /** Secondary hint under a failed brief · the legacy copy always blamed
+     *  missing keys even when stage-2 scaffolding failed after successful
+     *  LLM calls. Route hints by substring of the server's `brief-error`
+     *  message (`NoKeyError` vs scaffold failures vs everything else). */
+    _briefSecondaryHintHtml(errorText) {
+      const s = String(errorText || "").toLowerCase();
+      if (/no key configured|no openrouter fallback|add a key in preference/i.test(s)) {
+        return this._t("brief_err_hint_failed_html");
+      }
+      if (
+        /couldn't structure|report writer couldn't|json scaffold|repeat(ed)? attempts|retries failed|parse scaffold|\[brief\.stage2\]|stage 2/i.test(s)
+      ) {
+        return this._t("brief_err_hint_scaffold_html");
+      }
+      return this._t("brief_err_hint_generic_html");
+    },
+
     /** Modal that fires when an AI action is attempted but no model
      *  provider key is configured. Two CTAs · open settings (preferred)
      *  or dismiss. Same chrome family as openSendChoiceModal so the
      *  visual treatment stays consistent. */
     openNoKeyModal() {
       this.closeNoKeyModal();
-      // System UI · always English. No-key modal is app chrome.
       const t = {
-        title: "Configure a model API key",
-        deck: "The chair and directors run on a large language model. Configure at least one provider key (Anthropic / OpenAI / Google / xAI / DeepSeek / OpenRouter) before AI features will work.",
-        primary: "[ Open settings ▸ ]",
-        dismiss: "[ Dismiss ]",
-        classification: "● ai · no model key",
-        tag: "▸ Configure API key",
-      };
+        title: this._t("nk_title"),
+        deck: this._t("nk_deck"),
+        primary: this._t("nk_primary"),
+        dismiss: this._t("nk_dismiss"),
+        classification: this._t("nk_classification"),
+        tag: this._t("nk_tag"),
+        primaryDeck: this._t("nk_primary_deck"),
+        gate: this._t("nk_frontend_gate"),      };
       const html = `
         <div id="no-key-overlay" class="pc-overlay" data-no-key-overlay>
           <div class="pc-modal">
             <div class="pc-classification">
-              <span><span class="dot">●</span> ${this.escape(t.classification.replace(/^●\s*/, ""))}</span>
-              <span class="right">// frontend gate</span>
+              <span><span class="dot">●</span> ${this.escape(t.classification)}</span>
+              <span class="right">${this.escape(t.gate)}</span>
             </div>
             <div class="pc-head">
               <div class="pc-tag">${this.escape(t.tag)}</div>
@@ -1734,8 +1841,7 @@
             <div class="pc-body">
               <button type="button" class="pc-choice primary" data-no-key-open-settings>
                 <div class="pc-choice-mark">${this.escape(t.primary)}</div>
-                <div class="pc-choice-deck">Jump to Preferences → API Key. Paste any one provider's key to unlock the room.</div>
-              </button>
+                <div class="pc-choice-deck">${this.escape(t.primaryDeck)}</div>              </button>
               <button type="button" class="pc-choice ghost" data-no-key-dismiss>
                 <div class="pc-choice-mark">${this.escape(t.dismiss)}</div>
               </button>
@@ -1760,31 +1866,32 @@
       const speaker = this.currentQueue[0]
         ? this.agentsById[this.currentQueue[0].agentId]
         : null;
-      const speakerLabel = speaker ? this.escape(speaker.name) : "a director";
+      const speakerName = speaker ? speaker.name : this._t("sc_speaker_fallback");
+      const speakerLabel = this.escape(speakerName);
       const html = `
         <div id="send-choice-overlay" class="pc-overlay">
           <div class="pc-modal">
             <div class="pc-classification">
-              <span><span class="dot">●</span> send · choose</span>
-              <span class="right">// ${speakerLabel} is speaking</span>
+              <span><span class="dot">●</span> ${this.escape(this._t("sc_send_class"))}</span>
+              <span class="right">${this.escape(this._t("sc_send_right", { name: speakerName }))}</span>
             </div>
             <div class="pc-head">
-              <div class="pc-tag">▸ Send while mid-turn</div>
-              <h2 class="pc-title">${speakerLabel} is in the middle of a turn.</h2>
-              <p class="pc-deck">Cut in now, or queue your message until they finish?</p>
+              <div class="pc-tag">${this.escape(this._t("sc_send_tag"))}</div>
+              <h2 class="pc-title">${this.escape(this._t("sc_send_title", { name: speakerName }))}</h2>
+              <p class="pc-deck">${this.escape(this._t("sc_send_deck"))}</p>
             </div>
             <div class="pc-body">
               <button type="button" class="pc-choice" data-send-choice="interrupt">
-                <div class="pc-choice-mark">▸ Interrupt and send now</div>
-                <div class="pc-choice-deck">Drops into the room immediately. ${speakerLabel} keeps going on top of your message.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("sc_interrupt_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("sc_interrupt_deck", { name: speakerName }))}</div>
               </button>
               <button type="button" class="pc-choice primary" data-send-choice="queue">
-                <div class="pc-choice-mark">→ Wait until ${speakerLabel} finishes</div>
-                <div class="pc-choice-deck">Your message lines up after the current turn and posts as soon as it ends.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("sc_queue_mark", { name: speakerName }))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("sc_queue_deck"))}</div>
               </button>
               <button type="button" class="pc-choice ghost" data-send-choice="cancel">
-                <div class="pc-choice-mark">✕ Cancel</div>
-                <div class="pc-choice-deck">Keep typing and decide later.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("sc_cancel_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("sc_cancel_deck"))}</div>
               </button>
             </div>
           </div>
@@ -1898,15 +2005,21 @@
       const room = this.currentRoom || {};
       const turns = (this.currentMessages || []).filter((m) => m.body && m.body.trim()).length;
       const status = room.status || "live";
-      const titleTxt = isGen ? "Generate the report" : "File the report?";
-      const classifyTxt = isGen ? "room · generate report" : "room · adjourn";
-      const classifyRight = isGen ? "// post-hoc" : "// terminal";
-      const confirmTxt = isGen ? "[ Generate ]" : "[ Adjourn & file ]";
+      const titleTxt = isGen ? this._t("adj_title_generate") : this._t("adj_title_file");
+      const classifyTxt = isGen ? this._t("adj_classify_generate") : this._t("adj_classify_adjourn");
+      const classifyRight = isGen ? this._t("adj_classify_right_posthoc") : this._t("adj_classify_right_terminal");
+      const confirmTxt = isGen ? this._t("adj_confirm_generate") : this._t("adj_confirm_file");
       const subjectTxt = room.subject || room.name || "—";
       const memberCount = (this.currentMembers || []).length;
-      // Default the mode picker to whatever the user picked last. Bento
-      // is opt-in · 'research-note' is the safe initial default for new
-      // users / private-mode browsers (where localStorage is empty).
+      const statusLabel = this._t(
+        status === "paused" ? "adj_meta_status_paused"
+        : status === "adjourned" ? "adj_meta_status_adjourned"
+        : "adj_meta_status_live",
+      );
+      const roomKicker = this._t("adj_meta_room_kicker");
+      const metaSep = this._t("adj_meta_sep");
+      const metaTurns = this._t("adj_meta_turns", { n: turns });
+      const noteTxt = isGen ? this._t("adj_note_generate") : this._t("adj_note_adjourn");
       const defaultMode = this.lastBriefMode();
       const html = `
         <div class="adjourn-overlay" id="adjourn-overlay" role="dialog" aria-modal="true" data-adjourn-mode="${this.escape(mode)}">
@@ -1920,34 +2033,32 @@
 
             <header class="adjourn-head">
               <div>
-                <div class="meta">// room #<span>${this.escape(String(room.number ?? "—"))}</span> · <span class="${status === "live" ? "live" : "status"}">${this.escape(status)}</span> · <span>${turns}</span> turns</div>
+                <div class="meta">${this.escape(roomKicker)}<span>${this.escape(String(room.number ?? "—"))}</span>${this.escape(metaSep)}<span class="${status === "live" ? "live" : "status"}">${this.escape(statusLabel)}</span>${this.escape(metaSep)}${this.escape(metaTurns)}</div>
                 <div class="title">${this.escape(titleTxt)}</div>
               </div>
-              <button type="button" class="adjourn-close" data-adjourn-close aria-label="Close">✕</button>
+              <button type="button" class="adjourn-close" data-adjourn-close aria-label="${this.escape(this._t("adj_close_aria"))}">✕</button>
             </header>
 
             <div class="adjourn-body">
               <div class="adjourn-summary">
-                <div class="adjourn-summary-row adjourn-summary-row-subject">
-                  <span class="adjourn-summary-key">// subject</span>
+<div class="adjourn-summary-row adjourn-summary-row-subject">
+                  <span class="adjourn-summary-key">${this.escape(this._t("adj_key_subject"))}</span>
                   <div class="adjourn-summary-val adjourn-subject-wrap">
                     <span class="adjourn-subject-text is-clamped" data-adjourn-subject>${this.escape(subjectTxt)}</span>
                     <button type="button" class="adjourn-subject-toggle" data-adjourn-subject-toggle hidden>Show more</button>
                   </div>
                 </div>
                 <div class="adjourn-summary-row">
-                  <span class="adjourn-summary-key">// authors</span>
-                  <span class="adjourn-summary-val">${memberCount} agents</span>
+                  <span class="adjourn-summary-key">${this.escape(this._t("adj_key_authors"))}</span>
+                  <span class="adjourn-summary-val">${this.escape(this._t("adj_agents_count", { n: memberCount }))}</span>
                 </div>
                 <div class="adjourn-summary-row">
-                  <span class="adjourn-summary-key">// turns</span>
+                  <span class="adjourn-summary-key">${this.escape(this._t("adj_key_turns"))}</span>
                   <span class="adjourn-summary-val">${turns}</span>
                 </div>
               </div>
               <p class="adjourn-summary-note">
-                The chair compiles a report from the room's transcript. Pick the
-                format below — the room is marked adjourned and the report is
-                filed in the chat once it's ready.
+                ${this.escape(noteTxt)}
               </p>
 
               ${this.renderBriefModePicker(defaultMode)}
@@ -1957,10 +2068,10 @@
               ${isGen ? `<span class="adjourn-skip-spacer"></span>` : `
               <button type="button" class="adjourn-skip-btn" data-adjourn-skip>
                 <span class="adjourn-skip-mark">⊘</span>
-                <span>End without report</span>
+                <span>${this.escape(this._t("adj_skip"))}</span>
               </button>`}
               <div class="adjourn-foot-actions">
-                <button type="button" class="adjourn-cancel" data-adjourn-close>[ Cancel ]</button>
+                <button type="button" class="adjourn-cancel" data-adjourn-close>${this.escape(this._t("adj_cancel"))}</button>
                 <button type="button" class="adjourn-confirm" data-adjourn-confirm>${this.escape(confirmTxt)}</button>
               </div>
             </footer>
@@ -2230,31 +2341,50 @@
       if (this.currentRoom.status !== "adjourned") return;
       this.closeFollowUpOverlay();
 
-      // System UI · always English. Follow-up overlay chrome.
-      const t = {
-        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"}`,
-        toneLabel: "Tone",
-        intensityLabel: "Intensity",
-        cancel: "[ Cancel ]",
-        confirm: "[ Convene → ]",
-        confirmBusy: "[ Convening… ]",
-        adjournedAtPrefix: "adjourned",
-        briefsCount: (n) => `${n} ${n === 1 ? "brief" : "briefs"} filed`,
-        noBrief: "no brief filed",
-      };
-
+      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",
+          };
       const room = this.currentRoom;
       const briefCount = Array.isArray(this.currentBriefs) ? this.currentBriefs.length : 0;
       const briefLine = briefCount > 0 ? t.briefsCount(briefCount) : t.noBrief;
@@ -2345,13 +2475,13 @@
                     </span>
                   </button>
                   <span class="followup-cast-row-sep" aria-hidden="true"></span>
-                  <button type="button" class="cmp-dd" data-cmp-dropdown="tone" title="${this.escape(t.toneLabel)}">
-                    <span class="cmp-dd-label">tone</span>
+                  <button type="button" class="cmp-dd" data-cmp-dropdown="tone" title="${this.escape(this._t("cmp_tone_label"))}">
+                    <span class="cmp-dd-label">${this.escape(this._t("cmp_tone_label"))}</span>
                     <span class="cmp-dd-value" data-cmp-dd-value="tone">${this.escape(inheritedMode)}</span>
                     <span class="cmp-dd-chevron">▾</span>
                   </button>
-                  <button type="button" class="cmp-dd" data-cmp-dropdown="intensity" title="${this.escape(t.intensityLabel)}">
-                    <span class="cmp-dd-label">intensity</span>
+                  <button type="button" class="cmp-dd" data-cmp-dropdown="intensity" title="${this.escape(this._t("cmp_intensity_label"))}">
+                    <span class="cmp-dd-label">${this.escape(this._t("cmp_intensity_label"))}</span>
                     <span class="cmp-dd-value" data-cmp-dd-value="intensity">${this.escape(inheritedIntensity)}</span>
                     <span class="cmp-dd-chevron">▾</span>
                   </button>
@@ -2570,7 +2700,7 @@
           <span class="composer-pick-title">${this.escape(t.title)}</span>
           <span class="composer-pick-hint">${this.escape(t.hint)}</span>
         </div>
-        <div class="composer-pick-list">${rows || `<div class="composer-pick-empty">no directors</div>`}</div>
+        <div class="composer-pick-list">${rows || `<div class="composer-pick-empty">${this.escape(this._t("picker_no_directors"))}</div>`}</div>
       `;
       document.body.appendChild(pop);
       const r = anchorBtn.getBoundingClientRect();
@@ -2884,6 +3014,20 @@
         target.progress   = incoming.progress || target.progress;
         target.etaSec     = (incoming.etaSec && typeof incoming.etaSec.lo === "number") ? incoming.etaSec : target.etaSec;
       }
+      if (Array.isArray(state.llmLogs)) {
+        brief.llmLogs = state.llmLogs.map((l) => ({
+          id: String(l.id || ""),
+          stage: String(l.stage || ""),
+          label: String(l.label || ""),
+          modelV: String(l.modelV || ""),
+          status: l.status === "done" || l.status === "failed" ? l.status : "running",
+          startedAt: typeof l.startedAt === "number" ? l.startedAt : Date.now(),
+          finishedAt: typeof l.finishedAt === "number" ? l.finishedAt : null,
+          text: String(l.text || ""),
+          totalTokens: typeof l.totalTokens === "number" ? l.totalTokens : null,
+          error: typeof l.error === "string" ? l.error : null,
+        })).filter((l) => l.id);
+      }
     },
 
     /** Delete a single brief from this room's history. Asks for
@@ -2956,12 +3100,25 @@
             }
           } catch { /* swallow */ }
         }
+        // Preserve the failed brief's mode on retry · without this
+        // the POST defaulted back to `research-note` regardless of
+        // whether the user originally picked Magazine / Newspaper /
+        // Slides. Same goes for the supplement string (regenerate-
+        // with-perspective flow). Anything else (style etc) is
+        // re-derived server-side from the room's stored config.
+        const retryBody = {};
+        if (failed && this.isStructuredBriefMode(failed.mode)) {
+          retryBody.mode = failed.mode;
+        }
+        if (failed && typeof failed.supplement === "string" && failed.supplement.trim()) {
+          retryBody.supplement = failed.supplement;
+        }
         const r = await fetch(
           "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/brief",
           {
             method: "POST",
             headers: { "content-type": "application/json" },
-            body: "{}",
+            body: JSON.stringify(retryBody),
           },
         );
         if (!r.ok) {
@@ -3004,8 +3161,8 @@
       const briefMode = this.isStructuredBriefMode(v) ? v : "research-note";
       this.saveLastBriefMode(briefMode);
       const btn = overlay.querySelector("[data-adjourn-confirm]");
-      const origLabel = isGen ? "[ Generate ]" : "[ Adjourn & file ]";
-      const busyLabel = isGen ? "[ Generating… ]" : "[ Adjourning… ]";
+      const origLabel = isGen ? this._t("adj_confirm_generate") : this._t("adj_confirm_file");
+      const busyLabel = isGen ? this._t("adj_busy_generate") : this._t("adj_busy_adjourn");
       if (btn) { btn.disabled = true; btn.textContent = busyLabel; }
       try {
         if (isGen) {
@@ -3018,7 +3175,7 @@
         this.closeAdjournOverlay();
       } catch (e) {
         if (btn) { btn.disabled = false; btn.textContent = origLabel; }
-        alert((isGen ? "Generate failed: " : "Adjourn failed: ") + (e && e.message ? e.message : e));
+        alert((isGen ? this._t("adj_err_generate") : this._t("adj_err_adjourn")) + (e && e.message ? e.message : e));
       }
     },
 
@@ -3046,6 +3203,27 @@
       }
     },
 
+    async toggleDeliveryMode() {
+      if (!this.currentRoomId || !this.currentRoom) return;
+      const next = this.currentRoom.deliveryMode === "voice" ? "text" : "voice";
+      // Unlock audio if switching to voice
+      if (next === "voice") this.unlockAudioPlayback();
+      try {
+        const r = await fetch(
+          "/api/rooms/" + encodeURIComponent(this.currentRoomId),
+          {
+            method: "PATCH",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ deliveryMode: next }),
+          },
+        );
+        if (r.ok) {
+          this.currentRoom.deliveryMode = next;
+          this.renderHeader();
+        }
+      } catch (_) { /* offline */ }
+    },
+
     async pauseRoom(mode) {
       if (!this.currentRoomId) return;
       // Soft pause: flip the input bar to a "pausing after current turn"
@@ -3110,31 +3288,32 @@
       const speaker = this.currentQueue[0]
         ? this.agentsById[this.currentQueue[0].agentId]
         : null;
-      const speakerLabel = speaker ? this.escape(speaker.name) : "a director";
+      const speakerName = speaker ? speaker.name : this._t("sc_speaker_fallback");
+      const speakerLabel = this.escape(speakerName);
       const html = `
         <div id="pause-choice-overlay" class="pc-overlay">
           <div class="pc-modal">
             <div class="pc-classification">
-              <span><span class="dot">●</span> pause · choose</span>
-              <span class="right">// the room is mid-turn</span>
+              <span><span class="dot">●</span> ${this.escape(this._t("pause_class"))}</span>
+              <span class="right">${this.escape(this._t("pause_right"))}</span>
             </div>
             <div class="pc-head">
-              <div class="pc-tag">▸ Pause discussion</div>
-              <h2 class="pc-title">${speakerLabel} is speaking right now.</h2>
-              <p class="pc-deck">How would you like to pause?</p>
+              <div class="pc-tag">${this.escape(this._t("pause_tag"))}</div>
+              <h2 class="pc-title">${this.escape(this._t("pause_title", { name: speakerName }))}</h2>
+              <p class="pc-deck">${this.escape(this._t("pause_deck"))}</p>
             </div>
             <div class="pc-body">
               <button type="button" class="pc-choice danger" data-pause-choice="hard">
-                <div class="pc-choice-mark">▍ Stop immediately</div>
-                <div class="pc-choice-deck">Cut their reply mid-sentence. The partial response is dropped.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("pause_hard_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("pause_hard_deck"))}</div>
               </button>
               <button type="button" class="pc-choice primary" data-pause-choice="soft">
-                <div class="pc-choice-mark">⌛ After they finish</div>
-                <div class="pc-choice-deck">Let ${speakerLabel} complete this turn, then pause the queue.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("pause_soft_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("pause_soft_deck", { name: speakerName }))}</div>
               </button>
               <button type="button" class="pc-choice ghost" data-pause-choice="cancel">
-                <div class="pc-choice-mark">↩ Cancel</div>
-                <div class="pc-choice-deck">Keep the discussion running.</div>
+                <div class="pc-choice-mark">${this.escape(this._t("pause_cancel_mark"))}</div>
+                <div class="pc-choice-deck">${this.escape(this._t("pause_cancel_deck"))}</div>
               </button>
             </div>
           </div>
@@ -3773,9 +3952,10 @@
       const adj    = this.rooms.filter((r) => r.status === "adjourned");
 
       const renderRow = (r) => {
+        const pausedLbl = this._t("sidebar_paused");
         const status =
           r.status === "paused"
-            ? '<span class="row-status paused">❚❚ paused</span>'
+            ? `<span class="row-status paused">❚❚ ${this.escape(pausedLbl)}</span>`
             : "";
         const time =
           r.status === "paused"
@@ -3799,20 +3979,19 @@
               <div class="row-content">
                 <div class="row-top-line">
                   <span class="row-title">${this.escape(fullTitle)}</span>
-                  <span class="row-time">${this.escape(time)}</span>
                 </div>
                 <div class="row-subtitle">${status}${this.escape(r.subject || "")}</div>
               </div>
             </a>
-            <button type="button" class="row-delete" data-room-delete title="Delete room">✕</button>
+            <button type="button" class="row-delete" data-room-delete title="${this.escape(this._t("sidebar_delete_room"))}">✕</button>
           </div>
         `;
       };
 
-      list.innerHTML = `
+      const html = `
         ${live.length > 0 ? `
           <div class="section-header live">
-            <span>Live</span>
+            <span>${this.escape(this._t("sidebar_section_live"))}</span>
             <span class="line"></span>
             <span class="badge">${live.length}</span>
           </div>
@@ -3821,7 +4000,7 @@
 
         ${paused.length > 0 ? `
           <div class="section-header paused">
-            <span>Paused</span>
+            <span>${this.escape(this._t("sidebar_section_paused"))}</span>
             <span class="line"></span>
             <span class="badge">${paused.length}</span>
           </div>
@@ -3829,7 +4008,7 @@
         ` : ""}
 
         <div class="section-header adjourned">
-          <span>Adjourned</span>
+          <span>${this.escape(this._t("sidebar_section_adjourned"))}</span>
           <span class="line"></span>
           <span class="badge" data-adjourned-count>${adj.length}</span>
         </div>
@@ -3838,11 +4017,24 @@
         </div>
         <div class="adjourned-empty" data-adjourned-empty ${adj.length > 0 ? "hidden" : ""}>
           <div class="adjourned-empty-mark">○</div>
-          <div class="adjourned-empty-title">no adjourned rooms</div>
-          <div class="adjourned-empty-deck">conclude a discussion to file it here.</div>
+          <div class="adjourned-empty-title">${this.escape(this._t("sidebar_no_adjourned_title"))}</div>
+          <div class="adjourned-empty-deck">${this.escape(this._t("sidebar_no_adjourned_deck"))}</div>
         </div>
       `;
 
+      // SSE handlers (room.updated / message.appended / brief.appended)
+      // call renderSidebarRooms unconditionally; many of those events
+      // don't actually change anything visible in the sidebar. A no-op
+      // innerHTML rewrite still tears down + recreates every anchor,
+      // which kills any in-flight click whose mousedown/mouseup
+      // straddle the wipe — symptom: "I clicked a room and nothing
+      // happened, had to refresh." Skip the write when the rendered
+      // string is identical to last time.
+      if (this._sidebarRoomsHtml !== html) {
+        this._sidebarRoomsHtml = html;
+        list.innerHTML = html;
+      }
+
       this.markActiveRoom(this.currentRoomId);
     },
 
@@ -3968,7 +4160,7 @@
         const status = "active"; // every persisted director is active in v1
         const time = this.relTime(a.createdAt) || "—";
         const pinBtn = `
-          <button type="button" class="pin-toggle" title="${a.isPinned ? "Unpin" : "Pin"}" data-pin-toggle>${PIN_GLYPH}</button>
+          <button type="button" class="pin-toggle" title="${this.escape(a.isPinned ? this._t("sidebar_unpin") : this._t("sidebar_pin"))}" data-pin-toggle>${PIN_GLYPH}</button>
         `;
         // Delete moved off the sidebar row · it now lives inside the
         // agent profile's ⋯ overflow menu where it's protected by the
@@ -3981,13 +4173,12 @@
               <div class="agent-row-content">
                 <div class="agent-row-top-line">
                   <span class="agent-row-title">${this.escape(a.name)}</span>
-                  <span class="agent-row-time">${this.escape(time)}</span>
                   ${pinBtn}
                 </div>
                 <div class="agent-row-subtitle">
-                  <span>${this.escape(a.roleTag || "director")}</span>
+                  <span>${this.escape(a.roleTag || this._t("sidebar_role_director"))}</span>
                   <span class="agent-row-sep">·</span>
-                  <span class="agent-row-status">${this.escape(status)}</span>
+                  <span class="agent-row-status">${this.escape(this._t("sidebar_status_active"))}</span>
                 </div>
               </div>
             </a>
@@ -4006,12 +4197,10 @@
           <div class="agent-row-content">
             <div class="agent-row-top-line">
               <span class="agent-row-title">${this.escape(a.name)}</span>
-              <span class="agent-row-chair-badge" title="Moderator · structural agent, not user-managed">CHAIR</span>
+              <span class="agent-row-chair-badge" title="${this.escape(this._t("sidebar_chair_badge_title"))}">${this.escape(this._t("sidebar_chair_badge"))}</span>
             </div>
             <div class="agent-row-subtitle">
-              <span class="agent-row-chair-role">${this.escape(a.roleTag || "moderator")}</span>
-              <span class="agent-row-sep">·</span>
-              <span class="agent-row-chair-note">in every room</span>
+              <span class="agent-row-chair-role">${this.escape((a.roleTag && String(a.roleTag).toLowerCase() === "moderator") ? this._t("agent_role_tag_moderator") : (a.roleTag || this._t("sidebar_chair_role_fallback")))}</span>
             </div>
           </div>
         </a>
@@ -4040,22 +4229,30 @@
       // user immediately sees the orchestrator, and so it can't get
       // grouped with directors they pin or create.
       if (this.currentChair) {
-        parts.push(sectionHeader("Chair", 1, "chair"));
+        parts.push(sectionHeader(this._t("sidebar_sec_chair"), 1, "chair"));
         parts.push(renderChairRow(this.currentChair));
       }
       if (pinned.length) {
-        parts.push(sectionHeader("Pinned", pinned.length, "pinned"));
+        parts.push(sectionHeader(this._t("sidebar_sec_pinned"), pinned.length, "pinned"));
         parts.push(pinned.map((a) => renderRow(a)).join(""));
       }
       if (custom.length) {
-        parts.push(sectionHeader("Custom", custom.length));
+        parts.push(sectionHeader(this._t("sidebar_sec_custom"), custom.length));
         parts.push(custom.map((a) => renderRow(a)).join(""));
       }
       if (core.length) {
-        parts.push(sectionHeader("Core", core.length));
+        parts.push(sectionHeader(this._t("sidebar_sec_core"), core.length));
         parts.push(core.map((a) => renderRow(a)).join(""));
       }
-      list.innerHTML = parts.join("");
+      // Same idempotency guard as renderSidebarRooms · skip the
+      // innerHTML wipe when nothing has actually changed, so a
+      // background SSE re-render doesn't drop in-flight clicks on
+      // agent rows.
+      const html = parts.join("");
+      if (this._sidebarAgentsHtml !== html) {
+        this._sidebarAgentsHtml = html;
+        list.innerHTML = html;
+      }
     },
 
     renderUserBlock() {
@@ -4068,7 +4265,7 @@
         const firstLine = intro.split(/[\n.·]/)[0].trim();
         meta = firstLine.length > 32 ? firstLine.slice(0, 30) + "…" : firstLine;
       } else {
-        meta = "// host";
+        meta = this._t("sidebar_host");
       }
 
       // Avatar source-of-truth · prefs.avatarSeed (set by the
@@ -4281,23 +4478,19 @@
       const briefCard = document.querySelector("[data-brief-card]");
       if (!briefCard) return;
 
-      // System UI · always English. Session-analytics tile chrome
-      // (banner, metric labels, section heads, chip text) is part of
-      // the app shell and doesn't follow the brief language.
       const t = {
-        head: "// session analytics",
-        stamp: "closed",
-        tokens: "tokens",
-        messages: "msgs",
-        rounds: "rounds",
-        minutes: "min",
-        modelHead: "Model usage",
-        valueHead: "What you valued",
-        valueEmpty: "No ▲ key-point votes, probes, or seconds in this session.",
-        voted: "▲ voted",
-        seconded: "★ seconded",
-        probed: "✎ probed",
-      };
+        head: this._t("sa_head"),
+        stamp: this._t("sa_stamp"),
+        tokens: this._t("sa_tokens"),
+        messages: this._t("sa_messages"),
+        rounds: this._t("sa_rounds"),
+        minutes: this._t("sa_minutes"),
+        modelHead: this._t("sa_model_head"),
+        valueHead: this._t("sa_value_head"),
+        valueEmpty: this._t("sa_value_empty"),
+        voted: this._t("sa_voted"),
+        seconded: this._t("sa_seconded"),
+        probed: this._t("sa_probed"),      };
 
       const fmtTokens = (n) => {
         if (!Number.isFinite(n) || n <= 0) return "0";
@@ -4336,11 +4529,11 @@
       // base provider colour. Append-only — adding a new variant just
       // requires its modelV at the appropriate position.
       const MODEL_SHADE_ORDER = {
-        anthropic: ["opus-4-7", "sonnet-4-6", "haiku-4-5"],
+        anthropic: ["opus-4-7", "opus-4-6", "sonnet-4-6", "haiku-4-5"],
         openai:    ["gpt-5-5", "gpt-5-4-mini", "codex-5-4"],
         google:    ["gemini-3-1", "gemini-3-flash", "gemini-3-1-flash"],
         xai:       ["grok-4", "grok-4-3", "grok-4-mini"],
-        deepseek:  ["deepseek-v4-pro", "deepseek-v4"],
+        deepseek:  ["deepseek-v4-pro", "deepseek-v4-flash", "deepseek-v4"],
       };
       const providerOf = (modelV) => {
         const hit = reachable.find((m) => m.modelV === modelV);
@@ -4371,7 +4564,7 @@
       const barSegments = stats.modelBreakdown.map((row) => {
         const color = colorForModel(row.modelV);
         const widthPct = (row.pct * 100).toFixed(2);
-        return `<span class="sa-bar-seg" style="width: ${widthPct}%; background: ${color};" title="${this.escape(modelLabel(row.modelV) + " · " + fmtTokens(row.tokens) + " tokens")}"></span>`;
+        return `<span class="sa-bar-seg" style="width: ${widthPct}%; background: ${color};" title="${this.escape(this._t("sa_seg_title", { model: modelLabel(row.modelV), tokens: fmtTokens(row.tokens) }))}"></span>`;
       }).join("");
       const barHtml = stats.modelBreakdown.length > 0
         ? `<div class="sa-bar" role="img" aria-label="${this.escape(t.modelHead)}">${barSegments}</div>`
@@ -4520,13 +4713,11 @@
         ? this.escape(nextSpeaker.handle.replace(/^\//, ""))
         : "";
 
-      // System UI · always English. App chrome (paused bar, action
-      // buttons, status labels) doesn't follow the brief language.
-      const addInputLabel = "[ + Add input ]";
-      const adjournLabel  = "[ ▸ Adjourn & File Brief ]";
-      const resumeLabel   = "[ ▶ Resume Discussion ]";
-      const pausedLabel   = "paused";
-      const nextLabel     = "next";
+      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>`
         : "";
@@ -4551,6 +4742,7 @@
       directorIds: [],   // populated lazily from the chair's roster
       mode: "constructive",
       intensity: "sharp",
+      deliveryMode: "text",
     },
 
     loadComposerState() {
@@ -4571,10 +4763,10 @@
     saveComposerState() {
       if (!this.composerState) return;
       try {
-        const { directorIds, mode, intensity, autoPickDirectors, subject } = this.composerState;
+        const { directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject } = this.composerState;
         localStorage.setItem(
           "boardroom.composer",
-          JSON.stringify({ directorIds, mode, intensity, autoPickDirectors, subject }),
+          JSON.stringify({ directorIds, mode, intensity, deliveryMode, autoPickDirectors, subject }),
         );
       } catch { /* ignore */ }
     },
@@ -4635,6 +4827,13 @@
           setTimeout(() => {
             const ta = chat.querySelector("[data-agent-composer-desc]");
             if (ta) {
+              // Set the multi-line placeholder via DOM property · the
+              // HTML attribute path strips newlines in some parsers,
+              // so the second line of the pitch wouldn't render. The
+              // DOM `placeholder` property reflects `\n` as a literal
+              // line break in the textarea's empty state, which is
+              // exactly what we want.
+              ta.placeholder = this._t("ag_cmp_placeholder");
               ta.focus();
               this.autosizeAgentComposerTextarea();
             }
@@ -4656,7 +4855,13 @@
           chat.innerHTML = this.renderComposerHtml(state);
           setTimeout(() => {
             const ta = chat.querySelector("[data-composer-subject]");
-            if (ta) ta.focus();
+            if (ta) {
+              // Same multi-line placeholder pattern as the agent
+              // composer above · DOM property preserves the `\n` the
+              // HTML attribute path can drop.
+              ta.placeholder = this._composerSubjectPlaceholder();
+              ta.focus();
+            }
             this.autosizeComposerTextarea();
           }, 30);
         }
@@ -4821,7 +5026,12 @@
         // to All.
         this._reportsCache = briefs;
         const activeFilter = this._reportsFilter || "all";
-        const filterLabels = { all: "the archive", today: "Today", week: "This week", earlier: "Earlier" };
+        const filterLabels = {
+          all: this._t("rep_filter_archive_label"),
+          today: this._t("rep_filter_today"),
+          week: this._t("rep_filter_week"),
+          earlier: this._t("rep_filter_earlier"),
+        };
 
         const emptyChip = (key, label) => {
           const on = key === activeFilter ? " on" : "";
@@ -4834,39 +5044,39 @@
         };
 
         const isAll = activeFilter === "all";
-        const cardKicker = isAll ? "// archive empty" : "// window empty";
+        const cardKicker = isAll ? this._t("rep_empty_kicker_archive") : this._t("rep_empty_kicker_window");
         const cardTitle = isAll
-          ? "No reports filed yet"
-          : `No reports in ${filterLabels[activeFilter]}`;
+          ? this._t("rep_empty_title_none")
+          : this._t("rep_empty_title_window", { window: filterLabels[activeFilter] });
         const cardDeck = isAll
-          ? "Run a session and adjourn — once the chair files, every brief across every room lands here."
-          : "Run a session and adjourn — once the chair files, briefs in this window land here. Or jump back to the full archive.";
+          ? this._t("rep_empty_deck_all")
+          : this._t("rep_empty_deck_window");
         const cardCtaHtml = isAll
           ? `
             <button type="button" class="reports-list-empty-cta" data-convene-trigger>
               <span class="reports-list-empty-cta-arrow">→</span>
-              <span>Convene a new room</span>
+              <span>${this.escape(this._t("rep_cta_convene"))}</span>
             </button>`
           : `
             <button type="button" class="reports-list-empty-cta" data-reports-filter="all">
               <span class="reports-list-empty-cta-arrow">←</span>
-              <span>Show all reports</span>
+              <span>${this.escape(this._t("rep_cta_show_all"))}</span>
             </button>`;
 
         page.innerHTML = `
           <div class="reports-page-head">
             <div>
-              <div class="reports-page-kicker">// archive</div>
-              <h1 class="reports-page-title">All Reports</h1>
+              <div class="reports-page-kicker">${this.escape(this._t("rep_kicker"))}</div>
+              <h1 class="reports-page-title">${this.escape(this._t("rep_title"))}</h1>
             </div>
-            <div class="reports-page-meta">0 reports</div>
+            <div class="reports-page-meta">${this.escape(this._t("rep_meta", { n: 0 }))}</div>
           </div>
 
-          <div class="reports-filters" role="tablist" aria-label="Filter reports by recency">
-            ${emptyChip("all", "All")}
-            ${emptyChip("today", "Today")}
-            ${emptyChip("week", "This week")}
-            ${emptyChip("earlier", "Earlier")}
+          <div class="reports-filters" role="tablist" aria-label="${this.escape(this._t("rep_aria_filters"))}">
+            ${emptyChip("all", this._t("rep_filter_all"))}
+            ${emptyChip("today", this._t("rep_filter_today"))}
+            ${emptyChip("week", this._t("rep_filter_week"))}
+            ${emptyChip("earlier", this._t("rep_filter_earlier"))}
           </div>
 
           <div class="reports-list-wrap">
@@ -4933,21 +5143,43 @@
         `;
       };
 
-      // Flat list under the filter chips · earlier iterations grouped
-      // by Today / Yesterday / This week / Earlier, but the user
-      // wanted a single divider followed by the items. The filter
-      // chips above already disclose the recency dimension; redundant
-      // group headers were just visual chrome.
-      const filterLabels = { all: "the archive", today: "Today", week: "This week", earlier: "Earlier" };
-      const filterCopyTitle = filterLabels[activeFilter] || "this window";
-      const groupsHtml = visibleFiltered.length === 0
-        ? `
+      // Group filtered items by date label (Today / Yesterday / This
+      // week / Earlier) so the list still has rhythm without splitting
+      // into multiple sections each with its own header chrome.
+      // Iterates the *visible* slice; the load-more sentinel below
+      // tops the list up by 20 each time it crosses the viewport.
+      const groups = [];
+      const yesterdayStart = todayStart - 86400_000;
+      let currentGroup = null;
+      const groupLabelFor = (ts) => {
+        if (ts >= todayStart)      return this._t("rep_group_today");
+        if (ts >= yesterdayStart)  return this._t("rep_group_yesterday");
+        if (ts >= weekStart)       return this._t("rep_group_week");
+        return this._t("rep_group_earlier");
+      };
+      for (const b of visibleFiltered) {
+        const label = groupLabelFor(b.createdAt);
+        if (!currentGroup || currentGroup.label !== label) {
+          currentGroup = { label, items: [] };
+          groups.push(currentGroup);
+        }
+        currentGroup.items.push(b);
+      }
+
+      const filterLabels = {
+        all: this._t("rep_filter_archive_label"),
+        today: this._t("rep_filter_today"),
+        week: this._t("rep_filter_week"),
+        earlier: this._t("rep_filter_earlier"),
+      };
+      const filterCopyTitle = filterLabels[activeFilter] || filterLabels.all;
+      const groupsHtml = groups.length === 0        ? `
           <div class="reports-list-empty">
             <!-- Notice text · explains the empty window. -->
             <div class="reports-list-empty-text">
-              <div class="reports-list-empty-kicker">// window empty</div>
-              <h3 class="reports-list-empty-title">No reports in ${this.escape(filterCopyTitle)}</h3>
-              <p class="reports-list-empty-deck">Pick a different filter, or jump back to the full archive.</p>
+              <div class="reports-list-empty-kicker">${this.escape(this._t("rep_empty_kicker_window"))}</div>
+              <h3 class="reports-list-empty-title">${this.escape(this._t("rep_empty_title_window", { window: filterCopyTitle }))}</h3>
+              <p class="reports-list-empty-deck">${this.escape(this._t("rep_empty_deck_filter"))}</p>
             </div>
             <!-- Static skeleton silhouette · three quiet bars
                  suggesting "title · judgement · meta," paired with
@@ -4960,7 +5192,7 @@
             ${activeFilter !== "all" ? `
               <button type="button" class="reports-list-empty-cta" data-reports-filter="all">
                 <span class="reports-list-empty-cta-arrow">←</span>
-                <span>Show all reports</span>
+                <span>${this.escape(this._t("rep_cta_show_all"))}</span>
               </button>
             ` : ""}
           </div>
@@ -4975,12 +5207,21 @@
       // when there's more to load. The "+ N more" hint doubles as a
       // click target if the user prefers explicit paging over scroll.
       const remaining = filtered.length - visibleCount;
+      const loadN = Math.min(20, remaining);
+      const reportsMetaLine =
+        (total === 1 ? this._t("rep_total_one") : this._t("rep_total_n", { n: total })) +
+        (distinctRooms > 0
+          ? (distinctRooms === 1
+            ? this._t("rep_meta_room_one")
+            : this._t("rep_meta_room_n", { n: distinctRooms }))
+          : "") +
+        (hasMore ? this._t("rep_showing", { n: visibleCount }) : "");
       const sentinelHtml = hasMore
         ? `
           <div class="reports-load-sentinel" data-reports-load-sentinel>
             <button type="button" class="reports-load-more" data-reports-load-more>
               <span class="reports-load-more-arrow">▾</span>
-              <span class="reports-load-more-text">Load ${Math.min(20, remaining)} more · ${remaining} remaining</span>
+              <span class="reports-load-more-text">${this.escape(this._t("rep_load_more", { load: loadN, remaining }))}</span>
             </button>
           </div>
         `
@@ -4989,17 +5230,17 @@
       page.innerHTML = `
         <div class="reports-page-head">
           <div>
-            <div class="reports-page-kicker">// archive</div>
-            <h1 class="reports-page-title">All Reports</h1>
+            <div class="reports-page-kicker">${this.escape(this._t("rep_kicker"))}</div>
+            <h1 class="reports-page-title">${this.escape(this._t("rep_title"))}</h1>
           </div>
-          <div class="reports-page-meta">${total} ${total === 1 ? "report" : "reports"} · ${distinctRooms} ${distinctRooms === 1 ? "room" : "rooms"}${hasMore ? ` · showing ${visibleCount}` : ""}</div>
+          <div class="reports-page-meta">${this.escape(reportsMetaLine)}</div>
         </div>
 
-        <div class="reports-filters" role="tablist" aria-label="Filter reports by recency">
-          ${filterChip("all", "All", total)}
-          ${filterChip("today", "Today", todayCount)}
-          ${filterChip("week", "This week", weekCount)}
-          ${filterChip("earlier", "Earlier", earlierCount)}
+        <div class="reports-filters" role="tablist" aria-label="${this.escape(this._t("rep_aria_filters"))}">
+          ${filterChip("all", this._t("rep_filter_all"), total)}
+          ${filterChip("today", this._t("rep_filter_today"), todayCount)}
+          ${filterChip("week", this._t("rep_filter_week"), weekCount)}
+          ${filterChip("earlier", this._t("rep_filter_earlier"), earlierCount)}
         </div>
 
         <div class="reports-list-wrap">${groupsHtml}${sentinelHtml}</div>
@@ -5050,11 +5291,16 @@
       }
 
       // Scroll path · IntersectionObserver fires when the sentinel
-      // crosses the viewport. `rootMargin: 200px` triggers slightly
-      // before the actual edge so the next batch is rendered before
-      // the user reaches the bottom — feels seamless rather than
-      // chunked.
+      // crosses the viewport. The All Reports view uses an inner
+      // scroll container (`.main-view[data-main-view="reports"]` has
+      // `overflow-y: auto`), so the document viewport itself never
+      // scrolls. The observer's `root` MUST point at the inner
+      // scroller — otherwise the sentinel never intersects and
+      // infinite scroll silently does nothing. `rootMargin: 200px`
+      // triggers slightly before the actual edge so the next batch
+      // is rendered before the user reaches the bottom.
       try {
+        const scrollRoot = document.querySelector('.main-view[data-main-view="reports"]') || null;
         this._reportsLoadObserver = new IntersectionObserver(
           (entries) => {
             for (const entry of entries) {
@@ -5064,7 +5310,7 @@
               }
             }
           },
-          { rootMargin: "200px 0px 200px 0px", threshold: 0.01 },
+          { root: scrollRoot, rootMargin: "200px 0px 200px 0px", threshold: 0.01 },
         );
         this._reportsLoadObserver.observe(sentinel);
       } catch { /* IntersectionObserver unavailable · click path remains */ }
@@ -5277,11 +5523,11 @@
         `;
       };
       const filtersHtml = `
-        <div class="notes-filters" role="tablist" aria-label="Filter notes by recency">
-          ${filterChip("all", "All", total)}
-          ${filterChip("today", "Today", todayCount)}
-          ${filterChip("week", "This week", weekCount)}
-          ${filterChip("earlier", "Earlier", earlierCount)}
+        <div class="notes-filters" role="tablist" aria-label="${this.escape(this._t("notes_aria_filters"))}">
+          ${filterChip("all", this._t("notes_filter_all"), total)}
+          ${filterChip("today", this._t("rep_filter_today"), todayCount)}
+          ${filterChip("week", this._t("rep_filter_week"), weekCount)}
+          ${filterChip("earlier", this._t("rep_filter_earlier"), earlierCount)}
         </div>
       `;
 
@@ -5292,41 +5538,17 @@
         page.innerHTML = `
           <div class="notes-page-head">
             <div>
-              <div class="notes-page-kicker">// chairman · saved excerpts</div>
-              <h1 class="notes-page-title">All Notes</h1>
+              <div class="notes-page-kicker">${this.escape(this._t("notes_kicker"))}</div>
+              <h1 class="notes-page-title">${this.escape(this._t("notes_title"))}</h1>
             </div>
-            <div class="notes-page-meta">0 notes</div>
+            <div class="notes-page-meta">${this.escape(this._t("notes_meta", { n: 0 }))}</div>
           </div>
           ${filtersHtml}
           <div class="notes-list-empty">
             <div class="notes-empty-mark">○</div>
-            <div class="notes-empty-title">no saved notes yet</div>
+            <div class="notes-empty-title">${this.escape(this._t("notes_empty_title"))}</div>
             <div class="notes-empty-deck">
-              Capture a director's line as a note:
-            </div>
-            <ol class="notes-empty-steps">
-              <li>
-                <span class="notes-empty-step-num">1</span>
-                <span class="notes-empty-step-text">
-                  <strong>Open a room.</strong> Any director's reply can be saved.
-                </span>
-              </li>
-              <li>
-                <span class="notes-empty-step-num">2</span>
-                <span class="notes-empty-step-text">
-                  <strong>Select a passage.</strong> Drag-highlight the sentence or paragraph you want to keep.
-                </span>
-              </li>
-              <li>
-                <span class="notes-empty-step-num">3</span>
-                <span class="notes-empty-step-text">
-                  <strong>Click <span class="kbd">⌖ Save</span></strong> on the floating bar that appears, or press <span class="kbd">S</span>. The excerpt lands here, indexed across all rooms.
-                </span>
-              </li>
-            </ol>
-            <div class="notes-empty-foot">
-              Each saved excerpt links back to the original room + speaker, so you can jump back any time.
-            </div>
+              ${this._t("notes_empty_deck")}            </div>
           </div>
         `;
         return;
@@ -5340,21 +5562,40 @@
         return true;
       });
 
-      // Flat list under the filter chips. Earlier iterations grouped
-      // by Today / This week / Earlier headers; the user wanted a
-      // single divider followed by the items, since the chips above
-      // already disclose the recency dimension.
-      const filterLabels = { all: "the archive", today: "Today", week: "This week", earlier: "Earlier" };
-      const groupsHtml = filtered.length === 0
-        ? `
+      // Group filtered items by date label so even an "All" view has
+      // visual rhythm. When a recency filter narrows to a single
+      // bucket, only that bucket's section renders — no empty headers.
+      const groupLabelFor = (ts) => {
+        if (ts >= todayStart) return this._t("rep_group_today");
+        if (ts >= weekStart)  return this._t("rep_group_week");
+        return this._t("rep_group_earlier");
+      };
+      const groups = [];
+      let currentGroup = null;
+      for (const n of filtered) {
+        const label = groupLabelFor(n.createdAt || 0);
+        if (!currentGroup || currentGroup.label !== label) {
+          currentGroup = { label, items: [] };
+          groups.push(currentGroup);
+        }
+        currentGroup.items.push(n);
+      }
+
+      const filterLabels = {
+        all: this._t("rep_filter_archive_label"),
+        today: this._t("rep_filter_today"),
+        week: this._t("rep_filter_week"),
+        earlier: this._t("rep_filter_earlier"),
+      };
+      const groupsHtml = groups.length === 0        ? `
           <div class="notes-list-empty">
             <div class="notes-empty-mark">○</div>
-            <div class="notes-empty-title">No notes in ${this.escape(filterLabels[activeFilter] || "this window")}</div>
-            <div class="notes-empty-deck">Pick a different filter, or jump back to the full archive.</div>
+            <div class="notes-empty-title">${this.escape(this._t("notes_empty_window", { window: filterLabels[activeFilter] || filterLabels.all }))}</div>
+            <div class="notes-empty-deck">${this.escape(this._t("notes_empty_filter_deck"))}</div>
             ${activeFilter !== "all" ? `
               <button type="button" class="notes-empty-cta" data-notes-filter="all">
                 <span class="notes-empty-cta-arrow">←</span>
-                <span>Show all notes</span>
+                <span>${this.escape(this._t("notes_cta_show_all"))}</span>
               </button>
             ` : ""}
           </div>
@@ -5365,18 +5606,19 @@
           </ul>
         `;
 
-      const totalLabel = `${total} ${total === 1 ? "note" : "notes"}`;
+      const totalLabel =
+        total === 1 ? this._t("notes_one") : this._t("notes_many", { n: total });
       const roomLabel = distinctRooms > 0
-        ? ` · ${distinctRooms} ${distinctRooms === 1 ? "room" : "rooms"}`
+        ? (distinctRooms === 1 ? this._t("rooms_one") : this._t("rooms_many", { n: distinctRooms }))
         : "";
 
       page.innerHTML = `
         <div class="notes-page-head">
           <div>
-            <div class="notes-page-kicker">// chairman · saved excerpts</div>
-            <h1 class="notes-page-title">All Notes</h1>
+            <div class="notes-page-kicker">${this.escape(this._t("notes_kicker"))}</div>
+            <h1 class="notes-page-title">${this.escape(this._t("notes_title"))}</h1>
           </div>
-          <div class="notes-page-meta">${this.escape(totalLabel)}${this.escape(roomLabel)}</div>
+          <div class="notes-page-meta">${this.escape(totalLabel)}${roomLabel ? this.escape(" · " + roomLabel) : ""}</div>
         </div>
         ${filtersHtml}
         <div class="notes-list-wrap">${groupsHtml}</div>
@@ -5400,7 +5642,7 @@
       const time = this.relTime(n.createdAt) || "";
       const roomNum = n.roomNumber != null ? `#${String(n.roomNumber).padStart(3, "0")}` : "";
       const roomSubject = (n.roomSubject || "").slice(0, 100);
-      const author = n.authorName || "Director";
+      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
@@ -5413,7 +5655,7 @@
         <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">ROOM ${this.escape(roomNum)}</span>
+              <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>
@@ -5660,7 +5902,7 @@
         // tooltip's 1–2s delay competing with the custom `.note-tip`
         // popover wired up in init(); aria-label still surfaces the
         // affordance for screen readers.
-        span.setAttribute("aria-label", "Saved to Notes");
+        span.setAttribute("aria-label", this._t("note_saved"));
         // Text-only ranges always satisfy surroundContents' "no
         // partial non-Text node" precondition · the catch is just
         // a safety belt for browsers that surprise us.
@@ -5701,7 +5943,7 @@
       const time = note ? this.relTime(note.createdAt) : "";
       tip.innerHTML = `
         <span class="note-tip-mark">✓</span>
-        <span class="note-tip-label">Saved to Notes</span>
+        <span class="note-tip-label">${this.escape(this._t("note_saved"))}</span>
         ${time ? `<span class="note-tip-sep">·</span><span class="note-tip-meta">${this.escape(time)}</span>` : ""}
       `;
       const rect = span.getBoundingClientRect();
@@ -5871,6 +6113,19 @@
       }
     },
 
+    /** Pitch copy for the new-room composer's textarea placeholder.
+     *  Centralised so renderComposerHtml AND the post-render DOM
+     *  `.placeholder` set in renderEmptyState share one source. The
+     *  DOM property path is the load-bearing one — setting it via
+     *  the HTML attribute strips the `\n` in some parsers, so a
+     *  multi-line pitch never renders the second line. The earlier
+     *  trailing "Drop in what's on your mind in a sentence or two."
+     *  was retired at the user's request — it was a CTA-style nudge
+     *  redundant with the heading question above the textarea. */
+    _composerSubjectPlaceholder() {
+      return "Convening a room can stress-test a thesis, force a decision you've been avoiding, or surface the angle nobody on your real team brings.";
+    },
+
     /** Build the composer HTML. Centred hero composition · Claude /
      *  ChatGPT-style new-chat landing, but tuned to our boardroom
      *  language. The single input block IS the focal point — cast +
@@ -5889,7 +6144,7 @@
       const t = {
         greet: greeting,
         prompt: "What's on your mind today?",
-        placeholder: "An idea you're not sure about, a decision you keep avoiding, or a thesis you want stress-tested. e.g. Should we lean into mid-market or stay enterprise-only? Or: What's the strongest argument against shipping the self-serve tier next quarter?",
+        placeholder: this._composerSubjectPlaceholder(),
         convene: "Convene",
         tuneLabel: "tune",
         starterLabel: "starter",
@@ -5949,10 +6204,8 @@
       // Tune dropdowns · two trigger buttons that open option popovers
       // on click. Discoverable (label + value + chevron pattern is
       // unmistakeably a select) without taking up visual real estate.
-      // System UI · always English (tune dropdown labels).
-      const toneLbl = "tone";
-      const intensityLbl = "intensity";
-
+      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 : [];
       const starterCards = starters.map((q, idx) => {
@@ -5994,10 +6247,47 @@
                   <span class="cmp-dd-value" data-cmp-dd-value="intensity">${this.escape(state.intensity)}</span>
                   <span class="cmp-dd-chevron">▾</span>
                 </button>
+                ${(() => {
+                  // Reuse the same toggle vocabulary as the new-agent
+                  // composer's web-search toggle: `.ap-skill-row-toggle`
+                  // (track + knob + text) plus `.cmp-ws-toggle` for
+                  // toolbar fitting. `needs-key` modifier renders the
+                  // dashed "configure first" treatment when no voice
+                  // provider is set, matching the WS toggle pattern
+                  // exactly. Class set: `on` / `off` / `needs-key`.
+                  const voiceConfigured = this.hasAnyVoiceKey();
+                  const voiceOn = voiceConfigured && state.deliveryMode === "voice";
+                  const voiceLabel = this._t("cmp_voice_label");
+                  const voiceTitle = !voiceConfigured
+                    ? "Configure a voice provider to enable voice mode"
+                    : (voiceOn
+                      ? "Voice mode on · directors speak aloud during the room"
+                      : "Voice mode off · click to enable");
+                  const voiceCls = [
+                    "ap-skill-row-toggle",
+                    "cmp-ws-toggle",
+                    voiceOn ? "on" : "off",
+                    voiceConfigured ? "" : "needs-key",
+                  ].filter(Boolean).join(" ");
+                  return `
+                    <button type="button" class="${voiceCls}"
+                      data-composer-voice-toggle
+                      data-configured="${voiceConfigured ? "1" : "0"}"
+                      data-on="${voiceOn ? "1" : "0"}"
+                      aria-pressed="${voiceOn ? "true" : "false"}"
+                      title="${this.escape(voiceTitle)}">
+                      <span class="ap-skill-row-toggle-track"><span class="ap-skill-row-toggle-knob"></span></span>
+                      <span class="ap-skill-row-toggle-text">${this.escape(voiceLabel)}</span>
+                    </button>
+                  `;
+                })()}
               </div>
 
               <button type="button" class="cmp-go" data-composer-go title="${this.escape(t.convene)} (⏎)">
-                <span class="cmp-go-arrow">→</span>
+                <svg class="cmp-go-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14"/>
+                  <path d="m13 5 7 7-7 7"/>
+                </svg>
               </button>
             </div>
           </div>
@@ -6017,24 +6307,44 @@
     },
 
     /** Time-of-day greeting like "// good evening, Kay" / "// 晚上好，Kay". */
-    composerGreeting(_lang, name) {
-      // System UI · always English. Greeting is part of the composer
-      // chrome; the brief language doesn't change the app's voice.
+    composerGreeting(lang, name) {
+      // Follows composer chrome locale (`lang` · en or zh via I18n).
       const h = new Date().getHours();
-      const part = h < 5 ? "Up late" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
-      return `// ${part}, ${name}`;
-    },
+      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 });    },
 
     composerLanguage() {
-      // Match interface language to user prefs / browser locale; CJK
-      // browsers see Chinese composer copy.
       try {
-        const lang = (this.prefs?.locale || navigator.language || "").toLowerCase();
-        if (lang.startsWith("zh") || lang.includes("cn") || lang.includes("hans") || lang.includes("hant")) return "zh";
+        if (window.I18n && typeof window.I18n.getLocale === "function") {
+          return window.I18n.getLocale() === "zh" ? "zh" : "en";
+        }
+      } catch { /* ignore */ }
+      try {
+        const lang = (navigator.language || "").toLowerCase();
+        if (lang.startsWith("zh") || lang.includes("cn") || lang.includes("hans") || lang.includes("hant")) {
+          return "zh";
+        }
       } catch { /* ignore */ }
       return "en";
     },
 
+    /** UI copy from i18n.js · falls back to key if I18n not loaded. */
+    _t(key, vars) {
+      return (window.I18n && window.I18n.t(key, vars)) || key;
+    },
+
     autosizeComposerTextarea() {
       const ta = document.querySelector("[data-composer-subject]");
       if (!ta) return;
@@ -6135,15 +6445,14 @@
       } catch { /* ignore */ }
     },
 
-    /** True when the global Brave Search key is configured · gates the
-     *  websearch toggle's "on" state. Reads through window.boardroomKeys
-     *  (cached on boot, refetched after any /api/keys mutation), so the
-     *  composer reflects the current key state without its own fetch. */
-    agentComposerBraveConfigured() {
+    /** True when a Web Search backend key is configured · gates the
+     *  websearch toggle's "on" state (Brave Search and/or Tavily). Reads
+     *  through window.boardroomKeys · refetched after /api/keys mutations. */
+    agentComposerWebSearchConfigured() {
       try {
         if (typeof window.boardroomKeys !== "function") return false;
         const k = window.boardroomKeys();
-        return !!(k && k.brave);
+        return !!(k && (k.brave || k.tavily));
       } catch { return false; }
     },
 
@@ -6152,7 +6461,7 @@
      *  configuring the key, no reason to default OFF) and FALSE when
      *  not configured (no point pretending it's on). */
     loadAgentComposerWebSearch() {
-      const configured = this.agentComposerBraveConfigured();
+      const configured = this.agentComposerWebSearchConfigured();
       if (!configured) return false;
       try {
         const raw = localStorage.getItem("boardroom.composer.agent.websearch");
@@ -6168,6 +6477,15 @@
       } catch { /* ignore */ }
     },
 
+    /** Public lookup for the human-friendly label of a model id.
+     *  Mirrors `MODEL_LABELS[modelV] || modelV`, exposed so callers
+     *  outside this IIFE (e.g. new-agent.js's overlay) don't have to
+     *  reach into module-scoped state. */
+    modelLabel(modelV) {
+      if (!modelV) return "";
+      return MODEL_LABELS[modelV] || modelV;
+    },
+
     setAgentComposerModel(modelV) {
       if (!modelV) return;
       // Accept any modelV the registry knows about (MODEL_LABELS) so
@@ -6177,9 +6495,16 @@
       if (!MODEL_LABELS[modelV]) return;
       this.agentComposerModel = modelV;
       this.saveAgentComposerModel();
-      // Update the dropdown trigger label in place.
-      const v = document.querySelector('[data-cmp-dd-value="agent-model"]');
-      if (v) v.textContent = MODEL_LABELS[modelV] || modelV;
+      // Update every dropdown trigger label in place. There can be
+      // more than one mounted at once (the AI composer's toolbar
+      // chip + the manual new-agent overlay's foot chip), and they
+      // share the same model state, so all instances should reflect
+      // the new pick. Picking one out via querySelector() updated
+      // only the first; querySelectorAll keeps them in sync.
+      const label = MODEL_LABELS[modelV] || modelV;
+      document.querySelectorAll('[data-cmp-dd-value="agent-model"]').forEach((v) => {
+        v.textContent = label;
+      });
     },
 
     /** Click handler for the agent-composer starter list. Drops the
@@ -6285,8 +6610,8 @@
       const stages = this.AGENT_GEN_STAGES_EN;
       const active = this.agentGenStageIndex;
       const elapsed = Math.max(0, (Date.now() - this.agentGenStartedAt) / 1000);
-      const elapsedLabel = `${Math.round(elapsed)} s elapsed`;
-      const headerLabel = "Summoning director";
+      const elapsedLabel = this._t("ag_gen_elapsed", { n: Math.round(elapsed) });
+      const headerLabel = this._t("ag_gen_header");
       const sigilSvg = this.renderAgentGenSigilSvg(stages, active, elapsed);
       // The active stage's headline pulse — lifted out from the list so
       // it reads as the focal "what's happening RIGHT NOW" line.
@@ -6300,11 +6625,12 @@
           <span class="ag-gen-mark"><span class="ag-gen-pulse"></span></span>
           <span class="ag-gen-title">${this.escape(headerLabel)}</span>
           <span class="ag-gen-elapsed">${this.escape(elapsedLabel)}</span>
+          <button type="button" class="ag-gen-stop" data-agent-spec-stop title="Stop generating">[ Stop ]</button>
         </div>
         <div class="ag-gen-stage-area">
           <div class="ag-gen-sigil" aria-hidden="true">${sigilSvg}</div>
           <div class="ag-gen-active-block">
-            <div class="ag-gen-active-kicker">${this.escape(`step ${active + 1} of ${stages.length}`)}</div>
+            <div class="ag-gen-active-kicker">${this.escape(this._t("ag_gen_step", { current: active + 1, total: stages.length }))}</div>
             <div class="ag-gen-active-label">${this.escape(activeStage ? activeStage.label : "")}</div>
             ${activeSubText ? `<div class="ag-gen-active-sub">${this.escape(activeSubText)}</div>` : ""}
           </div>
@@ -6430,21 +6756,18 @@
       const userName = (this.prefs?.name || "you").trim() || "you";
       const lang = this.composerLanguage();
       const greeting = this.composerGreeting(lang, userName);
-      // System UI · always English (new-agent composer chrome).
       const t = {
         greet: greeting,
-        prompt: "What kind of director do you want?",
-        placeholder: "A few sentences on their role, method, stance. e.g. A seasoned product hand who reasons from the user's moment of friction. Will reject any argument that doesn't name what the user is doing right then.",
-        cta: "Generate",
-        ctaHint: "AI drafts the full spec — you'll edit before saving",
-        manual: "Configure manually",
-        generating: "Generating…",
-        modelLabel: "model",
-        starterCaption: "or start from an archetype",
-      };
+        prompt: this._t("ag_cmp_prompt"),
+        placeholder: this._t("ag_cmp_placeholder"),
+        cta: this._t("ag_cmp_cta"),
+        ctaHint: this._t("ag_cmp_cta_hint"),
+        manual: this._t("ag_cmp_manual"),
+        generating: this._t("ag_cmp_generating"),
+        starterCaption: this._t("ag_cmp_starter_caption"),      };
       // If we already have a spec preview, render that instead of the input.
       if (this.agentSpec) {
-        return this.renderAgentSpecPreviewHtml(this.agentSpec, lang);
+        return this.renderAgentSpecPreviewHtml(this.agentSpec);
       }
       // If the last attempt failed (timeout or other), render the
       // recovery card with [Retry] / [Discard] · keeps the description
@@ -6453,8 +6776,6 @@
         return this.renderAgentSpecErrorHtml(this.agentSpecError, lang);
       }
       const generating = this.agentSpecGenerating;
-      const currentModel = this.loadAgentComposerModel();
-      const modelDisplay = MODEL_LABELS[currentModel] || currentModel;
       const starters = this.AGENT_STARTERS_EN;
       const starterCards = starters.map((q, idx) => `
         <button type="button" class="cmp-starter" data-agent-starter="${idx}">
@@ -6474,11 +6795,13 @@
             <textarea class="cmp-input" data-agent-composer-desc rows="1" placeholder="${this.escape(t.placeholder)}" ${generating ? "disabled" : ""}>${this.escape(this.loadAgentComposerDraft())}</textarea>
 
             <div class="cmp-toolbar">
-              <button type="button" class="cmp-dd" data-cmp-dropdown="agent-model" title="${this.escape(t.modelLabel)}">
-                <span class="cmp-dd-label">${this.escape(t.modelLabel)}</span>
-                <span class="cmp-dd-value" data-cmp-dd-value="agent-model">${this.escape(modelDisplay)}</span>
-                <span class="cmp-dd-chevron">▾</span>
-              </button>
+              <!-- Model selection lives downstream now: the post-
+                   generation spec preview card has a model <select>
+                   (renderAgentSpecPreviewHtml), the manual new-agent
+                   overlay has its own model picker (new-agent.js), and
+                   the agent profile page can change the model at any
+                   time. Putting it in the composer toolbar too was
+                   redundant and made the bar visually noisy. -->
               <button type="button" class="ag-cmp-manual" data-agent-composer-manual>
                 <span class="ag-cmp-manual-mark">⚙</span>
                 <span class="ag-cmp-manual-label">${this.escape(t.manual)}</span>
@@ -6489,16 +6812,19 @@
                 // same control. Class set: `ap-skill-row-toggle` +
                 // `on` / `off` / `needs-key` modifiers, mirroring the
                 // skill row at agent-profile.js:1411.
-                const configured = this.agentComposerBraveConfigured();
+                const configured = this.agentComposerWebSearchConfigured();
                 const on = configured && this.loadAgentComposerWebSearch();
-                // System UI · always English (web-search toggle chrome).
-                const stateLabel = !configured ? "needs key" : on ? "enabled" : "disabled";
+                const stateLabel = !configured
+                  ? this._t("ag_ws_needs_key")
+                  : on
+                    ? this._t("ag_ws_enabled")
+                    : this._t("ag_ws_disabled");
                 const titleText = !configured
-                  ? "Web search needs a Brave Search API key · click to configure"
+                  ? this._t("ag_ws_title_needs")
                   : on
-                    ? "Search the web for real domain references during generation · click to disable"
-                    : "Generation runs offline · click to enable web search";
-                const wsLabel = "web search";
+                    ? this._t("ag_ws_title_on")
+                    : this._t("ag_ws_title_off");
+                const wsLabel = this._t("ag_ws_label");
                 const cls = [
                   "ap-skill-row-toggle",
                   "cmp-ws-toggle",
@@ -6518,7 +6844,12 @@
                 `;
               })()}
               <button type="button" class="cmp-go ${generating ? "busy" : ""}" data-agent-composer-go title="${this.escape(t.cta)} (⏎)" ${generating ? "disabled" : ""}>
-                <span class="cmp-go-arrow">${generating ? "…" : "→"}</span>
+                ${generating
+                  ? `<span class="cmp-go-arrow">…</span>`
+                  : `<svg class="cmp-go-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M5 12h14"/>
+                      <path d="m13 5 7 7-7 7"/>
+                    </svg>`}
               </button>
             </div>
           </div>
@@ -6544,24 +6875,7 @@
     },
 
     /** Preview card · all generated fields editable inline. */
-    renderAgentSpecPreviewHtml(spec, _lang) {
-      // System UI · always English (agent-spec preview card chrome).
-      const t = {
-        kicker: "// generated director · edit and save",
-        avatar: "Avatar",
-        reroll: "Reroll",
-        name: "Name",
-        handle: "Handle",
-        role: "Role tag",
-        bio: "Bio",
-        quote: "Cover quote",
-        instruction: "Instruction",
-        model: "Model",
-        save: "Save director",
-        discard: "Discard",
-        redo: "Regenerate",
-      };
-      const seed = this.agentSpecAvatarSeed;
+    renderAgentSpecPreviewHtml(spec) {      const seed = this.agentSpecAvatarSeed;
       const avatarSvg = (window.AvatarSkill && seed)
         ? window.AvatarSkill.generate(seed, { size: 96 })
         : `<div class="ag-prev-av-empty">—</div>`;
@@ -6590,19 +6904,19 @@
       const abilitySvg = this.renderAgentSpecRadarSvg(spec.ability || {});
       return `
         <section class="cmp ag-cmp ag-prev-mode">
-          <div class="ag-prev-kicker">${this.escape(t.kicker)}</div>
+          <div class="ag-prev-kicker">${this.escape(this._t("ag_preview_kicker"))}</div>
 
           <div class="ag-prev-card">
             <header class="ag-prev-head">
               <div class="ag-prev-identity">
-                <button type="button" class="ag-prev-av" data-agent-spec-reroll title="${this.escape(t.reroll)}">
+                <button type="button" class="ag-prev-av" data-agent-spec-reroll title="${this.escape(this._t("ag_preview_reroll"))}">
                   <div class="ag-prev-av-frame">${avatarSvg}</div>
                   <span class="ag-prev-av-reroll-mark">↻</span>
                 </button>
                 <div class="ag-prev-id-fields">
-                  <input type="text" class="ag-prev-name" data-agent-spec-field="name" maxlength="32" value="${this.escape(spec.name)}" placeholder="${this.escape(t.name)}">
+                  <input type="text" class="ag-prev-name" data-agent-spec-field="name" maxlength="32" value="${this.escape(spec.name)}" placeholder="${this.escape(this._t("ag_preview_name"))}">
                   <div class="ag-prev-id-meta">
-                    <input type="text" class="ag-prev-roletag" data-agent-spec-field="roleTag" maxlength="32" value="${this.escape(spec.roleTag)}" placeholder="${this.escape(t.role)}">
+                    <input type="text" class="ag-prev-roletag" data-agent-spec-field="roleTag" maxlength="32" value="${this.escape(spec.roleTag)}" placeholder="${this.escape(this._t("ag_preview_role"))}">
                     <span class="ag-prev-meta-sep">·</span>
                     <select class="ag-prev-model" data-agent-spec-field="modelV">${modelOpts}</select>
                   </div>
@@ -6613,27 +6927,27 @@
 
             <div class="ag-prev-body">
               <label class="ag-prev-field">
-                <span class="ag-prev-label">${this.escape(t.bio)}</span>
+                <span class="ag-prev-label">${this.escape(this._t("ag_preview_bio"))}</span>
                 <textarea class="ag-prev-input ag-prev-textarea" data-agent-spec-field="bio" maxlength="280" rows="2">${this.escape(spec.bio)}</textarea>
               </label>
 
               <label class="ag-prev-field">
-                <span class="ag-prev-label">${this.escape(t.quote)}</span>
+                <span class="ag-prev-label">${this.escape(this._t("ag_preview_quote"))}</span>
                 <textarea class="ag-prev-input ag-prev-textarea" data-agent-spec-field="coverQuote" maxlength="200" rows="2">${this.escape(spec.coverQuote || "")}</textarea>
               </label>
 
               <label class="ag-prev-field">
-                <span class="ag-prev-label">${this.escape(t.instruction)}</span>
+                <span class="ag-prev-label">${this.escape(this._t("ag_preview_instruction"))}</span>
                 <textarea class="ag-prev-input ag-prev-textarea ag-prev-instr" data-agent-spec-field="instruction" maxlength="4000" rows="10">${this.escape(spec.instruction)}</textarea>
               </label>
             </div>
 
             <footer class="ag-prev-foot">
-              <button type="button" class="ag-prev-discard" data-agent-spec-discard>${this.escape(t.discard)}</button>
-              <button type="button" class="ag-prev-redo" data-agent-spec-redo>↻ ${this.escape(t.redo)}</button>
+              <button type="button" class="ag-prev-discard" data-agent-spec-discard>${this.escape(this._t("ag_preview_discard"))}</button>
+              <button type="button" class="ag-prev-redo" data-agent-spec-redo>↻ ${this.escape(this._t("ag_preview_redo"))}</button>
               <button type="button" class="ag-prev-save" data-agent-spec-save>
                 <span class="ag-prev-save-mark">◆</span>
-                <span>${this.escape(t.save)}</span>
+                <span>${this.escape(this._t("ag_preview_save"))}</span>
               </button>
             </footer>
           </div>
@@ -6647,43 +6961,35 @@
      *  composer back to its input state). The description text is
      *  surfaced read-only so the user can copy it before discard. */
     renderAgentSpecErrorHtml(err, lang) {
-      // System UI · always English (agent-spec error card chrome).
-      const t = {
-        kicker: err.kind === "timeout" ? "// generation timed out" : "// generation failed",
-        title: err.kind === "timeout" ? "Generation didn't complete after 5 minutes" : "Generation failed",
-        hintTimeout: "The model may be slow, the network flaky, or the backend pipeline stalled. Click retry to start a fresh run.",
-        hintFailed: "Check your API key configuration and model reachability. Retry often clears transient failures.",
-        descLabel: "Your description (re-used on retry)",
-        retry: "Retry",
-        discard: "Discard",
-      };
+      const kicker = err.kind === "timeout" ? this._t("ag_err_kicker_timeout") : this._t("ag_err_kicker_fail");
+      const title = err.kind === "timeout" ? this._t("ag_err_title_timeout") : this._t("ag_err_title_fail");
+      const hint = err.kind === "timeout" ? this._t("ag_err_hint_timeout") : this._t("ag_err_hint_fail");
       const desc = this._agentComposerLastDesc || "";
-      const hint = err.kind === "timeout" ? t.hintTimeout : t.hintFailed;
       const detail = err.message ? `<div class="ag-gen-error-detail">${this.escape(err.message)}</div>` : "";
       return `
         <section class="cmp ag-cmp">
           <header class="cmp-hero">
             <div class="cmp-greet">${this.escape(this.composerGreeting(lang, (this.prefs?.name || "you").trim() || "you"))}</div>
-            <h1 class="cmp-prompt">${this.escape("What kind of director do you want?")}</h1>
+            <h1 class="cmp-prompt">${this.escape(this._t("ag_err_prompt"))}</h1>
           </header>
           <div class="ag-gen-error-card">
-            <div class="ag-gen-error-kicker">${this.escape(t.kicker)}</div>
-            <h2 class="ag-gen-error-title">${this.escape(t.title)}</h2>
+            <div class="ag-gen-error-kicker">${this.escape(kicker)}</div>
+            <h2 class="ag-gen-error-title">${this.escape(title)}</h2>
             <p class="ag-gen-error-hint">${this.escape(hint)}</p>
             ${detail}
             ${desc ? `
               <div class="ag-gen-error-desc">
-                <div class="ag-gen-error-desc-label">${this.escape(t.descLabel)}</div>
+                <div class="ag-gen-error-desc-label">${this.escape(this._t("ag_err_desc"))}</div>
                 <div class="ag-gen-error-desc-body">${this.escape(desc)}</div>
               </div>
             ` : ""}
             <div class="ag-gen-error-actions">
               <button type="button" class="ag-gen-error-retry" data-agent-spec-retry>
                 <span class="ag-gen-error-retry-mark">↻</span>
-                <span>${this.escape(t.retry)}</span>
+                <span>${this.escape(this._t("ag_err_retry"))}</span>
               </button>
               <button type="button" class="ag-gen-error-discard" data-agent-spec-error-discard>
-                ${this.escape(t.discard)}
+                ${this.escape(this._t("ag_err_discard"))}
               </button>
             </div>
           </div>
@@ -6726,7 +7032,7 @@
         return `<text x="${lx.toFixed(1)}" y="${(ly + 2.5).toFixed(1)}" text-anchor="${anchor}" class="ag-prev-radar-axis-label">${labels[a]}</text>`;
       }).join("");
       return `
-        <svg class="ag-prev-radar-svg" viewBox="0 0 ${vbW} ${vbH}" xmlns="http://www.w3.org/2000/svg" aria-label="Ability radar">
+        <svg class="ag-prev-radar-svg" viewBox="0 0 ${vbW} ${vbH}" xmlns="http://www.w3.org/2000/svg" aria-label="${this.escape(this._t("ag_preview_radar_aria"))}">
           ${grid}
           ${spokes}
           <polygon points="${curPoly}" class="ag-prev-radar-current"/>
@@ -7136,7 +7442,7 @@
           <span class="composer-pick-title">${this.escape(t.title)}</span>
           <span class="composer-pick-hint">${this.escape(t.hint)}</span>
         </div>
-        <div class="composer-pick-list">${rows || `<div class="composer-pick-empty">no directors</div>`}</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>
@@ -7294,6 +7600,26 @@
       if (v) v.textContent = intensity;
     },
 
+    setComposerDeliveryMode(deliveryMode) {
+      const state = this.loadComposerState();
+      state.deliveryMode = deliveryMode === "voice" ? "voice" : "text";
+      this.saveComposerState();
+      // Sync the button-style toggle's classes / aria / data attrs /
+      // visible text. Was a checkbox previously (cb.checked = ...);
+      // the new register uses .ap-skill-row-toggle so we mirror what
+      // the click handler does for the in-place mutation case.
+      const btn = document.querySelector("[data-composer-voice-toggle]");
+      if (btn) {
+        const on = state.deliveryMode === "voice";
+        btn.classList.toggle("on", on);
+        btn.classList.toggle("off", !on);
+        btn.setAttribute("data-on", on ? "1" : "0");
+        btn.setAttribute("aria-pressed", on ? "true" : "false");
+        const txt = btn.querySelector(".ap-skill-row-toggle-text");
+        if (txt) txt.textContent = this._t("cmp_voice_label");
+      }
+    },
+
     /** 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
@@ -7345,6 +7671,28 @@
         } else {
           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" },
+            ];
+        current = state.deliveryMode === "voice" ? "voice" : "text";
+      } else if (kind === "locale") {
+        // Interface language picker · routes through the shared
+        // .cmp-dd dropdown vocabulary so the User-settings pane
+        // 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: "界面语言切到中文" },
+        ];
+        current = (window.I18n && window.I18n.getLocale && window.I18n.getLocale()) || "en";
       } else if (kind === "agent-model") {
         // Reachable-only model catalog · pulls from the shared
         // /api/models cache so the picker reflects the user's
@@ -7471,6 +7819,11 @@
         if (ta) ta.focus();
         return;
       }
+      // Unlock audio playback on this user gesture — required by
+      // browser autoplay policies before we can play TTS audio later.
+      if (state.deliveryMode === "voice") {
+        this.unlockAudioPlayback();
+      }
       // Pre-flight · convening triggers chair convening + auto-pick +
       // clarify, all of which need a model key. Bail early and prompt
       // the user to configure one if missing.
@@ -7492,6 +7845,7 @@
           agentIds: useAutoPick ? [] : state.directorIds.slice(),
           mode: state.mode,
           intensity: state.intensity,
+          deliveryMode: state.deliveryMode,
           autoPick: useAutoPick,
         });
         // Clear the saved draft now that the room is convened — next
@@ -7612,6 +7966,15 @@
       }
     },
 
+    /** Tone hover copy · i18n keyed by mode, falls back to TONE_TIPS. */
+    toneTipFor(mode) {
+      const m = mode || "";
+      const k = "tone_tip_" + m;
+      const tr = this._t(k);
+      if (tr !== k) return tr;
+      return TONE_TIPS[m] || "";
+    },
+
     renderHeader() {
       const head = document.querySelector("[data-room-head]");
       if (!head || !this.currentRoom) return;
@@ -7627,23 +7990,33 @@
         .map((a) => `<img data-agent="${this.escape(a.id)}" src="${this.escape(a.avatarPath)}" alt="${this.escape(a.name)}" title="${this.escape(a.name)}">`)
         .join("");
       const castCount = this.currentMembers.length;
+      const castTitle =
+        castCount <= 1
+          ? this._t("room_cast_title_1")
+          : this._t("room_cast_n", { n: castCount });
       const castHtml = castImgs +
         (castCount > 0
-          ? `<span class="cast-count" title="${castCount} director${castCount === 1 ? "" : "s"}">${castCount}</span>`
+          ? `<span class="cast-count" title="${this.escape(castTitle)}">${castCount}</span>`
           : "");
 
       const tone = r.mode || "constructive";
       const intensity = r.intensity || "sharp";
-
-      // Status word for the kicker · the coloured glyph (●/❚❚/▣) is
-      // drawn via CSS `::before` on `.kicker-status.status-{state}`
-      // so all the styling lives next to the colour rule.
-      const statusWord = (
-        r.status === "paused" ? "PAUSED" :
-        r.status === "adjourned" ? "ADJOURNED" :
-        r.status === "live" ? "LIVE" :
-        ""
-      );
+      const briefStyle =
+        typeof r.briefStyle === "string" && r.briefStyle.trim()
+          ? r.briefStyle.trim()
+          : "auto";
+
+      // Status timestamp — what was on the right (paused-stamp / stamp) now
+      // lives inline in the meta row.
+      let stamp = "";
+      if (r.status === "paused" && r.pausedAt) {
+        stamp = this._t("room_stamp_paused", { ago: this.relTime(r.pausedAt) });
+      } else if (r.status === "adjourned" && r.adjournedAt) {
+        stamp = this._t("room_stamp_adjourned", { ago: this.relTime(r.adjournedAt) });
+      } else if (r.status === "live" && r.createdAt) {
+        stamp = this._t("room_stamp_opened", { ago: this.relTime(r.createdAt) });
+      }
+      const toneTip = this.toneTipFor(tone);
 
       // Three primary actions, one per state — CSS hides the wrong ones based
       // on html[data-status]. Per PRD §5.2.3:
@@ -7662,13 +8035,23 @@
       // tagged-meta-pills) — net height reduction ~150 → ~85px.
       // Tone / intensity / brief-style remain editable in the room
       // settings overlay; only their on-header surface is collapsed.
+      // Compact two-row layout · kicker carries all the meta (room
+      // number / tone / intensity / status) on a single mono line
+      // above the subject. Replaces the prior three-row stack of
+      // `.room-id` + subject + `.room-meta` tagged pills which the
+      // CSS in index.html no longer styles. Tone / intensity stay
+      // editable in the room-settings overlay.
+      // System chrome is English-only per the project rule (only
+      // user / LLM content follows query language), so the kicker
+      // tokens are not routed through `_t()`.
+      const statusWord = r.status !== "live" ? String(r.status).toUpperCase() : "";
       head.innerHTML = `
-        <button type="button" class="room-head-expand" data-sidebar-expand title="Expand sidebar" aria-label="Expand sidebar"></button>
+        <button type="button" class="room-head-expand" data-sidebar-expand title="${this.escape(this._t("sidebar_expand"))}" aria-label="${this.escape(this._t("sidebar_expand"))}"></button>
         <div class="room-info">
           <div class="room-kicker">
             <span class="kicker-num">// ROOM #${r.number}</span>
             <span class="kicker-sep">·</span>
-            <span class="kicker-tone" data-tone-tip="${this.escape(TONE_TIPS[tone] || "")}">${this.escape(tone.toUpperCase())}</span>
+            <span class="kicker-tone" data-tone-tip="${this.escape(toneTip)}">${this.escape(tone.toUpperCase())}</span>
             <span class="kicker-sep">·</span>
             <span class="kicker-intensity">${this.escape(intensity.toUpperCase())}</span>
             ${statusWord ? `<span class="kicker-sep">·</span><span class="kicker-status status-${this.escape(r.status)}">${statusWord}</span>` : ""}
@@ -7677,9 +8060,9 @@
         </div>
         <div class="head-actions">
           <div class="head-cast">${castHtml}</div>
-          <a href="#" class="room-settings-trigger" data-room-settings-trigger title="Room settings" aria-label="Room settings">⚙</a>
-          <a href="#" class="pause-btn" data-pause>[ <span class="pause-icon">❚❚</span> Pause ]</a>
-          <a href="#" class="resume-btn" data-resume>[ ▶ Resume ]</a>
+          <a href="#" class="room-settings-trigger" data-room-settings-trigger title="${this.escape(this._t("room_settings"))}" aria-label="${this.escape(this._t("room_settings"))}">⚙</a>
+          <a href="#" class="pause-btn" data-pause>[ <span class="pause-icon">❚❚</span> ${this.escape(this._t("room_pause_verb"))} ]</a>
+          <a href="#" class="resume-btn" data-resume>[ ▶ ${this.escape(this._t("room_resume_verb"))} ]</a>
           ${this.currentBrief
             ? (() => {
                 // Multiple briefs · render the View Report button as a
@@ -7692,13 +8075,12 @@
                 const multi = briefs.length > 1;
                 const directHref = this.briefViewerHref(this.currentBrief, r.id) || `/report.html?r=${this.escape(r.id)}`;
                 if (!multi) {
-                  return `<a href="${directHref}" target="_blank" rel="noopener" class="view-report-btn" data-view-report>[ View Report ]</a>`;
+                  return `<a href="${directHref}" target="_blank" rel="noopener" class="view-report-btn" data-view-report>${this.escape(this._t("room_view_report"))}</a>`;
                 }
-                return `<a href="${directHref}" target="_blank" rel="noopener" class="view-report-btn" data-view-report data-view-report-trigger title="${this.escape(`${briefs.length} reports · click to choose`)}">[ View Report <span class="vr-count">· ${briefs.length}</span> ▾ ]</a>`;
+                return `<a href="${directHref}" target="_blank" rel="noopener" class="view-report-btn" data-view-report data-view-report-trigger title="${this.escape(this._t("room_view_report_title_multi", { n: briefs.length }))}">${this.escape(this._t("room_view_report_multi", { n: briefs.length }))}</a>`;
               })()
             : (r.status === "adjourned"
-              ? `<a href="#" class="view-report-btn generate-report" data-generate-brief title="${this.escape("File a brief from this session")}"><span class="vr-mark">▸</span> Generate Report</a>`
-              : "")}
+              ? `<a href="#" class="view-report-btn generate-report" data-generate-brief title="${this.escape(this._t("room_generate_report_title"))}"><span class="vr-mark">▸</span> ${this.escape(this._t("room_generate_report"))}</a>`              : "")}
         </div>
       `;
       // Wire the tone-tag hover tip. Pure-CSS ::after tooltips were
@@ -7763,8 +8145,13 @@
       }
       const messages = this.currentMessages.slice();
       const r = this.currentRoom;
+      const tBanner = this._t("chat_banner", {
+        when: new Date(r.createdAt).toLocaleString(),
+        n: this.currentMembers.length,
+        mode: this.escape(r.mode),
+      });
       const banner = r
-        ? `<div class="chat-banner"><span class="chat-banner-chip"><span class="cb-mark">▸</span><span class="cb-text">room opened · ${new Date(r.createdAt).toLocaleString()} · ${this.currentMembers.length} directors · ${this.escape(r.mode)}</span></span></div>`
+        ? `<div class="chat-banner"><span class="chat-banner-chip"><span class="cb-mark">▸</span><span class="cb-text">${this.escape(tBanner)}</span></span></div>`
         : "";
       const openerId = this.firstUserMessageId();
       // Convening card · appended at the tail of the chat while the
@@ -7795,9 +8182,18 @@
         ? ["analyzing", "seating", "preparing"]
         : ["preparing"];
       const STAGE_LABELS = {
-        analyzing: { title: "Analyzing topic", deck: "Routing your topic to the right perspectives" },
-        seating:   { title: "Seating directors", deck: "Picking the right perspectives for this question" },
-        preparing: { title: "Chair preparing remarks", deck: "Drafting the convening speech" },
+        analyzing: {
+          title: this._t("conv_stage_analyzing_title"),
+          deck: this._t("conv_stage_analyzing_deck"),
+        },
+        seating: {
+          title: this._t("conv_stage_seating_title"),
+          deck: this._t("conv_stage_seating_deck"),
+        },
+        preparing: {
+          title: this._t("conv_stage_preparing_title"),
+          deck: this._t("conv_stage_preparing_deck"),
+        },
       };
 
       const currentIdx = stageOrder.indexOf(s.stage);
@@ -7829,8 +8225,7 @@
       // already in currentMembers; rendering it here would be redundant).
       const seatedRow = (s.autoPicked && s.seated.length > 0) ? `
         <div class="conv-seated">
-          <div class="conv-seated-label">seated · ${s.seated.length}</div>
-          <div class="conv-seated-list">
+          <div class="conv-seated-label">${this.escape(this._t("conv_seated_label"))} · ${s.seated.length}</div>          <div class="conv-seated-list">
             ${s.seated.map((a) => `
               <div class="conv-seated-item" data-agent-id="${this.escape(a.id)}">
                 <img class="conv-seated-av" src="${this.escape(a.avatarPath)}" alt="${this.escape(a.name)}">
@@ -7846,8 +8241,7 @@
 
       return `
         <article class="convening-card" data-convene-card>
-          <div class="conv-eyebrow">▸ CONVENING</div>
-          ${s.subject ? `<blockquote class="conv-subject">${this.escape(s.subject)}</blockquote>` : ""}
+          <div class="conv-eyebrow">${this.escape(this._t("conv_banner_convening"))}</div>          ${s.subject ? `<blockquote class="conv-subject">${this.escape(s.subject)}</blockquote>` : ""}
           <ul class="conv-stages">${stagesHtml}</ul>
           ${seatedRow}
         </article>
@@ -7883,11 +8277,16 @@
       const chat = document.querySelector("[data-chat-messages]");
       if (!chat) return;
       const existing = chat.querySelector("[data-chair-pending]");
-      // System UI · always English (chair-pending placeholder chrome).
-      const chairName = (this.currentChair?.name) || "Chair";
-      const labelMap = { clarify: "is reading your question", "chair-direct": "is preparing a response", "round-end": "is wrapping up the round", convening: "is convening the room", "next-speaker": "is reading the room", chair: "is preparing" };
-      const phraseRaw = labelMap[phase] || labelMap.chair;
-      const phrase = `${chairName} ${phraseRaw}…`;
+      const chairName = (this.currentChair?.name) || this._t("msg_chair_display_fallback");
+      const phaseKeys = {
+        clarify: "chair_pend_clarify",
+        "chair-direct": "chair_pend_chair_direct",
+        "round-end": "chair_pend_round_end",
+        convening: "chair_pend_convening",
+        "next-speaker": "chair_pend_next_speaker",
+      };
+      const pendKey = phaseKeys[phase] || "chair_pend_default";
+      const phrase = this._t(pendKey, { name: chairName });
       if (existing) {
         const span = existing.querySelector(".cp-text");
         if (span) span.textContent = phrase;
@@ -7898,7 +8297,7 @@
       node.setAttribute("data-chair-pending", "");
       node.innerHTML = `
         <div class="cp-rule" aria-hidden="true"></div>
-        <div class="cp-kicker">▸ chair</div>
+        <div class="cp-kicker">${this.escape(this._t("chair_pend_banner"))}</div>
         <div class="cp-body">
           <span class="cp-text">${this.escape(phrase)}</span>
           <span class="thinking-dots"><span></span><span></span><span></span></span>
@@ -7925,6 +8324,145 @@
       if (existing) existing.remove();
     },
 
+    enqueueVoiceChunk(roomId, chunk) {
+      if (!chunk || !chunk.messageId || !chunk.audioBase64 || !chunk.mimeType) return;
+      let q = this.voiceQueues[chunk.messageId];
+      if (!q) {
+        q = this._createVoiceStream(roomId, chunk.messageId);
+        this.voiceQueues[chunk.messageId] = q;
+      }
+      // Convert base64 to Uint8Array and append to the MSE SourceBuffer
+      const binary = atob(chunk.audioBase64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+      q.pendingBuffers.push(bytes);
+      this._flushVoiceBuffer(q);
+    },
+
+    /** Create a MediaSource-backed audio stream for one speaker's turn. */
+    _createVoiceStream(roomId, messageId) {
+      const audio = new Audio();
+      const ms = new MediaSource();
+      audio.src = URL.createObjectURL(ms);
+
+      const q = {
+        roomId,
+        messageId,
+        audio,
+        mediaSource: ms,
+        sourceBuffer: null,
+        pendingBuffers: [],
+        final: false,
+        doneSent: false,
+        ready: false,
+      };
+
+      ms.addEventListener("sourceopen", () => {
+        try {
+          q.sourceBuffer = ms.addSourceBuffer("audio/mpeg");
+          q.sourceBuffer.addEventListener("updateend", () => this._flushVoiceBuffer(q));
+          q.ready = true;
+          this._flushVoiceBuffer(q);
+        } catch (e) {
+          console.warn("[voice] addSourceBuffer failed:", e);
+        }
+      });
+
+      // Start playing as soon as we have some data
+      audio.play().catch(() => {});
+
+      return q;
+    },
+
+    /** Flush pending buffers into the SourceBuffer one at a time. */
+    _flushVoiceBuffer(q) {
+      if (!q.ready || !q.sourceBuffer || q.sourceBuffer.updating) return;
+      if (q.pendingBuffers.length > 0) {
+        const buf = q.pendingBuffers.shift();
+        try {
+          q.sourceBuffer.appendBuffer(buf);
+        } catch (e) {
+          console.warn("[voice] appendBuffer failed:", e);
+        }
+        return;
+      }
+      // No more pending buffers. If final, signal end of stream.
+      if (q.final && !q.doneSent) {
+        q.doneSent = true;
+        try {
+          if (q.mediaSource.readyState === "open") {
+            q.mediaSource.endOfStream();
+          }
+        } catch (_) {}
+        // Wait for audio to finish playing, then fire voice-done
+        q.audio.addEventListener("ended", () => this._fireVoiceDone(q));
+        // Safety timeout in case 'ended' doesn't fire (e.g. empty stream)
+        const duration = q.audio.duration;
+        const remaining = isFinite(duration) ? (duration - q.audio.currentTime) : 0;
+        setTimeout(() => {
+          if (!this.voiceQueues[q.messageId]) return; // already fired
+          this._fireVoiceDone(q);
+        }, (remaining * 1000) + 2000);
+      }
+    },
+
+    _scheduleVoiceDone(q) {
+      // Called from voice-final handler — trigger flush check which will
+      // endOfStream + wait for playback to finish.
+      this._flushVoiceBuffer(q);
+    },
+
+    _fireVoiceDone(q) {
+      if (!this.voiceQueues[q.messageId]) return; // already fired
+      delete this.voiceQueues[q.messageId];
+      // Clean up audio element
+      try { q.audio.pause(); } catch (_) {}
+      try { URL.revokeObjectURL(q.audio.src); } catch (_) {}
+      fetch(`/api/rooms/${encodeURIComponent(q.roomId)}/messages/${encodeURIComponent(q.messageId)}/voice-done`, {
+        method: "POST",
+      }).catch(() => {});
+    },
+
+    async drainVoiceQueue(roomId, messageId) {
+      // Called from voice-final handler — mark final and flush
+      const q = this.voiceQueues[messageId];
+      if (!q) return;
+      if (q.final && !q.doneSent) {
+        this._flushVoiceBuffer(q);
+      }
+    },
+
+    /** Immediately stop all voice playback and discard pending queues.
+     *  Used on hard-pause to silence mid-stream audio. */
+    stopVoicePlayback() {
+      for (const messageId of Object.keys(this.voiceQueues)) {
+        const q = this.voiceQueues[messageId];
+        if (q && q.audio) {
+          try { q.audio.pause(); } catch (_) {}
+          try { URL.revokeObjectURL(q.audio.src); } catch (_) {}
+        }
+      }
+      this.voiceQueues = {};
+      this._voiceCurrentMessageId = null;
+    },
+
+    /** Unlock HTMLAudioElement autoplay policy.
+     *  Must be called inside a user-gesture handler (click/keydown). */
+    unlockAudioPlayback() {
+      if (this._audioUnlocked) return;
+      try {
+        // Play a silent audio to satisfy autoplay policy
+        const silence = new Audio("data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=");
+        silence.volume = 0;
+        const p = silence.play();
+        if (p) p.then(() => silence.pause()).catch(() => {});
+        this._audioUnlocked = true;
+        console.log("[voice] audio playback unlocked via user gesture");
+      } catch (e) {
+        console.warn("[voice] unlock failed:", e);
+      }
+    },
+
     updateMessageBodyDom(messageId, body, streaming) {
       const article = document.querySelector(`[data-message-id="${messageId}"]`);
       if (!article) return;
@@ -8050,14 +8588,14 @@
         const m = this.currentMessages.find((x) => x.id === messageId);
         const n = (m && m.meta && typeof m.meta.roundNum === "number") ? m.meta.roundNum : null;
         const prefix = n != null
-          ? `<span class="rp-spent-round">round #${n}</span><span class="rp-spent-sep">·</span>`
+          ? `<span class="rp-spent-round">${this.escape(this._t("rp_spent_round", { n }))}</span><span class="rp-spent-sep">·</span>`
           : "";
         return `
           <div class="round-prompt-card spent" data-round-prompt-card="${this.escape(messageId)}">
             <span class="rp-spent-chip">
               <span class="rp-spent-mark">◇</span>
               ${prefix}
-              <span class="rp-spent-label">closed · room moved on</span>
+              <span class="rp-spent-label">${this.escape(this._t("rp_spent_label"))}</span>
             </span>
           </div>
         `;
@@ -8076,16 +8614,11 @@
       const recKind = rec && (rec.kind === "end" || rec.kind === "continue") ? rec.kind : null;
       const endClass  = recKind === "end"      ? " recommended" : "";
       const contClass = recKind === "continue" ? " recommended" : "";
-      // Detect language for the indicator label · Chinese rooms get
-      // 中文 copy. Reads from the chair's prompt body which lands in
-      // the message body when a recommendation is present.
-      const lang = (promptMsg && promptMsg.body && /[一-鿿]/.test(promptMsg.body)) ? "zh" : "en";
-      const recLabel = "chair recommends";
       const recIndicator = recKind
         ? `
           <div class="rp-rec-line rp-rec-line-${this.escape(recKind)}">
             <span class="rp-rec-arrow" aria-hidden="true">↑</span>
-            <span class="rp-rec-text">${this.escape(recLabel)}</span>
+            <span class="rp-rec-text">${this.escape(this._t("rp_chair_recommends"))}</span>
           </div>
         `
         : "";
@@ -8094,17 +8627,17 @@
           <div class="rp-primary">
             <button type="button" class="rp-btn vote${endClass}" data-round-end>
               <span class="rp-mark">▣</span>
-              <span class="rp-label">End round · open key-point vote</span>
+              <span class="rp-label">${this.escape(this._t("round_end_open_vote"))}</span>
             </button>
             <button type="button" class="rp-btn continue${contClass}" data-continue-auto>
               <span class="rp-mark">▶</span>
-              <span class="rp-label">Continue · next round</span>
+              <span class="rp-label">${this.escape(this._t("rp_continue_next"))}</span>
               <span class="rp-timer" data-continue-timer></span>
             </button>
           </div>
           ${recIndicator}
           <button type="button" class="rp-adjourn" data-adjourn-from-chair>
-            ⊘ Adjourn the room &amp; file the brief
+            ${this.escape(this._t("rp_adjourn_room_file"))}
           </button>
         </div>
       `;
@@ -8176,7 +8709,7 @@
         if (isStreaming) {
           return `
             <div class="round-end-card pending" data-round-end-card="${this.escape(messageId)}">
-              <div class="kp-eyebrow kp-eyebrow-pending">▸ key points · drafting</div>
+              <div class="kp-eyebrow kp-eyebrow-pending">${this.escape(this._t("kp_eyebrow_drafting"))}</div>
               <div class="kp-list">
                 <div class="kp-row kp-skeleton" aria-hidden="true">
                   <div class="kp-skeleton-bar"></div>
@@ -8193,7 +8726,7 @@
               </div>
               <div class="kp-ctas-pending">
                 <span class="kp-pending-dot"></span>
-                <span class="kp-pending-text">Chair is drafting key points…</span>
+                <span class="kp-pending-text">${this.escape(this._t("kp_pending_drafting"))}</span>
               </div>
             </div>
           `;
@@ -8203,14 +8736,14 @@
         const ctasDegraded = awaiting
           ? `
             <div class="kp-ctas">
-              <button type="button" class="kp-cta primary" data-continue>[ ▶ Continue · next round ]</button>
-              <button type="button" class="kp-cta ghost" data-adjourn-from-chair>[ ⊘ Adjourn &amp; file brief ]</button>
+              <button type="button" class="kp-cta primary" data-continue>${this.escape(this._t("kp_btn_continue_next"))}</button>
+              <button type="button" class="kp-cta ghost" data-adjourn-from-chair>${this.escape(this._t("kp_btn_adjourn_brief"))}</button>
             </div>
           `
-          : `<div class="kp-ctas-spent">// continued</div>`;
+          : `<div class="kp-ctas-spent">${this.escape(this._t("kp_ctas_spent"))}</div>`;
         return `
           <div class="round-end-card" data-round-end-card="${this.escape(messageId)}">
-            <div class="kp-eyebrow kp-eyebrow-degraded">▸ key points · couldn't be parsed from this round</div>
+            <div class="kp-eyebrow kp-eyebrow-degraded">${this.escape(this._t("kp_eyebrow_degraded"))}</div>
             ${ctasDegraded}
           </div>
         `;
@@ -8219,11 +8752,11 @@
         <div class="kp-row" data-kp-id="${this.escape(p.id)}">
           <div class="kp-body">${this.escape(p.body)}</div>
           <div class="kp-actions">
-            <button type="button" class="kp-vote up ${p.vote === "up" ? "active" : ""}" data-kp-vote="up" data-kp-id="${this.escape(p.id)}" aria-label="Interested">
-              <span>▲</span><span>more</span>
+            <button type="button" class="kp-vote up ${p.vote === "up" ? "active" : ""}" data-kp-vote="up" data-kp-id="${this.escape(p.id)}" aria-label="${this.escape(this._t("kp_vote_aria_up"))}">
+              <span>▲</span><span>${this.escape(this._t("kp_vote_more"))}</span>
             </button>
-            <button type="button" class="kp-vote down ${p.vote === "down" ? "active" : ""}" data-kp-vote="down" data-kp-id="${this.escape(p.id)}" aria-label="Not interested">
-              <span>▼</span><span>drop</span>
+            <button type="button" class="kp-vote down ${p.vote === "down" ? "active" : ""}" data-kp-vote="down" data-kp-id="${this.escape(p.id)}" aria-label="${this.escape(this._t("kp_vote_aria_down"))}">
+              <span>▼</span><span>${this.escape(this._t("kp_vote_drop"))}</span>
             </button>
           </div>
         </div>
@@ -8237,14 +8770,16 @@
       const shiftCallout = (shift && awaiting)
         ? `
           <div class="kp-mode-shift">
-            <div class="kp-shift-eyebrow">▸ chair suggests · switch tone to <strong>${this.escape(shift.to)}</strong></div>
+            <div class="kp-shift-eyebrow">${this.escape(this._t("kp_shift_eyebrow_prefix"))}<strong>${this.escape(shift.to)}</strong></div>
             <div class="kp-shift-because">${this.escape(shift.because)}</div>
           </div>
         `
         : "";
       let ctas;
+      const modeRaw = (this.currentRoom?.mode || "").toLowerCase();
+      const modeKeep = modeRaw || this._t("kp_mode_current_fallback");
       if (!awaiting) {
-        ctas = `<div class="kp-ctas-spent">// continued</div>`;
+        ctas = `<div class="kp-ctas-spent">${this.escape(this._t("kp_ctas_spent"))}</div>`;
       } else if (shift) {
         // 3-button layout · primary takes ~50% of the row, the two
         // secondaries split the rest. Without `kp-ctas-shift`, three
@@ -8252,25 +8787,24 @@
         // longer "switch to constructive" label wraps to two lines.
         // Labels stripped of "& continue" — the action is implicit
         // in this round-end context.
-        const currentMode = (this.currentRoom?.mode || "").toLowerCase();
         ctas = `
           <div class="kp-ctas kp-ctas-shift">
-            <button type="button" class="kp-cta primary" data-shift-accept data-shift-to="${this.escape(shift.to)}">[ ↻ switch to ${this.escape(shift.to)} ]</button>
-            <button type="button" class="kp-cta ghost" data-continue>[ keep ${this.escape(currentMode || "current")} ]</button>
-            <button type="button" class="kp-cta ghost" data-adjourn-from-chair>[ ⊘ adjourn ]</button>
+            <button type="button" class="kp-cta primary" data-shift-accept data-shift-to="${this.escape(shift.to)}">${this.escape(this._t("kp_switch_to", { mode: shift.to }))}</button>
+            <button type="button" class="kp-cta ghost" data-continue>${this.escape(this._t("kp_keep_mode", { mode: modeKeep }))}</button>
+            <button type="button" class="kp-cta ghost" data-adjourn-from-chair>${this.escape(this._t("kp_btn_adjourn"))}</button>
           </div>
         `;
       } else {
         ctas = `
           <div class="kp-ctas">
-            <button type="button" class="kp-cta primary" data-continue>[ ▶ Continue · next round ]</button>
-            <button type="button" class="kp-cta ghost" data-adjourn-from-chair>[ ⊘ Adjourn &amp; file brief ]</button>
+            <button type="button" class="kp-cta primary" data-continue>${this.escape(this._t("kp_btn_continue_next"))}</button>
+            <button type="button" class="kp-cta ghost" data-adjourn-from-chair>${this.escape(this._t("kp_btn_adjourn_brief"))}</button>
           </div>
         `;
       }
       return `
         <div class="round-end-card" data-round-end-card="${this.escape(messageId)}">
-          <div class="kp-eyebrow">▸ key points · vote what you want pursued</div>
+          <div class="kp-eyebrow">${this.escape(this._t("kp_eyebrow_vote"))}</div>
           <div class="kp-list">${items}</div>
           ${shiftCallout}
           ${ctas}
@@ -8308,14 +8842,14 @@
           const truncated = parentSubject.length > 70
             ? parentSubject.slice(0, 70) + "…"
             : parentSubject;
-          // System UI · always English (follow-up origin link chrome).
-          const label = "Following up on";
-          const roomTag = "Room #";
+          const label = this._t("convene_followup_label");
+          const roomTag = this._t("convene_room_label");
+          const parentTitle = this._t("convene_parent_session_title", { subject: parentSubject || parentId });
           const subjectChunk = truncated
             ? `<span class="convene-origin-sep">·</span><span class="convene-origin-subject">${this.escape(truncated)}</span>`
             : "";
           originHtml = `
-            <a class="convene-origin" href="#/r/${this.escape(parentId)}" data-parent-room-id="${this.escape(parentId)}" title="${this.escape("Open the prior session · " + (parentSubject || parentId))}">
+            <a class="convene-origin" href="#/r/${this.escape(parentId)}" data-parent-room-id="${this.escape(parentId)}" title="${this.escape(parentTitle)}">
               <span class="convene-origin-arrow">↩</span>
               <span class="convene-origin-label">${this.escape(label)}</span>
               <span class="convene-origin-room">${this.escape(roomTag)}${this.escape(String(parentNum))}</span>
@@ -8328,24 +8862,21 @@
           parentId ? "convene-opener-followup" : "",
           isLongOpener ? "convene-opener-clamped" : "",
         ].filter(Boolean).join(" ");
-        // System UI · always English. Earlier this followed the brief
-        // language; now fixed-string per the rule that app chrome stays
-        // English regardless of the user's query language.
-        const moreLabel = "Show more ↓";
-        const lessLabel = "Show less ↑";
+        const moreLabel = this._t("convene_show_more");
+        const lessLabel = this._t("convene_show_less");
         const toggleHtml = isLongOpener
           ? `<button type="button" class="convene-toggle" data-convene-toggle data-more="${this.escape(moreLabel)}" data-less="${this.escape(lessLabel)}">${moreLabel}</button>`
           : "";
         return `
           <article class="${articleCls}" data-message-id="${this.escape(m.id)}">
-            <div class="convene-eyebrow">▸ Convene · Initial Question</div>
+            <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">·  to ${this.currentMembers.map((a) => this.escape(a.handle)).join(" ")}</span>
+              <span class="convene-cast">· ${this.escape(this._t("convene_meta_to"))} ${this.currentMembers.map((a) => this.escape(a.handle)).join(" ")}</span>
             </div>
           </article>
         `;
@@ -8373,9 +8904,10 @@
         const status = meta.status === "done" || meta.status === "failed" ? meta.status : "running";
         const tool = (meta.tool || "tool").toString();
         const target = meta.target ? String(meta.target) : "";
-        const elapsed = typeof meta.elapsedMs === "number" && status !== "running"
-          ? `${(meta.elapsedMs / 1000).toFixed(1)}s`
+        const elapsedSecs = typeof meta.elapsedMs === "number" && status !== "running"
+          ? this._t("msg_ws_secs", { n: (meta.elapsedMs / 1000).toFixed(1) })
           : "";
+        const elapsedTail = elapsedSecs ? ` · ${elapsedSecs}` : "";
         const sources = Array.isArray(meta.sources) ? meta.sources : [];
 
         // web-search renders as a full-width card mirroring `.brief-card`
@@ -8386,10 +8918,16 @@
         if (tool === "web-search") {
           const hasSources = status === "done" && sources.length > 0;
           let stamp;
-          if (status === "running") stamp = "searching…";
-          else if (status === "done")
-            stamp = `${sources.length} source${sources.length === 1 ? "" : "s"}${elapsed ? " · " + elapsed : ""}`;
-          else stamp = elapsed ? `failed · ${elapsed}` : "failed";
+          if (status === "running") stamp = this._t("msg_ws_searching");
+          else if (status === "done") {
+            stamp = sources.length === 1
+              ? this._t("msg_ws_done_one", { tail: elapsedTail })
+              : this._t("msg_ws_done", { n: sources.length, tail: elapsedTail });
+          } else {
+            stamp = elapsedSecs
+              ? this._t("msg_ws_failed_elapsed", { elapsed: elapsedSecs })
+              : this._t("msg_ws_failed");
+          }
 
           const mark = status === "running"
             ? `<span class="msg-tool-pulse"></span>`
@@ -8417,22 +8955,22 @@
                   `;
                 }).join("")}
               </ol>
-              <button type="button" class="msg-tool-sources-expand" data-msg-ws-toggle data-message-id="${this.escape(m.id)}" aria-label="toggle sources">
+              <button type="button" class="msg-tool-sources-expand" data-msg-ws-toggle data-message-id="${this.escape(m.id)}" aria-label="${this.escape(this._t("msg_ws_toggle"))}">
                 <span class="msg-tool-sources-expand-icon" aria-hidden="true">▾</span>
-                <span class="msg-tool-sources-expand-show">Show all ${sources.length} sources</span>
-                <span class="msg-tool-sources-expand-hide">Collapse</span>
+                <span class="msg-tool-sources-expand-show">${this.escape(this._t("msg_ws_expand_show", { n: sources.length }))}</span>
+                <span class="msg-tool-sources-expand-hide">${this.escape(this._t("msg_ws_expand_hide"))}</span>
               </button>`
             : "";
 
           const bodyToggleAttrs = hasSources
-            ? ` data-msg-ws-toggle data-message-id="${this.escape(m.id)}" role="button" tabindex="0" aria-label="toggle sources"`
+            ? ` data-msg-ws-toggle data-message-id="${this.escape(m.id)}" role="button" tabindex="0" aria-label="${this.escape(this._t("msg_ws_toggle"))}"`
             : "";
           const caret = hasSources ? `<span class="msg-tool-caret" aria-hidden="true">▸</span>` : "";
 
           return `
             <div class="msg-tool-card status-${this.escape(status)}" data-message-id="${this.escape(m.id)}">
               <div class="msg-tool-banner">
-                <span class="msg-tool-banner-tag">// web-search</span>
+                <span class="msg-tool-banner-tag">${this.escape(this._t("msg_ws_banner"))}</span>
                 <span class="msg-tool-banner-stamp">${this.escape(stamp)}</span>
               </div>
               <div class="msg-tool-card-body${hasSources ? " is-toggle" : ""}"${bodyToggleAttrs}>
@@ -8458,7 +8996,7 @@
               <span class="msg-tool-name">${this.escape(tool)}</span>
               <span class="msg-tool-sep">·</span>
               <span class="msg-tool-body">${this.escape(m.body || "")}</span>
-              ${elapsed ? `<span class="msg-tool-elapsed">${this.escape(elapsed)}</span>` : ""}
+              ${elapsedSecs ? `<span class="msg-tool-elapsed">${this.escape(elapsedSecs)}</span>` : ""}
               ${isUrlTarget ? `<a href="${this.escape(target)}" target="_blank" rel="noopener noreferrer" class="msg-tool-link" title="${this.escape(target)}">↗</a>` : ""}
             </div>
           </div>
@@ -8481,10 +9019,10 @@
         return `
           <div class="chair-direct${streaming ? " is-streaming" : ""}" data-message-id="${this.escape(m.id)}">
             <div class="cd-rule" aria-hidden="true"></div>
-            <div class="cd-kicker">▸ chair · responding to you</div>
+            <div class="cd-kicker">${this.escape(this._t("msg_chair_direct_kicker"))}</div>
             <div class="cd-body">${bodyHtml}</div>
             <div class="cd-meta">
-              <span class="cd-author">${this.escape(this.currentChair?.name || "Chair")}</span>
+              <span class="cd-author">${this.escape(this.currentChair?.name || this._t("msg_chair_display_fallback"))}</span>
               <span class="cd-time">· ${this.timeFmt(m.createdAt)}</span>
             </div>
           </div>
@@ -8504,7 +9042,7 @@
         return `
           <div class="chair-intervention" data-message-id="${this.escape(m.id)}">
             <div class="ci-rule" aria-hidden="true"></div>
-            <div class="ci-kicker">▸ chair note</div>
+            <div class="ci-kicker">${this.escape(this._t("msg_chair_intervention_kicker"))}</div>
             <div class="ci-body">${this.renderBody(m.body)}</div>
           </div>
         `;
@@ -8519,7 +9057,7 @@
         return `
           <div class="chair-billing-notice" data-message-id="${this.escape(m.id)}">
             <div class="cb-rule" aria-hidden="true"></div>
-            <div class="cb-kicker">▸ billing · attention needed</div>
+            <div class="cb-kicker">${this.escape(this._t("msg_chair_billing_kicker"))}</div>
             <div class="cb-body">${this.renderBody(m.body)}</div>
           </div>
         `;
@@ -8537,9 +9075,9 @@
           <div class="round-open-card ${isOpening ? "is-opening" : "is-reactive"}" data-message-id="${this.escape(m.id)}">
             <span class="ro-chip">
               <span class="ro-mark">${isOpening ? "◆" : "◇"}</span>
-              <span class="ro-round">round #${this.escape(String(roundNum))}</span>
+              <span class="ro-round">${this.escape(this._t("ro_round", { n: roundNum }))}</span>
               <span class="ro-sep">·</span>
-              <span class="ro-mode">${isOpening ? "parallel · independent perspectives" : "reactive · directors react to one another"}</span>
+              <span class="ro-mode">${this.escape(isOpening ? this._t("ro_mode_parallel") : this._t("ro_mode_reactive"))}</span>
             </span>
           </div>
         `;
@@ -8558,27 +9096,25 @@
       // 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;
+        // 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">Generate report now</span>
-              </button>
+                <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">adjourned · no brief filed</span>
+              <span class="nb-eyebrow">${this.escape(this._t("nb_eyebrow"))}</span>
             </span>
             <div class="nb-body">
-              <strong>${this.escape(this.prefs?.name || "The chair")}</strong> declared no report is needed for this session.
-            </div>
+              <strong>${this.escape(chairName)}</strong> ${this.escape(this._t("nb_body"))}            </div>
             ${cta}
             <div class="nb-meta">${this.escape(ts)}</div>
           </div>
@@ -8592,9 +9128,9 @@
           : (author ? this.escape(author.id) : "agent");
       const name = isUser ? (this.prefs?.name || "You") : (author?.name || "Agent");
       const tag = isUser
-        ? "// you"
+        ? this._t("msg_tag_you")
         : isChair
-          ? "// chair"
+          ? this._t("msg_tag_chair")
           : (author ? `// ${author.roleTag}` : "");
       // Model badge · only shown for non-user messages. Falls back to
       // the raw modelV string if the registry lookup misses (e.g. a
@@ -8648,7 +9184,7 @@
       // is procedural; ctx count would be misleading).
       const ctxCount = !isUser && !isChair ? this.contextCountAt(m.id) : 0;
       const ctxBadge = ctxCount > 0
-        ? `<span class="msg-context" title="${ctxCount} prior turns sent as context to ${this.escape(name)}">· ${ctxCount} ctx</span>`
+        ? `<span class="msg-context" title="${this.escape(this._t("msg_ctx_title", { n: ctxCount, name }))}">${this.escape(this._t("msg_ctx_inline", { n: ctxCount }))}</span>`
         : "";
 
       // Skills badge · the orchestrator's Pass-1 router stamps which
@@ -8658,7 +9194,7 @@
       const skillsUsed = (m.meta && Array.isArray(m.meta.skillsUsed)) ? m.meta.skillsUsed : [];
       const skillsReason = (m.meta && typeof m.meta.skillsReason === "string") ? m.meta.skillsReason : "";
       const skillsBadge = skillsUsed.length > 0
-        ? `<span class="msg-skills" title="${this.escape(skillsReason || ("skills used: " + skillsUsed.join(", ")))}">🛠 ${skillsUsed.map((s) => this.escape(s)).join(", ")}</span>`
+        ? `<span class="msg-skills" title="${this.escape(skillsReason || this._t("msg_skills_used", { list: skillsUsed.join(", ") }))}">🛠 ${skillsUsed.map((s) => this.escape(s)).join(", ")}</span>`
         : "";
 
       // Web-search badge · meta is set by the orchestrator when the
@@ -8669,11 +9205,18 @@
       const webSearchQuery = (m.meta && typeof m.meta.webSearchQuery === "string") ? m.meta.webSearchQuery : "";
       const webSearchSources = (m.meta && Array.isArray(m.meta.webSearchSources)) ? m.meta.webSearchSources : [];
       const webSearchBadge = webSearchUsed
-        ? `<button type="button" class="msg-web-search" data-msg-ws-toggle data-message-id="${this.escape(m.id)}" title="${this.escape(`web search: ${webSearchQuery} · ${webSearchSources.length} source${webSearchSources.length === 1 ? "" : "s"}`)}">🔍 web search · ${webSearchSources.length} source${webSearchSources.length === 1 ? "" : "s"}</button>`
+        ? (() => {
+          const n = webSearchSources.length;
+          const title = this.escape(this._t("msg_ws_title", { query: webSearchQuery, n }));
+          const label = n === 1
+            ? this.escape(this._t("msg_ws_btn_one"))
+            : this.escape(this._t("msg_ws_btn", { n }));
+          return `<button type="button" class="msg-web-search" data-msg-ws-toggle data-message-id="${this.escape(m.id)}" title="${title}">🔍 ${label}</button>`;
+        })()
         : "";
       const webSearchSourcesPanel = webSearchUsed && webSearchSources.length > 0
         ? `<div class="msg-web-search-sources" data-msg-ws-sources data-message-id="${this.escape(m.id)}" hidden>
-            <div class="msg-web-search-query"><span class="msg-web-search-query-label">query</span><span class="msg-web-search-query-text">${this.escape(webSearchQuery)}</span></div>
+            <div class="msg-web-search-query"><span class="msg-web-search-query-label">${this.escape(this._t("msg_ws_query_label"))}</span><span class="msg-web-search-query-text">${this.escape(webSearchQuery)}</span></div>
             <ol class="msg-web-search-list">
               ${webSearchSources.map((s, i) => `
                 <li>
@@ -8720,7 +9263,7 @@
         ? m.meta.chairPick.rationale.trim()
         : "";
       const chairPickKicker = (chairPick && !isUser && !isChair)
-        ? `<div class="msg-chair-pick" title="Chair picked ${this.escape(name)} for this turn">▸ chair · ${this.escape(chairPick)}</div>`
+        ? `<div class="msg-chair-pick" title="${this.escape(this._t("room_chair_pick_title", { name: this.escape(name) }))}">${this.escape(this._t("msg_chair_pick", { body: chairPick }))}</div>`
         : "";
 
       // data-author-id is only attached for director messages (not user
@@ -8736,7 +9279,7 @@
             ${chairPickKicker}
             <div class="msg-meta">
               <span class="msg-name">${this.escape(name)}</span>
-              ${modelLabel ? `<span class="msg-model" title="model · ${this.escape(modelLabel)}">${this.escape(modelLabel)}</span>` : ""}
+              ${modelLabel ? `<span class="msg-model" title="${this.escape(this._t("msg_model_title", { label: modelLabel }))}">${this.escape(modelLabel)}</span>` : ""}
               <span class="msg-tag">${tag}</span>
               ${skillsBadge}
               ${webSearchBadge}
@@ -8789,9 +9332,9 @@
       // Old queue strip used .qw-label; new in-chat card uses .rp-label.
       const label = btn.querySelector(".rp-label, .qw-label");
       if (label) {
-        if (this.currentRoom?.awaitingContinue) label.textContent = "Round wrapped · vote above";
-        else if (this.currentRoom?.awaitingClarify) label.textContent = "Clarifying — wait for chair";
-        else label.textContent = "End round · open key-point vote";
+        if (this.currentRoom?.awaitingContinue) label.textContent = this._t("round_end_vote_above");
+        else if (this.currentRoom?.awaitingClarify) label.textContent = this._t("round_clarifying");
+        else label.textContent = this._t("round_end_open_vote");
       }
     },
 
@@ -8801,7 +9344,7 @@
       const slot = document.querySelector("[data-queue-collapsed]");
       if (!slot) return;
       if (!items || items.length === 0) {
-        slot.innerHTML = `<span class="sum-marker">·</span><span class="sum-state">queue idle</span>`;
+        slot.innerHTML = `<span class="sum-marker">·</span><span class="sum-state">${this.escape(this._t("q_idle"))}</span>`;
         return;
       }
       const head = items[0];
@@ -8810,14 +9353,14 @@
       const speaking = head.status === "speaking";
       const pending = head.status === "pending";
       const stateLabel = speaking
-        ? "●●● speaking"
+        ? this._t("q_speaking")
         : pending
           ? (this.currentRoom?.awaitingContinue
-              ? "pending · waits for vote"
-              : "pending · waits for chair")
-          : "queued";
+              ? this._t("q_pending_vote")
+              : this._t("q_pending_chair"))
+          : this._t("q_queued");
       const next = items[1] ? this.agentsById[items[1].agentId] : null;
-      const rest = items.length > 2 ? `+${items.length - 2} queued` : "";
+      const rest = items.length > 2 ? this._t("q_more_queued", { n: items.length - 2 }) : "";
 
       const parts = [];
       parts.push(`<span class="sum-marker">${speaking ? "▶" : pending ? "◇" : "·"}</span>`);
@@ -8904,9 +9447,9 @@
               <li class="queue-row user-queued" data-user-queued>
                 <span class="pos">↪</span>
                 <span class="who">${this.escape(userName)}</span>
-                <span class="state">queued · "${this.escape(preview)}"</span>
+                <span class="state">${this._t("q_user_queued", { preview: this.escape(preview) })}</span>
                 <span class="actions">
-                  <button type="button" class="user-queued-cancel" data-cancel-user-queued title="Cancel">✕</button>
+                  <button type="button" class="user-queued-cancel" data-cancel-user-queued title="${this.escape(this._t("q_cancel"))}">✕</button>
                 </span>
               </li>
             `;
@@ -8923,16 +9466,16 @@
           const pos = speaking ? "▶" : (POS[i - (firstSpeaking ? 1 : 0)] || (i + 1));
           let stateLabel;
           if (speaking) {
-            stateLabel = `speaking · reading ${ctxTotal} ${ctxTotal === 1 ? "turn" : "turns"}`;
+            stateLabel = this._t("q_state_speaking", { n: ctxTotal });
           } else if (pending) {
             // Pending means "lined up, waiting on something off-queue".
             // Phrasing matches the room's current pause kind so the
             // user knows what they're waiting on.
             stateLabel = this.currentRoom?.awaitingContinue
-              ? "pending · waits for your vote"
+              ? this._t("q_pending_your_vote")
               : this.currentRoom?.awaitingClarify
-                ? "pending · waits for chair"
-                : "pending";
+                ? this._t("q_pending_waits_chair")
+                : this._t("q_pending_chair");
           } else {
             stateLabel = q.status;
           }
@@ -8973,73 +9516,20 @@
         .replace(/&[a-z]+;/gi, " ");                // HTML entities
       const cjk = stripped.match(/[一-鿿㐀-䶿豈-﫿぀-ゟ゠-ヿ]/g);
       const cjkCount = cjk ? cjk.length : 0;
-      const isCjk = cjkCount >= stripped.length * 0.3 && cjkCount > 80;
-      let count;
-      let label;
-      if (isCjk) {
-        count = cjkCount;
-        label = `~${count.toLocaleString("en-US")} 字`;
-      } else {
-        const words = stripped.trim().split(/\s+/).filter((w) => w.length > 0);
-        count = words.length;
-        if (count === 0) return null;
-        label = count === 1 ? "1 word" : `${count.toLocaleString("en-US")} words`;
-      }
-      // Tone-aware sweet band · brainstorm recaps run lean (concrete
-      // ideas, not deep analysis); standard rooms (constructive /
-      // debate) land in the middle; research / critique rooms shoulder
-      // a denser shape (assumptions + scenarios + indicators + threats
-      // to validity all naturally lengthen the body).
-      const tone = (this.currentRoom?.mode || "constructive").toLowerCase();
-      const bandKind = tone === "brainstorm"
-        ? "lean"
-        : (tone === "research" || tone === "critique" ? "dense" : "standard");
-      // Brainstorm `lean` was originally 600-1500 zh / 400-1000 en —
-      // calibrated against "quick recap" briefs with 1-2 directors.
-      // That undercounted real brainstorm rooms: 3-4 directors × 2-3
-      // rounds × 2-3 ideas-per-turn easily produces 12-20 ideas, each
-      // worth 80-150 words (concept + why-it-matters + what-it-opens).
-      // 1500-2200 words / 2000-3000 字 is a healthy, idea-dense
-      // brainstorm — bumping the band so that lands in `sweet`, not
-      // `dense`. Standard / dense bands unchanged.
-      const bands = isCjk
-        ? ({
-            lean:     { sweetLo: 1000, sweetHi: 2200, denseHi: 3800, longHi: 5500 },
-            standard: { sweetLo: 1500, sweetHi: 2800, denseHi: 4500, longHi: 6500 },
-            dense:    { sweetLo: 2500, sweetHi: 4500, denseHi: 6500, longHi: 8000 },
-          })[bandKind]
-        : ({
-            lean:     { sweetLo: 800,  sweetHi: 1600, denseHi: 2800, longHi: 4000 },
-            standard: { sweetLo: 1000, sweetHi: 1800, denseHi: 3000, longHi: 4500 },
-            dense:    { sweetLo: 1800, sweetHi: 3000, denseHi: 4500, longHi: 5500 },
-          })[bandKind];
-      let tier;
-      if (count < bands.sweetLo)        tier = "thin";
-      else if (count <= bands.sweetHi)  tier = "sweet";
-      else if (count <= bands.denseHi)  tier = "dense";
-      else if (count <= bands.longHi)   tier = "long";
-      else                              tier = "too-long";
-      return { label, tier, count, isCjk, tone, bands };
-    },
-
-    /** Tooltip explaining what the brief-card word-count chip's colour
-     *  means · tone-aware so the user understands why a 2,500-word
-     *  brainstorm recap reads "dense" while the same length in a
-     *  research note reads "sweet." */
-    _briefWordCountTip(wc) {
-      if (!wc) return "";
-      // System UI · always English (word-count chip tooltip).
-      const toneLabel = wc.tone;
-      const range = `${wc.bands.sweetLo.toLocaleString("en-US")}-${wc.bands.sweetHi.toLocaleString("en-US")}`;
-      const unit = "words";
-      const copy = {
-        "thin":     `Lean · ${toneLabel} sweet zone is ${range} ${unit}`,
-        "sweet":    `Sweet zone for ${toneLabel} · most read-through-able length`,
-        "dense":    `Dense · past the ${toneLabel} sweet zone, still readable`,
-        "long":     `Long · approaching "filed instead of read"`,
-        "too-long": `Too long · likely to be skimmed, not read`,
-      };
-      return copy[wc.tier] || "";
+      // CJK-dominant docs: count chars (the "字数" the user reads off
+      // a manuscript). The 30% threshold catches mixed zh-en docs
+      // where the body is mostly Chinese with English brand names —
+      // the natural unit there is still characters, not words.
+      if (cjkCount >= stripped.length * 0.3 && cjkCount > 80) {
+        const fmt = cjkCount.toLocaleString("en-US");
+        return this._t("brief_wc_approx_chars", { n: fmt });
+      }
+      // English / Latin: whitespace-split, ignore empty tokens.
+      const words = stripped.trim().split(/\s+/).filter((w) => w.length > 0);
+      const n = words.length;
+      if (n === 0) return null;
+      const fmt = n.toLocaleString("en-US");
+      return n === 1 ? this._t("brief_wc_one_word") : this._t("brief_wc_words", { n: fmt });
     },
 
     /** Render the brief version tab strip · shared by both the error
@@ -9060,11 +9550,11 @@
             const isInitial = i === 0;
             const supp = bf.supplement && bf.supplement.trim()
               ? bf.supplement.trim()
-              : (isInitial ? "Initial" : "");
+              : (isInitial ? this._t("brief_tab_initial") : "");
             const tooltip = isInitial
-              ? `Initial brief · generated from the session`
-              : `Supplement: ${supp || "—"}`;
-            const closeTitle = "Delete this report";
+              ? this._t("brief_tab_tooltip_initial")
+              : `${this._t("brief_tab_supplement_prefix")}${supp || "—"}`;
+            const closeTitle = this._t("brief_tab_delete_title");
             // Errored / interrupted / timed-out tabs get a small
             // visual marker so the user can spot which one needs
             // attention without entering it. The full retry UI is
@@ -9078,7 +9568,7 @@
                   <span class="brief-version-num">${num}</span>
                   ${stateMark}
                   ${isInitial
-                    ? `<span class="brief-version-label">Initial</span>`
+                    ? `<span class="brief-version-label">${this.escape(this._t("brief_tab_initial"))}</span>`
                     : `<span class="brief-version-label">${this.escape((supp || "").slice(0, 20))}${(supp || "").length > 20 ? "…" : ""}</span>`}
                 </button>
                 <button type="button" class="brief-version-close" data-brief-delete data-brief-id="${this.escape(bf.id)}" title="${this.escape(closeTitle)}" aria-label="${this.escape(closeTitle)}">×</button>
@@ -9151,14 +9641,13 @@
           finally { this.currentBrief = prevCurrent; }
           // Prepend the compact retry banner to the rendered card so
           // the existing report stays fully visible below it.
-          // System UI · always English (error banner chrome).
           const detail = failed.timedOut
-            ? "regeneration timed out"
+            ? this._t("brief_regen_timeout")
             : failed.interrupted
-              ? "regeneration interrupted"
-              : (failed.error || "regeneration failed");
-          const cta = "Retry";
-          const dismiss = "Dismiss";
+              ? this._t("brief_regen_interrupted")
+              : (failed.error || this._t("brief_regen_failed"));
+          const cta = this._t("brief_retry");
+          const dismiss = this._t("brief_dismiss");
           card.insertAdjacentHTML("afterbegin", `
             <div class="brief-retry-banner" data-brief-retry-banner data-failed-brief-id="${this.escape(failed.id)}">
               <span class="brb-mark">⚠</span>
@@ -9172,40 +9661,34 @@
           `);
           return;
         }
-        // System UI · always English (full error-card copy).
         const copy = b.timedOut
           ? {
-              stamp: "timed out",
-              kicker: "// generation timed out",
-              detail: "No completion signal after 8 minutes — the model may be slow, the connection dropped, or the pipeline stalled. Click below to start a fresh run.",
+              stamp: this._t("brief_err_stamp_timeout"),
+              kicker: this._t("brief_err_kicker_timeout"),
+              detail: this._t("brief_err_detail_timeout"),
               hint: "",
-              cta: "Retry",
+              cta: this._t("brief_retry"),
             }
           : b.interrupted
-          ? {
-              stamp: "interrupted",
-              kicker: "// generation interrupted",
-              detail: "The previous generation was cut short — likely by a browser refresh or a server restart. Click below to start a fresh report.",
-              hint: "",
-              cta: "Regenerate report",
-            }
-          : {
-              stamp: "failed",
-              kicker: "// brief generation failed",
-              detail: this.escape(b.error || ""),
-              hint: "The brief writer needs an LLM key (OpenRouter, or a direct Anthropic / OpenAI / Google / xAI key). Add one in <strong>Preference → API Key</strong> and try again.",
-              cta: "Retry",
-            };
+            ? {
+                stamp: this._t("brief_err_stamp_interrupted"),
+                kicker: this._t("brief_err_kicker_interrupted"),
+                detail: this._t("brief_err_detail_interrupted"),
+                hint: "",
+                cta: this._t("brief_err_cta_regenerate"),
+              }
+            : {
+                stamp: this._t("brief_err_stamp_failed"),
+                kicker: this._t("brief_err_kicker_failed"),
+                detail: this.escape(b.error || ""),
+                hint: this._briefSecondaryHintHtml(b.error || ""),
+                cta: this._t("brief_retry"),
+              };
         card.innerHTML = `
           <div class="brief-card">
             ${tabsStripHtml}
-            <div class="brief-banner">
-              <span class="brief-banner-tag" style="color: var(--red);">// report</span>
-              <span class="brief-banner-type" style="color: var(--red); border-color: var(--red);">${this.escape(this.briefModeLabel(b))}</span>
-              <span class="brief-banner-stamp" style="color: var(--red);">${this.escape(copy.stamp)}</span>
-            </div>
             <div class="brief-body brief-body-error">
-              <div class="brief-kicker" style="color: var(--red);">${this.escape(copy.kicker)}</div>
+              <div class="brief-kicker" style="color: var(--red);">${this.escape(copy.kicker)} <span class="brief-kicker-sep" aria-hidden="true">·</span> ${this.escape(copy.stamp)} <span class="brief-kicker-sep" aria-hidden="true">·</span> <span class="brief-meta-type">${this.escape(this.briefModeLabel(b))}</span></div>
               <div class="brief-meta-line" style="color: var(--text-soft); text-transform: none; letter-spacing: 0;">
                 ${(b.interrupted || b.timedOut) ? this.escape(copy.detail) : copy.detail}
               </div>
@@ -9230,8 +9713,10 @@
         .join("");
 
       const filedLabel = generating
-        ? "GENERATING…"
-        : "FILED · " + (b.createdAt ? this.timeFmt(b.createdAt) : this.timeFmt(Date.now()));
+        ? this._t("brief_filed_generating")
+        : this._t("brief_filed_stamp", {
+          when: b.createdAt ? this.timeFmt(b.createdAt) : this.timeFmt(Date.now()),
+        });
 
       // Open Report URL · routes to /magazine.html or /newspaper.html
       // for the structured modes and /report.html for research-note
@@ -9250,30 +9735,39 @@
       card.innerHTML = `
         <header class="ending-block-head">
           <span class="ending-block-line"></span>
-          <span class="ending-block-label">▼ session output ▼</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}
-          <div class="brief-banner">
-            <span class="brief-banner-tag">// report</span>
-            <span class="brief-banner-type">${this.escape(this.briefModeLabel(b))}</span>
-            <span class="brief-banner-stamp">${filedLabel}</span>
-          </div>
 
           <div class="brief-body">
             ${generating
               ? `<div class="brief-info brief-info-generating">${this.renderBriefStages(b)}</div>`
               : (() => {
                   const wc = this._briefWordCount(b);
-                  const tip = this._briefWordCountTip(wc);
+                  // Tucked the mode chip into the meta-row alongside
+                  // authors / word count. The earlier `.brief-banner`
+                  // strip (kicker + chip + stamp) was retired — the
+                  // user found it ate too much vertical space for
+                  // info that's already implied by the surrounding
+                  // adjourned-room context.
+                  const filedAgo = b.createdAt ? this.relTime(b.createdAt) : "";
+                  const filedKicker = this._t("brief_filed_by", {
+                    name: this.currentChair?.name ? this.escape(this.currentChair.name) : this._t("brief_chair_fallback"),
+                  });
+                  const kickerLine = filedAgo
+                    ? `${filedKicker} <span class="brief-kicker-sep" aria-hidden="true">·</span> ${this.escape(filedAgo)}`
+                    : filedKicker;
                   return `<div class="brief-info">
-                    <div class="brief-kicker">// filed by ${this.escape(this.currentChair?.name || "the chair")}</div>
-                    <h2 class="brief-title" data-brief-title>${this.escape(b.title || "(untitled)")}</h2>
+                    <div class="brief-kicker">${kickerLine}</div>
+                    <h2 class="brief-title" data-brief-title>${this.escape(b.title || this._t("brief_untitled"))}</h2>
                     <div class="brief-meta-row">
-                      <span class="brief-meta-line">${this.currentMembers.length} authors</span>
-                      ${wc ? `<span class="brief-meta-sep" aria-hidden="true">·</span><span class="brief-meta-line brief-meta-words is-${this.escape(wc.tier)}" title="${this.escape(tip)}">${this.escape(wc.label)}</span>` : ""}
+                      <span class="brief-meta-line">${this.escape(this._t("brief_meta_authors", { n: this.currentMembers.length }))}</span>
+                      ${wc ? `<span class="brief-meta-sep" aria-hidden="true">·</span><span class="brief-meta-line brief-meta-words">${this.escape(wc)}</span>` : ""}
+                      <span class="brief-meta-sep" aria-hidden="true">·</span>
+                      <span class="brief-meta-type">${this.escape(this.briefModeLabel(b))}</span>
                       <div class="brief-signed">
                         <div class="brief-signed-avatars">${signed}</div>
                       </div>
@@ -9285,7 +9779,7 @@
             ${reportHref && !generating ? `
               <a href="${reportHref}" class="brief-open" target="_blank" rel="noopener">
                 <span class="brief-open-icon">▸</span>
-                <span class="brief-open-label">open report</span>
+                <span class="brief-open-label">${this.escape(this._t("brief_open_report"))}</span>
                 <span class="brief-open-arrow">→</span>
               </a>
             ` : ""}
@@ -9295,19 +9789,18 @@
             <div class="brief-supplement-row">
               <button type="button" class="brief-supplement-btn" data-brief-supplement>
                 <span class="brief-supplement-mark">+</span>
-                <span class="brief-supplement-label">Add a perspective · regenerate</span>
+                <span class="brief-supplement-label">${this.escape(this._t("brief_supplement_btn"))}</span>
               </button>
-              <button type="button" class="brief-delete-btn" data-brief-delete data-brief-id="${this.escape(b.id)}" title="Delete this report">
+              <button type="button" class="brief-delete-btn" data-brief-delete data-brief-id="${this.escape(b.id)}" title="${this.escape(this._t("brief_tab_delete_title"))}">
                 <span class="brief-delete-mark">⌫</span>
-                <span class="brief-delete-label">Delete report</span>
-              </button>
+                <span class="brief-delete-label">${this.escape(this._t("brief_delete_label"))}</span>              </button>
             </div>
           ` : ""}
         </div>
 
         <footer class="ending-block-foot">
           <span class="ending-block-foot-line"></span>
-          <span class="ending-block-foot-label">// end of session</span>
+          <span class="ending-block-foot-label">${this.escape(this._t("ending_session_foot"))}</span>
           <span class="ending-block-foot-line"></span>
         </footer>
       `;
@@ -9425,6 +9918,67 @@
       get zh() { return this.en; },
     },
 
+    renderBriefLlmTrace(b) {
+      const logs = Array.isArray(b.llmLogs) ? b.llmLogs : [];
+      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 countText = logs.length
+        ? `${logs.length} call${logs.length === 1 ? "" : "s"}${running ? ` · ${running} running` : ""}${failed ? ` · ${failed} failed` : ""}`
+        : (b.language === "zh" ? "等待首个调用" : "waiting for first call");
+      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>
+          <span>${this.escape(label)}</span>
+          <span class="brief-llm-toggle-meta">${this.escape(countText)}</span>
+        </button>
+      `;
+      if (!open) return `<div class="brief-llm-trace">${button}</div>`;
+      const fmt = (ms) => {
+        if (!ms || ms < 0) return "";
+        const s = Math.round(ms / 1000);
+        return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+      };
+      const rows = logs.map((l) => {
+        const elapsed = fmt((l.finishedAt || Date.now()) - (l.startedAt || Date.now()));
+        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>`;
+        const meta = [
+          l.modelV || "",
+          elapsed,
+          typeof l.totalTokens === "number" ? `${l.totalTokens} tok` : "",
+        ].filter(Boolean).join(" · ");
+        return `
+          <div class="brief-llm-row is-${this.escape(l.status || "running")}">
+            <div class="brief-llm-row-head">
+              <span class="brief-llm-row-title">${this.escape(l.label || l.stage || "LLM call")}</span>
+              <span class="brief-llm-row-meta">${this.escape(meta)}</span>
+            </div>
+            ${l.error ? `<div class="brief-llm-error">${this.escape(l.error)}</div>` : ""}
+            <pre class="brief-llm-output">${preview}</pre>
+          </div>
+        `;
+      }).join("");
+      return `<div class="brief-llm-trace">${button}<div class="brief-llm-panel">${rows || `<div class="brief-llm-empty">${this.escape(countText)}</div>`}</div></div>`;
+    },
+
+    _briefSubList(stageKey) {
+      const sk = String(stageKey).replace(/-/g, "_");
+      const list = [];
+      for (let i = 0; i < 24; i++) {
+        const k = `brief_sub_${sk}_${i}`;
+        const s = this._t(k);
+        if (s === k) break;
+        list.push(s);
+      }
+      return list;
+    },
+
     /** Set up a 1s tick that re-renders the brief stages while at least
      *  one stage is active OR the writing stage is still streaming.
      *  Idempotent — calling repeatedly is fine. */
@@ -9518,8 +10072,7 @@
       // Hard ceiling · regardless of server state, flip the card to
       // a timed-out error so the user always has a way out.
       if (now - startedAt > this.BRIEF_HARD_TIMEOUT_MS) {
-        // System UI · always English (timeout error message).
-        b.error = "Brief generation timed out (no completion after 8 minutes).";
+        b.error = this._t("brief_hard_timeout_msg");
         b.timedOut = true;
         this.stopBriefStageTick();
         this.stopBriefStallWatch();
@@ -9563,53 +10116,52 @@
         "scaffold-actions":  { status: "pending", detail: "", progress: null, startedAt: null },
         write:               { status: "pending", detail: "", progress: null, startedAt: null },
       };
-      const lang = b.language === "zh" ? "zh" : "en";
-      const chairName = b.chairName || this.currentChair?.name || "Chair";
-
+      // Mode-aware stage rail. The wire format emitted by emitStage()
+      // in src/orchestrator/brief.ts depends on which pipeline ran:
+      //
+      //   research-note (default) · extract → compose →
+      //     scaffold-{anchor,findings,cluster,actions} → write
+      //     (7 stages · the 4 scaffold sub-stages are driven by
+      //      JSON-key arrival in the streaming buffer)
+      //
+      //   magazine / newspaper / ppt · extract → write
+      //     (2 stages · runBentoStage runs ONE chair-LLM call that
+      //      produces the BentoScaffold; composer + scaffold sub-
+      //      stages are skipped entirely. Each mode customises only
+      //      the write label so the user sees what's actually
+      //      being composed.)
+      const isStructured = this.isStructuredBriefMode(b.mode);
+      const STAGE_ORDER = isStructured
+        ? ["extract", "write"]
+        : ["extract", "compose", "scaffold-anchor", "scaffold-findings", "scaffold-cluster", "scaffold-actions", "write"];
+      // For structured modes the write key swaps to a per-mode label
+      // (`brief_stage_magazine_write_label`, etc) so the user reads
+      // "Composing the magazine" instead of the generic "Writing the
+      // report" copy that suits research-note's chapter-by-chapter
+      // pipeline.
+      const STAGE_DEFS = STAGE_ORDER.map((key) => {
+        if (isStructured && key === "write") {
+          return {
+            key,
+            label: this._t(`brief_stage_${b.mode}_write_label`),
+            pipShort: this._t(`brief_stage_${b.mode}_write_pip`),
+          };
+        }
+        const sk = key.replace(/-/g, "_");
+        return {
+          key,
+          label: this._t(`brief_stage_${sk}_label`),
+          pipShort: this._t(`brief_stage_${sk}_pip`),
+        };
+      });
       const wordCount = b.bodyMd
         ? (b.bodyMd.trim().match(/\S+/g) || []).length
         : 0;
 
-      // Stage definitions · mode-aware. The wire format emitted by
-      // emitStage() in src/orchestrator/brief.ts depends on which
-      // pipeline ran:
-      //
-      //   research-note (default) · extract → compose → scaffold-
-      //     {anchor,findings,cluster,actions} → write (7 stages · the
-      //     4 scaffold sub-stages are driven by JSON-key arrival in
-      //     the streaming buffer, see SCAFFOLD_TRIGGERS in brief.ts)
-      //
-      //   bento + magazine · extract → write (2 stages · runBentoStage
-      //     runs ONE chair-LLM call that produces the BentoScaffold;
-      //     composer and the scaffold sub-stages are skipped entirely.
-      //     Both modes share the same 2-stage rail · only the write
-      //     label and renderer differ)
-      //
-      // System UI · always English regardless of brief language. The
-      // pipeline labels are the app's voice (chrome around the
-      // generation), not the report content itself.
-      const STRUCTURED_WRITE_LABELS = {
-        magazine: "Composing the magazine",
-        newspaper: "Composing the newspaper",
-        ppt: "Composing the deck",
-      };
-      const STAGE_DEFS = this.isStructuredBriefMode(b.mode)
-        ? [
-            { key: "extract", label: "Reading what each director said", pipShort: "read" },
-            { key: "write",   label: STRUCTURED_WRITE_LABELS[b.mode] || "Composing the report", pipShort: "compose" },
-          ]
-        : [
-            { key: "extract",            label: "Reading what each director said", pipShort: "read" },
-            { key: "compose",            label: "Picking the report shape",        pipShort: "pick" },
-            { key: "scaffold-anchor",    label: "Setting the anchor",              pipShort: "anchor" },
-            { key: "scaffold-findings",  label: "Sketching findings",              pipShort: "find" },
-            { key: "scaffold-cluster",   label: "Mapping consensus + dissent",     pipShort: "split" },
-            { key: "scaffold-actions",   label: "Drafting actions + risks",        pipShort: "act" },
-            { key: "write",              label: "Writing the report",              pipShort: "write" },
-          ];
-
+      const chairDisp = (b.chairName || this.currentChair?.name)
+        ? this.escape(b.chairName || this.currentChair.name)
+        : this._t("brief_chair_fallback");
       const meta = this.BRIEF_STAGE_META;
-      const substages = (this.BRIEF_SUBSTAGES[lang] || this.BRIEF_SUBSTAGES.en);
       const stageEta = (key) => {
         const st = stages[key];
         if (st?.etaSec && typeof st.etaSec.lo === "number") return [st.etaSec.lo, st.etaSec.hi];
@@ -9664,14 +10216,9 @@
       // Falls through to the regular stage key for every other
       // stage / mode.
       let substageText = "";
-      let subKey = activeDef.key;
-      if (activeDef.key === "write" && this.isStructuredBriefMode(b.mode)) {
-        subKey = `${b.mode}-write`;
-      }
-      if (activeStatus === "active" && substages[subKey]?.length) {
-        const list = substages[subKey];
-        substageText = list[Math.floor(activeElapsed / 3) % list.length];
-      }
+      if (activeStatus === "active") {
+        const list = this._briefSubList(activeDef.key);
+        if (list.length) substageText = list[Math.floor(activeElapsed / 3) % list.length];      }
 
       // Detail · cur/total directors during extract, word count during
       // write, otherwise the server-supplied detail string.
@@ -9679,13 +10226,11 @@
       if (activeDef.key === "extract" && activeStage.progress?.total) {
         const cur = activeStage.progress.current;
         const tot = activeStage.progress.total;
-        detailParts.push(`${cur}/${tot} director${tot === 1 ? "" : "s"}`);
-      } else if (activeStage.detail) {
+        detailParts.push(this._t(tot === 1 ? "brief_prog_directors_one" : "brief_prog_directors", { cur, tot }));      } else if (activeStage.detail) {
         detailParts.push(activeStage.detail);
       }
       if (activeDef.key === "write" && activeStatus === "active" && wordCount > 0) {
-        detailParts.push(`${wordCount} word${wordCount === 1 ? "" : "s"}`);
-      }
+        detailParts.push(this._t(wordCount === 1 ? "brief_prog_words_one" : "brief_prog_words", { n: wordCount }));      }
       const detailLine = detailParts.join(" · ");
 
       // Timing for active stage · ETA range while in-band, elapsed once over.
@@ -9693,11 +10238,10 @@
       if (activeStatus === "active") {
         if (activeElapsed <= activeEta[1]) {
           timing = activeElapsed > 0
-            ? `${activeElapsed}s · ~${activeEta[0]}–${activeEta[1]}s`
-            : `~${activeEta[0]}–${activeEta[1]}s`;
+            ? this._t("brief_timing_inband", { e: activeElapsed, lo: activeEta[0], hi: activeEta[1] })
+            : this._t("brief_timing_eta", { lo: activeEta[0], hi: activeEta[1] });
         } else {
-          timing = `${activeElapsed}s elapsed`;
-        }
+          timing = this._t("brief_timing_over", { n: activeElapsed });        }
       }
 
       // Active-card progress line · in-band 0→95% linear, then a Zeno
@@ -9746,22 +10290,24 @@
 
       // Total ETA formatting · "1m 12s · ~3-5m left" / "已 1m 12s · 还需约 3–5 分钟"
       const fmtSec = (s) => {
-        if (s < 60) return `${s}s`;
+        if (s < 60) return this._t("brief_fmt_sec", { n: s });
         const m = Math.floor(s / 60);
         const r = s % 60;
-        return r === 0 ? `${m}m` : `${m}m ${r}s`;
+        return r === 0 ? this._t("brief_fmt_min", { n: m }) : this._t("brief_fmt_min_sec", { m, r });
       };
       const fmtRange = (lo, hi) => {
-        if (hi < 60) return `~${lo}–${hi}s`;
+        if (hi < 60) return this._t("brief_range_sec", { lo, hi });
         const loM = Math.max(1, Math.round(lo / 60));
         const hiM = Math.max(loM, Math.round(hi / 60));
-        return `~${loM}-${hiM}m`;
+        return this._t("brief_range_min", { lo: loM, hi: hiM });
       };
 
-      // System UI · always English (brief-progress kicker copy).
-      const totalText = `${fmtSec(totalElapsed)} elapsed · ${fmtRange(totalLo, totalHi)} left`;
-      const kickerCore = `// ${chairName} is preparing the minutes · ${totalText}`;
+      const totalText = this._t("brief_total_line", {
+        elapsed: fmtSec(totalElapsed),
+        range: fmtRange(totalLo, totalHi),
+      });
 
+      const kickerCore = this._t("brief_stage_kicker", { chair: chairDisp, total: totalText });
       const metaHtml = (detailLine || timing)
         ? `<span class="brief-active-meta">` +
             (detailLine ? `<span class="meta-detail">${this.escape(detailLine)}</span>` : "") +
@@ -9792,8 +10338,17 @@
       this._briefSeenHarvestKeys = this._briefSeenHarvestKeys || {};
       const seenH = this._briefSeenHarvestKeys[b.id] = this._briefSeenHarvestKeys[b.id] || new Set();
       const harvest = Array.isArray(b.extractHarvest) ? b.extractHarvest : [];
-      // System UI · always English (signal-kind chip labels).
-      const kindLabels = { claims: "claims", evidence: "evidence", tensions: "tensions", assumptions: "assumptions", risks: "risks", opportunities: "opportunities", actions: "actions", quotes: "quotes", openQuestions: "open-q" };
+      const kindLabels = {
+        claims: this._t("brief_harvest_claims"),
+        evidence: this._t("brief_harvest_evidence"),
+        tensions: this._t("brief_harvest_tensions"),
+        assumptions: this._t("brief_harvest_assumptions"),
+        risks: this._t("brief_harvest_risks"),
+        opportunities: this._t("brief_harvest_opportunities"),
+        actions: this._t("brief_harvest_actions"),
+        quotes: this._t("brief_harvest_quotes"),
+        openQuestions: this._t("brief_harvest_open_questions"),
+      };
       if (harvest.length) {
         const chips = harvest.map((h) => {
           const isFresh = !seenH.has(h.directorId);
@@ -9818,7 +10373,7 @@
       // Live word count during write — large and visible since it's the
       // most engaging signal during the long write stage.
       if (writeActive && wordCount > 0) {
-        const w = `${wordCount} word${wordCount === 1 ? "" : "s"} · still writing`;
+        const w = this._t("brief_stat_writing", { n: wordCount });
         stats.push(`<span class="brief-stat-fact brief-stat-live">${this.escape(w)}</span>`);
       }
       const statsHtml = stats.length
@@ -9838,6 +10393,7 @@
           </div>
           <div class="brief-pip-rail">${pipHtml}</div>
           ${statsHtml}
+          ${this.renderBriefLlmTrace(b)}
         </div>
       `;
     },
@@ -9882,15 +10438,9 @@
 
     /** Map internal tag id → short visible label. */
     noteTagLabel(tag) {
-      return ({
-        origin:  "input",
-        obs:     "obs",
-        insight: "claim",
-        warn:    "drop",
-        crux:    "crux",
-        soln:    "pursue",
-        open:    "ask",
-      })[tag] || tag;
+      const k = "note_tag_" + String(tag || "").replace(/[^a-z0-9_]/g, "");
+      const tr = this._t(k);
+      return tr === k ? String(tag || "") : tr;
     },
 
     /** True when the user is "stuck to bottom" — within a small margin
@@ -10021,6 +10571,8 @@
       }
       return;
     }
+    // Toggle voice/text delivery mode — REMOVED (mid-session switching
+    // causes too many timing issues; delivery mode is set at room creation).
     // Pause-choice modal buttons
     const choice = e.target.closest("[data-pause-choice]");
     if (choice) {
@@ -10050,6 +10602,23 @@
       window.location.href = "/api/rooms/" + encodeURIComponent(app.currentRoomId) + "/export.md";
       return;
     }
+    // Voice Replay · adjourned-bar action. 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;
+      if (window.boardroomVoiceReplay && typeof window.boardroomVoiceReplay.open === "function") {
+        window.boardroomVoiceReplay.open({
+          roomId: app.currentRoomId,
+          messages: Array.isArray(app.currentMessages) ? app.currentMessages.slice() : [],
+          members: Array.isArray(app.currentMembers) ? app.currentMembers.slice() : [],
+          chair: app.currentChair || null,
+        });
+      }
+      return;
+    }
     // Convene Follow-up · adjourned-bar action. Opens the follow-up
     // overlay with parent reference + form for the new question.
     if (e.target.closest("[data-room-followup]")) {
@@ -10242,6 +10811,17 @@
       app.retryBriefGeneration(targetId);
       return;
     }
+    const llmToggle = e.target.closest("[data-brief-llm-toggle]");
+    if (llmToggle) {
+      e.preventDefault();
+      const id = llmToggle.getAttribute("data-brief-id");
+      const brief = id ? app._briefById(id) : app.currentBrief;
+      if (brief) {
+        brief.llmLogOpen = !brief.llmLogOpen;
+        app.renderBrief();
+      }
+      return;
+    }
     // Salvage banner · dismiss button. Just removes the banner DOM —
     // the failed brief stays in currentBriefs so the user can still
     // retry from a brief tab if they change their mind.
@@ -10436,6 +11016,43 @@
       if (typeof window.openNewAgent === "function") window.openNewAgent();
       return;
     }
+    // ─── New-room composer · voice-mode toggle. Same three paths
+    //   as the websearch toggle just below: unconfigured → open
+    //   keys panel; on → off; off → on. Done with in-place class /
+    //   text mutation so the composer textarea isn't blown away by
+    //   a full repaint on every click.
+    const voiceToggle = e.target.closest("[data-composer-voice-toggle]");
+    if (voiceToggle) {
+      e.preventDefault();
+      const configured = app.hasAnyVoiceKey();
+      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") {
+          window.openUserSettings({ section: "keys", focusProvider: "minimax" });
+        }
+        return;
+      }
+      // Live cache says configured · sync the toggle's stale attrs
+      // so the next click flips rather than re-prompts.
+      if (voiceToggle.getAttribute("data-configured") !== "1") {
+        voiceToggle.setAttribute("data-configured", "1");
+        voiceToggle.classList.remove("needs-key");
+      }
+      const wasOn = voiceToggle.getAttribute("data-on") === "1";
+      const next = !wasOn;
+      app.setComposerDeliveryMode(next ? "voice" : "text");
+      voiceToggle.classList.toggle("on", next);
+      voiceToggle.classList.toggle("off", !next);
+      voiceToggle.setAttribute("data-on", next ? "1" : "0");
+      voiceToggle.setAttribute("aria-pressed", next ? "true" : "false");
+      const txt = voiceToggle.querySelector(".ap-skill-row-toggle-text");
+      if (txt) txt.textContent = app._t("cmp_voice_label");
+      voiceToggle.title = next
+        ? "Voice mode on · directors speak aloud during the room"
+        : "Voice mode off · click to enable";
+      return;
+    }
     // ─── Agent composer · websearch toggle. Three paths:
     //   · unconfigured → confirm + open Preferences → Brave row
     //   · on  → save off + flip toggle in place
@@ -10454,10 +11071,15 @@
       // has it. boardroomKeys() reads through the shared _keysMeta
       // map, which user-settings.js patches in place after every
       // setProviderKey, so we get fresh truth here.
-      const configured = !!(app.agentComposerBraveConfigured && app.agentComposerBraveConfigured());
+      const configured = !!(app.agentComposerWebSearchConfigured && app.agentComposerWebSearchConfigured());
       if (!configured) {
-        // System UI · always English (Brave key prompt confirm dialog).
-        const ok = confirm("Web Search needs a Brave Search API key.\n\nBrave Search · ≈ $5 per 1000 queries · privacy-respecting\n\nOpen Preferences to paste your key now?");
+        const fallback =
+          "Web Search needs Brave Search or Tavily API credentials.\n\nOpen Preferences now?";
+        const ok = confirm(
+          (window.I18n && typeof window.I18n.t === "function")
+            ? window.I18n.t("ag_ws_need_key_confirm")
+            : fallback,
+        );
         if (ok && typeof window.openUserSettings === "function") {
           window.openUserSettings({ section: "keys", focusProvider: "brave" });
         }
@@ -10500,6 +11122,14 @@
       app.discardAgentSpec();
       return;
     }
+    if (e.target.closest("[data-agent-spec-stop]")) {
+      // Stop · same effect as Discard while generation is in flight ·
+      // aborts the AbortController, which propagates to the fetch
+      // (cancels the LLM call server-side) and resets composer state.
+      e.preventDefault();
+      app.discardAgentSpec();
+      return;
+    }
     if (e.target.closest("[data-agent-spec-redo]")) {
       e.preventDefault();
       app.redoAgentSpec();
@@ -10585,7 +11215,25 @@
       } else {
         if (kind === "tone") app.setComposerTone(v);
         else if (kind === "intensity") app.setComposerIntensity(v);
+        else if (kind === "delivery") app.setComposerDeliveryMode(v);
         else if (kind === "agent-model") app.setAgentComposerModel(v);
+        else if (kind === "locale") {
+          // Interface language · runs through the shared I18n
+          // setter so document.documentElement.lang, the persisted
+          // boardroom.uiLocale storage entry, applyDom, and the
+          // boardroom:locale event all fire as a unit. The trigger's
+          // value span is updated explicitly because applyDom won't
+          // touch a `data-cmp-dd-value` (it has no data-i18n key).
+          if (window.I18n && typeof window.I18n.setLocale === "function") {
+            window.I18n.setLocale(v);
+          }
+          if (trigger) {
+            const valSpan = trigger.querySelector("[data-cmp-dd-value]");
+            if (valSpan) {
+              valSpan.textContent = v === "zh" ? "中文" : "EN";
+            }
+          }
+        }
       }
       app.closeComposerDropdown();
       return;
@@ -10836,6 +11484,18 @@
     }
   });
 
+  // Global one-shot listener: unlock audio playback on first user
+  // interaction so voice mode works regardless of which button was
+  // clicked first.
+  document.addEventListener("click", function _unlockAudio() {
+    app.unlockAudioPlayback();
+    document.removeEventListener("click", _unlockAudio);
+  });
+  document.addEventListener("keydown", function _unlockAudioKey() {
+    app.unlockAudioPlayback();
+    document.removeEventListener("keydown", _unlockAudioKey);
+  });
+
   window.app = app;
 
   if (document.readyState === "loading") {