privateboard 0.1.0 → 0.1.2

package/public/app.js

@@ -8,9 +8,9 @@
      ─ SSE per room:    /api/rooms/:id/stream
      ─ actions:         createRoom · sendMessage · adjournRoom
 
-   Designed in vanilla JS (no framework) to match the rest of the prototype.
+   Designed in vanilla JS (no framework) to match the rest of the frontend.
    Renders into named DOM containers; non-list parts (chrome / overlays) keep
-   their existing prototype handlers.
+   their existing handlers.
 */
 (function () {
   /** Display labels for the registry's modelV ids · used to print
@@ -68,10 +68,12 @@
       "Co-creator. Directors stand with you and push the idea outward — yes-and a contribution, name a concrete adjacent variant (\"what if we instead…\"), borrow pieces from another director's turn into new combinations. May end with one curious question, never a defense-demanding one.",
     constructive:
       "Sympathetic interrogator. They want you to win, but only via the strongest version. Each turn picks ONE load-bearing assumption and proposes the candidate stronger version that would stand. Disagreement is allowed, but every objection comes packaged with a forward path.",
+    research:
+      "Collaborative inquiry. The room mines the materials in front of it (your brief, web-search results, prior turns) for what's actually there. Each turn must cite a specific source piece, label it OBSERVATION / INFERENCE / SPECULATION, then extract the insight your lens makes salient. Defaults web search ON when a Brave key is configured.",
     debate:
       "Peer reviewer. Each turn opens by steelmanning your strongest claim (\"the strongest read of your point is…\") and only then attacks THAT version — naming a specific risk, demanding evidence, exposing the trade-off you're hiding. Sharp but professional. Skipping the steelman is a protocol violation.",
-    "no-mercy":
-      "Hostile reviewer. Default: you're wrong until proved otherwise. Points at vague terms / hand-waved mechanisms, says \"this is wrong because X\" flat — no hedge. Refuses undefined terms. Attacks the argument as half-baked / wrong, never the person. Forbidden hedge words: perhaps / maybe / could be / might.",
+    critique:
+      "Review board. The room audits a finished deliverable systematically — each turn names the dimension being audited (logic / evidence / scope / risk / etc.), surfaces 2–3 specific flaws labelled BLOCKER · MAJOR · MINOR, points at the load-bearing piece, and indicates the direction a fix would lie. At least one BLOCKER or MAJOR per turn is mandatory.",
   };
 
   const app = {
@@ -147,10 +149,86 @@
       this.renderSidebarRooms();
       this.renderSidebarAgents();
       this.renderUserBlock();
+      // Show a friendly "storage upgraded" banner if migrations have
+      // been applied since the user last opened the app. Fire-and-forget
+      // so a slow / failed call doesn't block the dashboard rendering.
+      void this.checkMigrationNotice();
       window.addEventListener("hashchange", () => this.handleRoute());
       this.handleRoute();
     },
 
+    /** Surface a one-line "storage was upgraded" notice when the user
+     *  opens a build that ran new schema migrations against their
+     *  existing DB. Compares the latest applied migration in the DB
+     *  against the last-acknowledged name in localStorage; a fresh-
+     *  install user sees nothing (no last-seen → first visit → write
+     *  current latest, no banner). Dismiss writes the latest name so
+     *  the banner doesn't re-show until truly-new migrations land. */
+    async checkMigrationNotice() {
+      const banner = document.querySelector("[data-sys-notice]");
+      if (!banner) return;
+      const textEl = banner.querySelector("[data-sys-notice-text]");
+      const closeBtn = banner.querySelector("[data-sys-notice-close]");
+      if (!textEl || !closeBtn) return;
+
+      let migrations = [];
+      try {
+        const r = await fetch("/api/system/migrations");
+        if (!r.ok) return;
+        const j = await r.json();
+        migrations = Array.isArray(j.migrations) ? j.migrations : [];
+      } catch { return; }
+      if (migrations.length === 0) return;
+
+      const latest = migrations[migrations.length - 1].name;
+      const KEY = "boardroom.lastSeenMigration";
+      let lastSeen = null;
+      try { lastSeen = localStorage.getItem(KEY); } catch { /* */ }
+
+      // Fresh-install (no last-seen recorded) · seed quietly with the
+      // current latest, no banner. The user hasn't been here before;
+      // showing "storage upgraded" makes no sense on first launch.
+      if (!lastSeen) {
+        try { localStorage.setItem(KEY, latest); } catch { /* */ }
+        return;
+      }
+      if (lastSeen === latest) return;
+
+      // Find migrations newer than lastSeen — by index in the list,
+      // since order is applied_at ASC.
+      const lastIdx = migrations.findIndex((m) => m.name === lastSeen);
+      const fresh = lastIdx >= 0 ? migrations.slice(lastIdx + 1) : migrations;
+      if (fresh.length === 0) {
+        try { localStorage.setItem(KEY, latest); } catch { /* */ }
+        return;
+      }
+
+      const lang = (this.composerLanguage && this.composerLanguage()) || "en";
+      const count = fresh.length;
+      const names = fresh.map((m) => m.name).join(", ");
+      const copy = lang === "zh"
+        ? {
+            head: `存储结构已升级`,
+            body: `已应用 ${count} 个新迁移 · 你已有的房间、董事、报告、设置都已保留。`,
+            tooltip: names,
+          }
+        : {
+            head: `Storage upgraded`,
+            body: `${count} new migration${count > 1 ? "s" : ""} applied · your existing rooms, agents, briefs, and settings were preserved.`,
+            tooltip: names,
+          };
+      textEl.innerHTML =
+        `<span class="sys-notice-strong">${this.escape(copy.head)}</span> · ${this.escape(copy.body)}`;
+      banner.title = copy.tooltip;
+      banner.removeAttribute("hidden");
+
+      const dismiss = () => {
+        try { localStorage.setItem(KEY, latest); } catch { /* */ }
+        banner.setAttribute("hidden", "");
+      };
+      closeBtn.addEventListener("click", dismiss, { once: true });
+    },
+
     /** Refetch /api/keys and update the local cache. Called by
      *  user-settings on close so the requireModelKey gate sees the
      *  user's just-configured keys without a full page reload. */
@@ -562,6 +640,10 @@
           document.documentElement.setAttribute("data-status", "live");
           this.renderHeader();
           syncSidebar({ status: "live", pausedAt: null });
+          // Drop any paused-supplement overlay · the supplement endpoint
+          // 409s once the room is live, so leaving the modal up is just
+          // a confusing no-op for the user.
+          this.closePausedSupplementOverlay?.();
         } else if (kind === "room-adjourned") {
           const ts = payload.adjournedAt || Date.now();
           if (this.currentRoom) {
@@ -572,6 +654,7 @@
           this.renderHeader();
           syncSidebar({ status: "adjourned", adjournedAt: ts });
         } else if (kind === "brief-started") {
+          this.markBriefEvent();
           this.currentBrief = {
             id: payload.briefId,
             title: "Generating…",
@@ -582,6 +665,7 @@
             // language is inferred server-side from the room subject.
             chairName: payload.chairName || (this.currentChair?.name) || "Chair",
             language: payload.language === "zh" ? "zh" : "en",
+            pipelineStartedAt: Date.now(),
             // Stage checklist · seeded with all three stages in pending
             // state. brief-stage events flip them active → done as the
             // pipeline progresses. startedAt is captured when each
@@ -597,10 +681,16 @@
           this.renderBrief();
           // Start the per-second tick driving elapsed/substage animation.
           this.ensureBriefStageTick();
+          // Heartbeat watcher — surfaces Retry on stall / timeout.
+          this.ensureBriefStallWatch();
           // Surface the View Report button + hide the no-brief CTA.
           this.renderHeader();
           this.renderChat();
+          // Pull the user's eye onto the freshly-mounted card so the
+          // click that triggered generation has visible feedback.
+          this.scrollToBriefCard();
         } else if (kind === "brief-stage") {
+          this.markBriefEvent();
           if (this.currentBrief) {
             const st = this.currentBrief.stages || (this.currentBrief.stages = {
               extract:  { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
@@ -615,6 +705,14 @@
               if (newStatus === "active" && st[key].status !== "active") {
                 st[key].startedAt = Date.now();
               }
+              // Capture finish time when the stage transitions to done
+              // so the displayed elapsed freezes at completion. Without
+              // this, the per-stage timer kept ticking off Date.now()
+              // forever — the user couldn't read each stage's actual
+              // duration at a glance.
+              if (newStatus === "done" && st[key].status !== "done" && !st[key].finishedAt) {
+                st[key].finishedAt = Date.now();
+              }
               st[key].status = newStatus;
               st[key].detail = payload.detail || "";
               st[key].progress = payload.progress || null;
@@ -632,6 +730,7 @@
             this.ensureBriefStageTick();
           }
         } else if (kind === "brief-token") {
+          this.markBriefEvent();
           // Accumulate the body. Throttle the re-render to once per ~250ms
           // so the writing-stage word count animates without thrashing on
           // every chunk.
@@ -643,10 +742,12 @@
             this.renderBrief();
           }
         } else if (kind === "brief-final") {
+          this.markBriefEvent();
           if (this.currentBrief) {
             this.currentBrief.title = payload.title || this.currentBrief.title;
           }
           this.stopBriefStageTick();
+          this.stopBriefStallWatch();
           this.renderBrief();
           this.renderHeader();
           // Refresh the FULL brief list so the tab strip picks up the
@@ -670,8 +771,10 @@
               .catch(() => {});
           }
         } else if (kind === "brief-error") {
+          this.markBriefEvent();
           if (this.currentBrief) this.currentBrief.error = payload.message;
           this.stopBriefStageTick();
+          this.stopBriefStallWatch();
           this.renderBrief();
         } else if (kind === "settings-changed") {
           const ch = payload.changes || {};
@@ -820,6 +923,9 @@
         try { this.sse.close(); } catch (e) { /* */ }
         this.sse = null;
       }
+      // Drop the brief watcher · the brief belongs to a room and the
+      // watcher would otherwise keep ticking against a stale id.
+      this.stopBriefStallWatch();
     },
 
     // ── Actions ───────────────────────────────────────────────
@@ -1346,6 +1452,146 @@
       }
     },
 
+    /** Paused-supplement overlay · lets the user drop in an extra
+     *  thought while the room is paused. The text is posted as a
+     *  user message immediately (lands in the chat as the freshest
+     *  user input) but the saved director queue is left untouched —
+     *  so when they click Resume, the previously-paused director
+     *  takes over with the supplement already in their context.
+     *  Effectively the supplement plays "first" in the resumed
+     *  flow, and the rest of the queue continues in order. Reuses
+     *  the existing .supplement-* CSS classes for visual parity. */
+    openPausedSupplementOverlay() {
+      if (!this.currentRoomId || !this.currentRoom) return;
+      if (this.currentRoom.status !== "paused") return;
+      this.closePausedSupplementOverlay();
+      const lang = this.composerLanguage();
+      const t = lang === "zh"
+        ? {
+            classify: "room · 暂停时补充",
+            classifyRight: "// queued first",
+            title: "补充一个观点",
+            metaPrefix: "// 当前房间",
+            placeholder: "想补一个观点 · 一个想再追问的细节 · 一个让董事们重新考虑的角度。\n\n会立即作为你的发言进入对话；点击 [ Resume ] 后，董事们会先看到这条再继续。",
+            hint: "暂停期间的补充会以你的身份立即出现在对话里，原本的发言队列不变；恢复后队首董事将带着这条补充开口。",
+            cancel: "[ Cancel ]",
+            confirm: "[ Add to chat ]",
+            confirmBusy: "[ Posting… ]",
+          }
+        : {
+            classify: "room · paused supplement",
+            classifyRight: "// queued first",
+            title: "Add a supplemental input",
+            metaPrefix: "// Current room",
+            placeholder: "Drop in an extra thought, a follow-up question, or an angle you'd like the board to take into account.\n\nIt lands in the chat as your message right now; when you hit [ Resume ], the next director picks up with this in front of them.",
+            hint: "Posted while paused, the supplement lands as your message immediately; the saved speaker queue is untouched. After resume, the next director responds with the supplement first.",
+            cancel: "[ Cancel ]",
+            confirm: "[ Add to chat ]",
+            confirmBusy: "[ Posting… ]",
+          };
+      const subject = (this.currentRoom.subject || "").trim() || (lang === "zh" ? "(无主题)" : "(no subject)");
+      const html = `
+        <div class="supplement-overlay" id="paused-supplement-overlay" role="dialog" aria-modal="true">
+          <div class="supplement-backdrop" data-paused-supplement-close></div>
+          <div class="supplement-modal" role="document">
+            <div class="supplement-classification">
+              <span><span class="dot">●</span> ${this.escape(t.classify)}</span>
+              <span class="right">${this.escape(t.classifyRight)}</span>
+            </div>
+            <header class="supplement-head">
+              <div>
+                <div class="meta">${this.escape(t.metaPrefix)} · <span>${this.escape(subject)}</span></div>
+                <div class="title">${this.escape(t.title)}</div>
+              </div>
+              <button type="button" class="supplement-close" data-paused-supplement-close aria-label="Close">✕</button>
+            </header>
+            <div class="supplement-body">
+              <textarea class="supplement-input" data-paused-supplement-input rows="6" placeholder="${this.escape(t.placeholder)}"></textarea>
+              <p class="supplement-hint">${this.escape(t.hint)}</p>
+            </div>
+            <footer class="supplement-foot">
+              <button type="button" class="supplement-cancel" data-paused-supplement-close>${this.escape(t.cancel)}</button>
+              <button type="button" class="supplement-confirm" data-paused-supplement-confirm data-busy-label="${this.escape(t.confirmBusy)}">${this.escape(t.confirm)}</button>
+            </footer>
+          </div>
+        </div>
+      `;
+      const wrap = document.createElement("div");
+      wrap.innerHTML = html.trim();
+      document.body.appendChild(wrap.firstChild);
+      document.body.style.overflow = "hidden";
+      this._pausedSupplementEsc = (ev) => {
+        if (ev.key === "Escape") {
+          ev.stopImmediatePropagation();
+          this.closePausedSupplementOverlay();
+        }
+      };
+      document.addEventListener("keydown", this._pausedSupplementEsc, true);
+      // Cmd/Ctrl-Enter submits — long-form textarea convention.
+      this._pausedSupplementSubmit = (ev) => {
+        if ((ev.metaKey || ev.ctrlKey) && ev.key === "Enter") {
+          const overlay = document.getElementById("paused-supplement-overlay");
+          if (!overlay) return;
+          ev.preventDefault();
+          this.submitPausedSupplement();
+        }
+      };
+      document.addEventListener("keydown", this._pausedSupplementSubmit, true);
+      setTimeout(() => {
+        const input = document.querySelector("[data-paused-supplement-input]");
+        if (input) input.focus();
+      }, 30);
+    },
+
+    closePausedSupplementOverlay() {
+      const el = document.getElementById("paused-supplement-overlay");
+      if (el) el.remove();
+      document.body.style.overflow = "";
+      if (this._pausedSupplementEsc) {
+        document.removeEventListener("keydown", this._pausedSupplementEsc, true);
+        this._pausedSupplementEsc = null;
+      }
+      if (this._pausedSupplementSubmit) {
+        document.removeEventListener("keydown", this._pausedSupplementSubmit, true);
+        this._pausedSupplementSubmit = null;
+      }
+    },
+
+    async submitPausedSupplement() {
+      const overlay = document.getElementById("paused-supplement-overlay");
+      if (!overlay) return;
+      const input = overlay.querySelector("[data-paused-supplement-input]");
+      const btn = overlay.querySelector("[data-paused-supplement-confirm]");
+      const text = input ? (input.value || "").trim() : "";
+      if (!text) {
+        if (input) input.focus();
+        return;
+      }
+      if (!this.currentRoomId) return;
+      const origLabel = btn ? btn.textContent : "";
+      const busyLabel = btn ? btn.getAttribute("data-busy-label") || origLabel : "";
+      if (btn) { btn.disabled = true; btn.textContent = busyLabel; }
+      try {
+        const r = await fetch(
+          "/api/rooms/" + encodeURIComponent(this.currentRoomId) + "/paused-input",
+          {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ body: text }),
+          },
+        );
+        if (!r.ok) {
+          const e = await r.json().catch(() => ({}));
+          throw new Error(e.error || ("HTTP " + r.status));
+        }
+        // SSE will push the message-appended event; chat updates itself.
+        this.closePausedSupplementOverlay();
+      } catch (e) {
+        if (btn) { btn.disabled = false; btn.textContent = origLabel; }
+        alert("Add input failed: " + (e && e.message ? e.message : e));
+      }
+    },
+
     /** Confirm-handler · grabs the textarea, posts to the brief endpoint,
      *  closes the overlay. Server emits brief-started + brief-* SSE
      *  events as for a normal generate; the existing handlers replace
@@ -1433,6 +1679,7 @@
           // Orphan. Flip into the error UI which now carries a retry button.
           brief.error = "interrupted";
           brief.interrupted = true;
+          this.stopBriefStallWatch();
           this.renderBrief();
           return;
         }
@@ -1440,6 +1687,7 @@
           this.hydrateBriefStagesFromState(brief, j.state);
           this.renderBrief();
           this.ensureBriefStageTick();
+          this.ensureBriefStallWatch();
         }
       } catch { /* ignore — leave the loading state */ }
     },
