@rapidmx/web-client 0.30.0 → 0.32.0

package/dist/apps/shared/components/mail/compose/ComposeToolbar.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import type { Editor } from "@tiptap/react";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export declare function linkHref(typed: string): string;
 export interface ComposeToolbarProps {
     /** `null` before the editor has mounted client-side (see `RichTextEditor`'s `immediatelyRender: false`
      * doc comment) — every button is disabled in that state rather than the toolbar rendering nothing, so

package/dist/apps/shared/components/mail/compose/ComposeToolbar.js

@@ -6,6 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef, useState } from "react";
 import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
 import GifPicker from "./GifPicker.js";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export function linkHref(typed) {
+    const target = typed.trim();
+    if (/^[a-z][a-z0-9+.-]*:/i.test(target) || /^[/#]/.test(target)) {
+        return target;
+    }
+    return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(target) ? `mailto:${target}` : `https://${target}`;
+}
 /** Loaded when the picker is first opened: the emoji list is a half-megabyte JSON file that nothing else needs. */
 const EmojiPicker = lazy(() => import("./EmojiPicker.js"));
 const FONT_FAMILIES = [
@@ -73,7 +82,7 @@ export default function ComposeToolbar({ editor, onUploadImage }) {
             run((ed) => ed.chain().focus().extendMarkRange("link").unsetLink().run());
         }
         else {
-            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkUrl.trim() }).run());
+            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkHref(linkUrl) }).run());
         }
         setOpenPopup(null);
     }

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineArrowTopRightOnSquare, HiOutlineChevronDown, HiOutlineIdentification, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
-import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, deleteAttachment, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
+import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, forgetDraftImages, getMailbox, getMessage, listFolders, listMailboxes, deleteAttachment, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
 import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
 import { buildComposeBodyHtml } from "../../../../../lib/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
@@ -223,6 +223,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     /** Attachment/inline-image uploads on the wire, and who is waiting for them to finish (Send pressed meanwhile). */
     const uploadsInFlightRef = useRef(0);
     const uploadWaitersRef = useRef([]);
+    /** How many uploads have failed so far: a Send that waited on uploads compares it to see whether one of them did. */
+    const uploadFailuresRef = useRef(0);
+    /** Set while a Send waits for uploads: Close and Discard call it to cancel that send. */
+    const cancelUploadWaitRef = useRef(null);
+    /** The draft a plaintext save was last sent for, so a message that turns out to need encryption knows a copy may be on the server. */
+    const plaintextRequestedRef = useRef(null);
+    const [uploadsActive, setUploadsActive] = useState(false);
     /** The latest save request, if any - each save is chained after the one before it. Always settles (never
      * rejects), to the saved message, or `undefined` when that save failed. */
     const saveInFlightRef = useRef(Promise.resolve(undefined));
@@ -479,6 +486,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         const saved = await saveInFlightRef.current;
         // Once it's out of `supersededDraftsRef` a landing save can't update `superseded.version` any more.
         const version = saved?.uid === superseded.uid ? saved.version : superseded.version;
+        forgetDraftImages(superseded.uid);
         try {
             await deleteMessage(superseded.uid, version, client);
         }
