@bobfrankston/rmfmail 1.2.260 → 1.2.263

package/client/components/message-viewer.ts

@@ -687,6 +687,14 @@ function installPreviewControls(iframe: HTMLIFrameElement): void {
     const attach = () => {
         const doc = iframe.contentDocument;
         if (!doc) return;
+        // Idempotent per DOCUMENT. A freshly-appended srcdoc iframe first
+        // exposes a throwaway `about:blank` document whose readyState is
+        // already "complete" — so binding to it is binding to something that
+        // is discarded a frame later, and every path below has to run again
+        // against the real one. Marking the document (not the iframe) lets us
+        // safely attach from both the immediate and the load path.
+        if ((doc as any).__mvControlsBound) return;
+        (doc as any).__mvControlsBound = true;
 
         applyZoom(doc);
         // Paint search marks as soon as the text exists — `attach` also runs
@@ -747,8 +755,14 @@ function installPreviewControls(iframe: HTMLIFrameElement): void {
         // host; the doc-level handler missed cases where WebView2's native
         // menu fired before our parent listener got installed.
     };
+    // Bind on BOTH paths, not one or the other: `load` is when the real
+    // srcdoc document exists, and the immediate call covers an iframe that
+    // is genuinely already loaded (re-render of a live preview). The
+    // per-document guard in attach() makes the overlap a no-op — where the
+    // old `complete ? attach() : onload` choice could bind the whole set to
+    // the discarded about:blank document and never run against the letter.
+    iframe.addEventListener("load", attach);
     if (iframe.contentDocument?.readyState === "complete") attach();
-    else iframe.addEventListener("load", attach, { once: true });
     // DOMContentLoaded is the "text is painted" mark (see the _ptick pair at
     // the render site); highlight there too so marks appear with the words
     // rather than after the last tracking pixel resolves.
@@ -1199,18 +1213,7 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
         const fromEl = headerEl.querySelector(".mv-from")!;
         const toEl = headerEl.querySelector(".mv-to")!;
         fromEl.textContent = formatAddr(msg.from);
-        let toLine = `To: ${msg.to.map(formatAddr).join(", ")}`;
-        if (msg.cc?.length) toLine += `  Cc: ${msg.cc.map(formatAddr).join(", ")}`;
-        // Always-visible Delivered-To line — shown when present and not already
-        // covered by the To/Cc list. Critical for accounts with multiple aliases
-        // where you need to see which one received the message at a glance.
-        const toAddrs = (msg.to || []).map((a: { address: string }) => a.address.toLowerCase());
-        const ccAddrs = (msg.cc || []).map((a: { address: string }) => a.address.toLowerCase());
-        const dt = (msg.deliveredTo || "").toLowerCase();
-        if (msg.deliveredTo && !toAddrs.includes(dt) && !ccAddrs.includes(dt)) {
-            toLine += `  Delivered-To: ${msg.deliveredTo}`;
-        }
-        toEl.textContent = toLine;
+        setRecipientLine(toEl, msg.to, msg.cc, msg.deliveredTo);
         headerEl.querySelector(".mv-subject")!.textContent = msg.subject;
         document.dispatchEvent(new CustomEvent("mailx-message-shown", { detail: { accountId } }));
 
@@ -1221,7 +1224,12 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
                 e.preventDefault();
                 const me = e as MouseEvent;
                 const items: MenuItem[] = [];
-                const addrs = el === fromEl ? [msg.from] : [...(msg.to || []), ...(msg.cc || [])];
+                const allAddrs = el === fromEl ? [msg.from] : [...(msg.to || []), ...(msg.cc || [])];
+                // Bulk mail can address hundreds of people; enumerating every
+                // one builds a menu thousands of items tall. Show the first
+                // few and say how many were left out.
+                const addrs = allAddrs.slice(0, CONTEXT_MENU_ADDR_CAP);
+                const omitted = allAddrs.length - addrs.length;
                 for (const addr of addrs) {
                     if (!addr?.address) continue;
                     const name = addr.name || "";
@@ -1304,6 +1312,13 @@ export async function showMessage(accountId: string, uid: number, folderId?: num
                     });
                     items.push({ label: "", action: () => {}, separator: true });
                 }
+                if (omitted > 0) {
+                    items.push({
+                        label: `… ${omitted} more recipients — copy the whole list`,
+                        action: () => navigator.clipboard.writeText(allAddrs.map(formatAddr).join(", ")),
+                    });
+                    items.push({ label: "", action: () => {}, separator: true });
+                }
                 items.push({ label: "Reply", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "reply" } })) });
                 items.push({ label: "Reply All", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "replyAll" } })) });
                 items.push({ label: "Forward", action: () => document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "forward" } })) });