@@ -1544,10 +1792,15 @@
         if (this.currentBrief) {
           this.currentBrief.error = null;
           this.currentBrief.interrupted = false;
+          this.currentBrief.timedOut = false;
           this.currentBrief.bodyMd = "";
           this.currentBrief.title = "Generating…";
+          this.currentBrief.pipelineStartedAt = Date.now();
         }
+        this._lastBriefEventAt = Date.now();
+        this._lastBriefHealthPollAt = 0;
         this.renderBrief();
+        this.scrollToBriefCard();
       } catch (e) {
         alert("Regenerate failed: " + (e && e.message ? e.message : e));
       }
@@ -2126,6 +2379,18 @@
           out.push(`<ul>${items.join("")}</ul>`);
           continue;
         }
+        // Markdown blockquote · every non-empty line starts with `&gt; `
+        // (escaped from `> `). The whole block becomes one <blockquote>;
+        // styling lives in CSS (.msg-bubble blockquote · designed
+        // quote-card with mono kicker + italic body, no left border).
+        if (lines.every((l) => /^&gt;\s?/.test(l) || l.trim() === "")) {
+          const inner = lines
+            .filter((l) => l.trim())
+            .map((l) => this.inline(l.replace(/^&gt;\s?/, "")))
+            .join("<br>");
+          out.push(`<blockquote class="msg-quote">${inner}</blockquote>`);
+          continue;
+        }
         // Otherwise: paragraph (preserve single newlines as <br>).
         out.push(`<p>${this.inline(lines.join("<br>"))}</p>`);
       }
