@rapidmx/web-client 0.35.0 → 0.37.0

package/apps/shared/components/contacts/ContactDetailPane.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
-import { Contact, setContactFavorite } from "../../../../lib/contacts/contactsApi.js";
+import { Contact, setContactFavorite, updateContact } from "../../../../lib/contacts/contactsApi.js";
 import CopyIconButton from "../../../../lib/components/buttons/CopyIconButton.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { notifyApiError } from "../../notifications/apiErrors.js";
@@ -15,6 +15,11 @@ import ContactPhotoEditor from "./ContactPhotoEditor.js";
 import KeyChangeReview from "./KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, formatDate, keyPinnedSince, revocationLabel } from "./contactKeys.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { type EndToEndFormat, isOpenPgpKey, keyFormat, OPENPGP_KEY_TYPE, type PublicKey, trustSigner } from "../../../../lib/crypto/keyvaultApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import ProtectedMark from "../../zeroAccess/ProtectedMark.js";
+import { useOpenedRecord } from "../../zeroAccess/useOpenedRecord.js";
+import { isOpenedRecord, isProtectedRecord, openSealedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
 
 /** Groups a hex fingerprint into 4-character blocks (`ab12 cd34 ...`) for out-of-band verification -
  * the spec's own use case ("compare this over the phone") is materially easier with a grouped string
@@ -56,7 +61,28 @@ export interface ContactDetailPaneProps {
  * always visible alongside the contact list) and the mobile detail route
  * (`apps/www/contacts/[uid].tsx`, a full page on its own reached by tapping a contact row).
  */
-export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite = true, backHref, onKeysChanged, onChanged, canResolveKeys }: ContactDetailPaneProps) {
+/** The pane for `props.contact` with all its protected details opened (a list hands over a contact with only what it shows opened). */
+export default function ContactDetailPane(props: ContactDetailPaneProps) {
+    const { record, ready } = useOpenedRecord(props.contact);
+    const { onChanged } = props;
+    // The server answers a change with the protected details sealed: what goes back to the list is opened again.
+    const openedOnChanged = onChanged && ((changed: Contact) => void openSealedRecord(changed).then(onChanged));
+    // A protected contact that can't be opened here shows placeholders: an edit would save them over the real details.
+    const editLocked = ready && isProtectedRecord(record) && !isOpenedRecord(record);
+    return <ContactDetailPaneView {...props} contact={record!} onChanged={openedOnChanged} editLocked={editLocked} />;
+}
+
+function ContactDetailPaneView({
+    contact,
+    onEdit,
+    onDelete,
+    canWrite = true,
+    backHref,
+    onKeysChanged,
+    onChanged,
+    canResolveKeys,
+    editLocked,
+}: ContactDetailPaneProps & { editLocked: boolean }) {
     const client = useApiClient();
     // The outcome of the last key decision, kept per contact so selecting another contact doesn't carry it over.
     const [keyNotice, setKeyNotice] = useState<{ contactUid: string; text: string } | null>(null);
@@ -111,6 +137,7 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                     <div>
                         <h1 className="text-xl font-bold tracking-tight">
                             {contact.displayName}
+                            <ProtectedMark record={contact} />
                             <FavoriteStarButton favorite={!!contact.favorite} disabled={photoBusy} onToggle={() => void handleToggleFavorite()} className="ml-1 align-middle" />
                         </h1>
                         {contact.jobTitle && contact.company && (
@@ -136,7 +163,14 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                             </>
                         ) : (
                             <>
-                                <Button type="button" variant="secondary" className="!w-auto" onClick={onEdit}>
+                                <Button
+                                    type="button"
+                                    variant="secondary"
+                                    className="!w-auto"
+                                    onClick={onEdit}
+                                    disabled={editLocked}
+                                    title={editLocked ? "This contact is protected: unlock your mailbox to edit it" : undefined}
+                                >
                                     Edit
                                 </Button>
                                 <Button type="button" variant="secondary" className="!w-auto text-danger" onClick={() => setConfirmingDeleteUid(contact.uid)}>
@@ -148,6 +182,12 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                 )}
             </div>
 
+            {editLocked && canWrite && (
+                <p role="status" className="text-sm text-text-muted">
+                    This contact is protected and can&rsquo;t be edited while your mailbox is locked. Unlock it to edit.
+                </p>
+            )}
+
             <div className="bg-surface border border-border rounded-md p-6 flex flex-col gap-4 text-sm">
                 {contact.emails.length > 0 && (
                     <div>
@@ -196,18 +236,26 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                 previousKeys.length > 0 ? (
                     <div>
                         <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Encryption</div>
+                        {isProtectedRecord(contact) && (
+                            <p className="mb-2 text-xs text-text-muted">
+                                This contact&rsquo;s details are protected by zero-access encryption. Its email addresses aren&rsquo;t - the server needs
+                                them to deliver mail and to find this contact&rsquo;s encryption keys.
+                            </p>
+                        )}
                         {notice && (
                             <p role="status" className="mb-2 py-2 px-3 rounded-sm bg-surface-alt text-text">
                                 {notice}
                             </p>
                         )}
                         {keyConflicts.map((conflict) => {
-                            const pinned = contact.keys?.find((key) => key.useType === conflict.useType);
-                            const kind = conflict.useType === "sign" ? "signing" : "encryption";
+                            // Each format's key is pinned on its own: an OpenPGP key's conflict is with the pinned OpenPGP key.
+                            const openPgp = isOpenPgpKey(conflict.observedKey);
+                            const pinned = contact.keys?.find((key) => key.useType === conflict.useType && keyFormat(key) === keyFormat(conflict.observedKey));
+                            const kind = openPgp ? "OpenPGP" : conflict.useType === "sign" ? "signing" : "encryption";
                             return (
                                 <section
-                                    key={conflict.useType}
-                                    aria-label={`${conflict.useType === "sign" ? "Signing" : "Encryption"} key change`}
+                                    key={`${conflict.useType}:${keyFormat(conflict.observedKey)}`}
+                                    aria-label={`${openPgp ? "OpenPGP" : conflict.useType === "sign" ? "Signing" : "Encryption"} key change`}
                                     className="mb-3 py-3 px-3 rounded-sm bg-warning/15 text-text flex flex-col gap-2"
                                 >
                                     <h2 className="font-semibold">
@@ -218,6 +266,7 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                                         mailboxUid={contact.mailboxUid}
                                         address={contact.emails[0]?.address}
                                         useType={conflict.useType}
+                                        {...(openPgp ? { keyType: "openpgp" as const } : {})}
                                         ownerName={contact.displayName}
                                         current={pinned && { fingerprint: pinned.fingerprint, since: keyPinnedSince(contact, pinned) }}
                                         proposed={{
@@ -246,9 +295,12 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                                     : "This contact has not indicated a mutual encryption preference."}
                             </div>
                         )}
+                        {canWrite && contact.keys?.some((key) => isOpenPgpKey(key)) && (
+                            <PreferredFormatControl contact={contact} onChanged={onChanged} />
+                        )}
                         {contact.keys?.map((key) => (
                             <div key={key.fingerprint} className="font-mono text-xs py-0.5">
-                                {key.useType === "sign" ? "Signing" : "Encryption"} key: {formatFingerprint(key.fingerprint)}
+                                {keyLabel(key)} key: {formatFingerprint(key.fingerprint)}
                                 <RevocationBadge label={revocationLabel(key)} />
                             </div>
                         ))}
@@ -259,7 +311,7 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                                     {previousKeys.map((key) => (
                                         <li key={`${key.useType}:${key.fingerprint}:${key.replacedAt}`} className="text-xs py-0.5">
                                             <span className="font-mono">
-                                                {key.useType === "sign" ? "Signing" : "Encryption"} key: {formatFingerprint(key.fingerprint)}
+                                                {keyLabel(key)} key: {formatFingerprint(key.fingerprint)}
                                             </span>
                                             <RevocationBadge label={revocationLabel(key)} />
                                             <span className="text-text-muted">
@@ -275,7 +327,135 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, canWrite
                         )}
                     </div>
                 ) : null}
+                {canWrite && contact.emails[0]?.address && !contact.keys?.some((key) => isOpenPgpKey(key)) && (
+                    <OpenPgpKeyImport contact={contact} onImported={() => refresh("The OpenPGP key is now trusted for this contact.")} />
+                )}
             </div>
         </div>
     );
 }
+
+const FORMAT_NAMES: Record<EndToEndFormat, string> = { smime: "S/MIME", openpgp: "OpenPGP" };
+
+/** What "Automatic" picks for `contact` and why (restapi *Choosing the format*, after the user's own choice): what the address
+ * advertises, else what it was last seen using, else S/MIME. */
+function automaticFormat(contact: Contact): string {
+    const advertised = contact.encryptPreference?.preferFormat;
+    if (advertised) {
+        return `${FORMAT_NAMES[advertised]}, which they asked for`;
+    }
+    const observed = contact.observedFormat?.format;
+    return observed ? `${FORMAT_NAMES[observed]}, which they used last` : "S/MIME when they have a certificate";
+}
+
+/**
+ * "Preferred format" for a contact who has an OpenPGP key: which format mail to them is encrypted in when they can receive both.
+ * Automatic follows what they advertise or last used; S/MIME or OpenPGP overrides that - e.g. for someone who reads OpenPGP mail
+ * but still has an S/MIME certificate from a former employer.
+ */
+function PreferredFormatControl({ contact, onChanged }: { contact: Contact; onChanged?: (contact: Contact) => void }) {
+    const client = useApiClient();
+    const [saving, setSaving] = useState(false);
+    async function save(value: string) {
+        setSaving(true);
+        try {
+            const changed = await updateContact(
+                { uid: contact.uid, version: contact.version, preferredFormat: value === "smime" || value === "openpgp" ? value : null },
+                client,
+            );
+            onChanged?.(changed);
+        } catch (err) {
+            notifyApiError(err, "Couldn't update this contact");
+        } finally {
+            setSaving(false);
+        }
+    }
+    return (
+        <label className="flex flex-wrap items-center gap-2 text-sm my-1">
+            <span>Preferred format</span>
+            <select
+                className="border border-border rounded-sm py-1 px-2 bg-surface text-sm"
+                value={contact.preferredFormat ?? "auto"}
+                disabled={saving}
+                onChange={(e) => void save(e.target.value)}
+            >
+                <option value="auto">Automatic ({automaticFormat(contact)})</option>
+                <option value="smime">S/MIME</option>
+                <option value="openpgp">OpenPGP</option>
+            </select>
+        </label>
+    );
+}
+
+/** What a pinned key is called: an OpenPGP certificate by its format (it signs and encrypts), an S/MIME one by its use. */
+function keyLabel(key: Pick<PublicKey, "useType" | "type">): string {
+    return isOpenPgpKey(key) ? "OpenPGP" : key.useType === "sign" ? "Signing" : "Encryption";
+}
+
+/**
+ * "Add OpenPGP key": pins an OpenPGP public key the user pasted (from the contact's website, a key they sent, a key server they
+ * trust) for the contact's first address - `trustSigner()` with `type: "openpgp"`, which restapi checks names that address. For an
+ * OpenPGP user whose domain publishes no Web Key Directory, this is how RapidMX can encrypt to them.
+ */
+function OpenPgpKeyImport({ contact, onImported }: { contact: Contact; onImported: () => void }) {
+    const client = useApiClient();
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    if (!open) {
+        return (
+            <div>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setOpen(true)}>
+                    Add OpenPGP key&hellip;
+                </Button>
+            </div>
+        );
+    }
+    async function handleImport(e: React.FormEvent) {
+        e.preventDefault();
+        setBusy(true);
+        setError(null);
+        try {
+            await trustSigner(contact.mailboxUid, { address: contact.emails[0].address, certificate: text.trim(), type: OPENPGP_KEY_TYPE }, client);
+            clearPinnedSignerCache();
+            setOpen(false);
+            setText("");
+            onImported();
+        } catch (err) {
+            setError(
+                err instanceof ApiRequestError && err.status === 400
+                    ? `That isn't an OpenPGP public key for ${contact.emails[0].address} that can be used now.`
+                    : err instanceof ApiRequestError && err.status === 409
+                      ? "A different OpenPGP key is already trusted for this contact."
+                      : "Couldn't add the key. Try again.",
+            );
+        } finally {
+            setBusy(false);
+        }
+    }
+    return (
+        <form onSubmit={(e) => void handleImport(e)} className="flex flex-col gap-2">
+            <label className="text-sm font-semibold" htmlFor={`openpgp-key-${contact.uid}`}>
+                OpenPGP public key for {contact.emails[0].address}
+            </label>
+            <textarea
+                id={`openpgp-key-${contact.uid}`}
+                className="w-full text-xs font-mono border border-border rounded-sm py-1.5 px-2 bg-surface min-h-[8rem]"
+                placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----"
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                disabled={busy}
+            />
+            {error && <Alert>{error}</Alert>}
+            <div className="flex gap-2">
+                <Button type="submit" className="!w-auto" loading={busy} disabled={busy || !text.trim()}>
+                    Add key
+                </Button>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setOpen(false)} disabled={busy}>
+                    Cancel
+                </Button>
+            </div>
+        </form>
+    );
+}

package/apps/shared/components/contacts/ContactForm.tsx

@@ -27,6 +27,8 @@ import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import { useContactPhotoSrc } from "../../../../lib/contacts/useContactPhotoSrc.js";
 import { findWellKnownFolderUid } from "../../mail/findWellKnownFolderUid.js";
 import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+import { useOpenedRecord } from "../../zeroAccess/useOpenedRecord.js";
+import { isOpenedRecord, isProtectedRecord, openSealedRecord, protectedRecordWrite } from "../../../../lib/zeroAccess/sealedRecords.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -52,8 +54,40 @@ const ADDRESS_KINDS: ContactAddressKind[] = ["home", "work", "other"];
  * mobile detail route's own edit mode (`apps/www/contacts/[uid].tsx`) — creation itself stays
  * desktop-and-mobile-inline (see that route's own doc comment on why "new" never gets a dedicated route).
  */
-export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel }: ContactFormProps) {
+/** The form for `props.contact` opened in full - its fields are read once, when it mounts, so it waits for a protected contact to open. One
+ * that can't be opened here (the mailbox is locked, or this device has no key for it) is never edited: its form would hold placeholders,
+ * and saving them would replace - or clear for good - the real details. */
+export default function ContactForm(props: ContactFormProps) {
+    const { record, ready } = useOpenedRecord(props.contact);
+    // Bumped by the view's "Reload" to fill it again from the contact as it is now.
+    const [reloads, setReloads] = useState(0);
+    if (!ready) {
+        return <p className="text-sm text-text-muted">Opening this contact&hellip;</p>;
+    }
+    if (isProtectedRecord(record) && !isOpenedRecord(record)) {
+        return (
+            <div className="flex max-w-xl flex-col items-start gap-3 p-6">
+                <p role="status" className="text-sm">
+                    This contact is protected and can&rsquo;t be edited while your mailbox is locked. Unlock it to edit.
+                </p>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={props.onCancel}>
+                    Back
+                </Button>
+            </div>
+        );
+    }
+    // The server answers a save with the protected details sealed: what goes back is opened again.
+    const onSaved = (saved: Contact) => void openSealedRecord(saved).then(props.onSaved);
+    // Another contact is another form: its fields are filled from it.
+    return <ContactFormView key={`${record?.uid ?? ""}:${reloads}`} {...props} contact={record} onSaved={onSaved} onReload={() => setReloads((n) => n + 1)} />;
+}
+
+function ContactFormView({ contact, mailboxUid, folderUid, mailboxes, onSaved, onCancel, onReload }: ContactFormProps & { onReload: () => void }) {
     const client = useApiClient();
+    // The contact as the form was filled from. A live update hands the open form the contact as changed elsewhere (`contact`), but the fields
+    // still hold this one's values: an update is sent at this version, and compared with it, so that change is refused (409) - never
+    // overwritten with what the form still shows.
+    const [seeded] = useState(contact);
     const currentPhotoUrl = useContactPhotoSrc(contact, client);
     const [targetMailboxUid, setTargetMailboxUid] = useState(mailboxUid);
     const [displayName, setDisplayName] = useState(contact?.displayName ?? "");
@@ -77,8 +111,8 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     // The contact as stored, once it has been saved and only the picture is left to do (that is a second request, which can fail on its own):
-    // a retry must not create the contact again or send the version it started from. `key` is the form's content that was saved.
-    const [stored, setStored] = useState<{ contact: Contact; key: string } | null>(null);
+    // a retry must not create the contact again or send the version it started from. `key` is the form's content that was saved, `input` its fields.
+    const [stored, setStored] = useState<{ contact: Contact; key: string; input?: object } | null>(null);
 
     function updateEmail(index: number, patch: Partial<ContactEmail>) {
         setEmails((prev) => prev.map((e, i) => (i === index ? { ...e, ...patch } : e)));
@@ -116,7 +150,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 .filter(Boolean);
             // An update merges only the fields in its body, so a field the user cleared is sent as an
             // explicit `null` (an omitted/undefined one would keep its stored value); a create just omits it.
-            const existing = stored?.contact ?? contact;
+            const existing = stored?.contact ?? seeded;
             const cleared = existing ? null : undefined;
             const input = {
                 displayName: displayName.trim(),
@@ -138,11 +172,14 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                 // Stored exactly as it is now: only the picture is left.
                 saved = stored.contact;
             } else if (existing) {
+                // A protected contact's details go only when they changed from what the form was shown (or last saved): the server stores
+                // them sealed and can't tell an unchanged value from a new one.
+                const shown = seeded && (stored?.input ? { ...seeded, ...stored.input } : seeded);
                 saved = await updateContact(
                     {
                         uid: existing.uid,
                         version: existing.version,
-                        ...(input as Omit<ContactPatch, "uid" | "version">),
+                        ...protectedRecordWrite(shown, input as Omit<ContactPatch, "uid" | "version">, isOpenedRecord(seeded)),
                     },
                     client,
                 );
@@ -164,7 +201,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     client,
                 );
             }
-            setStored({ contact: saved, key });
+            setStored({ contact: saved, key, input });
             const changePhoto = async (current: Contact) => {
                 if (pickedPhoto) {
                     return uploadContactPhoto(current.uid, current.version, pickedPhoto, client);
@@ -180,7 +217,7 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
                     }
                     // A version that is stale means an earlier try had been applied after all (its answer never arrived): read the contact as it is and go again, once.
                     const current = await getContact(saved.uid, client);
-                    setStored({ contact: current, key });
+                    setStored({ contact: current, key, input });
                     saved = await changePhoto(current);
                 }
             } catch (err) {
@@ -197,6 +234,10 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
         }
     }
 
+    // Changed elsewhere since the form was filled (or last saved): a save would be refused.
+    const baseline = stored?.contact ?? seeded;
+    const changedElsewhere = !!contact && !!baseline && contact.version > baseline.version;
+
     function finish(saved: Contact) {
         // A message opened later in this page load must see the changed contact's signing keys.
         clearPinnedSignerCache();
@@ -212,6 +253,14 @@ export default function ContactForm({ contact, mailboxUid, folderUid, mailboxes,
             <h1 className="text-xl font-bold uppercase tracking-wide mb-3">{contact ? "Edit contact" : "New contact"}</h1>
 
             {error && <Alert>{error}</Alert>}
+            {changedElsewhere && (
+                <div role="status" className="mb-3 flex flex-wrap items-center gap-3 text-sm">
+                    <span>This contact was changed elsewhere while you were editing it, so saving would be refused. Reload it to edit the changed contact - what you typed here is lost.</span>
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={saving} onClick={onReload}>
+                        Reload
+                    </Button>
+                </div>
+            )}
 
             {!contact && mailboxes && mailboxes.length > 1 && (
                 <FormField label="Mailbox" htmlFor="contact-mailbox">

package/apps/shared/components/contacts/KeyChangeReview.tsx

@@ -16,6 +16,8 @@ export interface KeyChangeReviewProps {
     /** The contact's address `resolveKeyConflict()` looks the contact up by; absent hides the actions. */
     address?: string;
     useType: "sign" | "encrypt";
+    /** `"openpgp"` for an OpenPGP certificate (pinned as `useType: "encrypt"`; it signs too); omitted for an S/MIME certificate. */
+    keyType?: "openpgp";
     /** Who the key belongs to, for the advice ("confirm with <name>"). */
     ownerName: string;
     /** The currently pinned key and when it was first trusted; absent (couldn't be loaded) hides the actions. */
@@ -44,6 +46,7 @@ export default function KeyChangeReview({
     mailboxUid,
     address,
     useType,
+    keyType,
     ownerName,
     current,
     proposed,
@@ -57,7 +60,7 @@ export default function KeyChangeReview({
     const [busy, setBusy] = useState<"accept" | "reject" | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [forbidden, setForbidden] = useState(false);
-    const kind = useType === "sign" ? "signing" : "encryption";
+    const kind = keyType === "openpgp" ? "OpenPGP" : useType === "sign" ? "signing" : "encryption";
     const actionable = !!address && !!current && canResolve !== false && !forbidden;
 
     async function resolve(action: "accept" | "reject") {
@@ -70,6 +73,7 @@ export default function KeyChangeReview({
                 action,
                 expectedPinnedFingerprint: current!.fingerprint,
                 ...(action === "accept" && certificate !== undefined ? { certificate } : {}),
+                ...(keyType ? { type: keyType } : {}),
             });
             setConfirmOpen(false);
             onResolved(action);

package/apps/shared/components/contacts/contactCardData.ts

@@ -9,8 +9,9 @@
  */
 import { addDays } from "date-fns";
 import { CalendarEvent, listCalendarEvents } from "../../../../lib/calendar/calendarApi.js";
+import { openSealedEvents } from "../../calendar/sealedEvents.js";
 import { type CalendarOccurrence, expandAllOccurrences } from "../../../../lib/calendar/recurrence.js";
-import { type Contact, createContact, listContactsInFolders } from "../../../../lib/contacts/contactsApi.js";
+import { type Contact, CONTACT_MATCH_FIELDS, createContact, listContactsInFolders } from "../../../../lib/contacts/contactsApi.js";
 import { type ParsedVCardContact, parseVCards } from "../../../../lib/contacts/vcard.js";
 import {
     type Attachment,
@@ -36,6 +37,7 @@ import {
     ownContactCard,
     withoutDuplicates,
 } from "./participantDetails.js";
+import { openSealedRecord, openSealedRecords } from "../../../../lib/zeroAccess/sealedRecords.js";
 
 /** What the card is opened for besides who: the message the participant was met in, and that message's attachments when the caller already has them. */
 export interface ContactCardContext {
@@ -68,7 +70,9 @@ export async function loadFolders(mailboxes: readonly Mailbox[], client?: ApiCli
 /** The contact the address belongs to in `folders`' contacts folders, if any. */
 export async function findContact(folders: readonly Folder[], address: string, client?: ApiClient): Promise<Contact | undefined> {
     const uids = folders.filter((folder) => folder.type === "contacts").map((folder) => folder.uid);
-    return findContactByAddress(await listContactsInFolders(uids, client), address);
+    const found = findContactByAddress(await listContactsInFolders(uids, client), address);
+    // The card shows the one contact in full.
+    return found && (await openSealedRecord(found));
 }
 
 /** The last `CARD_LIST_SIZE` messages to or from `address` in `mailboxes`, newest first. */
@@ -90,7 +94,7 @@ export async function loadRecentMessages(mailboxes: readonly Mailbox[], address:
 export async function loadUpcomingEvents(folders: readonly Folder[], address: string, now: Date, client?: ApiClient): Promise<CalendarOccurrence[]> {
     const wanted = normalizeAddress(address);
     const calendars = folders.filter((folder) => folder.type === "calendar");
-    const lists = await Promise.all(calendars.map((folder) => listCalendarEvents(folder.uid, client)));
+    const lists = await Promise.all(calendars.map((folder) => listCalendarEvents(folder.uid, client).then(openSealedEvents)));
     const involved = lists
         .flat()
         .filter(
@@ -198,7 +202,7 @@ export async function addCardsToAddressBook(
     scope: { mailboxUid: string; folderUid: string },
     client?: ApiClient,
 ): Promise<AddCardsResult> {
-    const { fresh, skipped } = withoutDuplicates(cards, await listContactsInFolders([scope.folderUid], client));
+    const { fresh, skipped } = withoutDuplicates(cards, await openSealedRecords(await listContactsInFolders([scope.folderUid], client), CONTACT_MATCH_FIELDS));
     let added = 0;
     for (const card of fresh) {
         try {

package/apps/shared/components/contacts/contactKeys.ts

@@ -6,7 +6,7 @@
  * `MessageDetailPane`). */
 import { ApiRequestError } from "../../../../lib/util/api.js";
 import type { Contact } from "../../../../lib/contacts/contactsApi.js";
-import { PinnedKeyChangedError, type KeyConflict, type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
+import { keyFormat, PinnedKeyChangedError, type KeyConflict, type PublicKey } from "../../../../lib/crypto/keyvaultApi.js";
 
 export const KEY_CHANGE_STALE_MESSAGE = "This contact's keys changed while you were looking; reload to see the latest.";
 export const KEY_CHANGE_INVALID_MESSAGE =
@@ -64,9 +64,9 @@ export function conflictSourceLabel(source: KeyConflict["source"]): string {
 type ContactWithFirstSeen = Pick<Contact, "previousKeys"> & { keysFirstSeen?: number };
 
 /** When `key` (one of `contact`'s pinned keys) started being trusted: when it replaced the newest previous key of its
- * use, else the contact's `keysFirstSeen`, else the key's own `notBefore`. */
+ * use and format, else the contact's `keysFirstSeen`, else the key's own `notBefore`. */
 export function keyPinnedSince(contact: ContactWithFirstSeen, key: PublicKey): number {
-    const replaced = (contact.previousKeys ?? []).filter((previous) => previous.useType === key.useType).map((previous) => previous.replacedAt);
+    const replaced = (contact.previousKeys ?? []).filter((previous) => previous.useType === key.useType && keyFormat(previous) === keyFormat(key)).map((previous) => previous.replacedAt);
     if (replaced.length > 0) {
         return Math.max(...replaced);
     }

package/apps/shared/components/layout/AppShell.tsx

@@ -116,6 +116,24 @@ export interface AppShellProps extends PluginNavProps {
     branding?: Branding;
     /** The signed-in user's stored appearance preferences as the server rendered the page (its `appearance` prop), so the first paint already wears the theme and background - see `AppearanceProvider`. */
     appearance?: unknown;
+    /** A host that signs its account out itself - see `ShellSignOutHost`. Absent (the webmail), "Sign out" ends the one session this
+     * origin holds. */
+    signOutHost?: ShellSignOutHost;
+}
+
+/**
+ * How a host that keeps several accounts in one page (`tauri-client`: one webview, one key session, one local-index storage for all of
+ * them) signs out the account whose shell is mounted. The shell's own sign-out assumes one user per origin: it destroys every
+ * mailbox's unlocked keys and every local index on the device, posts auth-server's cookie logout and navigates to auth-server. With a
+ * host, "Sign out" still marks compose as signing out, clears this session's caches and notifications and saves open compose windows,
+ * but leaves the keys, the indexes, the logout and where to go next to the host.
+ */
+export interface ShellSignOutHost {
+    /** Called first, where the shell would destroy every mailbox's unlocked keys: destroys the signing-out account's. */
+    destroyKeys(): void;
+    /** Called once open compose windows are saved: destroys the account's local indexes, ends its session and leaves the page. Should
+     * not reject; a rejection is logged. */
+    finish(): Promise<void>;
 }
 
 export interface AppDef {
@@ -181,6 +199,7 @@ export function AppChrome({
     pluginNav,
     busy,
     hideChrome,
+    signOutHost,
     children,
 }: PropsWithChildren<AppChromeProps>) {
     const client = useApiClient();
@@ -253,9 +272,10 @@ export function AppChrome({
     // own, so this is what actually removes the indexes after a console sign-out (the console also records a
     // pending deletion, retried on the next mail load, in case no mail tab is open). `destroyAllLocalIndexes()`
     // announces the sign-out on this same channel, which this tab then hears itself, so the ref is set first:
-    // each tab reacts once, and the tab that started the sign-out ignores its own announcement.
+    // each tab reacts once, and the tab that started the sign-out ignores its own announcement. A host that signs out itself
+    // (`signOutHost`) keeps other accounts in this origin, so another tab's sign-out isn't this one's.
     useEffect(() => {
-        if (!userUid || typeof BroadcastChannel === "undefined") {
+        if (!userUid || signOutHost || typeof BroadcastChannel === "undefined") {
             return;
         }
         const channel = new BroadcastChannel(SIGN_OUT_CHANNEL);
@@ -278,15 +298,19 @@ export function AppChrome({
             });
         });
         return () => channel.close();
-    }, [userUid, authServerUrl]);
+    }, [userUid, authServerUrl, signOutHost]);
 
     async function handleSignOut() {
         signingOutRef.current = true;
         // Before flushing and navigating: compose windows then skip their "Leave site?" prompt, which could
         // otherwise cancel the sign-out's own navigation.
         markSigningOut();
-        // Unlocked private keys never outlive an explicit sign-out.
-        destroyUnlockedKeys();
+        // Unlocked private keys never outlive an explicit sign-out - only the signing-out account's where a host keeps others.
+        if (signOutHost) {
+            signOutHost.destroyKeys();
+        } else {
+            destroyUnlockedKeys();
+        }
         // Trusted signer pins read from contacts don't outlive the session either.
         clearPinnedSignerCache();
         clearAppearanceCache();
@@ -295,6 +319,11 @@ export function AppChrome({
         // Open compose windows save edits still waiting on their autosave debounce while the session is still
         // valid - logout invalidates it. Bounded the same way as logout itself, and never rejects.
         await flushComposeDrafts(LOGOUT_TIMEOUT_MS);
+        if (signOutHost) {
+            // The host destroys its account's indexes (spec §11) and ends its session; this page can't tell its accounts apart.
+            await signOutHost.finish().catch((err: unknown) => console.warn("The host's sign-out failed:", err));
+            return;
+        }
         // The Tier 2 local index MUST be destroyed on explicit logout, the same as unlocked keys themselves
         // (spec §11). Destroys every index on this device (not only mailboxes opened this page load) and is
         // awaited before navigating - a navigation tears down the Worker mid-delete otherwise.