privateboard 0.1.7 → 0.1.9

package/public/app.js

@@ -422,24 +422,14 @@
       // No explicit room in the hash — land on the new-room composer
       // (ChatGPT / Claude style: default = fresh, existing rooms live
       // in the sidebar). The composer renders inside closeRoom →
-      // renderEmptyState. Previously we auto-opened the first selectable
-      // room; that's been retired so users always start on the composer
-      // unless they explicitly navigate to a room.
+      // renderEmptyState. The sidebar persistence layer in index.html
+      // (boardroom.sidebar.* keys + restore() on DOMContentLoaded)
+      // takes over from here · if the user's last sidebar selection
+      // was a specific room / reports / notes, that fires AFTER
+      // app.init and overrides this composer landing.
       this.closeRoom();
     },
 
-    /** Choose a sensible default room when none is in the URL hash. */
-    firstSelectableRoom() {
-      if (!this.rooms || !this.rooms.length) return null;
-      const rank = (status) => (status === "live" ? 0 : status === "paused" ? 1 : 2);
-      const sorted = this.rooms.slice().sort((a, b) => {
-        const dr = rank(a.status) - rank(b.status);
-        if (dr !== 0) return dr;
-        return (b.createdAt || 0) - (a.createdAt || 0);
-      });
-      return sorted[0] || null;
-    },
-
     navigateToRoom(roomId) {
       location.hash = "#/r/" + roomId;
     },
@@ -648,7 +638,15 @@
       this.currentRoom = null;
       this.currentMessages = [];
       this.currentMembers = [];
-      this.currentChair = null;
+      // `currentChair` is NOT reset · the chair is a structural
+      // singleton (one moderator agent in the catalog, same across
+      // every room), and the sidebar's Chair section keys off it
+      // whether or not a room is loaded. Earlier this line read
+      // `this.currentChair = null;`, which dropped the Chair row
+      // from the Agents tab any time the user landed on the no-
+      // room state — the chair would re-appear the moment a room
+      // re-opened (since `openRoom` re-sets it from data.chair),
+      // but the empty + composer states looked broken.
       this.currentQueue = [];
       this.currentRound = { spoken: 0, total: 0 };
       this.currentKeyPoints = [];