@@ -2129,6 +2144,71 @@ function formatAddr(addr: { name: string; address: string }): string {
     return addr.address;
 }
 
+/** Above this many To+Cc addresses the recipient line is offered collapsed
+ *  with a "▸ N recipients" expander. Anything under it reads fine inline. */
+const MANY_RECIPIENTS = 6;
+
+/** Ceiling on how many addresses the header's right-click menu enumerates.
+ *  Each address contributes ~7 entries (copy name / copy address / contacts /
+ *  preferred / denylist / priority), so a 444-recipient bulk mail would build
+ *  a 3000-item menu taller than the screen and slow to open. */
+const CONTEXT_MENU_ADDR_CAP = 12;
+
+/**
+ * Fill the viewer's To/Cc line.
+ *
+ * Written as elements rather than a bare `textContent` because bulk mail can
+ * carry hundreds of recipients: the full text stays in the DOM (so find,
+ * select and copy still see every address) but `.mv-to-text` is line-clamped
+ * to two rows, with a toggle to expand. Unclamped, that one line grew the
+ * header past the whole viewer height and starved `.mv-body` to zero — see
+ * the `.mv-header` comment in components.css.
+ */
+function setRecipientLine(
+    toEl: Element,
+    to: { name: string; address: string }[] | undefined,
+    cc: { name: string; address: string }[] | undefined,
+    deliveredTo?: string,
+): void {
+    const toList = to || [];
+    const ccList = cc || [];
+    let line = `To: ${toList.map(formatAddr).join(", ")}`;
+    if (ccList.length) line += `  Cc: ${ccList.map(formatAddr).join(", ")}`;
+    // Always-visible Delivered-To — shown when present and not already covered
+    // by the To/Cc list. Critical for accounts with multiple aliases where you
+    // need to see which one received the message at a glance.
+    if (deliveredTo) {
+        const dt = deliveredTo.toLowerCase();
+        const covered = [...toList, ...ccList].some(a => a.address.toLowerCase() === dt);
+        if (!covered) line += `  Delivered-To: ${deliveredTo}`;
+    }
+
+    toEl.textContent = "";
+    toEl.classList.remove("mv-to-expanded");
+    const text = document.createElement("span");
+    text.className = "mv-to-text";
+    text.textContent = line;
+    toEl.append(text);
+
+    const count = toList.length + ccList.length;
+    // Offer the expander when the list is long by count, or when the clamp
+    // actually cut something off (a handful of very long display names).
+    const clamped = text.scrollHeight > text.clientHeight + 1;
+    if (count <= MANY_RECIPIENTS && !clamped) return;
+
+    const toggle = document.createElement("button");
+    toggle.className = "mv-to-toggle";
+    toggle.type = "button";
+    const label = count === 1 ? "1 recipient" : `${count} recipients`;
+    const paint = (open: boolean) => {
+        toggle.textContent = `${open ? "▾" : "▸"} ${label}`;
+        toggle.title = open ? "Collapse the recipient list" : "Show the full recipient list";
+    };
+    paint(false);
+    toggle.addEventListener("click", () => paint(toEl.classList.toggle("mv-to-expanded")));
+    toEl.append(toggle);
+}
+
 /** Render the viewer header from a list-row envelope (instant — no body
  *  fetch awaited). Used to populate the header pane the moment a message
  *  is clicked so the user always sees something actionable; getMessage()
@@ -2142,11 +2222,7 @@ function renderHeaderFromEnvelope(headerEl: HTMLElement, env: any): void {
     const subjEl = headerEl.querySelector(".mv-subject");
     const dateEl = headerEl.querySelector(".mv-date");
     if (fromEl) fromEl.textContent = formatAddr(env.from);
-    if (toEl) {
-        let toLine = `To: ${(env.to || []).map(formatAddr).join(", ")}`;
-        if (env.cc?.length) toLine += `  Cc: ${env.cc.map(formatAddr).join(", ")}`;
-        toEl.textContent = toLine;
-    }
+    if (toEl) setRecipientLine(toEl, env.to, env.cc);
     if (subjEl) subjEl.textContent = env.subject || "";
     if (dateEl) {
         try { dateEl.textContent = new Date(env.date).toLocaleString(); }

package/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx-client",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "private": true,
   "type": "module",
   "scripts": {

package/client/styles/components.css

@@ -1976,6 +1976,16 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
     font-size: var(--font-size-sm);
     line-height: 1.5;
 
+    /* The header is a min-content-sized item in .message-viewer's flex column,
+       so anything unbounded inside it (a 400-recipient bulk-mail To: list, an
+       expanded Details panel with a full Received chain) squeezes .mv-body
+       down to zero height — and since .message-viewer is overflow:hidden, the
+       pane then has nothing that scrolls at all. Cap the header and let IT
+       scroll; .mv-body always keeps at least half the pane. */
+    flex: 0 0 auto;
+    max-height: 50%;
+    overflow-y: auto;
+
     .mv-toolbar {
         display: flex;
         align-items: center;
@@ -1984,6 +1994,13 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
         border-bottom: 1px solid var(--color-border);
         margin-bottom: var(--gap-xs);
 
+        /* Stays put when the header itself scrolls (long recipient list,
+           Details open) — the actions must never scroll out of reach. */
+        position: sticky;
+        top: 0;
+        background: var(--color-bg-surface);
+        z-index: 1;
+
         /* Larger, easier-to-hit action glyphs — reply / reply-all /
          * forward / delete / flag / mark-unread are single-glyph buttons. */
         .tb-btn {
@@ -1997,7 +2014,34 @@ body.calendar-sidebar-on .calendar-sidebar { display: flex; }
     .mv-header-info { }
     .mv-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
     .mv-from { font-weight: 600; }
-    .mv-to { color: var(--color-text-muted); }
+    .mv-to {
+        color: var(--color-text-muted);
+
+        /* Bulk mail routinely carries hundreds of To: addresses (the Geek
+           Squad scam Bob hit on 2026-08-17 had 444). Clamp to two rows; the
+           "▸ N recipients" button below expands the full list in place. */
+        .mv-to-text {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            overflow: hidden;
+        }
+        &.mv-to-expanded .mv-to-text {
+            display: block;
+            -webkit-line-clamp: none;
+            line-clamp: none;
+        }
+        .mv-to-toggle {
+            background: none;
+            border: none;
+            padding: 0;
+            font: inherit;
+            color: var(--color-accent);
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    }
     .mv-subject { font-size: var(--font-size-lg); font-weight: 600; margin-top: var(--gap-xs); }
     /* Search matches in the subject. Same treatment as the body (which paints
        its own copy of this rule inside the preview iframe — the iframe can't

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/rmfmail",
-  "version": "1.2.260",
+  "version": "1.2.263",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -38,7 +38,7 @@
     "@bobfrankston/mailx-store-web": "^0.1.80",
     "@bobfrankston/mailx-sync": "^0.1.29",
     "@bobfrankston/miscinfo": "^1.0.19",
-    "@bobfrankston/msger": "^0.1.425",
+    "@bobfrankston/msger": "^0.1.427",
     "@bobfrankston/node-tcp-transport": "^0.1.10",
     "@bobfrankston/oauthsupport": "^1.0.34",
     "@bobfrankston/rmf-tiny": "^0.1.49",
@@ -118,7 +118,7 @@
       "@bobfrankston/mailx-store-web": "^0.1.80",
       "@bobfrankston/mailx-sync": "^0.1.29",
       "@bobfrankston/miscinfo": "^1.0.19",
-      "@bobfrankston/msger": "^0.1.425",
+      "@bobfrankston/msger": "^0.1.427",
       "@bobfrankston/node-tcp-transport": "^0.1.10",
       "@bobfrankston/oauthsupport": "^1.0.34",
       "@bobfrankston/rmf-tiny": "^0.1.49",