@@ -2528,8 +2793,6 @@
       if (nm) nm.textContent = name;
       const mt = document.querySelector("[data-user-meta]");
       if (mt) mt.textContent = meta;
-      const menuName = document.querySelector("[data-user-menu-name]");
-      if (menuName) menuName.textContent = name;
     },
 
     renderSidebarCounts() {
@@ -2569,6 +2832,10 @@
         ? this.escape(nextSpeaker.handle.replace(/^\//, ""))
         : "—";
 
+      const lang = this.composerLanguage();
+      const addInputLabel = lang === "zh" ? "[ + 补充观点 ]" : "[ + Add input ]";
+      const adjournLabel  = lang === "zh" ? "[ ▸ 结束并存档 ]" : "[ ▸ Adjourn & File Brief ]";
+      const resumeLabel   = lang === "zh" ? "[ ▶ 恢复讨论 ]"   : "[ ▶ Resume Discussion ]";
       bar.innerHTML = `
         <div class="paused-bar-text">
           <strong>// discussion paused.</strong>
@@ -2576,8 +2843,9 @@
           next turn · <span class="lime">${nextHandle}</span>.
         </div>
         <div class="paused-bar-actions">
-          <a href="#" class="ghost-btn" data-adjourn>[ ▸ Adjourn &amp; File Brief ]</a>
-          <a href="#" class="resume-btn-lg" data-resume>[ ▶ Resume Discussion ]</a>
+          <a href="#" class="ghost-btn" data-paused-supplement>${this.escape(addInputLabel)}</a>
+          <a href="#" class="ghost-btn" data-adjourn>${this.escape(adjournLabel)}</a>
+          <a href="#" class="resume-btn-lg" data-resume>${this.escape(resumeLabel)}</a>
         </div>
       `;
     },
@@ -2603,7 +2871,7 @@
       this.composerState = {
         ...this.DEFAULT_COMPOSER,
         ...(saved || {}),
-        // Keep these fresh-each-render: subject is intentionally not persisted.
+        subject: (saved && typeof saved.subject === "string") ? saved.subject : "",
       };
       return this.composerState;
     },
@@ -2611,14 +2879,33 @@
     saveComposerState() {
       if (!this.composerState) return;
       try {
-        const { directorIds, mode, intensity, autoPickDirectors } = this.composerState;
+        const { directorIds, mode, intensity, autoPickDirectors, subject } = this.composerState;
         localStorage.setItem(
           "boardroom.composer",
-          JSON.stringify({ directorIds, mode, intensity, autoPickDirectors }),
+          JSON.stringify({ directorIds, mode, intensity, autoPickDirectors, subject }),
         );
       } catch { /* ignore */ }
     },
 
+    /** Agent composer draft · the description textarea on "+ New Agent".
+     *  Persisted independently of composerState so the two screens don't
+     *  share fields (composerState is room-shaped). Survives view
+     *  switches and full app reloads; cleared after a successful save. */
+    loadAgentComposerDraft() {
+      try {
+        const raw = localStorage.getItem("boardroom.agent-composer.draft");
+        return typeof raw === "string" ? raw : "";
+      } catch { return ""; }
+    },
+    saveAgentComposerDraft(text) {
+      try { localStorage.setItem("boardroom.agent-composer.draft", String(text || "")); }
+      catch { /* ignore */ }
+    },
+    clearAgentComposerDraft() {
+      try { localStorage.removeItem("boardroom.agent-composer.draft"); }
+      catch { /* ignore */ }
+    },
+
     /** Whether the composer is in auto-pick mode for the cast · default
      *  is true (chair picks 3 directors based on subject when the user
      *  hits Convene). Flips to false the moment the user manually
@@ -3167,7 +3454,7 @@
           </header>
 
           <div class="cmp-input-frame">
-            <textarea class="cmp-input" data-composer-subject rows="1" placeholder="${this.escape(t.placeholder)}"></textarea>
+            <textarea class="cmp-input" data-composer-subject rows="1" placeholder="${this.escape(t.placeholder)}">${this.escape(state.subject || "")}</textarea>
 
             <div class="cmp-toolbar">
               <button type="button" class="cmp-cast-btn${isAutoPick ? " cmp-cast-btn-auto" : ""}" data-composer-dir-pick title="${this.escape(t.pickerLabel)}">
@@ -3560,7 +3847,7 @@
       { tag: "user-empathy", text: "A product hand who reasons from the user's moment of friction. Refuses any argument that doesn't name what the user is doing right then." },
       { tag: "first-principles", text: "A physicist who strips problems to observables and causal chains. Refuses to import assumptions from analogy." },
       { tag: "value-investor", text: "A long-pattern reader who tests every novel idea against thirty years of category history before believing it." },
-      { tag: "no-mercy-reviewer", text: "A hostile reviewer — default that the claim is wrong until proved otherwise. Will not hedge, will not be polite." },
+      { tag: "critique-reviewer", text: "A senior critic who audits any deliverable systematically — labels each flaw blocker / major / minor, points at the load-bearing piece, names the mechanism. Won't praise without finding at least one major issue." },
       { tag: "phenomenologist", text: "An observer who notices what the room ISN'T saying. Tracks tone, what got skipped, who agreed too fast." },
     ],
     AGENT_STARTERS_ZH: [
@@ -3568,7 +3855,7 @@
       { tag: "user-empathy", text: "一位从用户摩擦时刻反推的产品老兵，反对任何不说清『用户那一刻在干嘛』的论点。" },
       { tag: "first-principles", text: "一位把问题拆到可观测、因果链上的物理学家，拒绝从类比里搬假设。" },
       { tag: "value-investor", text: "一位用三十年品类史做底的长周期读者，新点子要先和三个老案例对照才相信。" },
-      { tag: "no-mercy-reviewer", text: "一位敌意审稿人，默认你错——除非你证明给我看。不留情、不修饰、不绕弯。" },
+      { tag: "critique-reviewer", text: "一位资深评审，对任何交付物做系统性审稿——每个瑕疵打 blocker / major / minor 严重度，指向具体段落、说出失败机制。不挑出至少一条 major 不会放过。" },
       { tag: "phenomenologist", text: "一位观察者，捕捉房间里没说出来的东西：语气、被跳过的话题、太快达成的一致。" },
     ],
 
@@ -3622,7 +3909,7 @@
           </header>
 
           <div class="cmp-input-frame ${generating ? "is-generating" : ""}">
-            <textarea class="cmp-input" data-agent-composer-desc rows="1" placeholder="${this.escape(t.placeholder)}" ${generating ? "disabled" : ""}></textarea>
+            <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)}">
@@ -3984,6 +4271,9 @@
         await this.refreshAgents?.();
         this.agentSpec = null;
         this.agentSpecAvatarSeed = null;
+        // Clear the saved description draft now that the agent exists —
+        // a future visit to "+ New Agent" should land on a fresh textarea.
+        this.clearAgentComposerDraft();
         this.composerMode = "room";
         // POST /api/agents returns the agent record directly (not wrapped).
         const newId = j && (j.id || (j.agent && j.agent.id));
@@ -4199,14 +4489,16 @@
           ? [
               { v: "brainstorm",   label: "Brainstorm",   hint: "共同发散" },
               { v: "constructive", label: "Constructive", hint: "推一把" },
+              { v: "research",     label: "Research",     hint: "梳理材料找洞察" },
               { v: "debate",       label: "Debate",       hint: "找漏洞" },
-              { v: "no-mercy",     label: "No Mercy",     hint: "硬怼到底" },
+              { v: "critique",     label: "Critique",     hint: "系统性挑毛病" },
             ]
           : [
               { v: "brainstorm",   label: "Brainstorm",   hint: "yes-and" },
               { v: "constructive", label: "Constructive", hint: "push & sharpen" },
+              { v: "research",     label: "Research",     hint: "mine the material" },
               { v: "debate",       label: "Debate",       hint: "find the holes" },
-              { v: "no-mercy",     label: "No Mercy",     hint: "tear apart" },
+              { v: "critique",     label: "Critique",     hint: "audit the deliverable" },
             ];
         current = state.mode;
       } else if (kind === "intensity") {
@@ -4371,6 +4663,11 @@
           intensity: state.intensity,
           autoPick: useAutoPick,
         });
+        // Clear the saved draft now that the room is convened — next
+        // visit to "+ New Room" should land on a fresh textarea, not
+        // re-show the just-submitted subject.
+        state.subject = "";
+        this.saveComposerState();
       } catch (e) {
         if (btn) btn.classList.remove("busy");
         alert("Couldn't convene: " + (e && e.message ? e.message : e));
@@ -4391,13 +4688,15 @@
       if (want.length) state.directorIds = want;
       if (q.tone) state.mode = q.tone;
       if (q.intensity) state.intensity = q.intensity;
+      // Write the starter text into the persisted draft so it survives
+      // a navigation away and back, just like manual typing does.
+      state.subject = q.text || "";
       this.saveComposerState();
       // Re-render to reflect the new selections; keep autofocus at end of subject.
       this.renderEmptyState();
       setTimeout(() => {
         const ta = document.querySelector("[data-composer-subject]");
         if (ta) {
-          ta.value = q.text || "";
           ta.focus();
           ta.setSelectionRange(ta.value.length, ta.value.length);
           this.autosizeComposerTextarea();
@@ -5380,8 +5679,14 @@
         ? `<div class="msg-chair-pick" title="Chair picked ${this.escape(name)} for this turn">▸ chair · ${this.escape(chairPick)}</div>`
         : "";
 
+      // data-author-id is only attached for director messages (not user
+       // / not chair) — read by quote-cta.js to credit the director when
+       // the user probes / seconds a passage from this bubble.
+      const authorIdAttr = (!isUser && !isChair && author?.id)
+        ? ` data-author-id="${this.escape(author.id)}"`
+        : "";
       return `
-        <article class="msg ${baseCls}${stateCls.length ? " " + stateCls.join(" ") : ""}" data-message-id="${this.escape(m.id)}" data-meta-kind="${this.escape(metaKind || "")}">
+        <article class="msg ${baseCls}${stateCls.length ? " " + stateCls.join(" ") : ""}" data-message-id="${this.escape(m.id)}" data-meta-kind="${this.escape(metaKind || "")}"${authorIdAttr}>
           ${avatarHtml}
           <div class="msg-content">
             ${chairPickKicker}
@@ -5529,7 +5834,7 @@
       }
 
       // Update the collapsed summary alongside the expanded list so the
-      // collapsed strip never shows stale prototype text.
+      // collapsed strip never shows stale text.
       this.renderQueueCollapsed(renderItems);
 
       if (renderItems.length === 0) {
@@ -5611,14 +5916,32 @@
       card.classList.add("ending-block");
       const b = this.currentBrief;
 
-      // Error path: a compact error card with a retry button. Two
+      // Error path: a compact error card with a retry button. Three
       // sub-cases:
+      //   · timedOut (no completion after 5 min wall-clock) → "took
+      //     too long" copy with the elapsed-time reason inline
       //   · interrupted (zombie placeholder from a refresh / restart) →
       //     specific copy + Regenerate CTA
       //   · generic LLM failure → original "needs an API key" hint
       if (b.error) {
         const lang = (b.language === "zh" || (this.currentRoom?.subject && /[一-鿿]/.test(this.currentRoom.subject))) ? "zh" : "en";
-        const copy = b.interrupted
+        const copy = b.timedOut
+          ? (lang === "zh"
+            ? {
+                stamp: "timed out",
+                kicker: "// 报告生成超时",
+                detail: "已超过 5 分钟仍未收到完成信号 · 可能是模型回应过慢、网络中断，或后端流水线卡住了。点击下方按钮重试，或检查 LLM key 与网络后再试。",
+                hint: "",
+                cta: "重试",
+              }
+            : {
+                stamp: "timed out",
+                kicker: "// generation timed out",
+                detail: "No completion signal after 5 minutes — the model may be slow, the connection dropped, or the pipeline stalled. Click below to start a fresh run.",
+                hint: "",
+                cta: "Retry",
+              })
+          : b.interrupted
           ? (lang === "zh"
             ? {
                 stamp: "interrupted",
@@ -5658,7 +5981,7 @@
             <div class="brief-body brief-body-error">
               <div class="brief-kicker" style="color: var(--red);">${this.escape(copy.kicker)}</div>
               <div class="brief-meta-line" style="color: var(--text-soft); text-transform: none; letter-spacing: 0;">
-                ${b.interrupted ? this.escape(copy.detail) : copy.detail}
+                ${(b.interrupted || b.timedOut) ? this.escape(copy.detail) : copy.detail}
               </div>
               ${copy.hint ? `<div class="brief-meta-line" style="margin-top: 14px; text-transform: none; letter-spacing: 0;">${copy.hint}</div>` : ""}
               <div class="brief-error-actions">
@@ -5726,7 +6049,7 @@
       ` : "";
 
       // Ceremonial wrapper · the deliverable hits the table inside an
-      // ending-block frame, mirroring the prototype.
+      // ending-block frame.
       card.innerHTML = `
         <header class="ending-block-head">
           <span class="ending-block-line"></span>
@@ -5888,6 +6211,84 @@
       }
     },
 
+    /* ─── Brief stall watcher ─────────────────────────────────────
+       Surfaces the Retry CTA promptly when generation stalls or
+       times out — the user no longer has to leave + re-enter the
+       room to discover a dead pipeline. Two safety nets:
+
+       · Stall poll · if no brief-* SSE event arrives for
+         BRIEF_STALL_POLL_MS, ask /api/briefs/<id>/status. The
+         server flips to !generating + !hasBody when the pipeline
+         crashed mid-flight; checkBriefHealth (re-used) renders
+         that as the existing "interrupted" error.
+
+       · Hard timeout · after BRIEF_HARD_TIMEOUT_MS of total
+         wall-clock with no brief-final, force a `timedOut` error
+         locally so Retry appears regardless of server-side state
+         (covers SSE drops + LLM black-holes alike). */
+    BRIEF_STALL_POLL_MS: 60_000,
+    BRIEF_HARD_TIMEOUT_MS: 5 * 60_000,
+    BRIEF_WATCH_INTERVAL_MS: 10_000,
+
+    markBriefEvent() {
+      this._lastBriefEventAt = Date.now();
+    },
+
+    ensureBriefStallWatch() {
+      if (this._briefStallWatchTimer) return;
+      const b = this.currentBrief;
+      if (!b || !b.id || b.error) return;
+      const generating = !b.bodyMd || b.title === "Generating…";
+      if (!generating) return;
+      if (!this._lastBriefEventAt) this._lastBriefEventAt = Date.now();
+      this._lastBriefHealthPollAt = 0;
+      this._briefStallWatchTimer = setInterval(
+        () => this.tickBriefStallWatch(),
+        this.BRIEF_WATCH_INTERVAL_MS,
+      );
+    },
+
+    stopBriefStallWatch() {
+      if (this._briefStallWatchTimer) {
+        clearInterval(this._briefStallWatchTimer);
+        this._briefStallWatchTimer = null;
+      }
+    },
+
+    async tickBriefStallWatch() {
+      const b = this.currentBrief;
+      if (!b || b.error) { this.stopBriefStallWatch(); return; }
+      const generating = !b.bodyMd || b.title === "Generating…";
+      if (!generating) { this.stopBriefStallWatch(); return; }
+
+      const now = Date.now();
+      const startedAt = b.pipelineStartedAt || this._lastBriefEventAt || now;
+
+      // 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) {
+        b.error = b.language === "zh"
+          ? "报告生成超时（超过 5 分钟仍未完成）。"
+          : "Brief generation timed out (no completion after 5 minutes).";
+        b.timedOut = true;
+        this.stopBriefStageTick();
+        this.stopBriefStallWatch();
+        this.renderBrief();
+        return;
+      }
+
+      // Soft stall · poll the server at most once per STALL_POLL_MS
+      // while we're not hearing anything. checkBriefHealth flips the
+      // card to "interrupted" if the server has already given up.
+      const lastEvt = this._lastBriefEventAt || startedAt;
+      const elapsedSinceEvt = now - lastEvt;
+      const pollGap = now - (this._lastBriefHealthPollAt || 0);
+      if (elapsedSinceEvt > this.BRIEF_STALL_POLL_MS && pollGap > this.BRIEF_STALL_POLL_MS) {
+        this._lastBriefHealthPollAt = now;
+        await this.checkBriefHealth(b);
+      }
+    },
+
     /** Render the 3-stage checklist shown while the brief is generating.
      *  Each row pulses while active, gets a check when done. The active
      *  row also shows:
@@ -5948,7 +6349,12 @@
           : null;
         const eta = serverEta || meta[key]?.eta;
         const startedAt = st.startedAt;
-        const elapsedSec = startedAt ? Math.max(0, Math.floor((Date.now() - startedAt) / 1000)) : 0;
+        // Done stages freeze at finishedAt so the displayed duration
+        // is the actual time the stage took, not "current time minus
+        // when it started" (which would keep ticking after completion).
+        // Active stages still use Date.now() so the counter animates.
+        const endRef = (status === "done" && st.finishedAt) ? st.finishedAt : Date.now();
+        const elapsedSec = startedAt ? Math.max(0, Math.floor((endRef - startedAt) / 1000)) : 0;
 
         // Detail line · numeric progress (extract counter, write word
         // count) takes priority. ETA / elapsed shown in a separate slot.
@@ -6105,6 +6511,38 @@
         });
       });
     },
+
+    /** Bring the brief card into view at the top of the chat panel.
+     *  Called whenever the user has just triggered a generation
+     *  (Adjourn → file brief, Regenerate, Retry, post-hoc generate)
+     *  so they see the "Generating…" state appear immediately —
+     *  without this, a user who scrolled up to re-read history sees
+     *  no visible response to their click. Smooth-scrolls the .chat
+     *  container ONLY (not the page), aligning the card's top a bit
+     *  below the chat's top so the stage tracker is fully visible. */
+    scrollToBriefCard() {
+      // Two rAFs · let renderBrief paint + layout settle before measuring.
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const chat = document.querySelector(".chat");
+          const card = document.querySelector("[data-brief-card]");
+          if (!chat || !card) return;
+          // Skip the scroll if the card is already comfortably on
+          // screen — no need to nudge a user who's looking right at it.
+          const cardRect = card.getBoundingClientRect();
+          const chatRect = chat.getBoundingClientRect();
+          const alreadyVisible =
+            cardRect.top >= chatRect.top &&
+            cardRect.top <= chatRect.top + chat.clientHeight * 0.5;
+          if (alreadyVisible) return;
+          const offset = card.offsetTop - chat.offsetTop - 16;
+          chat.scrollTo({ top: Math.max(0, offset), behavior: "smooth" });
+          // Reading the latest content again counts as "following the
+          // feed" for subsequent token-stream auto-scroll decisions.
+          this.chatStuckToBottom = true;
+        });
+      });
+    },
   };
 
   // ── DOM-level wiring (delegated; survives re-renders) ──────
