privateboard 0.1.7 → 0.1.8

package/public/app.js

@@ -912,11 +912,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 +957,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 +1094,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 +1506,192 @@
       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 — bento, magazine,
+     *  newspaper — 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 === "bento" || mode === "magazine" || mode === "newspaper";
+    },
+
+    briefHasBody(b) {
+      if (!b) return false;
+      if (this.isStructuredBriefMode(b.mode)) {
+        // Bento + magazine populate bodyJson with the BentoScaffold.
+        // 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`
+     *  · 'bento' → `/bento.html?b=B`
+     *  · 'magazine' → `/magazine.html?b=B`
+     *  · 'newspaper' → `/newspaper.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 === "bento") return `/bento.html?b=${id}`;
+      if (b.mode === "magazine") return `/magazine.html?b=${id}`;
+      if (b.mode === "newspaper") return `/newspaper.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 "bento":     return "Bento";
+        case "magazine":  return "Magazine";
+        case "newspaper": return "Newspaper";
+        default:          return "Report";
+      }
+    },
+
+    /** Render the report-mode picker · four icon-tile cards that let
+     *  the user pick between research-note, bento, magazine, and
+     *  newspaper. Each tile shows a custom monoline SVG that
+     *  visually mirrors that mode's layout — research-note as a
+     *  memo, bento as a 4-cell grid, magazine as a masthead +
+     *  numeral block + small cards, newspaper as a banner + 3-column
+     *  text grid. 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>`,
+        "bento": `
+          <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="9" height="13" rx="1.5"/>
+            <rect x="13" y="3" width="8" height="6" rx="1.5"/>
+            <rect x="13" y="10" width="8" height="6" rx="1.5"/>
+            <rect x="3" y="17" width="18" height="4" rx="1.5"/>
+          </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>`,
+      };
+      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("bento", "Bento", "Single-page poster · 3 milestones + sidebar cards.")}
+            ${opt("magazine", "Magazine", "Editorial spread · cover line, 5 cards, dark closer.")}
+            ${opt("newspaper", "Newspaper", "Broadsheet · banner masthead, 3-column editorial.")}
+          </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 +1855,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 +1868,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 +1902,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 +1926,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 +1943,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 +1969,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 +2021,14 @@
         confirm: "[ Regenerate ]",
         confirmBusy: "[ Regenerating… ]",
       };
+      // Default the picker to the existing brief's mode · the user's
+      // baseline assumption when regenerating with a supplement is "I
+      // want the same kind of report, just with this extra angle." If
+      // the parent brief's mode is missing for any reason, fall back
+      // to the user's last picked mode (localStorage).
+      const defaultMode = this.isStructuredBriefMode(this.currentBrief?.mode)
+        ? this.currentBrief.mode
+        : 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>
@@ -2455,6 +2697,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 +2726,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 +2757,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 +2874,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 +2976,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 +3005,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 +3016,7 @@
         {
           method: "POST",
           headers: { "content-type": "application/json" },
-          body: "{}",
+          body: JSON.stringify({ mode: briefMode }),
         },
       );
       if (!r.ok) {
@@ -6610,7 +6870,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>
@@ -7280,7 +7540,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>`;
                 }
@@ -8722,7 +8982,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 +9042,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 +9065,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 +9074,12 @@
         ? "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 /bento.html for bento briefs and
+      // /report.html for research-note briefs (default). The bento
+      // renderer doesn't need the room id so the URL is shorter for
+      // that mode.
+      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 +9098,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 +9217,48 @@
           "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",
         ],
+        // Bento's `write` stage does different work · one chair-LLM
+        // call that compresses the room into the 8-slot bento layout.
+        // Keyed under `bento-write` and selected at render time when
+        // the brief's mode is bento.
+        "bento-write": [
+          "Compressing to the takeaway · the 1-line title",
+          "Picking the 3 milestones",
+          "Sizing the big-number callouts",
+          "Mapping ranked bars from the room's data",
+          "Distilling the verification signals",
+          "Compressing recommendations into elevator-pitch lines",
+          "Naming the closing flow · before → after",
+        ],
+        // 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",
+        ],
       },
       // System UI · always English. The `zh` key is kept as an alias
       // of `en` so any caller indexing BRIEF_SUBSTAGES["zh"] still
@@ -8980,7 +9279,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 +9330,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 +9350,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 +9411,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:
       //
-      //   extract → compose → scaffold-{anchor,findings,cluster,actions} → write
+      //   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)
       //
-      // 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
+      //   bento + magazine · extract → write (2 stages · runBentoStage
+      //     runs ONE chair-LLM call that produces the BentoScaffold;
+      //     composer and the scaffold sub-stages are skipped entirely.
+      //     Both modes share the same 2-stage rail · only the write
+      //     label and renderer differ)
+      //
+      // System UI · always English regardless of brief language. The
+      // pipeline labels are the app's voice (chrome around the
       // generation), not the report content itself.
-      const 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 = {
+        bento: "Composing the bento",
+        magazine: "Composing the magazine",
+        newspaper: "Composing the newspaper",
+      };
+      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 +9499,21 @@
       }
 
       // Rotating sub-line · advances every 3s within the active stage.
+      // Bento mode's `write` stage does different work than the
+      // research-note `write` stage — pick its dedicated rotator
+      // (`bento-write`) when active. Falls through to the regular
+      // key for every other stage / mode.
       let substageText = "";
-      if (activeStatus === "active" && substages[activeDef.key]?.length) {
-        const list = substages[activeDef.key];
+      // Structured-mode write stages get their own rotator copy
+      // ("bento-write" / "magazine-write" / "newspaper-write") since
+      // the work is different from research-note's chapter-by-chapter
+      // write.
+      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 +10011,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 +10055,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();