@rapidmx/web-client 0.30.0 → 0.32.0

package/apps/shared/components/mail/compose/ComposeWindow.tsx

@@ -26,6 +26,7 @@ import {
     attachmentContentUrl,
     createDraft,
     deleteMessage,
+    forgetDraftImages,
     getMailbox,
     getMessage,
     listFolders,
@@ -338,6 +339,13 @@ export default function ComposeWindow({
     /** 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<(() => void)[]>([]);
+    /** 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<(() => void) | null>(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<string | null>(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<Message | undefined>>(Promise.resolve(undefined));
@@ -624,6 +632,7 @@ export default function ComposeWindow({
         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);
         } catch {
@@ -662,7 +671,8 @@ export default function ComposeWindow({
      * the old draft is deleted only once the new one has been created. Recipients, subject, and body are
      * kept. */
     function handleFromChange(nextMailboxUid: string) {
-        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) {
@@ -740,11 +750,12 @@ export default function ComposeWindow({
         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;
         } finally {
@@ -755,10 +766,12 @@ export default function ComposeWindow({
     /** 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();
             }
@@ -796,12 +809,13 @@ export default function ComposeWindow({
         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.");
                 }
             }
@@ -924,7 +938,25 @@ export default function ComposeWindow({
         try {
             if (uploadsInFlightRef.current > 0) {
                 setWaitingForUploads(true);
-                await new Promise<void>((resolve) => uploadWaitersRef.current.push(resolve));
+                const failuresBefore = uploadFailuresRef.current;
+                let cancelled = false;
+                await new Promise<void>((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);
@@ -1032,6 +1064,7 @@ export default function ComposeWindow({
                 setSaveStatus("saved");
                 return { message: before };
             }
+            plaintextRequestedRef.current = target.uid;
             try {
                 const saved = await assembleDraft(target.uid, {
                     to: parseAddresses(current.to),
@@ -1081,6 +1114,7 @@ export default function ComposeWindow({
         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)) {
                 throw err;
@@ -1092,6 +1126,7 @@ export default function ComposeWindow({
                 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.
@@ -1099,6 +1134,7 @@ export default function ComposeWindow({
                 throw new ApiRequestError(NO_LONGER_A_DRAFT_MESSAGE, 409);
             }
             await deleteMessage(fresh.uid, fresh.version, client);
+            forgetDraftImages(current.uid);
         }
     }
 
@@ -1108,6 +1144,7 @@ export default function ComposeWindow({
      * 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);
@@ -1147,6 +1184,7 @@ export default function ComposeWindow({
      * *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;
@@ -1246,10 +1284,13 @@ export default function ComposeWindow({
      * 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: Message) {
         lastSavedRef.current = null;
+        plaintextRequestedRef.current = null;
         setSaveStatus("idle");
         const previous = saveInFlightRef.current;
         const scrub = (async (): Promise<Message | undefined> => {
             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);
@@ -1267,7 +1308,7 @@ export default function ComposeWindow({
     }
     // 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]);
@@ -1397,6 +1438,9 @@ export default function ComposeWindow({
     // 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: string) {
+        // 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);
@@ -1422,8 +1466,10 @@ export default function ComposeWindow({
     // 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,
@@ -1595,8 +1641,8 @@ export default function ComposeWindow({
                             // 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}
+                            disabled={hasUploads || uploadsActive}
+                            title={hasUploads || uploadsActive ? "The sender can't be changed after adding attachments or images." : undefined}
                             onChange={(e) => handleFromChange(e.target.value)}
                         >
                             {fromOptions.map((mb) => (
@@ -1802,7 +1848,7 @@ export default function ComposeWindow({
                             onClick={() => void submit(false)}
                             title={withHint("Send", SHORTCUTS.compose.send, keyEnv)}
                             aria-keyshortcuts={ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv)}
-                            disabled={!draft || closing || waitingForUploads}
+                            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"
                         >
                             Send
@@ -1813,7 +1859,7 @@ export default function ComposeWindow({
                             aria-label="Send later"
                             aria-haspopup="true"
                             aria-expanded={schedulePickerOpen}
-                            disabled={!draft || closing || waitingForUploads}
+                            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"
                         >

package/apps/shared/components/mail/compose/GifPicker.tsx

@@ -32,13 +32,19 @@ export default function GifPicker({ anchorRef, onSelect, onClose }: GifPickerPro
     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 (

package/apps/shared/components/mail/compose/RecipientInput.tsx

@@ -125,7 +125,8 @@ export default function RecipientInput({
     dropdownZIndex,
 }: RecipientInputProps) {
     const [pending, setPending] = useState(initialPending);
-    const [suggestions, setSuggestions] = useState<RecipientSuggestion[]>([]);
+    // 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: string; items: RecipientSuggestion[] }>({ query: "", items: [] });
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
     const [position, setPosition] = useState<DropdownPosition | null>(null);
@@ -153,13 +154,13 @@ export default function RecipientInput({
     }, [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();
@@ -167,13 +168,13 @@ export default function RecipientInput({
             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: [] });
                     }
                 },
             );
@@ -233,7 +234,7 @@ export default function RecipientInput({
         const next = committed.join(", ");
         setPending("");
         setOpen(false);
-        setSuggestions([]);
+        setSuggestionList({ query: "", items: [] });
         onChange(next);
         onEdit?.(committed, "");
         onCommit?.(next);
@@ -311,7 +312,8 @@ export default function RecipientInput({
                     {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 (
                             <li
                                 key={`${index}-${chip}`}

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

@@ -8,16 +8,29 @@
 export type ComposeFlush = () => Promise<unknown>;
 
 const flushers = new Set<ComposeFlush>();
+const signOutCleanups = new Set<() => void>();
 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: () => void): void {
+    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(): void {
     signingOut = true;
+    for (const cleanup of signOutCleanups) {
+        cleanup();
+    }
 }
 
 /** Undoes `markSigningOut()`. */

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

@@ -23,6 +23,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/apps/shared/components/mail/compose/quotedBody.ts

@@ -9,8 +9,18 @@ import { MAX_QUOTED_IMAGE_BYTES, QuotedImageReference, embedQuotedImages } from
 import { EMBEDDED_IMAGE_TYPES, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
 import type { MessageSecurityResult } from "../../../../../lib/crypto/messageSecurity.js";
 import { MimeAttachment, 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<MessageSecurityResult["state"]>([
+    "signed_verified",
+    "encrypted_verified",
+    "signed_unverified_signer",
+    "encrypted_unverified_signer",
+    "verified_at_first_open",
+]);
+
 /** What a Reply/Reply All/Forward needs from the message being answered, beyond what its `Message` record holds. */
 export interface OriginalMessage {
     /** The body to quote. Empty when none could be loaded - the quote builders then fall back to `bodyPreview`. */
@@ -26,6 +36,9 @@ export const QUOTE_FETCH_TIMEOUT_MS = 10_000;
 /** How long a fetched (or prefetched) body is remembered, so hovering Reply and then clicking it costs one request. */
 export const QUOTE_CACHE_MS = 30_000;
 
+/** 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<string, { at: number; promise: Promise<string | undefined> }>();
 
 /**
@@ -50,6 +63,12 @@ function fetchContentHtml(uid: string): Promise<string | undefined> {
             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) {
@@ -83,6 +102,7 @@ export function prefetchOriginalMessage(message: Message): void {
 export function clearOriginalMessageCache(): void {
     contentCache.clear();
 }
+onSigningOut(clearOriginalMessageCache);
 
 /** The recipients one address-list header names, RFC 2047-decoded, with their display names. */
 function headerRecipients(value: string | undefined, type: "to" | "cc"): Recipient[] {
@@ -96,9 +116,9 @@ function headerRecipients(value: string | undefined, type: "to" | "cc"): Recipie
 
 /** The `data:` URI of the picture a quoted image of `message` stands for - one of the message's own attachments, fetched with the session -
  * 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: Message): (reference: QuotedImageReference) => Promise<string | undefined> {
+function serverImageResolver(message: Message): (reference: QuotedImageReference, signal?: AbortSignal) => Promise<string | undefined> {
     let attachments: Promise<Awaited<ReturnType<typeof listAttachments>>> | undefined;
-    return async (reference) => {
+    return async (reference, signal) => {
         try {
             attachments ??= listAttachments(message.folderUid, message.uid);
             const attachment = findInlineAttachment(await attachments, reference);
@@ -106,7 +126,7 @@ function serverImageResolver(message: Message): (reference: QuotedImageReference
             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;
         } catch {
@@ -159,7 +179,9 @@ export async function loadOriginalMessage(
 ): Promise<OriginalMessage> {
     const recovered: QuotedBody | undefined =
         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")]
         : [];
@@ -197,8 +219,11 @@ export async function loadOriginalMessage(
     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/apps/shared/components/mail/layout/MailShell.tsx

@@ -338,7 +338,7 @@ export default function MailShell({
     // `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 <MailboxProvisioning />;
+        return <MailboxProvisioning impersonating={impersonating} impersonationBaseUrl={impersonationBaseUrl} />;
     }
 
     let inner: ReactNode = null;

package/apps/shared/components/mail/reading/MessageBody.tsx

@@ -36,7 +36,8 @@ export interface MessageBodyProps {
     onAdaptable?: (adaptable: boolean) => void;
 }
 
-type Remote = { status: "loading" } | { status: "ready"; content: BodyContent } | { status: "error"; message: string };
+/** `uid` is the message a ready body is of, so a later fetch for the same message (its version moved on) can leave what is shown in place. */
+type Remote = { status: "loading" } | { status: "ready"; content: BodyContent; uid: string } | { status: "error"; message: string };
 
 /** Placeholder lines shown where the body will be, in the body's own place, until it has arrived and been laid out. */
 export function BodySkeleton() {
@@ -73,7 +74,7 @@ const AUTHORED_CANVAS = "rgb(255, 255, 255)";
 export default function MessageBody({ messageUid, messageVersion, title, content, attachments, inlineParts, original = false, onAdaptable }: MessageBodyProps) {
     const [remote, setRemote] = useState<Remote>(() => {
         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;
@@ -84,15 +85,20 @@ 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" });
+        // 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 }),
+            (loaded) => setRemote({ status: "ready", content: loaded, uid: messageUid }),
             (err) => {
-                if (!controller.signal.aborted) {
+                if (!controller.signal.aborted && !revalidating) {
                     setRemote({ status: "error", message: err instanceof ApiRequestError ? err.message : "Could not load this message." });
                 }
             },
@@ -100,7 +106,7 @@ export default function MessageBody({ messageUid, messageVersion, title, content
         return () => controller.abort();
     }, [messageUid, messageVersion, supplied, attempt]);
 
-    const shown: Remote = content ? { status: "ready", content } : remote;
+    const shown: Remote = content ? { status: "ready", content, uid: messageUid } : remote;
     if (shown.status === "loading") {
         return <BodySkeleton />;
     }

package/apps/shared/components/mail/reading/bodyContent.ts

@@ -6,6 +6,7 @@ import { ApiRequestError, apiUrl } from "../../../../../lib/util/api.js";
 import { Attachment, attachmentContentUrl } from "../../../../../lib/mail/mailApi.js";
 import type { MimeAttachment } from "../../../../../lib/crypto/mime.js";
 import { bytesToBase64, findInlineAttachment, toDataUri } from "../../../../../lib/mail/inlineImages.js";
+import { onSigningOut } from "../compose/composeFlushRegistry.js";
 
 /** What a message's body is: server-sanitized HTML, or plain text (a message with no HTML part, or the server's plain-text fallback). */
 export type BodyContent = { kind: "html"; html: string } | { kind: "text"; text: string };
@@ -20,6 +21,7 @@ const cache = new Map<string, BodyContent>();
 export function clearBodyContentCache(): void {
     cache.clear();
 }
+onSigningOut(clearBodyContentCache);
 
 /** The remembered body for a message at a version, if any. */
 export function cachedBodyContent(uid: string, version: number): BodyContent | undefined {

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

@@ -57,11 +57,34 @@ const STYLE_HAZARDS: [RegExp, string][] = [
     [/@import[^;]*;?/gi, ""],
 ];
 
-/** CSS with the constructs above neutralised. */
-export function sanitizeCss(css: string): string {
+function neutraliseHazards(css: string): string {
     return STYLE_HAZARDS.reduce((text, [pattern, replacement]) => text.replace(pattern, replacement), css);
 }
 
+/** `css` as a browser reads it: comments gone, and every escape resolved - repeatedly, since a decoded backslash can start another (`\5c 76h`). */
+function readAsBrowser(css: string): string {
+    let text = css;
+    for (let pass = 0; pass < 3; pass++) {
+        const next = unescapeCss(text.replace(/\/\*[\s\S]*?\*\//g, " "));
+        if (next === text) {
+            break;
+        }
+        text = next;
+    }
+    return text;
+}
+
+/**
+ * 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 function sanitizeCss(css: string): string {
+    const decoded = readAsBrowser(css);
+    const decodedClean = neutraliseHazards(decoded);
+    return decodedClean !== decoded ? decodedClean : neutraliseHazards(css);
+}
+
 /** Elements removed together with everything inside them. */
 const REMOVED_ELEMENTS = new Set([
     "script",

package/apps/shared/components/mail/writableMailboxes.ts

@@ -22,6 +22,7 @@ import type { Mailbox } from "../../../../lib/mail/mailApi.js";
 import { getMyMailboxAccess } from "../../../../lib/mail/mailboxAccessApi.js";
 import type { ApiClient } from "../../../../lib/util/api.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import { onSigningOut } from "./compose/composeFlushRegistry.js";
 
 /** `true` writable, `false` known view-only, `undefined` couldn't tell (treated as writable). */
 export type MailboxWritability = boolean | undefined;
@@ -34,6 +35,7 @@ export function clearMailboxWritabilityCache(): void {
     inFlight.clear();
     settled.clear();
 }
+onSigningOut(clearMailboxWritabilityCache);
 
 function isImplicitlyWritable(mailbox: Mailbox, userUid: string | undefined, trusted: boolean | undefined): boolean {
     return !!trusted || (!!userUid && mailbox.ownerUserUid === userUid);

package/apps/shared/components/rules/RuleBuilder.tsx

@@ -87,6 +87,8 @@ export default function RuleBuilder<C extends object, A extends { type: string }
 }: RuleBuilderProps<C, A>) {
     const [draftText, setDraftText] = useState<Record<string, string>>({});
     const [newActionType, setNewActionType] = useState(actionTypes[0]?.value ?? "");
+    // The sequence field's text while it is being edited (it may be empty, which is no number); `null` shows the rule's own.
+    const [sequenceDraft, setSequenceDraft] = useState<string | null>(null);
     const conditions = value.conditions as Record<string, unknown>;
 
     function patch(next: Partial<RuleBuilderValue<C, A>>) {
@@ -300,8 +302,15 @@ export default function RuleBuilder<C extends object, A extends { type: string }
                         <input
                             type="number"
                             className="w-20 text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
-                            value={value.sequence}
-                            onChange={(e) => patch({ sequence: Number(e.target.value) })}
+                            value={sequenceDraft ?? value.sequence}
+                            onChange={(e) => {
+                                // What is typed is kept as typed, so the field can be cleared and typed afresh; the rule only takes a number.
+                                setSequenceDraft(e.target.value);
+                                if (e.target.value !== "") {
+                                    patch({ sequence: Number(e.target.value) });
+                                }
+                            }}
+                            onBlur={() => setSequenceDraft(null)}
                         />
                     </label>
                 </div>