@@ -516,7 +524,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * the old draft is deleted only once the new one has been created. Recipients, subject, and body are
      * kept. */
     function handleFromChange(nextMailboxUid) {
-        if (nextMailboxUid === mailboxUid || hasUploads) {
+        // An upload still on the wire counts: it would land on the draft this switch supersedes.
+        if (nextMailboxUid === mailboxUid || hasUploads || uploadsInFlightRef.current > 0) {
             return;
         }
         if (draft) {
@@ -590,12 +599,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         uploadStarted();
         try {
             // An inline part with a Content-ID of its own: without one the server has nothing to point the message's `cid:` reference at.
-            const attachment = await uploadAttachment(draft.uid, file, { inline: true });
+            const attachment = await uploadAttachment(draft.uid, file, { inline: true }, client);
             setHasUploads(true);
             void refreshDraftVersion(draft.uid);
             return attachmentContentUrl(attachment.uid);
         }
         catch (err) {
+            uploadFailuresRef.current += 1;
             setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload image.");
             return null;
         }
@@ -606,10 +616,12 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     /** Send waits for every upload started before it: see `submit()`. */
     function uploadStarted() {
         uploadsInFlightRef.current += 1;
+        setUploadsActive(true);
     }
     function uploadFinished() {
         uploadsInFlightRef.current -= 1;
         if (uploadsInFlightRef.current === 0) {
+            setUploadsActive(false);
             for (const resolve of uploadWaitersRef.current.splice(0)) {
                 resolve();
             }
@@ -645,13 +657,14 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         try {
             for (const file of files) {
                 try {
-                    const attachment = await uploadAttachment(draft.uid, file);
+                    const attachment = await uploadAttachment(draft.uid, file, {}, client);
                     setHasUploads(true);
                     setAttachments((prev) => [...prev, attachment]);
                     void refreshDraftVersion(draft.uid);
                 }
                 catch (err) {
                     allAttached = false;
+                    uploadFailuresRef.current += 1;
                     setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload attachment.");
                 }
             }
@@ -769,7 +782,25 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         try {
             if (uploadsInFlightRef.current > 0) {
                 setWaitingForUploads(true);
-                await new Promise((resolve) => uploadWaitersRef.current.push(resolve));
+                const failuresBefore = uploadFailuresRef.current;
+                let cancelled = false;
+                await new Promise((resolve) => {
+                    uploadWaitersRef.current.push(resolve);
+                    cancelUploadWaitRef.current = () => {
+                        cancelled = true;
+                        resolve();
+                    };
+                });
+                cancelUploadWaitRef.current = null;
+                // Close or Discard was pressed meanwhile: the message is not to be sent.
+                if (cancelled) {
+                    return;
+                }
+                // An attachment the sender asked for did not arrive: say so rather than sending the message without it.
+                if (uploadFailuresRef.current > failuresBefore) {
+                    setSendError("An attachment could not be uploaded, so the message was not sent. Remove it or try again.");
+                    return;
+                }
                 // The editor puts an image it has just uploaded into the message a moment after the upload resolves: let the window catch up.
                 await new Promise((resolve) => setTimeout(resolve, 0));
                 setWaitingForUploads(false);
@@ -876,6 +907,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 setSaveStatus("saved");
                 return { message: before };
             }
+            plaintextRequestedRef.current = target.uid;
             try {
                 const saved = await assembleDraft(target.uid, {
                     to: parseAddresses(current.to),
@@ -924,6 +956,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         const version = Math.max(current.version, saved?.uid === current.uid ? saved.version : 0);
         try {
             await deleteMessage(current.uid, version, client);
+            forgetDraftImages(current.uid);
         }
         catch (err) {
             if (!(err instanceof ApiRequestError) || (err.status !== 404 && err.status !== 409)) {
@@ -936,6 +969,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 throw getErr;
             });
             if (!fresh) {
+                forgetDraftImages(current.uid);
                 return;
             }
             // The version changed because another window sent or scheduled it - that message isn't ours to delete.
@@ -943,6 +977,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 throw new ApiRequestError(NO_LONGER_A_DRAFT_MESSAGE, 409);
             }
             await deleteMessage(fresh.uid, fresh.version, client);
+            forgetDraftImages(current.uid);
         }
     }
     /**
@@ -951,6 +986,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * deleted, and a delete that fails keeps the window open with the error.
      */
     async function discardNow() {
+        cancelUploadWaitRef.current?.();
         finishedRef.current = true;
         pendingSaveRef.current = false;
         setClosePrompt(null);
@@ -990,6 +1026,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * *unknown* (settings loading or failed, a lookup pending) is not a reason to hold the window: it is saved like any
      * other message. A failed save keeps the window open with Discard / Keep editing. */
     async function handleClose() {
+        cancelUploadWaitRef.current?.();
         if (!hasUserContent) {
             void discardNow();
             return;
@@ -1084,10 +1121,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * uid, so attachments and the folder are undisturbed), chained after any save still on the wire. Best effort - a failure is reported once. */
     function scrubSavedDraft(target) {
         lastSavedRef.current = null;
+        plaintextRequestedRef.current = null;
         setSaveStatus("idle");
         const previous = saveInFlightRef.current;
         const scrub = (async () => {
             await previous;
+            // A save that was on the wire has landed by now and recorded itself as the last one saved - which the scrub just replaced.
+            lastSavedRef.current = null;
             try {
                 // Its answer (the new version) is what a later delete waits for through `saveInFlightRef`, like any save's.
                 return await assembleDraft(target.uid, { to: [], cc: [], bcc: [], subject: "", html: "" }, client);
@@ -1106,7 +1146,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     }
     // Only a message that was really saved (`lastSavedRef` names its draft) has a plaintext copy to replace.
     useEffect(() => {
-        if (encryptionDecided && draft && lastSavedRef.current?.startsWith(`${draft.uid}:`)) {
+        if (encryptionDecided && draft && (lastSavedRef.current?.startsWith(`${draft.uid}:`) || plaintextRequestedRef.current === draft.uid)) {
             scrubSavedDraft(draft);
         }
     }, [encryptionDecided, draft?.uid]);
@@ -1223,6 +1263,9 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     // isn't mistaken for an edit (and autosaved) just because the editor was focused or clicked.
     /** The quote has been added: unless the reader has typed something already, that is still exactly what compose seeded. */
     function handleQuoteAppended(normalized) {
+        // Added for good: an editor mounted again (after a minimize and restore) is seeded from the body that already holds the quote, and
+        // must not be handed it a second time.
+        setSeededWithoutQuote(false);
         const latest = latestRef.current;
         if (latest.html === latest.seededHtml) {
             setHtml(normalized);
@@ -1247,8 +1290,10 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     // dispatcher the focus is in a compose window at all). They do what the Send and Close buttons and autosave do, under the same conditions -
     // a shortcut pressed while its button would be disabled is consumed and does nothing.
     // Send never waits for the encryption settings to load (fail open, see `encryptionRequirement.ts`); it only needs the draft to exist. Pressed
-    // while an earlier press is still being handled it does nothing (`submit()` guards that itself).
-    const canSend = !!draft && !closing && !waitingForUploads;
+    // while an earlier press is still being handled it does nothing (`submit()` guards that itself). A reply or forward waits for its quoted original
+    // (at most `QUOTE_FETCH_TIMEOUT_MS`): sent sooner it would go without the quote, a forward without its content, a Reply All to the sender alone.
+    // Nor before the editor is there (it waits for the signature): sent sooner a reply would go without its quote and signature.
+    const canSend = !!draft && contentReady && !closing && !waitingForUploads && !quotePending;
     useShortcut(SHORTCUTS.compose.send, () => void (canSend && submit(false)), { container: windowRef });
     useShortcut(SHORTCUTS.compose.saveDraft, () => {
         // Autosave's own conditions: never a draft that must not be stored as plaintext.
@@ -1280,7 +1325,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 ].join(" "), children: [dropActive && (_jsxs("div", { "data-drop-overlay": "", className: "pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-primary bg-primary/10 text-center text-primary-dark", children: [_jsx("span", { className: "text-base font-semibold", children: "Drop files to attach them" }), _jsx("span", { className: "text-sm", children: "Pictures go into the message where the cursor is" })] })), !inline && !isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: ["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" "), onClick: inline ? undefined : onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [inline ? (_jsx(HeaderButton, { label: "Pop out", onClick: () => onPopOut?.(), icon: HiOutlineArrowTopRightOnSquare })) : (_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus })), !inline && !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, 
                                         // Two or more options only exist once the mailboxes have loaded, and the same answer that lets them list
                                         // (one that isn't known to be view-only) is what picks the default sender, so a sender is always chosen by now.
-                                        value: mailboxUid, disabled: hasUploads, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
+                                        value: mailboxUid, disabled: hasUploads || uploadsActive, title: hasUploads || uploadsActive ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
                                 // De-duplicated by the same normalized key `recipientStatuses` itself is keyed by - two
                                 // fields (or one field twice) naming the same mailbox in different casing now resolve to
                                 // one shared status object (see `addressCacheKey()`'s own doc comment), so without this
@@ -1302,5 +1347,5 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                                     return null;
                                 }
                                 return (_jsx("ul", { className: "flex flex-wrap gap-1.5 px-3 pt-1.5", "aria-label": "Recipient encryption availability", children: knownRecipients.map((status) => (_jsxs("li", { className: `text-xs font-medium py-0.5 px-2 rounded-pill ${status.canEncrypt ? "bg-primary/10 text-primary-dark" : "bg-surface-alt text-text-muted"}`, children: [status.address, " ", status.canEncrypt ? "supports encryption" : "no encryption key found"] }, status.address))) }));
-                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsxs("li", { className: "inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted", children: [attachment.filename, _jsx("button", { type: "button", "aria-label": `Remove ${attachment.filename}`, title: `Remove ${attachment.filename}`, disabled: removingAttachmentUid === attachment.uid, onClick: () => void handleRemoveAttachment(attachment), className: "inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !draft || closing || waitingForUploads, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || closing || waitingForUploads, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
+                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsxs("li", { className: "inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted", children: [attachment.filename, _jsx("button", { type: "button", "aria-label": `Remove ${attachment.filename}`, title: `Remove ${attachment.filename}`, disabled: removingAttachmentUid === attachment.uid, onClick: () => void handleRemoveAttachment(attachment), className: "inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !canSend, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !canSend, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
 }

package/dist/apps/shared/components/mail/compose/GifPicker.js

@@ -24,13 +24,19 @@ export default function GifPicker({ anchorRef, onSelect, onClose }) {
     useEffect(() => {
         setLoading(true);
         setError(null);
+        // A search that was still on the wire when the query changed (or the popup closed) is not heard: a slow answer to an earlier query
+        // must not replace the results of the one now shown.
+        let stale = false;
         const handle = setTimeout(() => {
             searchGifs(query)
-                .then(setGifs)
-                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load GIFs."))
-                .finally(() => setLoading(false));
+                .then((found) => !stale && setGifs(found))
+                .catch((err) => !stale && setError(err instanceof ApiRequestError ? err.message : "Could not load GIFs."))
+                .finally(() => !stale && setLoading(false));
         }, SEARCH_DEBOUNCE_MS);
-        return () => clearTimeout(handle);
+        return () => {
+            stale = true;
+            clearTimeout(handle);
+        };
     }, [query]);
     return (_jsxs(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: WIDTH, height: HEIGHT, "aria-label": "Insert GIF", children: [_jsx("div", { className: "p-2 border-b border-border shrink-0", children: _jsx("input", { type: "text", autoFocus: true, "aria-label": "Search GIFs", placeholder: "Search GIFs", value: query, onChange: (e) => setQuery(e.target.value), className: "w-full text-sm py-1.5 px-2 border border-border rounded-sm bg-surface focus:outline-none focus:border-primary" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: error ? (_jsx("p", { className: "text-xs text-danger", children: error })) : loading ? (_jsx("p", { className: "text-xs text-text-muted", children: "Loading\u2026" })) : gifs.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "No GIFs found." })) : (_jsx("div", { className: "grid grid-cols-2 gap-1.5", children: gifs.map((gif) => (_jsx("button", { type: "button", title: gif.title, onClick: () => onSelect(gif.url), className: "rounded-sm overflow-hidden hover:opacity-80", children: _jsx("img", { src: gif.previewUrl, alt: gif.title, className: "w-full h-20 object-cover" }) }, gif.id))) })) })] }));
 }

package/dist/apps/shared/components/mail/compose/RecipientInput.js

@@ -44,7 +44,8 @@ function dropdownPosition(anchor) {
  */
 export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions = fetchRecipientSuggestions, debounceMs = RECIPIENT_SUGGESTION_DEBOUNCE_MS, disabled, autoFocus, onEdit, initialPending = "", hideChip, placeholder, ariaLabel, listLabel, className, dropdownZIndex, }) {
     const [pending, setPending] = useState(initialPending);
-    const [suggestions, setSuggestions] = useState([]);
+    // With the query they were loaded for: a list for earlier text is not offered (Enter or Tab would put somebody else in place of what was typed).
+    const [suggestionList, setSuggestionList] = useState({ query: "", items: [] });
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
     const [position, setPosition] = useState(null);
@@ -69,24 +70,24 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         }
     }, [pending, pendingActive]);
     const committedAddresses = new Set(chips.map((chip) => parseRecipient(chip).address.toLowerCase()));
-    const visible = suggestions.filter((suggestion) => !committedAddresses.has(suggestion.address.toLowerCase()));
+    const visible = (suggestionList.query === query ? suggestionList.items : []).filter((suggestion) => !committedAddresses.has(suggestion.address.toLowerCase()));
     const expanded = open && visible.length > 0 && query.length >= RECIPIENT_SUGGESTION_MIN_QUERY_LENGTH;
     const active = Math.min(activeIndex, visible.length - 1);
     useEffect(() => {
         if (query.length < RECIPIENT_SUGGESTION_MIN_QUERY_LENGTH) {
-            setSuggestions([]);
+            setSuggestionList({ query: "", items: [] });
             return;
         }
         const controller = new AbortController();
         const timer = setTimeout(() => {
             fetchRef.current(query, { mailboxUid, signal: controller.signal }).then((result) => {
                 if (!controller.signal.aborted) {
-                    setSuggestions(result);
+                    setSuggestionList({ query, items: result });
                     setActiveIndex(0);
                 }
             }, () => {
                 if (!controller.signal.aborted) {
-                    setSuggestions([]);
+                    setSuggestionList({ query: "", items: [] });
                 }
             });
         }, debounceMs);
@@ -139,7 +140,7 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
         const next = committed.join(", ");
         setPending("");
         setOpen(false);
-        setSuggestions([]);
+        setSuggestionList({ query: "", items: [] });
         onChange(next);
         onEdit?.(committed, "");
         onCommit?.(next);
@@ -204,7 +205,8 @@ export default function RecipientInput({ id, label, value, onChange, onBlur, onC
     return (_jsxs("div", { ref: anchorRef, className: `flex-1 min-w-0 flex flex-wrap items-center gap-1${className ? ` ${className}` : ""}`, children: [drawn.length > 0 && (_jsx("ul", { role: "list", "aria-label": listLabel ?? `${label} recipients`, className: "contents", children: drawn.map(({ chip, index }) => {
                     const recipient = parseRecipient(chip);
                     const valid = isValidRecipientAddress(recipient.address);
-                    const name = recipient.displayName || recipient.address;
+                    // A name that is itself an address (`"billing@bank.com" <x@evil.tld>`) would hide the one it is really sent to: both are shown.
+                    const name = /[@＠﹫]/.test(recipient.displayName ?? "") ? `${recipient.displayName} <${recipient.address}>` : recipient.displayName || recipient.address;
                     return (_jsxs("li", { title: chip, className: `flex items-center gap-1 max-w-full min-w-0 rounded-pill border pl-2 pr-0.5 py-px text-xs ${valid ? "bg-surface-alt border-border text-text" : "bg-danger-bg border-danger text-danger"}`, children: [_jsx("span", { className: "truncate", children: name }), !valid && _jsx("span", { className: "sr-only", children: " (not a valid email address)" }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${recipient.address}`, disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => removeChip(index), className: "shrink-0 w-4 h-4 flex items-center justify-center rounded-pill text-text-muted hover:bg-border hover:text-text", children: _jsx(HiOutlineXMark, { size: 10 }) })] }, `${index}-${chip}`));
                 }) })), _jsx("input", { ref: inputRef, id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-label": ariaLabel, placeholder: placeholder, "aria-expanded": expanded, "aria-controls": listboxId, "aria-activedescendant": expanded ? optionId(active) : undefined, disabled: disabled, autoFocus: autoFocus, className: "flex-1 min-w-[6rem] text-sm bg-transparent outline-none py-0.5", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: expanded ? `${visible.length} ${visible.length === 1 ? "suggestion" : "suggestions"}` : "" }), expanded &&
                 position &&

package/dist/apps/shared/components/mail/compose/composeFlushRegistry.d.ts

@@ -1,11 +1,17 @@
 /** Saves a compose window's unsaved edits (or waits for a save already on the wire), resolving to `false` when
  * something the window holds is still unsaved afterwards (any other value counts as saved). Never rejects. */
 export type ComposeFlush = () => Promise<unknown>;
+/**
+ * Registers something to run the moment the app starts signing out (explicitly, or forced by another tab): a cache that holds message content,
+ * which must not outlive the session it was read in. Called once, when the module that owns the cache is loaded.
+ */
+export declare function onSigningOut(cleanup: () => void): void;
 /**
  * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
  * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
  * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
- * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
+ * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all). It also runs what was registered
+ * with `onSigningOut()`.
  */
 export declare function markSigningOut(): void;
 /** Undoes `markSigningOut()`. */

package/dist/apps/shared/components/mail/compose/composeFlushRegistry.js

@@ -3,15 +3,27 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 const flushers = new Set();
+const signOutCleanups = new Set();
 let signingOut = false;
+/**
+ * Registers something to run the moment the app starts signing out (explicitly, or forced by another tab): a cache that holds message content,
+ * which must not outlive the session it was read in. Called once, when the module that owns the cache is loaded.
+ */
+export function onSigningOut(cleanup) {
+    signOutCleanups.add(cleanup);
+}
 /**
  * Marks the app as signing out (explicitly, or forced by a sign-out in another tab), so compose windows stop
  * asking the browser to confirm leaving the page - the "Leave site?" prompt would otherwise let the user cancel
  * the sign-out's own navigation and stay on a page whose session is being ended. Call it before flushing drafts
- * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all).
+ * and navigating. `clearSigningOut()` undoes it (a sign-out that didn't leave the page after all). It also runs what was registered
+ * with `onSigningOut()`.
  */
 export function markSigningOut() {
     signingOut = true;
+    for (const cleanup of signOutCleanups) {
+        cleanup();
+    }
 }
 /** Undoes `markSigningOut()`. */
 export function clearSigningOut() {

package/dist/apps/shared/components/mail/compose/encryptionRequirement.d.ts

@@ -18,6 +18,11 @@ import type { EncryptionPolicy } from "../../../../../lib/crypto/keyvaultApi.js"
  * reported in `unknown`, so a caller that is about to send can give the loads a moment - and only a caller that finds out later that the
  * message *does* need encryption acts on it (see `ComposeWindow`'s transition rules).
  *
+ * That is this function's answer, and it stays fail open for everything that is about a draft or the compose window. The background send
+ * (`sendDecision.ts`'s `decideSend()` with `lookupsComplete`) reads `unknown` once its loads are in: a sender who has an encryption key, and
+ * whose policy or recipients' keys could not be checked, is blocked with the `lookup-failed` decision (the sender may still send without
+ * encryption) rather than sent in the clear on a guess.
+ *
  * Why this is safe enough: the requirement only ever protects *this client's* plaintext drafts and sends from being unencrypted when the
  * server's policy says they should be; it is not the enforcement point (the keys are the user's, the server never sees them). A missing
  * policy therefore does not mean "encrypt or refuse" - it means the client cannot tell, and the honest default is the one that works.

package/dist/apps/shared/components/mail/compose/quotedBody.js

@@ -7,12 +7,23 @@ import { attachmentContentUrl, getMessageRawContent, listAttachments } from "../
 import { MAX_QUOTED_IMAGE_BYTES, embedQuotedImages } from "../../../../../lib/mail/compose/quotedImages.js";
 import { EMBEDDED_IMAGE_TYPES, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 import { decodeHeaderText, extractDisplayBody, parseMimeEntity } from "../../../../../lib/crypto/mime.js";
+import { onSigningOut } from "./composeFlushRegistry.js";
 import { parseRecipientList } from "./recipients.js";
+/** The security states whose `protectedHeaders` a signature covers - the only ones Reply All takes recipients from. */
+const TRUSTED_HEADER_STATES = new Set([
+    "signed_verified",
+    "encrypted_verified",
+    "signed_unverified_signer",
+    "encrypted_unverified_signer",
+    "verified_at_first_open",
+]);
 /** How long a reply waits for the original's body before it goes ahead with the preview - a slow or hung request must not
  * leave the window waiting on it (or, before it opened at once, keep it from opening) indefinitely. */
 export const QUOTE_FETCH_TIMEOUT_MS = 10000;
 /** How long a fetched (or prefetched) body is remembered, so hovering Reply and then clicking it costs one request. */
 export const QUOTE_CACHE_MS = 30000;
+/** How many bodies are remembered at most: each is a whole message body, and a mailbox read for hours would otherwise keep every one it was asked about. */
+const QUOTE_CACHE_MAX = 20;
 const contentCache = new Map();
 /**
  * The server's sanitized HTML body of a message (`GET /mail/messages/:id/content`), or `undefined` when it has none (a
@@ -38,6 +49,12 @@ function fetchContentHtml(uid) {
             clearTimeout(timer);
         }
     })();
+    // Whatever has expired goes, and the oldest of the rest once there are too many.
+    for (const [key, entry] of contentCache) {
+        if (Date.now() - entry.at >= QUOTE_CACHE_MS || contentCache.size >= QUOTE_CACHE_MAX) {
+            contentCache.delete(key);
+        }
+    }
     contentCache.set(uid, { at: Date.now(), promise });
     void promise.then((html) => {
         if (html === undefined && contentCache.get(uid)?.promise === promise) {
@@ -68,6 +85,7 @@ export function prefetchOriginalMessage(message) {
 export function clearOriginalMessageCache() {
     contentCache.clear();
 }
+onSigningOut(clearOriginalMessageCache);
 /** The recipients one address-list header names, RFC 2047-decoded, with their display names. */
 function headerRecipients(value, type) {
     if (!value) {
@@ -81,7 +99,7 @@ function headerRecipients(value, type) {
  * or `undefined` when there is none, it is not a raster image, it is too large or it could not be had. Never rejects. */
 function serverImageResolver(message) {
     let attachments;
-    return async (reference) => {
+    return async (reference, signal) => {
         try {
             attachments ?? (attachments = listAttachments(message.folderUid, message.uid));
             const attachment = findInlineAttachment(await attachments, reference);
@@ -89,7 +107,7 @@ function serverImageResolver(message) {
             if (!attachment || !type || !EMBEDDED_IMAGE_TYPES.test(type) || attachment.sizeBytes > MAX_QUOTED_IMAGE_BYTES) {
                 return undefined;
             }
-            const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include" });
+            const res = await fetch(attachmentContentUrl(attachment.uid), { credentials: "include", signal });
             const bytes = res.ok ? new Uint8Array(await res.arrayBuffer()) : undefined;
             return bytes && bytes.length <= MAX_QUOTED_IMAGE_BYTES ? toDataUri(type, bytes) : undefined;
         }
@@ -136,7 +154,9 @@ function partImageResolver(parts) {
  */
 export async function loadOriginalMessage(message, security, options = {}) {
     const recovered = security?.text !== undefined ? { text: security.text } : security?.html !== undefined ? { html: security.html } : undefined;
-    const protectedHeaders = security?.protectedHeaders;
+    // Headers inside an unsigned (or badly signed) encrypted message are whatever its encrypter chose to write, so only a
+    // verified signature makes them a source of recipients.
+    const protectedHeaders = security && TRUSTED_HEADER_STATES.has(security.state) ? security.protectedHeaders : undefined;
     const protectedRecipients = protectedHeaders
         ? [...headerRecipients(protectedHeaders.to, "to"), ...headerRecipients(protectedHeaders.cc, "cc")]
         : [];
@@ -176,8 +196,11 @@ export async function loadOriginalMessage(message, security, options = {}) {
     if (result.body.html !== undefined) {
         const resolver = recovered ? partImageResolver(security?.attachments ?? []) : serverImageResolver(message);
         const html = result.body.html;
-        // Bounded like the body's own request: a picture that will not arrive is left out of the quote, not waited for.
-        result.body = { html: await withTimeout(embedQuotedImages(html, resolver), QUOTE_FETCH_TIMEOUT_MS).catch(() => html) };
+        // Bounded like the body's own request: a picture that has not arrived by then is cancelled and left out of the quote, not waited for -
+        // the ones that have arrived stay.
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), QUOTE_FETCH_TIMEOUT_MS);
+        result.body = { html: await embedQuotedImages(html, resolver, controller.signal).finally(() => clearTimeout(timer)) };
     }
     return result;
 }

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -204,7 +204,7 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
     // aggregate mode even with mailboxes present.
     if (userUid && status === "ready" && mailboxes.length === 0) {
-        return _jsx(MailboxProvisioning, {});
+        return _jsx(MailboxProvisioning, { impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl });
     }
     let inner = null;
     if (userUid && status === "checking") {

package/dist/apps/shared/components/mail/reading/MessageBody.js

@@ -39,7 +39,7 @@ const AUTHORED_CANVAS = "rgb(255, 255, 255)";
 export default function MessageBody({ messageUid, messageVersion, title, content, attachments, inlineParts, original = false, onAdaptable }) {
     const [remote, setRemote] = useState(() => {
         const cached = cachedBodyContent(messageUid, messageVersion);
-        return cached ? { status: "ready", content: cached } : { status: "loading" };
+        return cached ? { status: "ready", content: cached, uid: messageUid } : { status: "loading" };
     });
     const [attempt, setAttempt] = useState(0);
     const supplied = content !== undefined;
@@ -49,19 +49,24 @@ export default function MessageBody({ messageUid, messageVersion, title, content
         }
         const cached = cachedBodyContent(messageUid, messageVersion);
         if (cached) {
-            setRemote({ status: "ready", content: cached });
+            setRemote({ status: "ready", content: cached, uid: messageUid });
             return;
         }
         const controller = new AbortController();
-        setRemote({ status: "loading" });
-        fetchBodyContent(messageUid, messageVersion, controller.signal).then((loaded) => setRemote({ status: "ready", content: loaded }), (err) => {
-            if (!controller.signal.aborted) {
+        // The same message under a newer version (opening it marked it read, a flag or a label changed): what is shown stays - no skeleton, and
+        // the frame is not torn down and laid out again - until the fresh copy is here, and a failed read leaves it too.
+        const revalidating = remote.status === "ready" && remote.uid === messageUid;
+        if (!revalidating) {
+            setRemote({ status: "loading" });
+        }
+        fetchBodyContent(messageUid, messageVersion, controller.signal).then((loaded) => setRemote({ status: "ready", content: loaded, uid: messageUid }), (err) => {
+            if (!controller.signal.aborted && !revalidating) {
                 setRemote({ status: "error", message: err instanceof ApiRequestError ? err.message : "Could not load this message." });
             }
         });
         return () => controller.abort();
     }, [messageUid, messageVersion, supplied, attempt]);
-    const shown = content ? { status: "ready", content } : remote;
+    const shown = content ? { status: "ready", content, uid: messageUid } : remote;
     if (shown.status === "loading") {
         return _jsx(BodySkeleton, {});
     }

package/dist/apps/shared/components/mail/reading/bodyContent.js

@@ -5,6 +5,7 @@
 import { ApiRequestError, apiUrl } from "../../../../../lib/util/api.js";
 import { attachmentContentUrl } from "../../../../../lib/mail/mailApi.js";
 import { findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
+import { onSigningOut } from "../compose/composeFlushRegistry.js";
 /** How many bodies are remembered for the session - a thread that is expanded, collapsed and expanded again does not ask the server twice. */
 const CACHE_LIMIT = 40;
 /** What the pane asks `/content` for. */
@@ -14,6 +15,7 @@ const cache = new Map();
 export function clearBodyContentCache() {
     cache.clear();
 }
+onSigningOut(clearBodyContentCache);
 /** The remembered body for a message at a version, if any. */
 export function cachedBodyContent(uid, version) {
     return cache.get(`${uid}:${version}`);

package/dist/apps/shared/components/mail/reading/bodyHtml.d.ts

@@ -33,7 +33,11 @@ export interface PrepareOptions {
      * server removes one it could not point at a part) is asked for with no `contentId` and its `alt`. */
     resolveCid?: (contentId: string | undefined, alt?: string) => string | undefined;
 }
-/** CSS with the constructs above neutralised. */
+/**
+ * CSS with the constructs above neutralised. The patterns run on what a browser would read, not only on the raw text: `position:\66ixed` and
+ * `min-height:200\76h` are `position:fixed` and `200vh` to it, and a comment inside a name (`position/**\/:fixed`) is no obstacle either. When the
+ * decoded text holds one, that text (escapes resolved, comments dropped) is what is kept, neutralised; CSS whose escapes hide nothing is left as written.
+ */
 export declare function sanitizeCss(css: string): string;
 /**
  * Whether a mail's own markup declares that it supports a dark scheme: `<meta name="color-scheme">` naming dark,