@rapidmx/web-client 0.2.0 → 0.3.1

package/dist/apps/shared/components/escrow/layout/EscrowShell.js

@@ -0,0 +1,75 @@
+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 "../../../styles/app.css";
+import { useEffect, useState } from "react";
+import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
+import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
+import UserMenu from "../../layout/UserMenu.js";
+const NAV_ITEMS = [
+    { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
+    { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
+];
+/**
+ * Gates every `apps/escrow` page behind "is this an authenticated caller at all" — deliberately **not**
+ * the same "does a canary endpoint 403 me" pattern `AdminShell` uses for the trusted `admin` role.
+ * `specs/end-to-end_encryption.md`'s "Separation of duties" makes holder-ness a per-`EscrowScope` grant
+ * (`EscrowScope.holderUserUids`), checked directly against `holderUserUids` in every restapi route that
+ * needs it (`requireEscrowHolder()`) — never a role, and never global. There is no canary endpoint a
+ * non-holder gets a clean 403 from: `GET /escrow/matters` (`BaseMatterRoute.find()`) returns `200 []` for
+ * *any* authenticated caller who holds no scope at all, the same as it would for a holder of zero matters
+ * — so unlike `AdminShell`, this shell cannot distinguish "holds nothing" from "holds no scope at all" up
+ * front, and does not try to. It only confirms the caller is signed in and the API is reachable; every
+ * actual holder-gated action (create a Matter, approve/deny a request, read material) is enforced
+ * server-side and surfaces its own 403 `ApiRequestError` on the specific page that attempted it, same as
+ * any other gated action elsewhere in this codebase. A non-holder who reaches `/escrow` simply sees an
+ * empty Matters list and gets a real error if they try to act on something they don't hold — this is a
+ * deliberate, documented scope trim rather than an oversight (see this session's own report on it).
+ */
+export default function EscrowShell({ active, userUid, authServerUrl, children }) {
+    const [status, setStatus] = useState("checking");
+    const [error, setError] = useState(null);
+    const { branding, iconSrc } = useBranding();
+    useRedirectIfUnauthenticated(userUid, authServerUrl);
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        // limit=1 - this call exists only to confirm the API is reachable for this signed-in caller, not
+        // to read any real data (every page below fetches its own data itself).
+        listMatters({ limit: 1 })
+            .then(() => setStatus("authorized"))
+            .catch((err) => {
+            setError(err instanceof ApiRequestError ? err.message : "Could not verify escrow console access.");
+            setStatus("error");
+        });
+    }, [userUid]);
+    function handleSignOut() {
+        window.location.href = authServerUrl ?? "/";
+    }
+    let content;
+    if (!userUid || status === "checking") {
+        content = _jsx("div", { className: "min-h-screen" });
+    }
+    else if (status === "error") {
+        content = (_jsx("div", { className: "min-h-screen flex items-center justify-center p-8", children: _jsx("div", { className: "w-full max-w-md", children: _jsx(Alert, { children: error }) }) }));
+    }
+    else {
+        const activeItem = NAV_ITEMS.find((item) => item.id === active);
+        content = (_jsx("div", { className: "min-h-screen flex flex-col bg-surface-alt", children: _jsxs("div", { className: "flex-1 flex min-h-0", children: [_jsxs("nav", { "aria-label": "Escrow sections", className: "hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1", children: [_jsx("img", { src: iconSrc, width: "96", height: "96", alt: "", className: "mb-3" }), NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (_jsx("a", { href: href, "aria-label": label, "aria-current": id === active ? "page" : undefined, title: label, className: [
+                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    id === active
+                                        ? "bg-primary/10 text-primary-dark"
+                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                ].join(" "), children: _jsx(Icon, { size: 20, "aria-hidden": "true" }) }, id)))] }), _jsx(BottomTabBar, { apps: NAV_ITEMS, active: active }), _jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [_jsxs("header", { className: "h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6", children: [_jsx("span", { className: "font-display font-bold text-lg uppercase tracking-wide", children: activeItem?.label }), _jsx(UserMenu, { userUid: userUid, authServerUrl: authServerUrl, onSignOut: handleSignOut })] }), _jsx("div", { className: "flex-1 pb-14 md:pb-0", children: _jsx("main", { className: "max-w-6xl mx-auto px-6 py-8", children: children }) })] })] }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(BrandingHeader, { branding: branding }), content, _jsx(BrandingFooter, { branding: branding })] }));
+}