@@ -6155,6 +6593,14 @@
       app.resumeRoom().catch((err) => alert("Resume failed: " + err.message));
       return;
     }
+    // Export · adjourned-bar action. Browser handles the download
+    // natively from the route's Content-Disposition header.
+    if (e.target.closest("[data-room-export]")) {
+      e.preventDefault();
+      if (!app.currentRoomId) return;
+      window.location.href = "/api/rooms/" + encodeURIComponent(app.currentRoomId) + "/export.md";
+      return;
+    }
     // Generate report (post-hoc) — fires from the no-brief card CTA
     // when the user originally skipped the brief but now wants one.
     // Reuses the adjourn overlay's gallery in "generate-brief" mode.
@@ -6240,6 +6686,24 @@
       app.submitSupplement();
       return;
     }
+    // Paused-bar · open the supplement overlay (add a thought while paused).
+    if (e.target.closest("[data-paused-supplement]")) {
+      e.preventDefault();
+      app.openPausedSupplementOverlay();
+      return;
+    }
+    // Paused-supplement overlay · close / cancel / backdrop.
+    if (e.target.closest("[data-paused-supplement-close]")) {
+      e.preventDefault();
+      app.closePausedSupplementOverlay();
+      return;
+    }
+    // Paused-supplement overlay · confirm.
+    if (e.target.closest("[data-paused-supplement-confirm]")) {
+      e.preventDefault();
+      app.submitPausedSupplement();
+      return;
+    }
     // Continue · resume the directors after a chair-driven round-end.
     if (e.target.closest("[data-continue]")) {
       e.preventDefault();
@@ -6507,11 +6971,19 @@
     e.preventDefault();
     app.submitFromComposer(target);
   });
