@rapidmx/web-client 0.2.0 → 0.3.1

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

@@ -6,12 +6,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { assembleDraft, attachmentContentUrl, createDraft, listFolders, sendMessage, setMessageRequestReceipt, setMessageScheduledSendTime, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { assembleDraft, assembleDraftRaw, attachmentContentUrl, createDraft, getMailbox, listFolders, sendMessage, setMessageRequestReceipt, setMessageScheduledSendTime, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { decideMessageEncryption, resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
+import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import { getEncryptionPolicy, lookupKeys } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
+import { applyBaselineOuterHeaders, assembleOutboundMime, buildEncryptedMessage, buildSignedOnlyMessage } from "@rapidmx/react-shared/crypto/smimeMessage.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import RichTextEditor from "./RichTextEditor.js";
 import ScheduleSendPicker from "./ScheduleSendPicker.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 const FIELD_ROW = "flex items-center gap-2 px-3 py-1.5 border-b border-border";
 const FIELD_INPUT = "flex-1 min-w-0 text-sm bg-transparent outline-none";
 const MIN_WIDTH = 320;
@@ -48,7 +54,7 @@ function HeaderButton({ label, onClick, icon: Icon }) {
  * once.
  */
 export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
-    const { id, mailboxUid, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, minimized } = session;
+    const { id, mailboxUid, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, suppressSigning, minimized } = session;
     const isMobile = useIsMobile();
     const windowRef = useRef(null);
     const [draftsFolderUid, setDraftsFolderUid] = useState();
@@ -71,11 +77,91 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
     const [requestReceipt, setRequestReceipt] = useState(false);
     const [schedulePickerOpen, setSchedulePickerOpen] = useState(false);
     const scheduleButtonRef = useRef(null);
+    const [mailbox, setMailbox] = useState(null);
+    const [encryptionPolicy, setEncryptionPolicy] = useState(null);
+    // Defaults off when replying to a detected mailing list (spec's own "Mailing lists" note under
+    // Digital Signatures - a list that appends a footer after signing invalidates the signature) - see
+    // `MessageDetailPane.tsx`'s handleReply()/handleReplyAll() for where this is computed. The user can
+    // still turn it back on; this only changes the default.
+    const [signEnabled, setSignEnabled] = useState(!suppressSigning);
+    const [encryptRequested, setEncryptRequested] = useState(false);
+    const [encryptionBlocked, setEncryptionBlocked] = useState(null);
+    // Compose-time discovery (spec: "Discovery occurs ... when the user addresses a new message to a
+    // recipient", never on receipt) - keyed by address so a recipient already looked up isn't re-fetched
+    // just because the user re-focuses the field. Only ever grows via `checkRecipientDiscovery()` below;
+    // never cleared, so switching focus between To/Cc/Bcc repeatedly doesn't re-trigger lookups.
+    const [recipientStatuses, setRecipientStatuses] = useState({});
+    // Best-effort, same as the signature-list fetch below: a mailbox with no keys enrolled yet (or a
+    // failed fetch) just means sign/encrypt stay unavailable for this compose session, never a blocking
+    // error - encryption is optional and gradual by design (see `KeyEnrollmentGate`'s own doc comment).
+    // `cryptoContextReady` (below) gates Send/Send-later until both calls have settled either way, so a
+    // send that happens to race this fetch can't silently skip encryption the spec says should apply.
+    const [cryptoContextReady, setCryptoContextReady] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        setCryptoContextReady(false);
+        let mailboxSettled = false;
+        let policySettled = false;
+        function checkReady() {
+            if (!cancelled && mailboxSettled && policySettled) {
+                setCryptoContextReady(true);
+            }
+        }
+        getMailbox(mailboxUid)
+            .then((result) => {
+            if (!cancelled) {
+                setMailbox(result);
+            }
+        })
+            .catch(() => undefined)
+            .finally(() => {
+            mailboxSettled = true;
+            checkReady();
+        });
+        getEncryptionPolicy()
+            .then((result) => {
+            if (!cancelled) {
+                setEncryptionPolicy(result);
+            }
+        })
+            .catch(() => undefined)
+            .finally(() => {
+            policySettled = true;
+            checkReady();
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid]);
     useEffect(() => {
         listFolders(mailboxUid)
             .then((folders) => setDraftsFolderUid(folders.find((f) => f.type === "drafts")?.uid))
             .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load your Drafts folder."));
     }, [mailboxUid]);
+    /**
+     * Runs discovery for whichever of `addresses` haven't already been looked up this compose session,
+     * caching the result so the small per-recipient indicator below the recipient fields can update
+     * without waiting for Send. Called from the To/Cc/Bcc fields' own `onBlur` - not on every keystroke,
+     * and not the same lookup `assembleForSend()` performs again at send time (deliberately: this is a
+     * best-effort UI hint, not something a stale value here should be trusted to skip at send time).
+     * A failed lookup or a mailbox/policy fetch that hasn't resolved yet just leaves that address with no
+     * indicator rather than surfacing an error over what's a cosmetic nicety.
+     */
+    function checkRecipientDiscovery(addresses) {
+        if (!mailbox || !encryptionPolicy) {
+            return;
+        }
+        const ownPrefersMutual = mailbox.encryptPreference?.preferEncrypt === "mutual";
+        const unchecked = addresses.filter((r) => !(r.address in recipientStatuses));
+        for (const recipient of unchecked) {
+            lookupKeys(mailboxUid, recipient.address)
+                .catch(() => undefined)
+                .then((lookup) => {
+                const status = resolveRecipientEncryption(mailbox.primarySmtpAddress, ownPrefersMutual, encryptionPolicy, recipient.address, lookup);
+                setRecipientStatuses((prev) => ({ ...prev, [recipient.address]: status }));
+            });
+        }
+    }
     // Resolves the mailbox's default signature (if any) for `signatureContext` and seeds `html` with it
     // plus any quoted original message, before `RichTextEditor` ever mounts (gated by `contentReady`
     // below) — `RichTextEditor`'s own doc comment is explicit that `value` only seeds its *initial*
@@ -181,9 +267,81 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
             }
         }
     }
+    /**
+     * Builds this draft's final body — plaintext, signed-only, or signed+encrypted per
+     * `specs/end-to-end_encryption.md` — then stores it via `assembleDraft()`/`assembleDraftRaw()`.
+     * Shared by `handleSend()`/`handleScheduleSend()` (and the "Send without encryption" conflict button
+     * rendered below, via `forcePlaintext`) so the sign/encrypt decision lives in exactly one place.
+     *
+     * Returns `"blocked"` (never throws for this case) when encryption was requested but not every
+     * recipient can currently be encrypted to — the spec's "Multiple Recipients" all-or-nothing rule.
+     * Sets `encryptionBlocked` as a side effect so the window can render that prompt; callers must stop
+     * (not send) when they get this back.
+     *
+     * Discovery (`lookupKeys()`) and the resulting sign/encrypt decision only run at this, the final
+     * pre-send step — not live as recipients are typed. A compose-time recipient-entry indicator (key
+     * icons, live discovery as each address is entered) is Phase 4's "Discovery & contacts UI" work, not
+     * this pass; this still satisfies the spec's "MUST be called lazily at compose time, not on receipt"
+     * requirement, just without a live UI reflecting it before Send is clicked.
+     */
+    async function assembleForSend(toRecipients, ccRecipients, bccRecipients, forcePlaintext) {
+        const unlocked = getUnlockedKeys(mailboxUid);
+        // `mailbox` is required to build protected headers (own From address) whenever signing or
+        // encrypting - not just guarded on the encryption branch below, since a signed-only message
+        // needs it too. A mailbox fetch failure just means no crypto for this send, never a crash.
+        const canSign = signEnabled && !!mailbox && !!unlocked?.signingPrivateKey && !!unlocked.signingCertDer;
+        const canEncryptSelf = !!unlocked?.encryptionPrivateKey && !!unlocked.encryptionCertDer;
+        const allRecipients = [...toRecipients, ...ccRecipients, ...bccRecipients];
+        let wantEncrypt = false;
+        let recipientCertDers = [];
+        if (!forcePlaintext && canEncryptSelf && mailbox && encryptionPolicy && allRecipients.length > 0) {
+            const ownPrefersMutual = mailbox.encryptPreference?.preferEncrypt === "mutual";
+            const lookups = await Promise.all(allRecipients.map((r) => lookupKeys(mailboxUid, r.address).catch(() => undefined)));
+            const statuses = allRecipients.map((r, i) => resolveRecipientEncryption(mailbox.primarySmtpAddress, ownPrefersMutual, encryptionPolicy, r.address, lookups[i]));
+            const decision = decideMessageEncryption(statuses);
+            wantEncrypt = encryptRequested || decision.autoEncrypt;
+            if (wantEncrypt) {
+                if (!decision.canEncryptAll) {
+                    setEncryptionBlocked(decision.blockedRecipients);
+                    return "blocked";
+                }
+                recipientCertDers = [unlocked.encryptionCertDer, ...statuses.map((s) => fromBase64(s.encryptCert.publicKey))];
+            }
+        }
+        if ((wantEncrypt || canSign) && attachments.length > 0) {
+            // Matches BaseMailComposeRoute.assembleRaw()'s own server-side rejection, surfaced here with a
+            // clearer explanation than that route's generic 400 rather than via a round trip.
+            throw new ApiRequestError("A signed or encrypted message cannot include file attachments yet - remove them before sending.", 400);
+        }
+        if (!wantEncrypt && !canSign) {
+            // See the old compose page's identical note: `sanitize-html` is Node-oriented and the server-side
+            // gate in `BaseMailComposeRoute.assemble()` is the sole authoritative sanitizer regardless, so no
+            // client-side pass is done here either.
+            return assembleDraft(draft.uid, { to: toRecipients, cc: ccRecipients, bcc: bccRecipients, subject, html });
+        }
+        const domain = mailbox.primarySmtpAddress.split("@")[1] ?? "localhost";
+        const protectedHeaders = {
+            from: mailbox.displayName
+                ? `"${mailbox.displayName.replace(/"/g, '\\"')}" <${mailbox.primarySmtpAddress}>`
+                : mailbox.primarySmtpAddress,
+            to: toRecipients.map((r) => r.address).join(", "),
+            cc: ccRecipients.length > 0 ? ccRecipients.map((r) => r.address).join(", ") : undefined,
+            date: new Date().toUTCString(),
+            subject,
+            messageId: `<${crypto.randomUUID()}@${domain}>`,
+        };
+        const bodyContentType = 'text/html; charset="utf-8"';
+        const signing = canSign ? { certDer: unlocked.signingCertDer, privateKey: unlocked.signingPrivateKey } : undefined;
+        const outerHeaders = wantEncrypt ? applyBaselineOuterHeaders(protectedHeaders) : protectedHeaders;
+        const mimePart = wantEncrypt
+            ? await buildEncryptedMessage(bodyContentType, html, protectedHeaders, outerHeaders, recipientCertDers, signing)
+            : await buildSignedOnlyMessage(bodyContentType, html, protectedHeaders, signing.certDer, signing.privateKey);
+        const rawMime = assembleOutboundMime(outerHeaders, mimePart);
+        return assembleDraftRaw(draft.uid, { to: toRecipients, cc: ccRecipients, bcc: bccRecipients, subject: outerHeaders.subject, rawMime });
+    }
     // Same reasoning as `handleFilesSelected` above: the Send button is itself `disabled` until `draft`
     // resolves, so this is never reachable with a null `draft`.
-    async function handleSend() {
+    async function handleSend(forcePlaintext = false) {
         const toRecipients = parseAddresses(to);
         if (toRecipients.length === 0) {
             setSendError("At least one recipient is required.");
@@ -192,16 +350,10 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         setSending(true);
         setSendError(null);
         try {
-            // See the old compose page's identical note: `sanitize-html` is Node-oriented and the server-side
-            // gate in `BaseMailComposeRoute.assemble()` is the sole authoritative sanitizer regardless, so no
-            // client-side pass is done here either.
-            const assembled = await assembleDraft(draft.uid, {
-                to: toRecipients,
-                cc: parseAddresses(cc),
-                bcc: parseAddresses(bcc),
-                subject,
-                html,
-            });
+            const assembled = await assembleForSend(toRecipients, parseAddresses(cc), parseAddresses(bcc), forcePlaintext);
+            if (assembled === "blocked") {
+                return;
+            }
             const withReceipt = requestReceipt ? await setMessageRequestReceipt(assembled, true) : assembled;
             await sendMessage(withReceipt.uid);
             onClose();
@@ -228,13 +380,10 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
         setSending(true);
         setSendError(null);
         try {
-            const assembled = await assembleDraft(draft.uid, {
-                to: toRecipients,
-                cc: parseAddresses(cc),
-                bcc: parseAddresses(bcc),
-                subject,
-                html,
-            });
+            const assembled = await assembleForSend(toRecipients, parseAddresses(cc), parseAddresses(bcc), false);
+            if (assembled === "blocked") {
+                return;
+            }
             const withReceipt = requestReceipt ? await setMessageRequestReceipt(assembled, true) : assembled;
             const scheduled = await setMessageScheduledSendTime(withReceipt, scheduledSendTimeIso);
             await sendMessage(scheduled.uid);
@@ -247,6 +396,9 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
             setSending(false);
         }
     }
+    // A plain read from keySession.ts's module-level session store, not React state - see that module's
+    // own doc comment. Cheap enough to read fresh on every render rather than caching in state.
+    const unlockedKeys = getUnlockedKeys(mailboxUid);
     const title = subject.trim() || "New Message";
     const titleId = `compose-title-${id}`;
     if (minimized) {
@@ -257,5 +409,16 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
             isMobile
                 ? "fixed inset-0 w-full h-full rounded-none border-0"
                 : ["border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-        ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: onClose, icon: HiOutlineXMark })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx("input", { id: `compose-to-${id}`, type: "text", className: FIELD_INPUT, value: to, onChange: (e) => setTo(e.target.value) }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx("input", { id: `compose-cc-${id}`, type: "text", className: FIELD_INPUT, value: cc, onChange: (e) => setCc(e.target.value) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx("input", { id: `compose-bcc-${id}`, type: "text", className: FIELD_INPUT, value: bcc, onChange: (e) => setBcc(e.target.value) })] })] })), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && _jsx(RichTextEditor, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage }) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: handleSend, disabled: !draft || sending, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: onClose, className: "ml-auto w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }));
+        ].join(" "), children: [!isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: "h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: onClose, icon: HiOutlineXMark })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError) && (_jsxs("div", { className: "px-3 pt-2", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError })] })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", onClick: () => {
+                                        setEncryptionBlocked(null);
+                                        void handleSend(true);
+                                    }, children: "Send without encryption" })] }) })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx("input", { id: `compose-to-${id}`, type: "text", className: FIELD_INPUT, value: to, onChange: (e) => setTo(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(to)) }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx("input", { id: `compose-cc-${id}`, type: "text", className: FIELD_INPUT, value: cc, onChange: (e) => setCc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(cc)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx("input", { id: `compose-bcc-${id}`, type: "text", className: FIELD_INPUT, value: bcc, onChange: (e) => setBcc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(bcc)) })] })] })), (() => {
+                        const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
+                            .map((r) => recipientStatuses[r.address])
+                            .filter((status) => !!status);
+                        if (knownRecipients.length === 0) {
+                            return null;
+                        }
+                        return (_jsx("ul", { className: "flex flex-wrap gap-1.5 px-3 pt-1.5", "aria-label": "Recipient encryption availability", children: knownRecipients.map((status) => (_jsxs("li", { className: `text-xs font-medium py-0.5 px-2 rounded-pill ${status.canEncrypt ? "bg-primary/10 text-primary-dark" : "bg-surface-alt text-text-muted"}`, children: [status.address, " ", status.canEncrypt ? "supports encryption" : "no encryption key found"] }, status.address))) }));
+                    })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && _jsx(RichTextEditor, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage }) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleSend(), disabled: !draft || sending || !cryptoContextReady, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || !cryptoContextReady, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: onClose, className: "ml-auto w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }));
 }

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