package/dist/apps/shared/components/forms/StringListField.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/**
+ * A plain, controlled add/remove list-of-strings editor — the same visual add-row/per-item-remove shape
+ * `MemberListCard` already established for a `DistributionList`'s `memberAddresses`, but operating on a
+ * local `value`/`onChange` pair rather than persisting itself via its own API call. `MemberListCard`
+ * isn't reusable here as-is: `EscrowScope.holderUserUids` (at least one required) and
+ * `Matter.custodianMailboxUids` (also non-empty) are both required *at creation time*, before there's any
+ * uid yet to `PUT` against — this needs to compose into an ordinary create/edit form's own local state
+ * instead, same as every other field on those forms.
+ */
+export default function StringListField({ label, id, values, onChange, placeholder, emptyMessage = "None added yet.", disabled, }) {
+    const [draft, setDraft] = useState("");
+    /** Accepts either the "Add" button's own form submit or the input's Enter keydown — both just need
+     * `preventDefault()` (submitting would otherwise reload the page; Enter would otherwise do nothing
+     * harmful here, but is prevented for consistency). */
+    function handleAdd(e) {
+        e.preventDefault();
+        const trimmed = draft.trim();
+        if (!trimmed || values.includes(trimmed)) {
+            return;
+        }
+        onChange([...values, trimmed]);
+        setDraft("");
+    }
+    function handleRemove(value) {
+        onChange(values.filter((v) => v !== value));
+    }
+    return (_jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: id, className: "block text-sm font-semibold mb-1.5 text-text", children: label }), _jsxs("ul", { className: "flex flex-col gap-2 mb-2", children: [values.length === 0 && _jsx("li", { className: "text-sm text-text-muted", children: emptyMessage }), values.map((value) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsx("span", { className: "text-sm font-medium break-all", children: value }), _jsx("button", { type: "button", onClick: () => handleRemove(value), disabled: disabled, className: "text-sm text-danger hover:underline disabled:opacity-55 shrink-0", children: "Remove" })] }, value)))] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: id, type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                handleAdd(e);
+                            }
+                        }, placeholder: placeholder, disabled: disabled, className: "flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary" }), _jsx(Button, { type: "button", variant: "secondary", disabled: disabled, className: "!w-auto", onClick: handleAdd, children: "Add" })] })] }));
+}

package/dist/apps/shared/components/layout/AppShell.js

@@ -9,6 +9,7 @@ import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelop
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
 import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeout.js";
 import ComposeProvider from "../mail/compose/ComposeContext.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