-  // Autosize the composer textarea as the user types.
+  // Autosize the composer textarea as the user types · also persist
+  // the in-progress draft so switching to another view and coming back
+  // restores the user's text instead of wiping it (each renderEmptyState
+  // rebuilds the textarea node, so the DOM-level value vanishes; the
+  // saved-state path is what survives the re-render).
   document.addEventListener("input", (e) => {
     if (e.target && e.target.matches && e.target.matches("[data-composer-subject]")) {
+      const state = app.loadComposerState();
+      state.subject = e.target.value;
+      app.saveComposerState();
       app.autosizeComposerTextarea();
     } else if (e.target && e.target.matches && e.target.matches("[data-agent-composer-desc]")) {
+      app.saveAgentComposerDraft(e.target.value);
       app.autosizeAgentComposerTextarea();
     }
   });
@@ -6619,6 +7091,21 @@
     }
   });
 
+  // When the tab becomes visible again, immediately probe a stalled
+  // brief — the user may have switched away during a long generation
+  // and the throttling sleeps held the watch back. The watcher itself
+  // also keeps ticking on its 10s interval as a backstop.
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) return;
+    if (app && app.currentBrief && !app.currentBrief.error) {
+      const generating = !app.currentBrief.bodyMd || app.currentBrief.title === "Generating…";
+      if (generating) {
+        app.ensureBriefStallWatch();
+        app.tickBriefStallWatch();
+      }
+    }
+  });
+
   window.app = app;
 
   if (document.readyState === "loading") {