@@ -11,6 +11,7 @@ import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.j
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
+import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { useCompose } from "../compose/ComposeContext.js";
 const MailShellContext = createContext({ mailboxes: [], folders: [] });
@@ -24,10 +25,11 @@ const FOLDER_LABELS = {
     drafts: "Drafts",
     outbox: "Outbox",
     junk: "Junk Email",
+    archive: "Archive",
     deleted_items: "Deleted Items",
 };
 /** Well-known folders sort first, in Gmail/Outlook's conventional order; anything else (incl. `user`) sorts after, alphabetically. */
-const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "junk", "deleted_items"];
+const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "junk", "archive", "deleted_items"];
 /**
  * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see
  * `CalendarShell`/`ContactsShell`/`TasksShell`), not Mail — `listFolders()` returns every well-known
@@ -135,5 +137,12 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
                         ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), folder.unreadCount > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: folder.unreadCount }))] }, folder.uid)))) })] }));
         inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
-    return (_jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }));
+    // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has
+    // resolved yet - KeyEnrollmentGate itself passes `children` through untouched until a real
+    // mailboxUid is supplied (see its own doc comment). Wrapping only once ready (a conditional tree
+    // position) would make AppShell itself remount the moment mailboxUid resolves, tearing down
+    // whatever state/effects it had already started (confirmed by direct reproduction: the
+    // impersonation banner's own internal state was lost exactly at that transition).
+    const selectedMailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    return (_jsx(KeyEnrollmentGate, { mailboxUid: mailboxUid, mailboxAddress: selectedMailbox?.primarySmtpAddress, mailboxKeys: selectedMailbox?.keys, children: _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, children: inner }) }));
 }

package/dist/apps/shared/components/settings/layout/SettingsShell.js

@@ -17,9 +17,12 @@ export const SETTINGS_SECTIONS = [
     { id: "auto-reply", href: "/settings/auto-reply", label: "Automatic Replies" },
     { id: "filters", href: "/settings/filters", label: "Mail Filters" },
     { id: "signatures", href: "/settings/signatures", label: "Signatures" },
+    { id: "labels", href: "/settings/labels", label: "Labels" },
     { id: "focused-inbox", href: "/settings/focused-inbox", label: "Focused Inbox" },
     { id: "read-receipts", href: "/settings/read-receipts", label: "Read Receipts" },
     { id: "booking-types", href: "/settings/booking-types", label: "Booking Links" },
+    { id: "encryption", href: "/settings/encryption", label: "Encryption" },
+    { id: "privacy", href: "/settings/privacy", label: "Privacy & Data" },
 ];
 const SettingsShellContext = createContext({ mailboxes: [] });
 /** Reads the mailbox Settings is currently scoped to, as resolved by the enclosing `SettingsShell`. */