@@ -39,6 +40,9 @@ export default function AppShell({ active, userUid, authServerUrl, impersonating
     const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
     const { branding, iconSrc } = useBranding();
     useRedirectIfUnauthenticated(userUid, authServerUrl);
+    // Mounted here, not scoped to Mail/Settings (the only shells that actually read unlocked keys),
+    // specifically so activity in *any* app resets the idle clock - see that hook's own doc comment.
+    useIdleKeyTimeout();
     function handleSignOut() {
         window.location.href = authServerUrl ?? "/";
     }

package/dist/apps/shared/components/layout/KeyEnrollmentGate.js

@@ -0,0 +1,142 @@
+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 { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import { enrollKey, getKeyVault } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE, getUnlockedKeys, unlockWithPassword, } from "@rapidmx/react-shared/crypto/keySession.js";
+import { buildAad, generateMasterKey, sealWithKey } from "@rapidmx/react-shared/crypto/masterKey.js";
+import { buildPasswordWrap, buildRecoveryWraps } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
+import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "@rapidmx/react-shared/crypto/keys.js";
+const MIN_PASSWORD_LENGTH = 8;
+async function provisionEncryptionKey(mailboxUid, mailboxAddress, password) {
+    const mk = generateMasterKey();
+    const passwordWrap = await buildPasswordWrap(mailboxUid, mk, password);
+    const { wraps: recoveryWraps, codes: recoveryCodes } = await buildRecoveryWraps(mailboxUid, mk);
+    // Only the encryption key is provisioned here. The signing key's spec-required public-CA enrolment
+    // (RFC 8823 ACME automation) is a real but genuinely asynchronous flow (a live email round-trip with
+    // a public CA, likely minutes) - it's a deliberate opt-in action in Settings > Encryption
+    // ("Enable digital signatures"), not something to block first-sign-in mailbox setup on.
+    const { keyPair, csrPem } = await generateKeyPairWithCsr(mailboxAddress, "encrypt");
+    const privateKeyRaw = await exportPrivateKeyPkcs8(keyPair.privateKey);
+    const wrappedKeySealed = await sealWithKey(mk, privateKeyRaw, buildAad(mailboxUid, ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE));
+    await enrollKey(mailboxUid, {
+        useType: "encrypt",
+        csr: csrPem,
+        wrappedKey: { ciphertext: wrappedKeySealed.ciphertext, nonce: wrappedKeySealed.nonce, algorithm: "AES-256-GCM" },
+        masterKeyWraps: [passwordWrap, ...recoveryWraps],
+    });
+    return { recoveryCodes };
+}
+/**
+ * Gates a mailbox's normal content behind one-time E2E encryption key setup, per
+ * `specs/end-to-end_encryption.md`'s "Generate signing and encryption keypairs on the client's device on
+ * first sign-in." Rendered by `MailShell` wrapping its own returned content unconditionally, not only
+ * once a mailbox is resolved — mounting this component at a *different* tree position depending on
+ * `mailboxUid`'s readiness (e.g. only wrapping once ready, rendering bare content beforehand) would make
+ * `children` (real `AppShell` chrome) itself remount the moment `mailboxUid` resolves, tearing down any
+ * state/effects it had already started. Always wrapping keeps `AppShell` mounted continuously across
+ * that transition; this component simply passes `children` through untouched while `mailboxUid` is
+ * still unresolved, and only starts its own check once a real `mailboxUid` is supplied.
+ *
+ * A `getKeyVault()` failure (network error, server not yet wired up to serve this endpoint) also renders
+ * `children` unchanged rather than blocking mail entirely - encryption is optional and gradual by design
+ * (the spec's own "near zero frictionless experience" goal), not a hard prerequisite for reading mail.
+ */
+export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxKeys, children }) {
+    const [status, setStatus] = useState(mailboxUid ? "checking" : "ready");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [error, setError] = useState(null);
+    const [recoveryCodes, setRecoveryCodes] = useState([]);
+    const [codesSaved, setCodesSaved] = useState(false);
+    useEffect(() => {
+        if (!mailboxUid) {
+            return;
+        }
+        // A remount within the same browser session (e.g. navigating between pages) shouldn't re-prompt
+        // for a password the in-memory session store (`keySession.ts`) already has unwrapped - only a
+        // fresh session (reload, new tab, post-logout) has nothing there.
+        if (getUnlockedKeys(mailboxUid)) {
+            setStatus("ready");
+            return;
+        }
+        let cancelled = false;
+        getKeyVault(mailboxUid)
+            .then((vault) => {
+            if (!cancelled) {
+                setStatus(vault.wrappedKeys.length > 0 ? "unlock" : "setup_password");
+            }
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setStatus("ready");
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid]);
+    async function handleUnlock(e) {
+        e.preventDefault();
+        setError(null);
+        setStatus("unlocking");
+        try {
+            // Only reachable via "unlock", which the effect above only ever sets once mailboxUid was
+            // defined.
+            await unlockWithPassword(mailboxUid, mailboxKeys ?? [], password);
+            setStatus("ready");
+        }
+        catch {
+            // Deliberately generic - see `unlockWithPassword()`'s own doc comment: it throws the same way
+            // for "no password wrap enrolled" and "wrong password" today, and this UI has no way to tell
+            // those apart without leaking which is which to a potential attacker guessing passwords.
+            setError("Incorrect password.");
+            setStatus("unlock");
+        }
+    }
+    async function handleSetPassword(e) {
+        e.preventDefault();
+        if (password.length < MIN_PASSWORD_LENGTH) {
+            setError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters.`);
+            return;
+        }
+        if (password !== confirmPassword) {
+            setError("Passwords do not match.");
+            return;
+        }
+        setError(null);
+        setStatus("enrolling");
+        try {
+            // Only reachable via "setup_password", which the effect above only ever sets once mailboxUid
+            // was defined (and mailboxAddress necessarily came with it - see KeyEnrollmentGateProps).
+            const { recoveryCodes: codes } = await provisionEncryptionKey(mailboxUid, mailboxAddress, password);
+            setRecoveryCodes(codes);
+            setStatus("show_recovery_codes");
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not set up encryption for this mailbox.");
+            setStatus("setup_password");
+        }
+    }
+    if (status === "checking") {
+        return null;
+    }
+    if (status === "unlock" || status === "unlocking") {
+        const unlocking = status === "unlocking";
+        return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Unlock your mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Enter your encryption password to unlock signing and reading protected mail this session." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleUnlock, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-unlock-password", children: _jsx("input", { id: "key-unlock-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: unlocking, autoComplete: "current-password" }) }), _jsx(Button, { type: "submit", loading: unlocking, disabled: unlocking, children: "Unlock" })] })] }) }));
+    }
+    if (status === "setup_password" || status === "enrolling") {
+        const enrolling = status === "enrolling";
+        return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Protect your mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose a password to protect your encryption keys. This is separate from your sign-in password and is never sent to the server." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSetPassword, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "key-enrollment-password", children: _jsx("input", { id: "key-enrollment-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(FormField, { label: "Confirm password", htmlFor: "key-enrollment-password-confirm", children: _jsx("input", { id: "key-enrollment-password-confirm", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: enrolling, autoComplete: "new-password" }) }), _jsx(Button, { type: "submit", loading: enrolling, disabled: enrolling, children: "Continue" })] })] }) }));
+    }
+    if (status === "show_recovery_codes") {
+        return (_jsx("div", { className: "min-h-screen flex items-center justify-center p-8 bg-surface-alt", children: _jsxs("div", { className: "w-full max-w-md bg-surface border border-border rounded-md p-8", children: [_jsx("h1", { className: "text-lg font-bold mb-2", children: "Save your recovery codes" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "If you lose your password, these codes are the only way to recover your encrypted mail. Each code can be used once. Store them somewhere safe \u2014 they will not be shown again." }), _jsx("ul", { className: "grid grid-cols-2 gap-2 mb-5 font-mono text-sm", children: recoveryCodes.map((code) => (_jsx("li", { className: "bg-surface-alt rounded-sm py-1.5 px-2 text-center", children: code }, code))) }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: codesSaved, onChange: (e) => setCodesSaved(e.target.checked) }), "I have saved these recovery codes in a safe place."] }), _jsx(Button, { type: "button", disabled: !codesSaved, onClick: () => setStatus("ready"), children: "Continue" })] }) }));
+    }
+    return _jsx(_Fragment, { children: children });
+}

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

@@ -16,7 +16,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
  * lightweight summary, since mounting a full `MessageDetailPane` (and its iframe) for every message in
  * a long thread up front would be wasteful.
  */
-export default function ConversationThreadPane({ conversation, folders }) {
+export default function ConversationThreadPane({ conversation, folders, labels }) {
     const [messages, setMessages] = useState({});
     const [attachmentsByUid, setAttachmentsByUid] = useState({});
     const [expandedUids, setExpandedUids] = useState(new Set());
@@ -107,6 +107,6 @@ export default function ConversationThreadPane({ conversation, folders }) {
                             // message in place (same as `onRecalled` above) rather than removing it from
                             // the conversation — `conversation.messageUids` is owned by the parent, not
                             // this component, so there's no membership list here to remove it from.
-                            onScheduledSendCanceled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isInbox: folders.find((f) => f.uid === message.folderUid)?.type === "inbox", onClassified: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onReceiptHandled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })) })] }, uid));
+                            onScheduledSendCanceled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), isInbox: folders.find((f) => f.uid === message.folderUid)?.type === "inbox", onClassified: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onReceiptHandled: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), onArchived: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })), labels: labels, onLabelsChanged: (updated) => setMessages((prev) => ({ ...prev, [uid]: updated })) })] }, uid));
             })] }));
 }

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

@@ -3,14 +3,34 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import DOMPurify from "dompurify";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { approveReceipt, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, recallMessage, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { approveReceipt, archiveMessage, attachmentContentUrl, cancelScheduledSend, classifyMessage, declineReceipt, 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 { isLikelyMailingList } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { useCompose } from "./compose/ComposeContext.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";
+/** Labels/styling for `specs/end-to-end_encryption.md`'s "Message Security Indicators" table - kept as
+ * plain data (not JSX) so `SecurityIndicator` below stays a trivial lookup. "Signature failed" MUST NOT
+ * read as a muted variant of "verified" (a failed signature is a stronger negative than no signature at
+ * all), and "Unprotected" MUST NOT read as an error - the class pairs below are chosen so those two
+ * never share styling with each other or with the verified states. */
+const SECURITY_INDICATOR = {
+    unprotected: { label: "Unprotected", className: "bg-surface-alt text-text-muted" },
+    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" },
+    signature_failed: { label: "Signature failed", className: "bg-danger-bg text-danger" },
+};
+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 });
+}
 function formatBytes(bytes) {
     if (bytes >= 1000000)
         return `${(bytes / 1000000).toFixed(1)} MB`;
@@ -25,11 +45,16 @@ 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, }) {
+export default function MessageDetailPane({ message, attachments, backHref, isSentItems, onRecalled, isOutbox, draftsFolderUid, onScheduledSendCanceled, isInbox, onClassified, onReceiptHandled, onArchived, labels, onLabelsChanged, }) {
     const { openCompose } = useCompose();
     const [confirming, setConfirming] = useState(false);
     const [recalling, setRecalling] = useState(false);
     const [canceling, setCanceling] = useState(false);
+    const [archiving, setArchiving] = useState(false);
+    const [archiveError, setArchiveError] = useState(null);
+    const [labelsOpen, setLabelsOpen] = useState(false);
+    const [togglingLabelUid, setTogglingLabelUid] = useState(null);
+    const [labelsError, setLabelsError] = useState(null);
     const [error, setError] = useState(null);
     // Kept separate from `error` (the Recall flow's own state) since this renders inline in the main
     // pane rather than inside a confirmation modal — the two flows never need to share one message.
@@ -42,6 +67,35 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
     // wouldn't distinguish which row's buttons should show a loading state.
     const [receiptBusy, setReceiptBusy] = useState(null);
     const [receiptError, setReceiptError] = useState(null);
+    const [security, setSecurity] = useState(null);
+    // 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.
+    useEffect(() => {
+        if (!message) {
+            setSecurity(null);
+            return;
+        }
+        let cancelled = false;
+        setSecurity(null);
+        getMessageRawContent(message.uid)
+            .then((rawMime) => evaluateMessageSecurity(rawMime, getUnlockedKeys(message.mailboxUid)))
+            .then((result) => {
+            if (!cancelled) {
+                setSecurity(result);
+            }
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setSecurity({ state: "unprotected" });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [message?.uid]);
     if (!message) {
         return _jsx("p", { className: "p-8 text-sm text-text-muted", children: "Select a message to read it." });
     }
@@ -55,6 +109,7 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             subject: replySubject(message.subject),
             quotedHtml: buildReplyQuote(message),
             signatureContext: "reply_forward",
+            suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
         });
     }
     function handleReplyAll() {
@@ -66,6 +121,7 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             subject: replySubject(message.subject),
             quotedHtml: buildReplyQuote(message),
             signatureContext: "reply_forward",
+            suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
         });
     }
     function handleForward() {
@@ -113,6 +169,43 @@ export default function MessageDetailPane({ message, attachments, backHref, isSe
             setCanceling(false);
         }
     }
+    // Only ever invoked from the Archive button below, which itself only renders once `message` is
+    // loaded and this isn't a Drafts/Outbox message (the button's own guard mirrors
+    // `BaseMessageRoute.archive()`'s server-side 400) — same real invariant as `handleRecall` above.
+    async function handleArchive() {
+        setArchiving(true);
+        setArchiveError(null);
+        try {
+            const updated = await archiveMessage(message.uid);
+            onArchived?.(updated);
+        }
+        catch (err) {
+            setArchiveError(err instanceof ApiRequestError ? err.message : "Could not archive this message.");
+        }
+        finally {
+            setArchiving(false);
+        }
+    }
+    // Only ever invoked from a checkbox in the Labels popover below, which itself only renders once
+    // `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.
+    async function handleToggleLabel(labelUid) {
+        setTogglingLabelUid(labelUid);
+        setLabelsError(null);
+        try {
+            const current = message.labelUids ?? [];
+            const next = current.includes(labelUid) ? current.filter((uid) => uid !== labelUid) : [...current, labelUid];
+            const updated = await setMessageLabels(message, next);
+            onLabelsChanged?.(updated);
+        }
+        catch (err) {
+            setLabelsError(err instanceof ApiRequestError ? err.message : "Could not update this message's labels.");
+        }
+        finally {
+            setTogglingLabelUid(null);
+        }
+    }
     // Only ever invoked from the classification button below, which itself only renders once `message`
     // is loaded and `isInbox` is true — the non-null assertion reflects the same real invariant as
     // `handleRecall`/`handleCancelScheduledSend` above.
@@ -146,8 +239,14 @@ 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: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: message.subject || "(no subject)" }), 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 }) })), _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" })] }), 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"]
+    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
+                            .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))) }))] }), _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" })] })] })] }));
+                        .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 && (_jsx("div", { className: "px-4 pt-2", children: _jsx(Alert, { children: security.decryptError }) })), 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));
+                        }) })] })] }));
 }

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

@@ -21,7 +21,7 @@ export function useCompose() {
 export default function ComposeProvider({ children }) {
     const [sessions, setSessions] = useState([]);
     const isMobile = useIsMobile();
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new" }) {
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning }) {
         setSessions((prev) => [
             ...prev,
             {
@@ -32,6 +32,7 @@ export default function ComposeProvider({ children }) {
                 initialSubject: subject,
                 initialQuotedHtml: quotedHtml,
                 signatureContext,
+                suppressSigning,
                 minimized: false,
             },
         ]);