@rapidmx/web-client 0.4.0 → 0.5.0

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -1,20 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
-import { HiOutlineLockClosed } from "react-icons/hi2";
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineCheck, HiOutlineExclamationTriangle, HiOutlineLockClosed } from "react-icons/hi2";
 import DOMPurify from "dompurify";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, getMessageRawContent, recallMessage, setMessageLabels, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, getMessage, getMessageRawContent, recallMessage, setMessageLabels, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { buildForwardQuote, buildReplyQuote, forwardSubject, replySubject } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
-import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
-import { evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
+import { evaluateMessageSecurity, evaluateMessageSecurityWithSeal, } from "@rapidmx/react-shared/crypto/messageSecurity.js";
+import { extractAddresses } from "@rapidmx/react-shared/crypto/mime.js";
+import { SignerKeyConflictError, signingKeyFingerprints, trustSigner } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
+import { clearPinnedSignerCache, getPinnedSignerFingerprints, getSignerKeyState } from "./pinnedSigners.js";
+import { currentVerificationSeal, getVaultGeneration, sendVerificationSeal } from "./verificationSeals.js";
+import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import KeyChangeReview from "../contacts/KeyChangeReview.js";
+import { KEY_CHANGE_STALE_MESSAGE, sameFingerprint } from "../contacts/contactKeys.js";
 import { useCompose } from "./compose/ComposeContext.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
+import { moveLocalEntity } from "../../search/localIndexRpcClient.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -28,11 +36,157 @@ const SECURITY_INDICATOR = {
     encrypted: { label: "Encrypted", className: "bg-primary/10 text-primary-dark" },
     signed_verified: { label: "Signed & verified", className: "bg-success/10 text-success" },
     encrypted_verified: { label: "Encrypted & verified", className: "bg-success/10 text-success" },
+    // A valid signature from a certificate the reader hasn't pinned - anyone can mint a certificate naming the
+    // sender, so this must never look like the verified states.
+    signed_unverified_signer: { label: "Signed - signer not verified", className: "bg-warning/15 text-text" },
+    encrypted_unverified_signer: { label: "Encrypted - signer not verified", className: "bg-warning/15 text-text" },
     signature_failed: { label: "Signature failed", className: "bg-danger-bg text-danger" },
+    // Verified when first opened (a verification seal), but not live: muted, never the green verified pill. A signer key
+    // later reported compromised switches it to `LATER_COMPROMISED_INDICATOR_CLASS`.
+    verified_at_first_open: { label: "Verified when first opened", className: "bg-surface-alt text-text-muted" },
 };