package/dist/apps/www/index.js

@@ -6,8 +6,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMessage, listMessages } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { listConversations } from "@rapidmx/react-shared/mail/conversationsApi.js";
 import { search as searchMailbox } from "@rapidmx/react-shared/search/searchApi.js";
+import { parseSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
+import { normalizeServerScores } from "@rapidmx/react-shared/search/searchScoring.js";
+import { searchEncryptedCandidates } from "@rapidmx/react-shared/search/searchTier3.js";
+import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import MailShell, { useMailShell } from "../shared/components/mail/layout/MailShell.js";
@@ -17,14 +22,88 @@ import ConversationThreadPane from "../shared/components/mail/ConversationThread
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 const MESSAGE_PAGE_SIZE = 50;
 const SEARCH_DEBOUNCE_MS = 300;
-/** Resolves one page of search hits (of type "message") into full `Message` records for display. */
-async function searchMessages(text, cursor) {
-    const page = await searchMailbox(text, { types: ["message"], cursor, limit: MESSAGE_PAGE_SIZE });
-    const resolved = await Promise.all(page.results.map((hit) => getMessage(hit.entityUid).catch(() => null)));
+/** Merges Tier 1 (server, possibly `metadataOnly` for an encrypted message) and Tier 3 (decrypted,
+ * content-verified) results into one ranked list, per `specs/search.md` §7's "client MUST re-score all
+ * results it can see... normalise into the same space rather than interleaving raw scores": both sides
+ * are normalized independently via `normalizeServerScores()` before merging, since a Postgres/OpenSearch
+ * score and this module's own term-count score occupy unrelated ranges. A uid present in both lists
+ * (Tier 1 found it via a `participants` coincidence, Tier 3 then genuinely verified its content) keeps
+ * only the Tier 3 entry - real content verification supersedes a metadata guess for the same message.
+ * Deliberately not the spec's full skeleton/reordering "Progressive Results" UX (§_Progressive
+ * Results_) - that's real, separate UI work; this returns one final merged list once both tiers
+ * resolve, same as how the search box already waits on one round-trip today. */
+function mergeSearchResults(tier1, tier3) {
+    const normalizedTier1 = normalizeServerScores(tier1);
+    const normalizedTier3 = normalizeServerScores(tier3);
+    const merged = new Map();
+    for (const entry of normalizedTier1) {
+        merged.set(entry.result.entityUid, entry);
+    }
+    for (const entry of normalizedTier3) {
+        merged.set(entry.result.entityUid, entry);
+    }
+    return Array.from(merged.values())
+        .sort((a, b) => b.normalizedScore - a.normalizedScore)
+        .map((entry) => entry.result);
+}
+/** Resolves one page of search hits into full `Message` records for display, plus each hit's own
+ * `snippet` (keyed by message uid) for rendering in place of the plain `bodyPreview` while searching.
+ *
+ * `rawQuery` is parsed once, client-side, via `queryGrammar.ts`'s `parseSearchQuery()` — the operator
+ * grammar (`from:`/`to:`/`subject:`/`has:attachment`/`before:`/`after:`/`in:`/`is:`/`label:`/`type:`,
+ * `specs/search.md` §14) is extracted into structured filters passed to the server, while the
+ * remaining free text (quotes, `-` negation, `OR` all preserved) still drives ranking as `q`.
+ * `type:` narrows `entityTypes`; when absent this still defaults to `["message"]` — a non-message hit
+ * (contact/calendarEvent/note/task) has no `Message` to resolve via `getMessage()` below and is simply
+ * dropped by the same eventually-consistent-index fallback that already existed, rather than rendered
+ * (this inbox list only ever shows message rows; a real multi-entity-type results view is a separate,
+ * larger UI project outside this pass).
+ *
+ * Tier 3 (`searchTier3.ts#searchEncryptedCandidates()`) runs alongside Tier 1 only for the first page
+ * (`cursor` absent) - it has no pagination wiring yet (a deliberate scope trim, see that module's own
+ * doc comment), so a `loadMore()` continuation stays Tier-1-only. Silently contributes nothing when
+ * this mailbox has no unlocked keys this session (`getUnlockedKeys()` returns `undefined`) - nothing
+ * for it to decrypt, same as `MessageDetailPane`'s own encrypted-message handling elsewhere. */
+async function searchMessages(mailboxUid, rawQuery, cursor) {
+    const parsed = parseSearchQuery(rawQuery);
+    const [page, tier3Results] = await Promise.all([
+        searchMailbox(parsed.text, {
+            types: parsed.entityTypes ?? ["message"],
+            cursor,
+            limit: MESSAGE_PAGE_SIZE,
+            from: parsed.from,
+            to: parsed.to,
+            cc: parsed.cc,
+            subject: parsed.subject,
+            hasAttachment: parsed.hasAttachment,
+            before: parsed.before,
+            after: parsed.after,
+            folderUid: parsed.folderUid,
+            flags: parsed.flags,
+            labels: parsed.labels,
+        }),
+        cursor ? Promise.resolve([]) : searchEncryptedCandidates(parsed, getUnlockedKeys(mailboxUid)),
+    ]);
+    const mergedResults = mergeSearchResults(page.results, tier3Results);
+    const resolved = await Promise.all(mergedResults.map(async (hit) => {
+        const message = await getMessage(hit.entityUid).catch(() => null);
+        return message ? { message, snippet: hit.snippet } : null;
+    }));
     // A search hit can briefly outlive the message it points to (index updates are eventually consistent,
     // and a message can be deleted after being indexed) - drop anything that no longer resolves rather than
     // rendering a broken entry.
-    return { messages: resolved.filter((m) => m !== null), nextCursor: page.nextCursor };
+    const messages = [];
+    const snippets = {};
+    for (const entry of resolved) {
+        if (!entry) {
+            continue;
+        }
+        messages.push(entry.message);
+        if (entry.snippet) {
+            snippets[entry.message.uid] = entry.snippet;
+        }
+    }
+    return { messages, nextCursor: page.nextCursor, snippets };
 }
 export default function InboxPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, {}) }));