@@ -912,11 +910,37 @@
           }
         } else if (kind === "brief-started") {
           this.markBriefEvent();
+          // Mode determines BOTH the seeded stage map and which pip
+          // rail renderBriefStages picks. Bento, magazine, and
+          // newspaper modes each emit only 2 stage events (extract
+          // + write), so seeding the 7-stage layout for a
+          // structured-mode brief leaves the 5 middle pips forever
+          // pending — the rail then renders with a row of dead
+          // black pips between extract and write. Read mode from
+          // the payload (server includes it on brief-started for
+          // exactly this reason) and seed accordingly.
+          const isStructured = this.isStructuredBriefMode(payload.mode);
+          const briefMode = isStructured ? payload.mode : "research-note";
+          const seededStages = isStructured
+            ? {
+                extract: { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                write:   { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+              }
+            : {
+                extract:             { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                compose:             { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                "scaffold-anchor":   { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                "scaffold-findings": { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                "scaffold-cluster":  { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                "scaffold-actions":  { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+                write:               { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
+              };
           const newBrief = {
             id: payload.briefId,
             title: "Generating…",
             bodyMd: "",
             style: payload.style || "mckinsey",
+            mode: briefMode,
             // Carry the supplement so the tab strip can render the
             // in-progress brief with its supplement label ("xxx 视角")
             // immediately, instead of waiting for brief-final to
@@ -931,21 +955,13 @@
             language: payload.language === "zh" ? "zh" : "en",
             pipelineStartedAt: Date.now(),
             createdAt: Date.now(),
-            // Stage checklist · seeded with all seven stages in pending
-            // state (extract / compose / 4 scaffold sub-stages / write).
-            // 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: {
-              extract:             { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              compose:             { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              "scaffold-anchor":   { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              "scaffold-findings": { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              "scaffold-cluster":  { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              "scaffold-actions":  { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-              write:               { status: "pending", detail: "", progress: null, startedAt: null, etaSec: null },
-            },
+            // 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,
           };
           this.currentBrief = newBrief;
           // Insert the in-progress brief into currentBriefs so the tab
@@ -1076,10 +1092,14 @@
               }
             }
           }
-          // Typing-SFX presence cue · same as message-token. Ticks
-          // even on off-tab briefs so the user has aural awareness
-          // that the brief writer is making progress.
-          window.boardroomTypingSfx && window.boardroomTypingSfx.tick();
+          // No typing-SFX during the brief writer's Stage 3 stream.
+          // The write phase is a long, off-screen streaming pass (the
+          // user is usually reading prior content or doing something
+          // else while the report builds) — a continuous click track
+          // for tens of seconds reads as background noise, not a
+          // presence cue. Director / chair turns still tick because
+          // those land in the active conversation the user is
+          // following.
         } else if (kind === "brief-final") {
           this.markBriefEvent();
           const target = this._briefById(payload.briefId);
@@ -1484,6 +1504,196 @@
       return false;
     },
 
+    /** Has the brief got its body content yet? Mode-aware check ·
+     *  research-note briefs land their content in `bodyMd`; bento
+     *  briefs land theirs in `bodyJson` and leave bodyMd empty. The
+     *  card-rendering / placeholder-detection / generating-check
+     *  logic uses this everywhere so a bento brief doesn't stay
+     *  stuck in "generating…" state after the BentoScaffold has
+     *  actually been persisted.
+     *
+     *  Without this helper, a successful bento generation followed
+     *  by a page refresh hid the View Report button forever (the
+     *  card thought it was still generating because bodyMd was empty
+     *  — which is the steady-state shape for bento, not an
+     *  in-flight signal). */
+    /** True for any structured-output mode — magazine, newspaper,
+     *  ppt — that persists to body_json instead of body_md and
+     *  runs the single-pass chair-LLM pipeline (extract + write
+     *  only, no Stage 2/3 scaffold/write). Centralised so future
+     *  modes touch one place. */
+    isStructuredBriefMode(mode) {
+      return mode === "magazine" || mode === "newspaper" || mode === "ppt";
+    },
+
+    briefHasBody(b) {
+      if (!b) return false;
+      if (this.isStructuredBriefMode(b.mode)) {
+        // Magazine, newspaper + ppt all populate bodyJson with the
+        // structured scaffold. An empty object isn't a body; check
+        // for at least a title field.
+        const j = b.bodyJson;
+        return !!(j && typeof j === "object" && (j.title || j.milestones));
+      }
+      // Default research-note · body lives in markdown.
+      return !!(b.bodyMd && b.bodyMd.trim());
+    },
+
+    /** Build the right viewer URL for a brief based on its mode.
+     *  · 'research-note' (default · or unknown) → `/report.html?r=R&b=B`
+     *  · 'magazine' → `/magazine.html?b=B`
+     *  · 'newspaper' → `/newspaper.html?b=B`
+     *  · 'ppt' → `/ppt.html?b=B`
+     *
+     *  Structured renderers don't need the room context · the brief
+     *  is self-contained. Used by the View Report button, the
+     *  brief-picker popover, the open-report link in the brief card,
+     *  and the All Reports page — one helper so a future renderer
+     *  route change touches one place. */
+    briefViewerHref(b, roomId) {
+      if (!b || !b.id) return null;
+      const id = encodeURIComponent(b.id);
+      if (b.mode === "magazine") return `/magazine.html?b=${id}`;
+      if (b.mode === "newspaper") return `/newspaper.html?b=${id}`;
+      if (b.mode === "ppt") return `/ppt.html?b=${id}`;
+      const r = roomId ? encodeURIComponent(roomId) : "";
+      return r ? `/report.html?r=${r}&b=${id}` : `/report.html?b=${id}`;
+    },
+
+    /** Human-readable label for a brief's mode · used in the brief-card
+     *  banner so the user sees which renderer the report will use
+     *  before they open it.
+     *
+     *  IMPORTANT · the user-facing label for `research-note` is
+     *  "Report", NOT "Research Note". The internal mode key stays as
+     *  `research-note` (storage column, API value, picker option id),
+     *  but every user-facing surface — the mode picker (`renderBrief-
+     *  ModePicker` line ~1662 in this file), the report viewer's
+     *  header, etc. — calls it "Report". Keep this map in sync with
+     *  the picker labels rather than inventing a fresh user-facing
+     *  vocabulary.
+     *
+     *  Legacy rows without an explicit `mode` default to "Report" by
+     *  the same backfill the storage layer applies. */
+    briefModeLabel(b) {
+      const mode = (b && b.mode) || "research-note";
+      switch (mode) {
+        case "magazine":  return "Magazine";
+        case "newspaper": return "Newspaper";
+        case "ppt":       return "Slides";
+        default:          return "Report";
+      }
+    },
+
+    /** Render the report-mode picker · four icon-tile cards that let
+     *  the user pick between research-note, magazine, newspaper, and
+     *  ppt (slides). Each tile shows a custom monoline SVG that
+     *  visually mirrors that mode's layout — research-note as a memo,
+     *  magazine as a masthead + numeral block + small cards,
+     *  newspaper as a banner + 3-column text grid, ppt as a slide
+     *  rectangle with bullet lines. The native radio is visually
+     *  hidden (kept in the DOM for a11y / keyboard nav).
+     *
+     *  Used by both the adjourn overlay (filing the report at
+     *  adjourn-time / generate-brief flow) AND the supplement
+     *  overlay (regenerating with an extra perspective). The picker
+     *  reads its selected option via `input[name="brief-mode"]:checked`
+     *  from inside whatever overlay it lives in · the click-to-toggle
+     *  handler scopes to the `.adjourn-mode-options` container so it
+     *  works for any overlay embedding the picker. */
+    renderBriefModePicker(defaultMode) {
+      const safe = this.isStructuredBriefMode(defaultMode) ? defaultMode : "research-note";
+      // Icon SVGs · `currentColor` lets each tile pick up its hover /
+      // selected accent from the parent `.adjourn-mode-icon { color }`
+      // rule. Stroke hierarchy is deliberate · main outlines at 1.0,
+      // a single emphasis rule at 1.2 (newspaper headline + magazine
+      // masthead bar), body details at 0.8. Filled blocks soften to
+      // currentColor at 0.5 opacity so the lime selected-state reads
+      // as a tint rather than a slab. The 24-unit viewBox renders at
+      // 36px on screen → 1.5× scale, so stroke-1.0 is a clean 1.5px.
+      const ICONS = {
+        "research-note": `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M6 3h9l4 4v14H6z"/>
+            <path d="M15 3v4h4"/>
+            <line x1="9" y1="12" x2="16" y2="12"/>
+            <line x1="9" y1="15" x2="16" y2="15"/>
+            <line x1="9" y1="18" x2="14" y2="18"/>
+          </svg>`,
+        "magazine": `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="3" y1="4" x2="21" y2="4" stroke-width="1.2"/>
+            <rect x="3" y="7" width="6" height="9" rx="1.2"/>
+            <rect x="11" y="7" width="4.5" height="4" rx="1.2"/>
+            <rect x="16.5" y="7" width="4.5" height="4" rx="1.2"/>
+            <rect x="11" y="12" width="4.5" height="4" rx="1.2"/>
+            <rect x="16.5" y="12" width="4.5" height="4" rx="1.2"/>
+            <rect x="3" y="18" width="18" height="3" rx="1" fill="currentColor" fill-opacity="0.45" stroke="none"/>
+          </svg>`,
+        "newspaper": `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="3" width="18" height="2.5" fill="currentColor" fill-opacity="0.85" stroke="none"/>
+            <line x1="7" y1="8" x2="17" y2="8" stroke-width="1.2"/>
+            <line x1="4" y1="11.5" x2="8" y2="11.5" stroke-width="0.8"/>
+            <line x1="4" y1="13.5" x2="8" y2="13.5" stroke-width="0.8"/>
+            <line x1="4" y1="15.5" x2="6.5" y2="15.5" stroke-width="0.8"/>
+            <line x1="10" y1="11.5" x2="14" y2="11.5" stroke-width="0.8"/>
+            <line x1="10" y1="13.5" x2="14" y2="13.5" stroke-width="0.8"/>
+            <line x1="10" y1="15.5" x2="12.5" y2="15.5" stroke-width="0.8"/>
+            <line x1="16" y1="11.5" x2="20" y2="11.5" stroke-width="0.8"/>
+            <line x1="16" y1="13.5" x2="20" y2="13.5" stroke-width="0.8"/>
+            <line x1="16" y1="15.5" x2="18.5" y2="15.5" stroke-width="0.8"/>
+            <line x1="3" y1="18.5" x2="21" y2="18.5" stroke-width="0.9"/>
+          </svg>`,
+        "ppt": `
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="4" width="18" height="13" rx="1"/>
+            <line x1="7" y1="9" x2="14" y2="9" stroke-width="1.2"/>
+            <line x1="7" y1="12" x2="17" y2="12" stroke-width="0.8"/>
+            <line x1="7" y1="14" x2="15" y2="14" stroke-width="0.8"/>
+            <circle cx="5.5" cy="12" r="0.6" fill="currentColor" stroke="none"/>
+            <circle cx="5.5" cy="14" r="0.6" fill="currentColor" stroke="none"/>
+            <line x1="10" y1="20" x2="14" y2="20" stroke-width="1"/>
+            <line x1="12" y1="17" x2="12" y2="20" stroke-width="0.6"/>
+          </svg>`,
+      };
+      const opt = (value, title, deck, primary) => `
+            <label class="adjourn-mode-option${primary ? " adjourn-mode-option-primary" : ""}${safe === value ? " on" : ""}">
+              <input type="radio" name="brief-mode" value="${value}"${safe === value ? " checked" : ""}>
+              <div class="adjourn-mode-icon">${ICONS[value] || ""}</div>
+              <div class="adjourn-mode-body">
+                <div class="adjourn-mode-title">${title}</div>
+                <div class="adjourn-mode-deck">${deck}</div>
+              </div>
+            </label>`;
+      return `
+        <div class="adjourn-mode-picker" data-mode-picker>
+          <div class="adjourn-mode-label">// report format</div>
+          <div class="adjourn-mode-options adjourn-mode-options-4">
+            ${opt("research-note", "Report", "Long-form markdown · bottom line, findings, recommendations.", true)}
+            ${opt("magazine", "Magazine", "Editorial spread · cover line, 5 cards, dark closer.")}
+            ${opt("newspaper", "Newspaper", "Broadsheet · banner masthead, 3-column editorial.")}
+            ${opt("ppt", "Slides", "Slide deck · 7-9 slides, arrow-key navigation, present mode.")}
+          </div>
+        </div>`;
+    },
+
+    /** Read the user's last-picked report mode from localStorage so the
+     *  picker defaults to their previous choice. Falls back to
+     *  'research-note' on first run / private mode. */
+    lastBriefMode() {
+      try {
+        const v = localStorage.getItem("pb.briefMode");
+        return this.isStructuredBriefMode(v) ? v : "research-note";
+      } catch { return "research-note"; }
+    },
+    saveLastBriefMode(mode) {
+      try {
+        const safe = this.isStructuredBriefMode(mode) ? mode : "research-note";
+        localStorage.setItem("pb.briefMode", safe);
+      } catch { /* private-mode etc. — silently ignore */ }
+    },
+
     /** Pure cache read · returns true when the local app.keys map
      *  reports any model provider as configured. Used by the gate
      *  and (via wrappers) anywhere downstream UI needs the answer
@@ -1647,6 +1857,9 @@
     async adjournRoom(opts) {
       if (!this.currentRoomId) return;
       const skipBrief = !!(opts && opts.skipBrief);
+      const mode = opts && this.isStructuredBriefMode(opts.mode)
+        ? opts.mode
+        : "research-note";
       // Pre-flight · adjourn-with-brief triggers the brief writer
       // pipeline (3 LLM stages). When skipBrief=true the chair just
       // posts the no-brief marker without LLM calls, so we let it
@@ -1657,7 +1870,7 @@
         {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify(skipBrief ? { skipBrief: true } : {}),
+          body: JSON.stringify(skipBrief ? { skipBrief: true } : { mode }),
         },
       );
       if (!r.ok) {
@@ -1691,6 +1904,10 @@
       const confirmTxt = isGen ? "[ Generate ]" : "[ Adjourn & 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 defaultMode = this.lastBriefMode();
       const html = `
         <div class="adjourn-overlay" id="adjourn-overlay" role="dialog" aria-modal="true" data-adjourn-mode="${this.escape(mode)}">
           <div class="adjourn-backdrop" data-adjourn-close></div>
@@ -1711,9 +1928,12 @@
 
             <div class="adjourn-body">
               <div class="adjourn-summary">
-                <div class="adjourn-summary-row">
+                <div class="adjourn-summary-row adjourn-summary-row-subject">
                   <span class="adjourn-summary-key">// subject</span>
-                  <span class="adjourn-summary-val">${this.escape(subjectTxt)}</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>
@@ -1725,10 +1945,12 @@
                 </div>
               </div>
               <p class="adjourn-summary-note">
-                The chair compiles a standard report from the room's transcript —
-                situation, key findings, and implications. The room is marked
-                adjourned and the report is filed in the chat.
+                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.
               </p>
+
+              ${this.renderBriefModePicker(defaultMode)}
             </div>
 
             <footer class="adjourn-foot">
@@ -1749,6 +1971,19 @@
       wrap.innerHTML = html.trim();
       document.body.appendChild(wrap.firstChild);
       document.body.style.overflow = "hidden";
+      // Subject clamp · the subject value is clamped to 3 lines by
+      // default (a long room title shouldn't crowd the rest of the
+      // overlay). After mount, measure whether the text actually
+      // overflows the clamp — only then reveal the Show more / less
+      // toggle. rAF lets the browser settle the initial layout so
+      // scrollHeight is meaningful.
+      requestAnimationFrame(() => {
+        const subjEl = document.querySelector("[data-adjourn-subject]");
+        const subjBtn = document.querySelector("[data-adjourn-subject-toggle]");
+        if (subjEl && subjBtn && subjEl.scrollHeight > subjEl.clientHeight + 1) {
+          subjBtn.hidden = false;
+        }
+      });
       // Esc closes the overlay. Listener auto-detaches on close so
       // we don't accumulate handlers across opens.
       this._adjournEsc = (ev) => {
@@ -1788,6 +2023,12 @@
         confirm: "[ Regenerate ]",
         confirmBusy: "[ Regenerating… ]",
       };
+      // Default the picker to the user's last picked mode — same
+      // behaviour as the adjourn (Generate) flow, so the picker reads
+      // consistently across both surfaces. The parent brief's mode is
+      // available if needed, but the user's most recent explicit
+      // choice wins.
+      const defaultMode = this.lastBriefMode();
       const html = `
         <div class="supplement-overlay" id="supplement-overlay" role="dialog" aria-modal="true">
           <div class="supplement-backdrop" data-supplement-close></div>
@@ -1806,6 +2047,7 @@
             <div class="supplement-body">
               <textarea class="supplement-input" data-supplement-input rows="6" placeholder="${this.escape(t.placeholder)}"></textarea>
               <p class="supplement-hint">${this.escape(t.hint)}</p>
+              ${this.renderBriefModePicker(defaultMode)}
             </div>
             <footer class="supplement-foot">
               <button type="button" class="supplement-cancel" data-supplement-close>${this.escape(t.cancel)}</button>
@@ -2019,7 +2261,7 @@
       const adjournedLine = room.adjournedAt
         ? `${t.adjournedAtPrefix} ${this.timeFmt(room.adjournedAt)}`
         : "";
-      const subjectShort = (room.subject || "(no subject)").slice(0, 140);
+      const subjectFull = room.subject || "(no subject)";
 
       // Tone + intensity inherit from parent. Trigger uses the same
       // `.cmp-dd` markup as the new-room composer's toolbar buttons —
@@ -2069,8 +2311,11 @@
             </header>
             <div class="supplement-body">
               <div class="followup-parent-card">
-                <div class="followup-parent-subject">${this.escape(subjectShort)}</div>
-                <div class="followup-parent-meta">${this.escape(adjournedLine)}${adjournedLine && briefLine ? " · " : ""}${this.escape(briefLine)}</div>
+                <div class="followup-parent-subject is-clamped" data-followup-subject-text>${this.escape(subjectFull)}</div>
+                <div class="followup-parent-meta-row">
+                  <button type="button" class="followup-parent-subject-toggle" data-followup-subject-toggle hidden>Show more</button>
+                  <div class="followup-parent-meta">${this.escape(adjournedLine)}${adjournedLine && briefLine ? " · " : ""}${this.escape(briefLine)}</div>
+                </div>
                 <div class="followup-parent-note">${this.escape(t.contextNote)}</div>
               </div>
 
@@ -2144,6 +2389,24 @@
       // so listeners are GC'd when the modal is removed.
       const overlayEl = document.getElementById("followup-overlay");
       if (overlayEl) {
+        // Subject clamp · long parent-room subjects clamp to 2 lines
+        // by default. Post-mount measurement reveals the Show more /
+        // less toggle only when the text actually overflows. rAF
+        // settles initial layout so scrollHeight is meaningful.
+        const subjEl = overlayEl.querySelector("[data-followup-subject-text]");
+        const subjBtn = overlayEl.querySelector("[data-followup-subject-toggle]");
+        if (subjEl && subjBtn) {
+          requestAnimationFrame(() => {
+            if (subjEl.scrollHeight > subjEl.clientHeight + 1) {
+              subjBtn.hidden = false;
+            }
+          });
+          subjBtn.addEventListener("click", (ev) => {
+            ev.preventDefault();
+            const expanded = subjEl.classList.toggle("is-clamped") === false;
+            subjBtn.textContent = expanded ? "Show less" : "Show more";
+          });
+        }
         const sameCheckbox = overlayEl.querySelector("[data-followup-same-cast]");
         const castBtn = overlayEl.querySelector("[data-followup-cast-btn]");
         if (sameCheckbox && castBtn) {
@@ -2455,6 +2718,17 @@
         if (input) input.focus();
         return;
       }
+      // Read the report-mode picker (research-note / bento). The
+      // overlay defaults the picker to the existing brief's mode, so a
+      // plain "regenerate with this perspective" keeps the same
+      // format. Persisting the choice keeps the picker stable next
+      // time. Server-side the same `/api/rooms/:id/brief` route reads
+      // `mode` regardless of whether the call came from supplement or
+      // generate-brief, so no backend change is needed.
+      const briefModeInput = overlay.querySelector('input[name="brief-mode"]:checked');
+      const v = briefModeInput && briefModeInput.value;
+      const briefMode = this.isStructuredBriefMode(v) ? v : "research-note";
+      this.saveLastBriefMode(briefMode);
       // Frontend in-flight guard · without this, a slow server roundtrip
       // gives the user time to click confirm twice (or to close+reopen
       // the overlay and click again). Each click was firing its own POST,
@@ -2473,7 +2747,7 @@
           {
             method: "POST",
             headers: { "content-type": "application/json" },
-            body: JSON.stringify({ supplement: text }),
+            body: JSON.stringify({ supplement: text, mode: briefMode }),
           },
         );
         if (!r.ok) {
@@ -2504,7 +2778,7 @@
      *  whether streaming is actually in flight. */
     isBriefPlaceholder(brief, room) {
       if (!brief) return false;
-      if (brief.bodyMd && brief.bodyMd.trim()) return false;
+      if (this.briefHasBody(brief)) return false;
       if (!room) return true;
       // Title matches the seed (room subject) → never got an updated title.
       // Or title is the literal "Generating…" placeholder.
@@ -2621,7 +2895,7 @@
       const target = (this.currentBriefs || []).find((b) => b.id === briefId);
       // System UI · always English. Confirm + alert dialogs are app
       // chrome and stay fixed-string regardless of brief language.
-      const isStillGenerating = !!(target && (!target.bodyMd || !target.bodyMd.trim()));
+      const isStillGenerating = !!(target && !this.briefHasBody(target));
       const confirmText = isStillGenerating
         ? "This report is still generating. Deleting will stop the generation and remove the report. This can't be undone."
         : (target?.supplement
@@ -2723,17 +2997,23 @@
       const mode = overlay.getAttribute("data-adjourn-mode") || "adjourn";
       const isGen = mode === "generate-brief";
       const skipPicked = overlay.querySelector(".adjourn-skip-btn.picked") !== null;
+      // Read the report-mode picker (research-note / bento). Persist the
+      // choice so the picker defaults to the same option next time.
+      const briefModeInput = overlay.querySelector('input[name="brief-mode"]:checked');
+      const v = briefModeInput && briefModeInput.value;
+      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… ]";
       if (btn) { btn.disabled = true; btn.textContent = busyLabel; }
       try {
         if (isGen) {
-          await this.generateBriefForAdjournedRoom();
+          await this.generateBriefForAdjournedRoom(briefMode);
         } else if (skipPicked) {
           await this.adjournRoom({ skipBrief: true });
         } else {
-          await this.adjournRoom({});
+          await this.adjournRoom({ mode: briefMode });
         }
         this.closeAdjournOverlay();
       } catch (e) {
@@ -2746,8 +3026,9 @@
      *  whose user originally skipped the brief. Server emits the same
      *  brief-started / brief-token / brief-final SSE events as a normal
      *  adjourn, so the existing handlers in connectSSE handle the rest. */
-    async generateBriefForAdjournedRoom() {
+    async generateBriefForAdjournedRoom(mode) {
       if (!this.currentRoomId) return;
+      const briefMode = this.isStructuredBriefMode(mode) ? mode : "research-note";
       // Pre-flight · the brief writer is a 3-stage LLM pipeline (per-
       // director extract → composer → final write). All require a key.
       if (!(await this.requireModelKey())) return;
@@ -2756,7 +3037,7 @@
         {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: "{}",
+          body: JSON.stringify({ mode: briefMode }),
         },
       );
       if (!r.ok) {
@@ -3627,6 +3908,47 @@
       this.composerMode = "room";
     },
 
+    /** Toggle the `isPinned` flag for an agent · the sidebar pin
+     *  button calls this. Persists to the server (PATCH /api/agents/:id
+     *  { isPinned }), updates local state in place, then re-renders
+     *  the sidebar so the row moves between the Pinned / Custom /
+     *  Core buckets. Optimistic with rollback on failure: we flip the
+     *  flag locally + repaint immediately, then revert if the PATCH
+     *  fails — no waiting on the round-trip for visible feedback. */
+    async togglePinAgent(agentId) {
+      if (!agentId) return;
+      const idx = (this.agents || []).findIndex((a) => a && a.id === agentId);
+      if (idx < 0) return;
+      const agent = this.agents[idx];
+      const prev = !!agent.isPinned;
+      const next = !prev;
+      // Optimistic flip · render immediately so the click feels instant.
+      agent.isPinned = next;
+      this.agentsById[agent.id] = agent;
+      this.renderSidebarAgents();
+      try {
+        const r = await fetch("/api/agents/" + encodeURIComponent(agentId), {
+          method: "PATCH",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ isPinned: next }),
+        });
+        if (!r.ok) throw new Error("HTTP " + r.status);
+        // Server returns the updated row · merge the canonical fields
+        // back in so any side-effect updates (updated_at, etc.) land.
+        const updated = await r.json();
+        if (updated && updated.id) {
+          this.agents[idx] = updated;
+          this.agentsById[updated.id] = updated;
+        }
+      } catch (e) {
+        // Rollback · keep the UI honest about persistence failure.
+        agent.isPinned = prev;
+        this.agentsById[agent.id] = agent;
+        this.renderSidebarAgents();
+        alert((e && e.message ? e.message : "pin failed") + " — try again.");
+      }
+    },
+
     /** Render the sidebar's Agents panel from the live agent catalog.
      *  Three buckets so the seeded directors keep their familiar
      *  groupings while user-created ones stack into a Custom section
@@ -4346,7 +4668,44 @@
       if (brief) brief.innerHTML = "";
 
       const chatScroller = document.querySelector(".chat");
-      if (chatScroller) chatScroller.scrollTop = 0;
+      if (chatScroller) {
+        chatScroller.scrollTop = 0;
+        // Mark the chat as hosting a composer so the CSS rule
+        // `.chat.chat--composer` flips it to a grid with
+        // `align-content: center` — vertically centring the
+        // composer when it fits the viewport. When .cmp's natural
+        // height > .chat height we also add `.chat--composer-overflow`
+        // (via updateComposerOverflow) which switches to a layout
+        // where the .cmp-fold (hero + input) is min-height: 100% of
+        // the chat with content centred inside, and .cmp-starters
+        // flow below as scrollable extras. Removed in renderChat()
+        // when real chat messages take over.
+        chatScroller.classList.add("chat--composer");
+        this.updateComposerOverflow();
+      }
+    },
+
+    /** Toggle `.chat--composer-overflow` on the chat scroller based on
+     *  whether the composer's natural height exceeds the visible chat
+     *  area. In overflow mode the hero (`.cmp-fold`) anchors at the
+     *  viewport centre and `.cmp-starters` flow below the fold;
+     *  without overflow, the parent's `align-content: center` keeps
+     *  the whole composer block centred. Called after composer render
+     *  and on window resize. */
+    updateComposerOverflow() {
+      const chat = document.querySelector(".chat.chat--composer");
+      if (!chat) return;
+      const cmp = chat.querySelector(".cmp");
+      if (!cmp) return;
+      requestAnimationFrame(() => {
+        chat.classList.remove("chat--composer-overflow");
+        const overflows = cmp.scrollHeight > chat.clientHeight + 1;
+        chat.classList.toggle("chat--composer-overflow", overflows);
+      });
+      if (!this._composerResizeAttached) {
+        this._composerResizeAttached = true;
+        window.addEventListener("resize", () => this.updateComposerOverflow());
+      }
     },
 
     /** Open the All Reports page · cross-room brief index in a card
@@ -4723,16 +5082,34 @@
       }
     },
 
-    /** Single reading-list row · room kicker, title, judgement excerpt,
+    /** Single reading-list row · room kicker, title, subtitle excerpt,
      *  meta tail. No card chrome — entries are separated by a hairline
-     *  inside the list. */
+     *  inside the list.
+     *
+     *  Subtitle source by mode:
+     *    · Report     → bodyJson.bottomLine.judgement
+     *    · Magazine   → bodyJson.kicker
+     *    · Newspaper  → bodyJson.kicker
+     *  All three fall back to a cleaned-up first content paragraph
+     *  from bodyMd if the structured field is missing. */
     renderReportItemHtml(b) {
       const json = b.bodyJson || {};
       const bottomLine = json.bottomLine || {};
-      const judgement = (bottomLine.judgement || "").trim() || (b.bodyMd || "").slice(0, 240);
+      // Pull the right subtitle for this mode. Magazine / newspaper
+      // carry their deck/lede text in `kicker`; Report carries it
+      // in `bottomLine.judgement`. Either may be missing on legacy
+      // / partial briefs — fall back to the first prose paragraph
+      // from bodyMd.
+      const subtitle = (
+        (bottomLine.judgement || "").trim() ||
+        (json.kicker || "").trim() ||
+        this._extractBriefExcerpt(b.bodyMd) ||
+        ""
+      );
       const time = this.relTime(b.createdAt) || "";
       const roomLabel = b.roomName || b.roomSubject || "—";
       const roomNumLabel = b.roomNumber != null ? `#${String(b.roomNumber).padStart(3, "0")}` : "";
+      const typeLabel = this.briefModeLabel(b);
       const findingsCount = Array.isArray(json.headlineFindings) ? json.headlineFindings.length : 0;
       const positionsCount = Array.isArray(json.positions) ? json.positions.length : 0;
       const metaParts = [];
@@ -4749,16 +5126,45 @@
               <span class="reports-item-num">${this.escape(roomNumLabel)}</span>
               <span class="reports-item-sep">·</span>
               <span class="reports-item-room">${this.escape(roomLabel)}</span>
+              <span class="reports-item-sep">·</span>
+              <span class="reports-item-type" data-mode="${this.escape(((b && b.mode) || "research-note").toLowerCase())}">${this.escape(typeLabel)}</span>
               <span class="reports-item-time">${this.escape(time)}</span>
             </div>
             <h3 class="reports-item-title">${this.escape(b.title || "Untitled brief")}</h3>
-            ${judgement ? `<p class="reports-item-judgement">${this.escape(judgement)}</p>` : ""}
+            ${subtitle ? `<p class="reports-item-judgement">${this.escape(subtitle)}</p>` : ""}
             ${metaHtml}
           </a>
         </li>
       `;
     },
 
+    /** Pull the first prose paragraph from a brief's bodyMd as a
+     *  subtitle fallback. Skips markdown headers, code fences, table
+     *  rows, list markers, blockquotes — finds the first content line
+     *  that reads as prose. Strips inline markdown (bold/italic/code/
+     *  link syntax) so the excerpt reads as plain text. */
+    _extractBriefExcerpt(md) {
+      if (!md || typeof md !== "string") return "";
+      const lines = md.split("\n");
+      for (const line of lines) {
+        const t = line.trim();
+        if (!t) continue;
+        if (t.startsWith("#")) continue;       // markdown heading
+        if (t.startsWith("```")) continue;     // code fence
+        if (t.startsWith("|") || /^[-=]{3,}$/.test(t)) continue; // table / hr
+        if (t.startsWith("> ")) continue;      // blockquote
+        if (/^[-*+]\s/.test(t)) continue;      // list item
+        if (/^\d+\.\s/.test(t)) continue;      // ordered list item
+        const cleaned = t
+          .replace(/\*\*([^*]+)\*\*/g, "$1")
+          .replace(/\*([^*]+)\*/g, "$1")
+          .replace(/`([^`]+)`/g, "$1")
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+        if (cleaned.length >= 12) return cleaned.slice(0, 240);
+      }
+      return md.slice(0, 240).replace(/\s+/g, " ").trim();
+    },
+
     // ── All Notes view · chairman's notes index ───────────────
     /** Open the All Notes page · cross-room saved-excerpt index in
      *  the same main-view-replacement pattern as openAllReports.
@@ -5437,10 +5843,12 @@
       // of which composer we're switching to.
       document.querySelectorAll("[data-reports-trigger].active").forEach((el) => el.classList.remove("active"));
       document.querySelectorAll("[data-notes-trigger].active").forEach((el) => el.classList.remove("active"));
-      // If the URL still carries the All-Reports hash from a prior
-      // navigation, drop it — otherwise refresh would bounce the user
-      // back to the reports view.
-      if (/^#\/reports$/i.test(location.hash || "")) {
+      // If the URL still carries an All-Reports / All-Notes hash from
+      // a prior navigation, drop it — otherwise refresh would bounce
+      // the user back to that view (handleRoute matches the hash on
+      // boot and beats the sidebar-restore path that would otherwise
+      // honour ROOMS_KEY="new").
+      if (/^#\/(reports|notes)$/i.test(location.hash || "")) {
         try { history.replaceState(null, "", location.pathname + location.search); } catch { /* ignore */ }
       }
 
@@ -5481,7 +5889,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 · a thesis you want stress-tested",
+        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?",
         convene: "Convene",
         tuneLabel: "tune",
         starterLabel: "starter",
@@ -6610,7 +7018,7 @@
               year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
             })
           : "";
-        const href = `/report.html?r=${encodeURIComponent(roomId)}&b=${encodeURIComponent(b.id)}`;
+        const href = this.briefViewerHref(b, roomId);
         return `
           <a class="brief-picker-row" href="${this.escape(href)}" target="_blank" rel="noopener" data-brief-picker-row data-brief-id="${this.escape(b.id)}">
             <span class="brief-picker-num">${this.escape(num)}</span>
@@ -7226,18 +7634,16 @@
 
       const tone = r.mode || "constructive";
       const intensity = r.intensity || "sharp";
-      const style = r.briefStyle || "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 = `paused ${this.relTime(r.pausedAt)} ago`;
-      } else if (r.status === "adjourned" && r.adjournedAt) {
-        stamp = `adjourned ${this.relTime(r.adjournedAt)} ago`;
-      } else if (r.status === "live" && r.createdAt) {
-        stamp = `opened ${this.relTime(r.createdAt)} ago`;
-      }
+      // 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" :
+        ""
+      );
 
       // Three primary actions, one per state — CSS hides the wrong ones based
       // on html[data-status]. Per PRD §5.2.3:
@@ -7250,20 +7656,24 @@
       // the DOM stays stable; the collapsed state flips room-head's
       // grid template to a 3-track layout so this button takes the
       // leading auto-track slot.
+      //
+      // Compact two-row layout: kicker (mono, all the meta) + subject.
+      // Replaces the prior three-row stack (badge+id / subject /
+      // 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.
       head.innerHTML = `
         <button type="button" class="room-head-expand" data-sidebar-expand title="Expand sidebar" aria-label="Expand sidebar"></button>
         <div class="room-info">
-          <div class="room-id">
-            <span class="room-name">Meeting Room</span>
-            <span class="session-num">// ROOM #${r.number} · ${this.escape(tone.toUpperCase())}</span>
+          <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-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>` : ""}
           </div>
           <h1 class="room-subject" title="${this.escape(r.subject)}">${this.escape(r.subject)}</h1>
-          <div class="room-meta" data-room-meta>
-            <span class="meta-tag tag-tone" data-tone-tip="${this.escape(TONE_TIPS[tone] || "")}"><span class="k">tone</span><span class="v">${this.escape(tone)}</span></span>
-            <span class="meta-tag tag-intensity"><span class="k">intensity</span><span class="v">${this.escape(intensity)}</span></span>
-            <span class="meta-tag tag-report"><span class="k">report</span><span class="v">${this.escape(style)}</span></span>
-            ${stamp ? `<span class="meta-stamp">${this.escape(stamp)}</span>` : ""}
-          </div>
         </div>
         <div class="head-actions">
           <div class="head-cast">${castHtml}</div>
@@ -7280,7 +7690,7 @@
                 // opens the picker.
                 const briefs = Array.isArray(this.currentBriefs) ? this.currentBriefs : [];
                 const multi = briefs.length > 1;
-                const directHref = `/report.html?r=${this.escape(r.id)}${this.currentBrief.id ? `&b=${this.escape(this.currentBrief.id)}` : ""}`;
+                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>`;
                 }
@@ -7296,8 +7706,9 @@
       // overflow:hidden chain (.main / .main-view both clip absolutely-
       // positioned descendants and CAN'T be relaxed without breaking
       // chat scroll). Body-attached fixed-position tooltip is the only
-      // reliable approach.
-      const toneTag = head.querySelector(".meta-tag.tag-tone[data-tone-tip]");
+      // reliable approach. Anchor moved from the old .meta-tag pill to
+      // .kicker-tone in the compact two-row header.
+      const toneTag = head.querySelector(".kicker-tone[data-tone-tip]");
       if (toneTag) {
         toneTag.addEventListener("mouseenter", () => this.showToneTip(toneTag));
         toneTag.addEventListener("mouseleave", () => this.hideToneTip());
@@ -7342,6 +7753,14 @@
     renderChat() {
       const chat = document.querySelector("[data-chat-messages]");
       if (!chat) return;
+      // Strip the composer-centring class · real chat messages take
+      // over `[data-chat-messages]` here, and chat-message mode wants
+      // the default top-flow scroll (messages stack from the top).
+      const chatScroller = chat.closest(".chat");
+      if (chatScroller) {
+        chatScroller.classList.remove("chat--composer");
+        chatScroller.classList.remove("chat--composer-overflow");
+      }
       const messages = this.currentMessages.slice();
       const r = this.currentRoom;
       const banner = r
@@ -7872,7 +8291,7 @@
         // tight (~4 lines of body text) so even mid-length openers
         // collapse — the user can always one-click to read the full
         // text. Toggle handler lives at doc level (see init).
-        const isLongOpener = (m.body || "").length > 100;
+        const isLongOpener = (m.body || "").length > 80;
         // Follow-up rooms get an "origin" row above the question that
         // names the parent room (number + subject) and links back to
         // it via the hash route. Without this, a follow-up looks
@@ -8722,7 +9141,7 @@
         // a failed-brief tab becomes unreachable — clicking it just
         // re-renders whichever good brief the salvage path picks.
         const goodBrief = bypassSalvage ? null : (this.currentBriefs || []).find(
-          (x) => x && x.id !== b.id && !x.error && x.bodyMd && x.bodyMd.trim().length > 0,
+          (x) => x && x.id !== b.id && !x.error && this.briefHasBody(x),
         );
         if (goodBrief) {
           const failed = b;
@@ -8782,6 +9201,7 @@
             ${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">
@@ -8804,7 +9224,7 @@
         return;
       }
 
-      const generating = b.isGenerating === true || !b.bodyMd || b.title === "Generating…";
+      const generating = b.isGenerating === true || !this.briefHasBody(b) || b.title === "Generating…";
       const signed = this.currentMembers
         .map((a) => `<img src="${this.escape(a.avatarPath)}" alt="${this.escape(a.name)}" title="${this.escape(a.name)}">`)
         .join("");
@@ -8813,12 +9233,13 @@
         ? "GENERATING…"
         : "FILED · " + (b.createdAt ? this.timeFmt(b.createdAt) : this.timeFmt(Date.now()));
 
-      // Open Report links to /report.html with both r (room) and b
-      // (brief id) — the viewer uses b when present so refining
-      // shows the right version.
-      const reportHref = this.currentRoomId && b.id
-        ? `/report.html?r=${encodeURIComponent(this.currentRoomId)}&b=${encodeURIComponent(b.id)}`
-        : (this.currentRoomId ? `/report.html?r=${encodeURIComponent(this.currentRoomId)}` : null);
+      // Open Report URL · routes to /magazine.html or /newspaper.html
+      // for the structured modes and /report.html for research-note
+      // briefs (default). The structured renderers don't need the
+      // room id so the URL is shorter for those modes. See
+      // briefViewerHref for the routing table.
+      const reportHref = this.briefViewerHref(b, this.currentRoomId)
+        || (this.currentRoomId ? `/report.html?r=${encodeURIComponent(this.currentRoomId)}` : null);
 
       // Tab strip — already computed at the top of renderBrief as
       // `tabsStripHtml` so both error and success paths can mount it.
@@ -8837,6 +9258,7 @@
           ${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>
 
@@ -8955,11 +9377,47 @@
           "Writing the 3 Headline Findings",
           "Drafting Convergence + Divergence sections",
           "Composing Recommendations",
-          "Writing the Pre-mortem",
           "Surfacing New Questions",
           "Drafting the Strategic Planning Assumption",
           "Polishing the final pass",
         ],
+        // Magazine mode · same single-pass chair-LLM call but the
+        // emphasis is on editorial cover-line composition rather
+        // than infographic compression. Keyed under `magazine-write`
+        // and selected at render time when the brief's mode is
+        // magazine.
+        "magazine-write": [
+          "Drafting the cover headline",
+          "Writing the subdeck",
+          "Picking the 5 numbered cards",
+          "Sequencing the 3 setup steps",
+          "Selecting why-this-matters reasons",
+          "Stamping the masthead byline",
+        ],
+        // Newspaper mode · same single-pass chair-LLM call but voice
+        // shifts to broadsheet front-page journalism. Keyed under
+        // `newspaper-write` and selected at render time when the
+        // brief's mode is newspaper.
+        "newspaper-write": [
+          "Setting the banner headline",
+          "Writing the subdeck",
+          "Filing the three column stories",
+          "Drafting the bottom-line callout",
+          "Stacking the more-headings sidebar",
+          "Stamping the masthead date",
+        ],
+        // PPT mode · same single-pass chair-LLM call · biases toward
+        // slide-friendly short claims and one-idea-per-slide content.
+        // Keyed under `ppt-write` and selected at render time when
+        // the brief's mode is ppt.
+        "ppt-write": [
+          "Drafting the cover slide",
+          "Sketching the agenda",
+          "Writing milestone slides",
+          "Compressing recommendations to bullets",
+          "Sizing the data callouts",
+          "Stamping the closing takeaway",
+        ],
       },
       // System UI · always English. The `zh` key is kept as an alias
       // of `en` so any caller indexing BRIEF_SUBSTAGES["zh"] still
@@ -8980,7 +9438,7 @@
         }
         const stages = b.stages || {};
         const anyActive = Object.values(stages).some((s) => s && s.status === "active");
-        const generating = b.isGenerating === true || !b.bodyMd || b.title === "Generating…";
+        const generating = b.isGenerating === true || !this.briefHasBody(b) || b.title === "Generating…";
         if (!anyActive && !generating) {
           this.stopBriefStageTick();
           return;
@@ -9031,7 +9489,7 @@
       if (this._briefStallWatchTimer) return;
       const b = this.currentBrief;
       if (!b || !b.id || b.error) return;
-      const generating = b.isGenerating === true || !b.bodyMd || b.title === "Generating…";
+      const generating = b.isGenerating === true || !this.briefHasBody(b) || b.title === "Generating…";
       if (!generating) return;
       if (!this._lastBriefEventAt) this._lastBriefEventAt = Date.now();
       this._lastBriefHealthPollAt = 0;
@@ -9051,7 +9509,7 @@
     async tickBriefStallWatch() {
       const b = this.currentBrief;
       if (!b || b.error) { this.stopBriefStallWatch(); return; }
-      const generating = b.isGenerating === true || !b.bodyMd || b.title === "Generating…";
+      const generating = b.isGenerating === true || !this.briefHasBody(b) || b.title === "Generating…";
       if (!generating) { this.stopBriefStallWatch(); return; }
 
       const now = Date.now();
@@ -9112,27 +9570,43 @@
         ? (b.bodyMd.trim().match(/\S+/g) || []).length
         : 0;
 
-      // Stage definitions · 7 ordered cells. Must align with the wire
-      // format emitted by emitStage() in src/orchestrator/brief.ts:
+      // 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)
       //
-      //   extract → compose → scaffold-{anchor,findings,cluster,actions} → write
+      //   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)
       //
-      // The 4 scaffold sub-stages are driven by JSON-key arrival in the
-      // Stage 2 streaming buffer (see runStage2 / SCAFFOLD_TRIGGERS in
-      // brief.ts), so each pip transition reflects a real moment in the
-      // model's output — not a synthetic timer.
-      // System UI · always English regardless of brief language.
-      // The pipeline labels are the app's voice (chrome around the
+      // 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 STAGE_DEFS = [
-        { 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 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 meta = this.BRIEF_STAGE_META;
       const substages = (this.BRIEF_SUBSTAGES[lang] || this.BRIEF_SUBSTAGES.en);
@@ -9184,9 +9658,18 @@
       }
 
       // Rotating sub-line · advances every 3s within the active stage.
+      // Structured-mode write stages get their own rotator copy
+      // (`magazine-write` / `newspaper-write`) since the work is
+      // different from research-note's chapter-by-chapter write.
+      // Falls through to the regular stage key for every other
+      // stage / mode.
       let substageText = "";
-      if (activeStatus === "active" && substages[activeDef.key]?.length) {
-        const list = substages[activeDef.key];
+      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];
       }
 
@@ -9684,6 +10167,27 @@
       });
       return;
     }
+    // Brief-mode picker · clicking a label (or its radio) toggles the
+    // .on class on that option AND off on the siblings. Used by both
+    // the adjourn overlay and the supplement overlay. We scope to the
+    // picker's `.adjourn-mode-options` container (set in
+    // renderBriefModePicker) instead of a specific overlay id, so the
+    // same handler works wherever the picker is embedded. The native
+    // radio behaviour handles `:checked` state but we use a manual
+    // class for visual styling (left accent stripe + tint) since we
+    // can't `:has()` reliably on older browsers.
+    const modeOpt = e.target.closest(".adjourn-mode-option");
+    if (modeOpt) {
+      const group = modeOpt.closest(".adjourn-mode-options");
+      if (group) {
+        group.querySelectorAll(".adjourn-mode-option").forEach((el) => el.classList.remove("on"));
+        modeOpt.classList.add("on");
+        const radio = modeOpt.querySelector('input[type="radio"]');
+        if (radio) radio.checked = true;
+      }
+      // Don't preventDefault · let the label's native click behaviour
+      // also tick the radio for keyboard / a11y users.
+    }
     // Adjourn overlay · "skip report" footer button — clicking commits
     // immediately (mark picked + dispatch + close).
     if (e.target.closest("[data-adjourn-skip]")) {
@@ -9707,6 +10211,18 @@
       app.closeAdjournOverlay();
       return;
     }
+    // Adjourn overlay · subject Show more / less toggle. Flips the
+    // `is-clamped` class on the value span and swaps the button label.
+    const subjToggle = e.target.closest("[data-adjourn-subject-toggle]");
+    if (subjToggle) {
+      e.preventDefault();
+      const subjEl = document.querySelector("[data-adjourn-subject]");
+      if (subjEl) {
+        const expanded = subjEl.classList.toggle("is-clamped") === false;
+        subjToggle.textContent = expanded ? "Show less" : "Show more";
+      }
+      return;
+    }
     // Brief card · "Add a perspective" → opens the supplement overlay.
     if (e.target.closest("[data-brief-supplement]")) {
       e.preventDefault();