-function SecurityIndicator({ state }) {
-    const { label, className } = SECURITY_INDICATOR[state];
-    return _jsx("span", { className: `text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${className}`, children: label });
+/** The amber `verified_at_first_open` badge for a signer key since reported compromised. */
+const LATER_COMPROMISED_INDICATOR_CLASS = "bg-warning/15 text-text";
+/** Whether a result is (or, for `verified_at_first_open`, was live) a `signer_key_changed` failure. */
+function signerKeyChanged(result) {
+    return result.signatureFailureReason === "signer_key_changed" || result.liveSignatureFailureReason === "signer_key_changed";
+}
+/** The detail line under a `verified_at_first_open` badge. */
+export function verifiedAtFirstOpenMessage(result) {
+    const date = new Date(result.verifiedAt).toLocaleDateString();
+    if (result.laterCompromised) {
+        return `This signature was verified on ${date}, but the sender's key was later reported compromised; treat this message with caution.`;
+    }
+    if (result.liveSignatureFailureReason === "signer_key_changed") {
+        return `This signature was verified on ${date}. The sender has since started signing with a different key.`;
+    }
+    return `This signature was verified on ${date}. The sender's key is no longer trusted since then, for example because it was removed, replaced or revoked.`;
+}
+const VERIFIED_STATES = new Set(["signed_verified", "encrypted_verified"]);
+const UNVERIFIED_SIGNER_STATES = new Set(["signed_unverified_signer", "encrypted_unverified_signer"]);
+/** An `@`, or a look-alike a reader would take for one (fullwidth, small) - restapi's own `AT_SIGN_LIKE`. */
+const AT_SIGN_LIKE = /[@\uFF20\uFE6B]/;
+/** Whether a sender's display name poses as an address, and whether that address differs from the one actually sent
+ * from. Compatibility forms are folded first (NFKC turns the fullwidth and small @ into `@`), so a look-alike can't
+ * hide the token. */
+export function checkSenderName(displayName, actualAddress) {
+    if (!displayName || !AT_SIGN_LIKE.test(displayName)) {
+        return { looksLikeAddress: false, misleading: false };
+    }
+    const shown = /[^\s<>"'(),;:]+@[^\s<>"'(),;:]+/.exec(displayName.normalize("NFKC"))?.[0];
+    return { looksLikeAddress: true, misleading: shown !== undefined && shown.toLowerCase() !== actualAddress.toLowerCase() };
+}
+export const TRUST_SIGNER_CONFLICT_MESSAGE = "A different signing key is already trusted for this sender, so this one wasn't trusted. The sender's key may have changed; confirm with them before doing anything.";
+export const TRUST_SIGNER_INVALID_MESSAGE = "This certificate can't be trusted for this sender.";
+export const TRUST_SIGNER_FORBIDDEN_MESSAGE = "You don't have permission to trust signers for this mailbox.";
+export const TRUST_SIGNER_GENERIC_MESSAGE = "Couldn't trust this signer. Try again.";
+export const KEPT_CURRENT_SIGNING_KEY_MESSAGE = "You kept the current signing key for this sender. This message stays unverified.";
+/** The error text for a failed `trustSigner()`. */
+export function trustSignerErrorMessage(err) {
+    if (err instanceof SignerKeyConflictError) {
+        return TRUST_SIGNER_CONFLICT_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 400) {
+        return TRUST_SIGNER_INVALID_MESSAGE;
+    }
+    if (err instanceof ApiRequestError && err.status === 403) {
+        return TRUST_SIGNER_FORBIDDEN_MESSAGE;
+    }
+    return TRUST_SIGNER_GENERIC_MESSAGE;
+}
+/** Groups a fingerprint into 4-character blocks (`AB12 CD34 ...`), ignoring any separators it came with, so it can be
+ * read out and compared with the sender over another channel. */
+export function formatFingerprint(fingerprint) {
+    const compact = fingerprint.replace(/[\s:]/g, "").toUpperCase();
+    return compact.match(/.{1,4}/g)?.join(" ") ?? compact;
+}
+/** Saves one attachment recovered from inside a signed/encrypted entity. Always handed to the browser as an
+ * opaque download (`application/octet-stream`), never rendered in this origin. */
+function downloadMimeAttachment(attachment) {
+    // `decode()` is `undefined` only for invalid base64 - an empty file is the honest result then.
+    const bytes = attachment.decode() ?? new Uint8Array(0);
+    const url = URL.createObjectURL(new Blob([bytes], { type: "application/octet-stream" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = attachment.filename ?? "attachment";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Some browsers are still reading the blob after `click()` returns.
+    setTimeout(() => URL.revokeObjectURL(url), 60000);
+}
+function SecurityIndicator({ security }) {
+    const { label, className } = SECURITY_INDICATOR[security.state];
+    if (security.state !== "verified_at_first_open") {
+        return _jsx("span", { className: `text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${className}`, children: label });
+    }
+    return (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs font-medium shrink-0 py-1 px-2.5 rounded-pill ${security.laterCompromised ? LATER_COMPROMISED_INDICATOR_CLASS : className}`, children: [security.laterCompromised ? (_jsx(HiOutlineExclamationTriangle, { size: 12, "aria-hidden": "true" })) : (_jsx(HiOutlineCheck, { size: 12, "aria-hidden": "true" })), label] }));
+}
+/** User-facing explanation for each `signatureFailureReason` - shown alongside the "Signature failed"
+ * badge so an unverifiable (e.g. foreign/unparseable) signed message reads as "not verified, and here's
+ * why" rather than as a bare error. The body itself stays visible either way. */
+const SIGNATURE_FAILURE_MESSAGE = {
+    invalid_signature: "This message's digital signature couldn't be verified - it may be malformed, use an unsupported format, or the content may have been altered after signing. Treat it as unverified.",
+    untrusted_signer: "This message was signed with a certificate that doesn't match the sender's known key. Treat it as unverified.",
+    // Never shown: the dedicated "signing key changed" notice replaces it. Present so every reason has copy.
+    signer_key_changed: "This message was signed with a different key than the one you trust for this sender. Treat it as unverified.",
+    signer_identity_mismatch: "This message's signing certificate doesn't belong to the sender shown in From. Treat it as unverified.",
+    header_mismatch: "The sender/recipients this message was signed with don't match its visible From/To, or it repeats a From, To, Cc or Sender header. Treat it as unverified.",
+};
+const GENERIC_SIGNATURE_FAILURE_MESSAGE = "This message's digital signature couldn't be verified. Treat it as unverified.";
+/** Fallback when the raw MIME for an encrypted message can't even be fetched/evaluated - an encrypted
+ * message must never be mislabeled "Unprotected" just because loading failed. */
+const ENCRYPTED_LOAD_ERROR = "Couldn't load this message's encrypted content.";
+/** Content Security Policy prepended to every client-rendered (decrypted/verified) body's `srcDoc` - the
+ * backstop behind the sanitizer below: nothing in the document may load any remote resource at all, only
+ * inline styles and `data:`/`cid:` images. */
+const BODY_CSP_META = "<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; img-src data: cid:; style-src 'unsafe-inline'\">";
+const EMBEDDED_URI = /^\s*(?:data|cid):/i;
+/** Attributes whose value makes the browser fetch a resource (as opposed to a user-clicked link). */
+const RESOURCE_URI_ATTRIBUTES = new Set(["src", "srcset", "background", "poster", "lowsrc", "dynsrc", "xlink:href", "action", "formaction"]);
+/** Decodes CSS escapes first (so an escaped `u\72l(` can't hide from the checks below), then drops every
+ * `@import` and neutralizes every `url()`/`image-set()` reference that isn't a `data:`/`cid:` URI. */
+export function stripRemoteCssUrls(css) {
+    return css
+        .replace(/\\([0-9a-f]{1,6})\s?/gi, (_match, hex) => String.fromCodePoint(Math.min(parseInt(hex, 16), 0x10ffff)))
+        .replace(/\\(.)/g, "$1")
+        .replace(/@import[^;]*;?/gi, "")
+        .replace(/(?:-webkit-)?image-set\((?:[^()]|\([^()]*\))*\)/gi, (match) => [...match.matchAll(/(["'])(.*?)\1/g)].every(([, , uri]) => EMBEDDED_URI.test(uri)) ? match : "none")
+        .replace(/url\(\s*(["']?)(.*?)\1\s*\)/gi, (match, _quote, uri) => (EMBEDDED_URI.test(uri) ? match : "none"));
+}
+let bodyPurifier;
+/** A dedicated DOMPurify instance (hooks registered here never leak into any other DOMPurify caller)
+ * that additionally strips every remote resource reference - see `stripRemoteCssUrls()`. */
+function getBodyPurifier() {
+    if (!bodyPurifier) {
+        bodyPurifier = DOMPurify(window);
+        bodyPurifier.addHook("uponSanitizeElement", (node, data) => {
+            if (data.tagName === "style") {
+                // An element's `textContent` is always a string (only documents/doctypes yield null).
+                node.textContent = stripRemoteCssUrls(node.textContent);
+            }
+        });
+        bodyPurifier.addHook("uponSanitizeAttribute", (node, data) => {
+            const name = data.attrName.toLowerCase();
+            if (name === "style") {
+                data.attrValue = stripRemoteCssUrls(data.attrValue);
+                return;
+            }
+            const isNavigationLink = name === "href" && ["a", "area"].includes(node.nodeName.toLowerCase());
+            if (RESOURCE_URI_ATTRIBUTES.has(name) || (name === "href" && !isNavigationLink)) {
+                const candidates = name === "srcset" ? data.attrValue.split(/,\s+/) : [data.attrValue];
+                if (!candidates.every((candidate) => EMBEDDED_URI.test(candidate))) {
+                    data.keepAttr = false;
+                }
+            }
+        });
+    }
+    return bodyPurifier;
+}
+/** Sanitizes a client-rendered body for `srcDoc`, with the CSP meta as its very first element. */
+export function buildSecureSrcDoc(html) {
+    const sanitized = getBodyPurifier().sanitize(html, { FORBID_TAGS: ["link", "meta", "base"] });
+    return BODY_CSP_META + sanitized;
 }
 function formatBytes(bytes) {
     if (bytes >= 1000000)
@@ -48,7 +202,30 @@ function formatBytes(bytes) {
  * a message row), and `ConversationThreadPane` (one per expanded message in a thread) — see each call
  * site for how `message`/`attachments`/`isSentItems` are sourced.
  */
-export default function MessageDetailPane({ message, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, isInbox, onClassified, onReceiptHandled, onArchived, labels, onLabelsChanged, }) {
+export default function MessageDetailPane(props) {
+    if (!props.message) {
+        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
+    }
+    // Keyed by uid so every piece of per-message state below (security result, open modals, in-flight
+    // flags, errors) resets cleanly when a caller swaps `message` in place rather than remounting.
+    return _jsx(MessageDetailContent, { ...props, message: props.message }, props.message.uid);
+}
+/** Whether a message's raw MIME has to be fetched to evaluate its security state. `encrypted` is the
+ * server's own classification; there is no server-side "signed" flag, but every S/MIME-signed shape
+ * (detached `multipart/signed`'s `smime.p7s`, opaque-signed `smime.p7m`) is stored with its CMS part
+ * surfaced as an attachment - so a message with neither flag can't carry a signature to verify, and
+ * fetching its full raw source (attachments included) would be pure waste. */
+function needsRawSecurityEvaluation(message) {
+    return !!message.encrypted || message.hasAttachments;
+}
+function MessageDetailContent({ message: messageProp, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, isInbox, onClassified, onReceiptHandled, onArchived, labels, onLabelsChanged, }) {
+    // A copy re-read from the server after an Outbox action was refused (409/403) or a send lease ran out - see
+    // `reloadMessage()`. A prop copy newer by `version` wins; an equal-version reload is kept, since claiming a send
+    // lease need not bump `version`.
+    const [reloaded, setReloaded] = useState(null);
+    const message = reloaded && reloaded.version >= messageProp.version ? reloaded : messageProp;
+    // A reload that finds the message already moved on (sent, or moved to Drafts elsewhere) leaves Outbox.
+    const inOutbox = !!isOutbox && message.folderUid === messageProp.folderUid;
     const { openCompose } = useCompose();
     const [confirming, setConfirming] = useState(false);
     const [recalling, setRecalling] = useState(false);
@@ -71,46 +248,180 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
     const [receiptBusy, setReceiptBusy] = useState(null);
     const [receiptError, setReceiptError] = useState(null);
     const [security, setSecurity] = useState(null);
+    // Whether the pinned-signer lookup for the sender *succeeded* and found no signing keys - the only case "Trust this
+    // signer" is offered in. A failed lookup could be hiding an existing pin, and trusting never replaces one.
+    const [senderUnpinned, setSenderUnpinned] = useState(false);
+    const [trustConfirmOpen, setTrustConfirmOpen] = useState(false);
+    const [trusting, setTrusting] = useState(false);
+    const [trustError, setTrustError] = useState(null);
+    // The sender's stored signing-key state, loaded for a `signer_key_changed` result (the comparison) and for an
+    // unverified signer with no pins (a recorded conflict sends the reader to the contact instead of offering trust).
+    // `undefined` when not needed or it couldn't be loaded.
+    const [senderKeyState, setSenderKeyState] = useState(undefined);
+    // Whether the reader may update this mailbox (resolving a key change needs it) - `undefined` when unknown.
+    const [canUpdateMailbox, setCanUpdateMailbox] = useState(undefined);
+    // "Keys changed while you were looking" after a 409, or the outcome of keeping the current key. Survives the
+    // re-evaluation that follows.
+    const [keyChangeNotice, setKeyChangeNotice] = useState(null);
+    // "Now", for deciding whether a scheduled send's lease is still live - advanced when the lease runs out.
+    const [nowMs, setNowMs] = useState(() => Date.now());
     const { mailboxes } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
     // state; see keySession.ts's own doc comment).
     const [unlockRefresh, setUnlockRefresh] = useState(0);
-    // Evaluates every message's security state, not just ones flagged `encrypted` - a detached
-    // `multipart/signed` message needs its raw MIME read too (a sanitized HTML body never carries the
-    // signature part) to tell "Signed & verified" apart from plain "Unprotected". A fetch/parse failure
-    // degrades to "Unprotected" rather than surfacing an error - the spec treats that as this module's
-    // safe default, not a distinct failure state of its own.
+    // The newest copy of this message known to the Labels popover - normally just the `message` prop,
+    // but a successful label toggle's server response is held here too, so a follow-up toggle always
+    // builds on the latest `labelUids`/`version` even before (or without) the caller patching its own
+    // state via `onLabelsChanged`. A prop copy at least as new (by `version`) always wins.
+    const [labelsMessage, setLabelsMessage] = useState(message);
+    const currentLabelsMessage = message.version >= labelsMessage.version ? message : labelsMessage;
+    const latestLabelsMessageRef = useRef(message);
+    const rawEvaluationNeeded = needsRawSecurityEvaluation(message);
+    // Every address the viewing mailbox receives at (primary first), as one string so the effect below only
+    // re-runs when they actually change.
+    const readerMailbox = mailboxes.find((mb) => mb.uid === message.mailboxUid);
+    const readerAddressesKey = readerMailbox ? [readerMailbox.primarySmtpAddress, ...(readerMailbox.aliasAddresses ?? [])].join(" ") : "";
+    // Evaluates a message's security state from its raw MIME - only for a message that can actually be
+    // encrypted or signed (see `needsRawSecurityEvaluation()`); anything else is "Unprotected" without a
+    // fetch. A detached `multipart/signed` message needs its raw MIME read (a sanitized HTML body never
+    // carries the signature part) to tell "Signed & verified" apart from plain "Unprotected". A
+    // fetch/parse failure degrades to "Unprotected" (or, for a server-flagged encrypted message, to
+    // "Encrypted" with an explanation) rather than hiding the message.
+    //
+    // `getMessageRawContent()` takes no `AbortSignal`, so a superseded fetch can't be aborted - its
+    // result is ignored via `cancelled` instead (and never handed to `evaluateMessageSecurity()`).
     useEffect(() => {
-        if (!message) {
-            setSecurity(null);
+        if (!rawEvaluationNeeded) {
+            setSecurity({ state: "unprotected" });
             return;
         }
         let cancelled = false;
         setSecurity(null);
+        setSenderUnpinned(false);
+        setSenderKeyState(undefined);
+        // The sender's trusted signing keys: what key discovery pinned on this mailbox's contacts, plus this
+        // mailbox's own signing keys when it sent the message itself. A failed lookup means no pins, which can only
+        // ever make a signature "signer not verified", never verified.
+        const senderAddress = message.from.address;
+        const pinsPromise = getPinnedSignerFingerprints(message.mailboxUid, senderAddress).then((fingerprints) => ({ loaded: true, fingerprints }), () => ({ loaded: false, fingerprints: [] }));
+        // Verification seals (see `verificationSeals.ts`) need unlocked keys and the vault's current master key
+        // generation; without either the message is evaluated exactly as before, with no seal. The sender's key records
+        // are loaded alongside, so a seal can say when the signer key was later revoked as compromised.
+        let keyStatePromise;
+        const loadKeyState = () => (keyStatePromise ?? (keyStatePromise = getSignerKeyState(message.mailboxUid, senderAddress).catch(() => undefined)));
+        const sealContextPromise = getUnlockedKeys(message.mailboxUid)
+            ? getVaultGeneration(message.mailboxUid).then(async (generation) => generation === undefined ? undefined : { generation, keyState: await loadKeyState() })
+            : undefined;
         getMessageRawContent(message.uid)
-            .then((rawMime) => evaluateMessageSecurity(rawMime, getUnlockedKeys(message.mailboxUid)))
-            .then((result) => {
+            .then(async (rawMime) => {
+            if (cancelled) {
+                return;
+            }
+            const [primaryAddress, ...aliasAddresses] = readerAddressesKey ? readerAddressesKey.split(" ") : [];
+            const ownAddresses = readerAddressesKey.toLowerCase().split(" ");
+            const ownKeys = ownAddresses.includes(senderAddress.toLowerCase()) ? (readerMailbox.keys ?? []) : [];
+            const ownPins = signingKeyFingerprints(ownKeys);
+            const [contactPins, sealContext] = await Promise.all([pinsPromise, sealContextPromise]);
+            const pins = [...new Set([...contactPins.fingerprints, ...ownPins])];
+            const pinned = pins.length > 0 ? pins : undefined;
+            // The raw content is a byte string - only ever handed to evaluateMessageSecurity(), never shown. Keys
+            // are read after the pin lookup's await, so a lock that happened meanwhile is honored.
+            const unlocked = getUnlockedKeys(message.mailboxUid);
+            let result;
+            if (sealContext && unlocked) {
+                const signerKeys = [
+                    ...(sealContext.keyState?.pinned ?? []),
+                    ...(sealContext.keyState?.previous ?? []),
+                    ...ownKeys,
+                ];
+                result = await evaluateMessageSecurityWithSeal(rawMime, unlocked, pinned, primaryAddress, {
+                    mailboxUid: message.mailboxUid,
+                    messageUid: message.uid,
+                    ...currentVerificationSeal(message),
+                    masterKeyGeneration: sealContext.generation,
+                    signerKeys,
+                }).catch(() => 
+                // Only a lock while sealing throws: evaluate as locked (the lock itself re-evaluates too).
+                evaluateMessageSecurity(rawMime, undefined, pinned, primaryAddress));
+                if (result.sealToWrite) {
+                    // Best effort and in the background: never awaited, never shown.
+                    void sendVerificationSeal(message.uid, result.sealToWrite);
+                }
+            }
+            else {
+                result = await evaluateMessageSecurity(rawMime, unlocked, pinned, primaryAddress);
+            }
+            // Only one reader address can be checked per evaluation: a message sent to one of this mailbox's
+            // aliases isn't "not addressed to you", so each alias is tried before saying so.
+            for (const alias of aliasAddresses) {
+                if (!result.notAddressedToReader) {
+                    break;
+                }
+                const viaAlias = await evaluateMessageSecurity(rawMime, unlocked, pinned, alias);
+                result = { ...result, notAddressedToReader: viaAlias.notAddressedToReader };
+            }
+            const unpinned = contactPins.loaded && pins.length === 0;
+            const keyChanged = signerKeyChanged(result);
+            const [keyState, access] = await Promise.all([
+                keyChanged || (unpinned && UNVERIFIED_SIGNER_STATES.has(result.state)) ? loadKeyState() : undefined,
+                keyChanged ? getMyMailboxAccess(message.mailboxUid).then((a) => a.canUpdate, () => undefined) : undefined,
+            ]);
             if (!cancelled) {
                 setSecurity(result);
+                setSenderUnpinned(unpinned);
+                setSenderKeyState(keyState);
+                setCanUpdateMailbox(access);
             }
         })
             .catch(() => {
             if (!cancelled) {
-                setSecurity({ state: "unprotected" });
+                setSecurity(message.encrypted ? { state: "encrypted", decryptError: ENCRYPTED_LOAD_ERROR } : { state: "unprotected" });
             }
         });
         return () => {
             cancelled = true;
         };
-    }, [message?.uid, unlockRefresh]);
+    }, [message.uid, message.mailboxUid, message.from.address, message.encrypted, rawEvaluationNeeded, unlockRefresh, readerAddressesKey]);
+    // Decrypted plaintext must not outlive the key session that produced it: the moment this mailbox's
+    // keys are destroyed (logout, idle timeout, explicit lock), drop the recovered html/text and
+    // re-evaluate - an encrypted message then falls back to its "Unlock to view" state.
+    useEffect(() => subscribeKeySession((event) => {
+        if (event.mailboxUid === message.mailboxUid && event.state === "locked") {
+            setSecurity(null);
+            setUnlockRefresh((n) => n + 1);
+        }
+    }), [message.mailboxUid]);
+    // While restapi's ScheduledSendJob holds a send lease the message is being relayed: cancelling or moving it would be
+    // refused (409/403), so the Outbox controls are replaced by "Sending...". When the lease runs out the message is
+    // re-read - it has either been sent (and left Outbox) or been released back to its schedule.
+    const leaseExpiresMs = message.scheduledSendLeaseExpiresAt ? Date.parse(message.scheduledSendLeaseExpiresAt) : NaN;
+    const sendInProgress = inOutbox && leaseExpiresMs > nowMs;
+    useEffect(() => {
+        if (!sendInProgress) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            setNowMs(Date.now());
+            void reloadMessage();
+        }, leaseExpiresMs - nowMs + 1);
+        return () => clearTimeout(timer);
+    }, [sendInProgress, leaseExpiresMs, nowMs]);
+    async function reloadMessage() {
+        try {
+            setReloaded(await getMessage(message.uid));
+            setNowMs(Date.now());
+        }
+        catch {
+            // Keep showing what we have - the next refused action or lease expiry tries again.
+        }
+    }
     // Offered only when this device genuinely has no unlocked session for this message's mailbox at all
     // (as opposed to being unlocked but still unable to decrypt - a wrong/since-rotated key, which
     // re-unlocking the same session can't fix) - see `evaluateMessageSecurity()`'s own doc comment on why
     // `decryptError` alone can't distinguish those two cases.
     async function handleUnlockToView() {
-        // Only reachable via the button below, which never renders while `message` is null.
         const mailboxUid = message.mailboxUid;
         const mailboxKeys = mailboxes.find((mb) => mb.uid === mailboxUid)?.keys ?? [];
         try {
@@ -121,8 +432,31 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             // User dismissed the unlock dialog - security state stays exactly as it was.
         }
     }
-    if (!message) {
-        return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
+    // Only ever invoked from the "Trust this signer" dialog, which only opens for an unverified-signer result carrying
+    // `signerCertificate`. The pin goes on the contact in the mailbox the message belongs to; the evaluation is then
+    // re-run against a fresh pinned-signer lookup, so the badge turns verified.
+    async function handleTrustSigner(address, certificate) {
+        setTrusting(true);
+        setTrustError(null);
+        try {
+            await trustSigner(message.mailboxUid, { address, certificate });
+            clearPinnedSignerCache();
+            setTrustConfirmOpen(false);
+            setUnlockRefresh((n) => n + 1);
+        }
+        catch (err) {
+            setTrustError(trustSignerErrorMessage(err));
+        }
+        finally {
+            setTrusting(false);
+        }
+    }
+    // After a key change was accepted or kept (or the pinned key moved meanwhile): the pinned signers are re-read and
+    // the message re-evaluated, so an accepted key turns the badge verified.
+    function refreshAfterKeyChange(notice) {
+        setKeyChangeNotice(notice);
+        clearPinnedSignerCache();
+        setUnlockRefresh((n) => n + 1);
     }
     // Only ever invoked from the Reply/Reply All/Forward buttons below, which themselves only render
     // once `message` is loaded (the early return above covers the only other state) — the non-null
@@ -176,19 +510,27 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             setRecalling(false);
         }
     }
-    // Only ever invoked from the "Cancel" button below, which itself only renders once `message` is
-    // loaded and `isOutbox`/`message.scheduledSendTime` are both truthy — `draftsFolderUid` is required
-    // by that same rendering guard (see the prop's own doc comment), so the non-null assertion reflects
-    // a real invariant, matching `handleRecall`'s identical pattern just above.
+    // Only ever invoked from the "Cancel" button below (`isOutbox` and `message.scheduledSendTime` both truthy -
+    // `draftsFolderUid` is required whenever `isOutbox` is, see the prop's own doc comment), or from "Move to
+    // Drafts" (an Outbox message with no active schedule, which checks `draftsFolderUid` itself), so the non-null
+    // assertion reflects a real invariant, matching `handleRecall`'s identical pattern just above.
     async function handleCancelScheduledSend() {
         setCanceling(true);
         setCancelError(null);
         try {
             const updated = await cancelScheduledSend(message, draftsFolderUid);
+            // Keeps a `folder:`-scoped Tier 2 local search from still finding it in its old folder.
+            void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
             onScheduledSendCanceled?.(updated);
         }
         catch (err) {
-            setCancelError(err instanceof ApiRequestError ? err.message : "Could not cancel this scheduled send.");
+            const fallback = message.scheduledSendTime ? "Could not cancel this scheduled send." : "Could not move this message to Drafts.";
+            setCancelError(err instanceof ApiRequestError ? err.message : fallback);
+            // A conflict or refusal usually means the send job claimed (or already relayed) the message meanwhile -
+            // re-read it so the pane shows "Sending..." or its new state instead of the stale controls.
+            if (err instanceof ApiRequestError && (err.status === 409 || err.status === 403)) {
+                void reloadMessage();
+            }
         }
         finally {
             setCanceling(false);
@@ -202,6 +544,7 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
         setArchiveError(null);
         try {
             const updated = await archiveMessage(message.uid);
+            void moveLocalEntity(updated.mailboxUid, updated.uid, updated.folderUid);
             onArchived?.(updated);
         }
         catch (err) {
@@ -215,13 +558,24 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
     // `message` is loaded — auto-saves on every toggle (no separate "Save" step), computing the full
     // new `labelUids` set from the message's current one since `setMessageLabels()` replaces the whole
     // list rather than patching a single entry.
+    //
+    // Toggles are serialized (every checkbox is disabled while one is in flight - React flushes a
+    // discrete input event's state update synchronously, so a second change can't slip in first), and
+    // each one reads the latest known copy (`latestLabelsMessageRef`, never a stale render closure) - so
+    // two quick toggles can never compute their full list, or send their optimistic-lock `version`, from
+    // the same stale snapshot.
     async function handleToggleLabel(labelUid) {
         setTogglingLabelUid(labelUid);
         setLabelsError(null);
         try {
-            const current = message.labelUids ?? [];
+            // Read through the ref (not this render's closure) so a toggle fired from a not-yet-re-rendered
+            // handler still sees the previous toggle's server response.
+            const base = message.version >= latestLabelsMessageRef.current.version ? message : latestLabelsMessageRef.current;
+            const current = base.labelUids ?? [];
             const next = current.includes(labelUid) ? current.filter((uid) => uid !== labelUid) : [...current, labelUid];
-            const updated = await setMessageLabels(message, next);
+            const updated = await setMessageLabels(base, next);
+            latestLabelsMessageRef.current = updated;
+            setLabelsMessage(updated);
             onLabelsChanged?.(updated);
         }
         catch (err) {
@@ -264,14 +618,65 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             setReceiptBusy(null);
         }
     }
-    return (_jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("div", { className: "border-b border-border p-4", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block mb-2", children: "\u2190 Back to messages" })), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight truncate", children: message.subject || "(no subject)" }), security && _jsx(SecurityIndicator, { state: security.state })] }), isSentItems &&
-                                (message.recallRequestedAt ? (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Recall requested" })) : (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setConfirming(true), children: "Recall this message" }))), isOutbox && message.scheduledSendTime && (_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("span", { className: "text-xs font-medium text-text-muted py-1 px-2.5 rounded-pill bg-surface-alt", children: ["Scheduled for ", new Date(message.scheduledSendTime).toLocaleString()] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Cancel" })] }))] }), cancelError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: cancelError }) })), security?.headerTamperDetected && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: "This message's visible From/To/Cc/Date/Subject don't match what the sender actually signed or encrypted \u2014 an intermediary may have altered them after sending. Treat the fields shown above with caution." }) })), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["From ", message.from.displayName || message.from.address, " \u00B7", " ", new Date(message.receivedDate).toLocaleString()] }), _jsxs("p", { className: "text-sm text-text-muted", children: ["To ", message.recipients.map((r) => r.displayName || r.address).join(", ")] }), _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReply, children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReplyAll, children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleForward, children: "Forward" }), !isOutbox && message.folderUid !== draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: archiving, disabled: archiving, onClick: handleArchive, children: "Archive" })), labels && labels.length > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLabelsOpen(true), children: "Labels" }))] }), archiveError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: archiveError }) })), labels && (message.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", children: message
+    const verified = security !== null && VERIFIED_STATES.has(security.state);
+    // A seal proves the signature verified when first opened, and the live check still passed everything but the signer
+    // key's status - so the signed Subject and attachments are shown as for a verified message, under its own badge.
+    const verifiedOrSealed = verified || security?.state === "verified_at_first_open";
+    // Under a verified badge, the Subject shown is the one the signature covers (RFC 9788 protected headers), when
+    // the message carries one - the outer Subject is unsigned and anyone relaying the message could change it.
+    const protectedSubject = verifiedOrSealed ? security.protectedHeaders?.subject : undefined;
+    // Only meaningful for signed-only mail: an encrypted message's outer Subject is deliberately obscured. Not a
+    // signature failure (mailing lists legitimately tag subjects), just worth pointing out.
+    const subjectDiffers = protectedSubject !== undefined && (security.state === "signed_verified" || security.sealedState === "signed_verified") && protectedSubject !== message.subject;
+    // Attachments inside the signed/decrypted entity. Under a verified badge only these are listed - the server's
+    // attachment records also include parts outside the signature, which the badge doesn't vouch for. For decrypted
+    // mail the server only ever saw the encrypted blob, so these are the real attachments.
+    // A decrypted message whose signature failed still only has these (the server list is just `smime.p7m`); they're
+    // listed with a warning. A signed-only failure never carries recovered attachments.
+    const innerAttachments = security?.attachments !== undefined &&
+        (verifiedOrSealed || security.state === "encrypted" || security.state === "encrypted_unverified_signer" || security.state === "signature_failed")
+        ? security.attachments
+        : undefined;
+    // Any state that involves a signature shows the address actually signed for (the protected From when the message
+    // carries one - it equals the outer From's address, or verification would have failed) next to the badge, never a
+    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com.
+    const signatureShown = security !== null && security.state !== "unprotected" && security.state !== "encrypted";
+    const senderAddress = (signatureShown ? extractAddresses(security.protectedHeaders?.from)[0] : undefined) ?? message.from.address;
+    const senderName = message.from.displayName;
+    const senderNameCheck = checkSenderName(senderName, senderAddress);
+    const showSenderAddress = !!senderName && (signatureShown || senderNameCheck.looksLikeAddress);
+    const senderLabel = showSenderAddress ? `${senderName} <${senderAddress}>` : senderName || senderAddress;
+    // Offered only for a valid signature from a certificate nobody pinned for this sender - never to replace a pin.
+    // A recorded signing-key conflict for this sender is resolved from the contact, never by trusting another key.
+    const pendingConflict = senderUnpinned && senderKeyState?.conflict !== undefined;
+    const trustableCertificate = security !== null && UNVERIFIED_SIGNER_STATES.has(security.state) && senderUnpinned && !pendingConflict
+        ? security.signerCertificate
+        : undefined;
+    const keyChanged = security && signerKeyChanged(security) ? security : undefined;
+    const pinnedSignerKey = senderKeyState?.pinned[0];
+    const recordedConflict = keyChanged && sameFingerprint(senderKeyState?.conflict?.observedKey.fingerprint, keyChanged.signerFingerprint)
+        ? senderKeyState.conflict
+        : undefined;
+    return (_jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [_jsxs("div", { className: "border-b border-border p-4", children: [backHref && (_jsx("a", { href: backHref, className: "text-sm text-primary-dark hover:underline block mb-2", children: "\u2190 Back to messages" })), _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight truncate", children: (protectedSubject ?? message.subject) || "(no subject)" }), security && _jsx(SecurityIndicator, { security: security })] }), sendInProgress && (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Sending\u2026" })), isSentItems &&
+                                (message.recallRequestedAt ? (_jsx("span", { className: "text-xs font-medium text-text-muted shrink-0 py-1 px-2.5 rounded-pill bg-surface-alt", children: "Recall requested" })) : (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => setConfirming(true), children: "Recall this message" }))), inOutbox && !sendInProgress && message.scheduledSendTime && (_jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("span", { className: "text-xs font-medium text-text-muted py-1 px-2.5 rounded-pill bg-surface-alt", children: ["Scheduled for ", new Date(message.scheduledSendTime).toLocaleString()] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Cancel" })] })), inOutbox && !sendInProgress && !message.scheduledSendTime && draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", loading: canceling, disabled: canceling, onClick: handleCancelScheduledSend, children: "Move to Drafts" }))] }), inOutbox && message.scheduledSendError && (_jsx("div", { className: "mt-2", children: _jsxs(Alert, { children: ["This message wasn\u2019t sent: ", message.scheduledSendError] }) })), cancelError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: cancelError }) })), keyChangeNotice && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: keyChangeNotice })), security && UNVERIFIED_SIGNER_STATES.has(security.state) && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["Signed, but the signer isn\u2019t a trusted contact key, so the sender isn\u2019t verified.", security.signerEmails && security.signerEmails.length > 0 && _jsxs(_Fragment, { children: [" Certificate for ", security.signerEmails.join(", "), "."] }), security.signerFingerprint && (_jsxs(_Fragment, { children: [" ", "Fingerprint ", _jsx("span", { className: "font-mono text-xs break-all", children: security.signerFingerprint }), "."] }))] })), pendingConflict && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["This sender has a signing key change waiting for your review, so this signer can\u2019t be trusted from here.", " ", _jsx("a", { href: `/contacts/${encodeURIComponent(senderKeyState.contactUid)}`, className: "font-medium text-primary-dark hover:underline", children: "Review it in Contacts" })] })), trustableCertificate && (_jsx("div", { className: "mt-1.5", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => {
+                                setTrustError(null);
+                                setTrustConfirmOpen(true);
+                            }, children: "Trust this signer" }) })), subjectDiffers && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: ["The subject shown above is the one the sender signed. It differs from the subject this message was delivered with (\u201C", message.subject, "\u201D), which may have been changed on the way, e.g. by a mailing list."] })), security?.headerTamperDetected && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: "This message's visible From/To/Cc/Date/Subject don't match what the sender actually signed or encrypted \u2014 an intermediary may have altered them after sending. Treat the fields shown above with caution." }) })), security?.state === "verified_at_first_open" && (_jsx("p", { role: "status", className: `mt-2 py-2 px-3 rounded-sm text-sm text-text ${security.laterCompromised ? "bg-warning/15" : "bg-surface-alt"}`, children: verifiedAtFirstOpenMessage(security) })), keyChanged && (_jsxs("section", { "aria-label": "Signing key changed", className: "mt-2 py-3 px-3 rounded-sm text-sm bg-warning/15 text-text flex flex-col gap-2", children: [_jsx("h2", { className: "font-semibold", children: "This sender\u2019s signing key changed" }), _jsxs("p", { children: ["The signature on this message is valid and its certificate names ", senderAddress, ", but it was made with a different key than the one you trust for this sender", keyChanged.state === "verified_at_first_open" ? "." : _jsx(_Fragment, { children: ", so it isn\u2019t verified." })] }), _jsx(KeyChangeReview, { mailboxUid: message.mailboxUid, address: senderAddress, useType: "sign", ownerName: "the sender", current: pinnedSignerKey && { fingerprint: pinnedSignerKey.fingerprint, since: senderKeyState.pinnedSince }, proposed: {
+                                    fingerprint: keyChanged.signerFingerprint,
+                                    emails: keyChanged.signerEmails,
+                                    observedAt: recordedConflict?.observedAt,
+                                    source: recordedConflict?.source,
+                                }, certificate: keyChanged.signerCertificate, canReject: recordedConflict !== undefined, canResolve: canUpdateMailbox, onResolved: (action) => refreshAfterKeyChange(action === "reject" ? KEPT_CURRENT_SIGNING_KEY_MESSAGE : null), onPinnedKeyChanged: () => refreshAfterKeyChange(KEY_CHANGE_STALE_MESSAGE) })] })), security?.state === "signature_failed" && !keyChanged && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: security.signatureFailureReason
+                            ? SIGNATURE_FAILURE_MESSAGE[security.signatureFailureReason]
+                            : GENERIC_SIGNATURE_FAILURE_MESSAGE })), verifiedOrSealed && !security.protectedHeaders && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The signature covers this message\u2019s content and attachments only. Its Subject, To and Cc weren\u2019t signed, so they could have been changed after it was sent." })), security?.notAddressedToReader && (_jsx("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-surface-alt text-text", children: "The recipients this message was signed or encrypted for don\u2019t include this mailbox - it may have been forwarded or re-sent to you unchanged, or you were Bcc\u2019d." })), _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["From ", senderLabel, " \u00B7 ", new Date(message.receivedDate).toLocaleString()] }), senderNameCheck.misleading && (_jsxs("p", { role: "status", className: "mt-2 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: ["The sender\u2019s name \u201C", senderName, "\u201D looks like an email address, but this message was sent from ", _jsx("span", { className: "font-medium", children: senderAddress }), ". Don\u2019t trust it based on the name."] })), _jsxs("p", { className: "text-sm text-text-muted", children: ["To ", message.recipients.map((r) => r.displayName || r.address).join(", ")] }), _jsxs("div", { className: "flex gap-2 mt-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReply, children: "Reply" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleReplyAll, children: "Reply All" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: handleForward, children: "Forward" }), !inOutbox && message.folderUid !== draftsFolderUid && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: archiving, disabled: archiving, onClick: handleArchive, children: "Archive" })), labels && labels.length > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLabelsOpen(true), children: "Labels" }))] }), archiveError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: archiveError }) })), labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 mt-2", children: currentLabelsMessage
                             .labelUids.map((uid) => labels.find((l) => l.uid === uid))
                             .filter((l) => !!l)
                             .map((l) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt", children: [_jsx("span", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }, l.uid))) })), isInbox && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "text", loading: classifying, disabled: classifying, onClick: () => handleClassify(message.inferenceClassification === "other" ? "focused" : "other"), children: message.inferenceClassification === "other" ? "Move to Focused" : "Move to Other" }), _jsxs("label", { className: "flex items-center gap-1.5 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: alwaysForSender, onChange: (e) => setAlwaysForSender(e.target.checked) }), "Always for this sender"] })] })), classifyError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: classifyError }) })), ["delivery", "read"]
                         .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
-                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [message.from.displayName || message.from.address, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: receiptError }) })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: attachments.map((attachment) => (_jsx("li", { children: _jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] }) }, attachment.uid))) }))] }), security?.decryptError && (_jsxs("div", { className: "px-4 pt-2", children: [_jsx(Alert, { children: security.decryptError }), message && !getUnlockedKeys(message.mailboxUid) && (_jsxs("button", { type: "button", onClick: handleUnlockToView, className: "mt-1.5 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 view this message"] }))] })), security?.html !== undefined ? (_jsx("iframe", { title: message.subject || "Message content", srcDoc: DOMPurify.sanitize(security.html), sandbox: "", className: "flex-1 w-full border-0" }, message.uid)) : (_jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: "flex-1 w-full border-0" }, message.uid)), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] }), _jsxs(Modal, { open: labelsOpen, onClose: () => setLabelsOpen(false), title: "Labels", children: [labelsError && _jsx(Alert, { children: labelsError }), _jsx("ul", { className: "flex flex-col gap-1", children: (labels ?? []).map((l) => {
-                            const checked = message.labelUids?.includes(l.uid) ?? false;
-                            return (_jsx("li", { children: _jsxs("label", { className: "flex items-center gap-2 py-1.5 px-1 text-sm rounded-sm hover:bg-surface-alt", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: togglingLabelUid === l.uid, onChange: () => handleToggleLabel(l.uid) }), _jsx("span", { className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }) }, l.uid));
+                        .map((type) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-2 py-2 px-3 rounded-sm bg-surface-alt text-sm", children: [_jsxs("span", { children: [senderLabel, " requested a ", type, " receipt for this message."] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: receiptBusy === type, disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "approve"), children: "Send receipt" }), _jsx(Button, { type: "button", variant: "text", disabled: receiptBusy !== null, onClick: () => handleReceipt(type, "decline"), children: "Decline" })] }, type))), receiptError && (_jsx("div", { className: "mt-2", children: _jsx(Alert, { children: receiptError }) })), security?.state === "signature_failed" && innerAttachments && innerAttachments.length > 0 && (_jsx("p", { role: "status", className: "mt-3 py-2 px-3 rounded-sm text-sm bg-warning/15 text-text", children: "These attachments come from a message whose signature couldn\u2019t be verified. Open them only if you trust the sender." })), innerAttachments
+                        ? innerAttachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: innerAttachments.map((attachment, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => downloadMimeAttachment(attachment), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: attachment.filename ?? `Unnamed ${attachment.contentType} attachment` }) }, `${index}:${attachment.filename ?? ""}`))) }))
+                        : attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 mt-3", children: attachments.map((attachment) => (_jsx("li", { children: _jsxs("a", { href: attachmentContentUrl(attachment.uid), className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark", children: [attachment.filename, " (", formatBytes(attachment.sizeBytes), ")"] }) }, attachment.uid))) }))] }), security?.decryptError && (_jsxs("div", { className: "px-4 pt-2", children: [_jsx(Alert, { children: security.decryptError }), !getUnlockedKeys(message.mailboxUid) && (_jsxs("button", { type: "button", onClick: handleUnlockToView, className: "mt-1.5 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 view this message"] }))] })), security?.text !== undefined ? (_jsx("pre", { "aria-label": message.subject || "Message content", className: "flex-1 w-full overflow-auto p-4 m-0 text-sm font-sans whitespace-pre-wrap break-words", children: security.text })) : security?.html !== undefined ? (_jsx("iframe", { title: message.subject || "Message content", srcDoc: buildSecureSrcDoc(security.html), sandbox: "", className: "flex-1 w-full border-0" }, message.uid)) : (_jsx("iframe", { title: message.subject || "Message content", src: `/api/mail/messages/${encodeURIComponent(message.uid)}/content`, sandbox: "", className: "flex-1 w-full border-0" }, message.uid)), _jsxs(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Recall this message?", children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: "This asks every original recipient's mail system to delete their copy, but only if it's still unread there \u2014 there's no way to guarantee it, and no confirmation once it either succeeds or fails. Recipients who already read the message will keep it." }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", loading: recalling, disabled: recalling, onClick: handleRecall, className: "!w-auto", children: "Recall message" }), _jsx(Button, { type: "button", variant: "secondary", disabled: recalling, onClick: () => setConfirming(false), className: "!w-auto", children: "Cancel" })] })] }), _jsx(Modal, { open: trustConfirmOpen && !!trustableCertificate, onClose: () => !trusting && setTrustConfirmOpen(false), title: "Trust this signer?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("p", { children: ["Mail from ", _jsx("span", { className: "font-medium", children: senderAddress }), " signed with this certificate will show as verified."] }), _jsxs("dl", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-text-muted", children: "Certificate issued to" }), _jsx("dd", { children: security?.signerEmails?.length ? security.signerEmails.join(", ") : "No email address" }), _jsx("dt", { className: "text-xs text-text-muted", children: "Fingerprint" }), _jsx("dd", { className: "font-mono text-xs break-all", children: security?.signerFingerprint ? formatFingerprint(security.signerFingerprint) : "Unknown" })] }), _jsx("p", { className: "text-text-muted", children: "Anyone can create a certificate naming any address. Before trusting it, confirm this fingerprint with the sender through another channel, such as a phone call." }), trustError && _jsx(Alert, { children: trustError }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", className: "!w-auto", loading: trusting, disabled: trusting, onClick: () => handleTrustSigner(senderAddress, trustableCertificate), children: "Trust" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: trusting, onClick: () => setTrustConfirmOpen(false), children: "Cancel" })] })] }) }), _jsxs(Modal, { open: labelsOpen, onClose: () => setLabelsOpen(false), title: "Labels", children: [labelsError && _jsx(Alert, { children: labelsError }), _jsx("ul", { className: "flex flex-col gap-1", children: (labels ?? []).map((l) => {
+                            const checked = currentLabelsMessage.labelUids?.includes(l.uid) ?? false;
+                            return (_jsx("li", { children: _jsxs("label", { className: "flex items-center gap-2 py-1.5 px-1 text-sm rounded-sm hover:bg-surface-alt", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: togglingLabelUid !== null, onChange: () => handleToggleLabel(l.uid) }), _jsx("span", { className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: l.color ?? "#6366f1" } }), l.name] }) }, l.uid));
                         }) })] })] }));
 }