@@ -44,11 +123,24 @@ function InboxContent() {
     const [classificationFilter, setClassificationFilter] = useState("all");
     const [searchInput, setSearchInput] = useState("");
     const [searchQuery, setSearchQuery] = useState("");
+    const [snippets, setSnippets] = useState({});
+    const [labels, setLabels] = useState([]);
     const isSearching = viewMode === "date" && searchQuery.length > 0;
     const pageRef = useRef(0);
     const cursorRef = useRef(undefined);
     const scrollContainerRef = useRef(null);
     const sentinelRef = useRef(null);
+    // Labels are mailbox-wide, not folder-scoped - fetched once per mailbox rather than per message, and
+    // handed to every `MessageDetailPane` instance below. A failure here just means the Labels control
+    // stays hidden (an empty `labels` array) rather than blocking the rest of the inbox - it's a small
+    // enhancement, not critical path the way the message list itself is. No `mailboxUid` guard needed -
+    // `MailShell` never renders this component at all until `mailboxUid` has resolved (same invariant
+    // `searchMessages(mailboxUid!, ...)` below already relies on).
+    useEffect(() => {
+        listLabels(mailboxUid, { limit: 200 })
+            .then(setLabels)
+            .catch(() => setLabels([]));
+    }, [mailboxUid]);
     // Debounce the raw input into the query actually searched, so every keystroke doesn't fire a request.
     useEffect(() => {
         const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
@@ -84,9 +176,10 @@ function InboxContent() {
         setLoading(true);
         setError(null);
         if (isSearching) {
-            searchMessages(searchQuery)
-                .then(({ messages: results, nextCursor }) => {
+            searchMessages(mailboxUid, searchQuery)
+                .then(({ messages: results, nextCursor, snippets: newSnippets }) => {
                 setMessages(results);
+                setSnippets(newSnippets);
                 setHasMore(!!nextCursor);
                 cursorRef.current = nextCursor;
             })
@@ -109,8 +202,9 @@ function InboxContent() {
         setLoadingMore(true);
         try {
             if (isSearching) {
-                const { messages: more, nextCursor } = await searchMessages(searchQuery, cursorRef.current);
+                const { messages: more, nextCursor, snippets: moreSnippets } = await searchMessages(mailboxUid, searchQuery, cursorRef.current);
                 setMessages((prev) => [...prev, ...more]);
+                setSnippets((prev) => ({ ...prev, ...moreSnippets }));
                 setHasMore(!!nextCursor);
                 cursorRef.current = nextCursor;
             }
@@ -218,11 +312,17 @@ function InboxContent() {
                                             "w-full text-left px-4 py-3 border-b border-border",
                                             message.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt",
                                             message.flags.read ? "" : "font-semibold",
-                                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: message.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: message.bodyPreview })] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: sentinelRef, className: "p-4 text-center text-xs text-text-muted", children: loadingMore ? "Loading more…" : "" }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: folders })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
+                                        ].join(" "), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate", children: message.from.displayName || message.from.address }), _jsx("span", { className: "text-xs text-text-muted shrink-0", children: new Date(message.receivedDate).toLocaleDateString() })] }), _jsx("div", { className: "text-sm truncate", children: message.subject || "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: snippets[message.uid] || message.bodyPreview })] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: sentinelRef, className: "p-4 text-center text-xs text-text-muted", children: loadingMore ? "Loading more…" : "" }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: folders, labels: labels })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
                         // The message moved out of the currently-viewed Outbox folder (into Drafts)
                         // — unlike a recall, which patches a message in place, this removes it from
                         // the list entirely, matching what a real folder switch would show.
                         setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
                         setSelectedUid(null);
-                    } })) })] }));
+                    }, onArchived: (updated) => {
+                        // Same reasoning as onScheduledSendCanceled above — the message moved out of
+                        // whichever folder is currently being viewed (into Archive), so it's removed
+                        // from the list rather than patched in place.
+                        setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
+                        setSelectedUid(null);
+                    }, labels: labels, onLabelsChanged: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))) })) })] }));
 }

package/dist/apps/www/messages/[uid].js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMessage } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listLabels } from "@rapidmx/react-shared/mail/labelsApi.js";
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import MailShell, { useMailShell } from "../../shared/components/mail/layout/MailShell.js";
 import MessageDetailPane from "../../shared/components/mail/MessageDetailPane.js";
@@ -18,10 +19,11 @@ export default function MessageDetailPage(props) {
     return (_jsx(MailShell, { ...props, children: _jsx(MessageDetailContent, { uid: props.params.uid }) }));
 }
 function MessageDetailContent({ uid }) {
-    const { folders } = useMailShell();
+    const { folders, mailboxUid } = useMailShell();
     const [message, setMessage] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [labels, setLabels] = useState([]);
     useEffect(() => {
         setLoading(true);
         setError(null);
@@ -30,6 +32,14 @@ function MessageDetailContent({ uid }) {
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this message."))
             .finally(() => setLoading(false));
     }, [uid]);
+    // See `apps/www/index.tsx`'s identical effect's own doc comment - a failure here just hides the
+    // Labels control rather than blocking the rest of the page. No `mailboxUid` guard needed - `MailShell`
+    // never renders this component at all until `mailboxUid` has resolved.
+    useEffect(() => {
+        listLabels(mailboxUid, { limit: 200 })
+            .then(setLabels)
+            .catch(() => setLabels([]));
+    }, [mailboxUid]);
     const attachments = useMessageAttachments(message);
     useMarkMessageRead(message, setMessage);
     if (loading) {
@@ -43,5 +53,5 @@ function MessageDetailContent({ uid }) {
     const isOutbox = folders.find((f) => f.uid === message.folderUid)?.type === "outbox";
     const isInbox = folders.find((f) => f.uid === message.folderUid)?.type === "inbox";
     const draftsFolderUid = folders.find((f) => f.type === "drafts")?.uid;
-    return (_jsx(MessageDetailPane, { message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, isInbox: isInbox, onClassified: setMessage, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: setMessage }));
+    return (_jsx(MessageDetailPane, { message: message, attachments: attachments, backHref: backHref, isSentItems: isSentItems, onRecalled: setMessage, isOutbox: isOutbox, isInbox: isInbox, onClassified: setMessage, onReceiptHandled: setMessage, draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: setMessage, onArchived: setMessage, labels: labels, onLabelsChanged: setMessage }));
 }