@rapidmx/web-client 0.36.0 → 0.37.1

package/apps/www/calendar/index.tsx

@@ -24,10 +24,13 @@ import {
 import { ApiRequestError } from "../../../lib/util/api.js";
 import { useApiClient } from "../../../lib/util/apiClientContext.js";
 import useIsMobile from "../../../lib/util/useIsMobile.js";
-import { CalendarEvent, getCalendarEvent, listCalendarEvents } from "../../../lib/calendar/calendarApi.js";
+import { CalendarEvent, fullyOpenedEvent, getCalendarEvent, listCalendarEvents } from "../../../lib/calendar/calendarApi.js";
+import { isOpenedRecord, isProtectedRecord } from "../../../lib/zeroAccess/sealedRecords.js";
+import { isSealedRecord } from "../../../lib/zeroAccess/sealedMoves.js";
+import { useKeysLocked } from "../../shared/zeroAccess/useKeysLocked.js";
 import { openSealedEvent, openSealedEvents } from "../../shared/calendar/sealedEvents.js";
 import { useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
-import { moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calendarMutations.js";
+import { SealedOccurrenceError, moveOccurrence, resizeOccurrenceEnd } from "../../../lib/calendar/calendarMutations.js";
 import { resolveDragAction } from "../../../lib/calendar/calendarDragIds.js";
 import { createFolder } from "../../../lib/mail/mailApi.js";
 import { CalendarOccurrence, expandAllOccurrences, expandOccurrences } from "../../../lib/calendar/recurrence.js";
@@ -77,6 +80,8 @@ import { SHORTCUTS, ShortcutDef } from "../../shared/keyboard/keymap.js";
 import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
+import { notify } from "../../shared/notifications/store.js";
+import { KeysLockedError } from "../../../lib/crypto/masterKey.js";
 import { bookingSettingsHref } from "../../shared/calendar/bookingPlugin.js";
 import { changedEventOf } from "../../shared/calendar/calendarLiveUpdates.js";
 
@@ -390,11 +395,44 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
     // Today moves on at midnight: the List's "from today on" is worked out again then (`listDay` is only a dependency).
     const listDay = useDayKey();
     const dayOfList = view === "list" ? listDay : "";
+    // A search matches descriptions too, which a list leaves sealed (`EVENT_LIST_FIELDS`): the protected events are opened in full once one
+    // runs, and searched as they are until then.
+    const [searchable, setSearchable] = useState<{ from: CalendarEvent[]; events: CalendarEvent[] } | null>(null);
+    useEffect(() => {
+        if (!searching || !events.some((event) => isProtectedRecord(event) && !isOpenedRecord(event))) {
+            return;
+        }
+        let cancelled = false;
+        void Promise.all(events.map((event) => fullyOpenedEvent(event))).then((opened) => {
+            if (!cancelled) {
+                setSearchable({ from: events, events: opened });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [events, searching]);
+    const searchedEvents = searchable?.from === events ? searchable.events : events;
+
+    // The calendar holds protected events opened with their mailboxes' keys: a lock of one takes them off screen - read again with their
+    // placeholders, the search's fully opened copies dropped, and an open card or form of a protected event closed - its own mailbox's
+    // lock closes it too when it isn't one of the listed events (opened from a reminder, its calendar unchecked).
+    useKeysLocked((locked) => {
+        const listed: boolean = events.some((event) => event.mailboxUid === locked);
+        setModal((current) =>
+            current?.occurrence && isSealedRecord(current.occurrence) && (listed || current.occurrence.mailboxUid === locked) ? null : current,
+        );
+        if (!listed) {
+            return;
+        }
+        reload();
+        setSearchable(null);
+    });
     const matches = useMemo(() => {
-        const found = searching ? searchOccurrences(events, query) : [];
+        const found = searching ? searchOccurrences(searchedEvents, query) : [];
         const today = new Date();
         return view === "list" ? found.filter((occurrence) => isUpcoming(occurrence, today)) : found;
-    }, [events, query, searching, view, dayOfList]);
+    }, [searchedEvents, query, searching, view, dayOfList]);
     const activeIndex = matches.findIndex((m) => m.occurrenceKey === activeKey);
 
     // What an open event card steps through, in order: the matches while a search runs, else every event of the checked calendars (bounded as a
@@ -684,7 +722,13 @@ function CalendarContent({ userUid, bookingHref }: { userUid?: string; bookingHr
             }
             reload();
         } catch (err) {
-            notifyApiError(err, action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event");
+            const context = action.type === "move" ? "Couldn't move the event" : "Couldn't resize the event";
+            if (err instanceof KeysLockedError || err instanceof SealedOccurrenceError) {
+                // A protected occurrence while the mailbox is locked, or one of a zero-access invitation: nothing was written.
+                notify({ kind: "warning", title: context, message: err.message });
+            } else {
+                notifyApiError(err, context);
+            }
             // A refused change (a 409 most of all) means the page holds a stale version: load again, or every later drag of this event fails the same way.
             reload();
         }

package/apps/www/contacts/index.tsx

@@ -11,6 +11,8 @@ import {
     createContact,
     deleteContact,
     getContact,
+    CONTACT_LIST_FIELDS,
+    CONTACT_MATCH_FIELDS,
     listContacts,
     ensureSuggestedContacts,
     listContactsInFolders,
@@ -44,6 +46,8 @@ import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { notify } from "../../shared/notifications/store.js";
 import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+import { isOpenedRecord, isProtectedRecord, openSealedRecord, openSealedRecords } from "../../../lib/zeroAccess/sealedRecords.js";
+import { useKeysLocked } from "../../shared/zeroAccess/useKeysLocked.js";
 
 /** The published model class name of a contact on either database (`ContactMongo`, `ContactSQL`) - not a `ContactList`'s. */
 const CONTACT_MODEL = /^Contact(Mongo|SQL)$/;
@@ -142,6 +146,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
             void loadSuggested(suggestedFolderUid);
         }
         return listAllPages((page) => listContacts(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then(async (result) => ({ ...result, items: await openSealedRecords(result.items, CONTACT_LIST_FIELDS) }))
             .then((result) => {
                 setContacts(result.items);
                 setTruncated(result.truncated);
@@ -154,10 +159,25 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         void reload();
     }, [folderUid]);
 
+    // The lists hold protected contacts opened with the mailbox's keys: its lock takes them off screen, read again with their placeholders (the
+    // contacts, the suggested ones and the Deleted view). They leave the lists first, so a reload that fails can't leave them shown. An open
+    // contact's pane and form drop what they opened themselves (`useOpenedRecord`).
+    const [lockCount, setLockCount] = useState(0);
+    useKeysLocked((locked) => {
+        if (locked === mailboxUid) {
+            const readable = (list: Contact[]) => list.filter((contact) => !isProtectedRecord(contact));
+            setContacts(readable);
+            setSuggestedContacts(readable);
+            setDeletedContacts(readable);
+            void reload();
+            setLockCount((count) => count + 1);
+        }
+    });
+
     /** Reads the Suggested Contacts folder's contacts. A failure leaves the list as it was. */
     function loadSuggested(suggestedUid: string): Promise<void> {
         return listAllPages((page) => listContacts(suggestedUid, { limit: LIST_PAGE_SIZE, page }, client))
-            .then((result) => setSuggestedContacts(result.items))
+            .then(async (result) => setSuggestedContacts(await openSealedRecords(result.items, CONTACT_LIST_FIELDS)))
             .catch(() => undefined);
     }
 
@@ -195,7 +215,9 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 remove(change.uid);
                 return;
             }
-            void getContact(change.uid, client).then(
+            void getContact(change.uid, client)
+                .then((fresh) => openSealedRecord(fresh, CONTACT_LIST_FIELDS))
+                .then(
                 (fresh) => {
                     if (fresh.deleted === true) {
                         remove(fresh.uid);
@@ -256,6 +278,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         setDeletedLoading(true);
         setDeletedError(null);
         listAllPages((page) => listDeletedContacts(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then(async (result) => ({ ...result, items: await openSealedRecords(result.items, CONTACT_LIST_FIELDS) }))
             .then((result) => {
                 // A server that dropped the `deleted` filter (no delete+update right on this folder) answers with live
                 // contacts, which must never be listed as deleted.
@@ -271,8 +294,8 @@ function ContactsContent({ userUid }: { userUid?: string }) {
             .catch((err) => setDeletedError(err instanceof ApiRequestError ? err.message : "Could not load deleted contacts."))
             .finally(() => setDeletedLoading(false));
         // Re-fetches every time the Deleted view is (re-)selected, matching this page's own `reload()`
-        // convention elsewhere rather than caching a possibly-stale list across visits.
-    }, [view, folderUid]);
+        // convention elsewhere rather than caching a possibly-stale list across visits - and when the mailbox locks.
+    }, [view, folderUid, lockCount]);
 
     const viewFiltered = useMemo(() => {
         switch (view.type) {
@@ -467,9 +490,17 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         if (!category?.trim()) {
             return;
         }
-        for (const contact of checkedContacts) {
-            const categories = Array.from(new Set([...(contact.categories ?? []), category.trim()]));
+        let locked = 0;
+        for (const listed of checkedContacts) {
             try {
+                // A protected one's categories are added to as opened: one that won't open here (the mailbox is locked) shows a placeholder
+                // (none), and saving that plus the new one would replace its real categories for good. It is left as it is.
+                const contact = await openSealedRecord(listed);
+                if (isProtectedRecord(contact) && !isOpenedRecord(contact)) {
+                    locked++;
+                    continue;
+                }
+                const categories = Array.from(new Set([...(contact.categories ?? []), category.trim()]));
                 // Only the changed field - sending the whole fetched contact back includes server-managed
                 // fields restapi rejects, and would overwrite any concurrent edit to the other fields.
                 await updateContact({ uid: contact.uid, version: contact.version, categories }, client);
@@ -477,6 +508,13 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 notifyApiError(err, "Couldn't update some of the contacts");
             }
         }
+        if (locked > 0) {
+            notify({
+                kind: "warning",
+                title: "Some contacts weren't categorized",
+                message: `${locked === 1 ? "A contact is" : `${locked} contacts are`} protected and can't be changed while your mailbox is locked. Unlock it, then add the category again.`,
+            });
+        }
         clearPinnedSignerCache();
         await reload();
     });
@@ -484,8 +522,17 @@ function ContactsContent({ userUid }: { userUid?: string }) {
     // A suggested contact becomes one of the mailbox's own: a copy in its contacts folder, and the suggestion removed (the person is not suggested again).
     const handleAddToContacts = singleFlight(async () => {
         // In the All contacts view the selection can hold contacts that already are the mailbox's own: only the suggested ones are added.
-        for (const contact of checkedContacts.filter((checked) => checked.folderUid === suggestedFolderUid)) {
+        let locked = 0;
+        for (const listed of checkedContacts.filter((checked) => checked.folderUid === suggestedFolderUid)) {
             try {
+                // Copied in full: the list opened only what it shows.
+                const contact = await openSealedRecord(listed);
+                // A protected one that won't open here (the mailbox is locked) holds only placeholders: copying them would replace its real
+                // name for good once the original is deleted. It is left as it is.
+                if (isProtectedRecord(contact) && !isOpenedRecord(contact)) {
+                    locked++;
+                    continue;
+                }
                 await createContact(
                     {
                         mailboxUid: contact.mailboxUid,
@@ -508,14 +555,23 @@ function ContactsContent({ userUid }: { userUid?: string }) {
                 notifyApiError(err, "Couldn't add some of the contacts");
             }
         }
+        if (locked > 0) {
+            notify({
+                kind: "warning",
+                title: "Some contacts weren't added",
+                message: `${locked === 1 ? "A suggested contact is" : `${locked} suggested contacts are`} protected and can't be opened while your mailbox is locked. Unlock it, then add ${locked === 1 ? "it" : "them"} again.`,
+            });
+        }
         setCheckedUids(new Set());
         await reload();
     });
 
-    function handleExportVCard() {
+    async function handleExportVCard() {
+        // Exported in full: the list opened only what it shows.
+        const contacts = await openSealedRecords(checkedContacts);
         downloadTextFile(
-            checkedContacts.length === 1 ? `${checkedContacts[0].displayName}.vcf` : "contacts.vcf",
-            checkedContacts.length === 1 ? contactToVCard(checkedContacts[0]) : contactsToVCardFile(checkedContacts),
+            contacts.length === 1 ? `${contacts[0].displayName}.vcf` : "contacts.vcf",
+            contacts.length === 1 ? contactToVCard(contacts[0]) : contactsToVCardFile(contacts),
         );
     }
 
@@ -543,7 +599,7 @@ function ContactsContent({ userUid }: { userUid?: string }) {
         // earlier card's in the file - is left alone. The folder is read in full for that, not just the page of it the list holds.
         let fresh: ParsedVCardContact[];
         try {
-            fresh = withoutDuplicates(parsed, await listContactsInFolders([folderUid], client)).fresh;
+            fresh = withoutDuplicates(parsed, await openSealedRecords(await listContactsInFolders([folderUid], client), CONTACT_MATCH_FIELDS)).fresh;
         } catch (err) {
             notifyApiError(err, "Couldn't check the file against your contacts");
             return;

package/apps/www/index.tsx

@@ -159,6 +159,9 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
         encrypted,
         DECRYPT_CONCURRENCY,
         async (message): Promise<[string, DecryptedRow] | null> => {
+            // A lock while a row was opened has already cleared the shared store: what it opened must not go back in (`decryptForDisplay()`
+            // asks the same). The caller's lock generation keeps it off this page.
+            const stillUnlocked = (): boolean => getUnlockedKeys(message.mailboxUid) === unlocked;
             try {
                 // Loaded here, on first use: the S/MIME code (PKI.js, ASN.1, X.509) is over half a megabyte and an inbox with
                 // no encrypted mail in it never needs it.
@@ -167,11 +170,17 @@ async function decryptEncryptedRows(messages: Message[], unlocked: UnlockedKeys)
                 const summary = message.zeroAccess ? await securityApi.openZeroAccessSummary(message.zeroAccess.sealedSummary, unlocked.zeroAccessKeys) : undefined;
                 if (summary) {
                     const preview = summary.preview.slice(0, LIST_PREVIEW_MAX_LENGTH);
-                    rememberDecrypted(message.uid, message.mailboxUid, { subject: summary.subject, preview });
+                    if (stillUnlocked()) {
+                        rememberDecrypted(message.uid, message.mailboxUid, { subject: summary.subject, preview });
+                    }
                     return [message.uid, { subject: summary.subject, preview }];
                 }
                 const rawMime = await getMessageRawContent(message.uid);
                 const security = await securityApi.evaluateMessageSecurity(rawMime, unlocked);
+                // Nor is a lock a failure to decrypt.
+                if (!stillUnlocked()) {
+                    return null;
+                }
                 if (!security.subject && !security.html) {
                     markDecryptFailed(message.uid);
                     return null;

package/apps/www/settings/encryption/index.tsx

@@ -17,14 +17,17 @@ import {
     getCurrentSignEnrollment,
     getEscrowInfo,
     getKeyVault,
+    isOpenPgpKey,
     rekey,
     removeMasterKeyWrap,
     startSignEnrollment,
 } from "../../../../lib/crypto/keyvaultApi.js";
 import {
     ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE,
+    OPENPGP_PRIVATE_KEY_AAD_PURPOSE,
     SIGNING_PRIVATE_KEY_AAD_PURPOSE,
     UnlockedKeys,
+    ZERO_ACCESS_PRIVATE_KEY_AAD_PURPOSE,
     destroyUnlockedKeys,
     getUnlockedKeys,
     unlockWithPassword,
@@ -53,6 +56,7 @@ import Button from "../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import ZeroAccessSetting from "../../../shared/components/settings/ZeroAccessSetting.js";
 import KeyExportSetting from "../../../shared/components/settings/KeyExportSetting.js";
+import OpenPgpKeySetting from "../../../shared/components/settings/OpenPgpKeySetting.js";
 import SigningCertificateCard, { SigningCertificateMode } from "../../../shared/components/settings/SigningCertificateCard.js";
 import { readStoredSignEnrollment, storeSignEnrollment } from "../../../shared/signing/enrollmentStorage.js";
 import {
@@ -103,7 +107,14 @@ class StaleSessionKeysError extends Error {
 const STALE_KEYS_MESSAGE =
     "Your encryption keys were changed on another device (for example, rotated), so the copy unlocked in this session no longer works. Nothing was changed. Unlock again with your current password, then try again.";
 
+/** The AAD a vault key is sealed with - by what it is: an OpenPGP secret key, a zero-access key, a signing key or an encryption key. */
 function wrappedKeyAad(mailboxUid: string, entry: WrappedPrivateKey): Uint8Array {
+    if (isOpenPgpKey(entry)) {
+        return buildAad(mailboxUid, OPENPGP_PRIVATE_KEY_AAD_PURPOSE);
+    }
+    if (entry.useType === "zero-access") {
+        return buildAad(mailboxUid, ZERO_ACCESS_PRIVATE_KEY_AAD_PURPOSE);
+    }
     return buildAad(mailboxUid, entry.useType === "sign" ? SIGNING_PRIVATE_KEY_AAD_PURPOSE : ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE);
 }
 
@@ -169,6 +180,8 @@ async function rewrapVaultPrivateKeys(
                 algorithm: "AES-256-GCM",
                 fingerprint: entry.fingerprint,
                 useType: entry.useType,
+                // An OpenPGP secret key stays one: without its type it would read back as an S/MIME key.
+                ...(isOpenPgpKey(entry) ? { type: entry.type } : {}),
             });
         }
         return { mk, wrappedKeys: rewrapped };
@@ -229,7 +242,8 @@ function EncryptionGate({ userUid, impersonating }: { userUid?: string; imperson
             mailboxKeys={mailbox.keys}
             canProvision={isOwner}
         >
-            <EncryptionContent canManageKeys={isOwner} />
+            {/* Mounted anew for each mailbox: switching mailbox keeps the page, and its settings seed their state from the mailbox. */}
+            <EncryptionContent key={mailboxUid} canManageKeys={isOwner} />
         </KeyEnrollmentGate>
     );
 }
@@ -979,6 +993,7 @@ function EncryptionContent({ canManageKeys }: { canManageKeys: boolean }) {
 
                 <ZeroAccessSetting mailbox={mailbox} canManage={canManageKeys} />
                 <KeyExportSetting mailbox={mailbox} canManage={canManageKeys} />
+                <OpenPgpKeySetting mailbox={mailbox} canManage={canManageKeys} />
 
                 <div>
                     <h2 className="text-sm font-semibold mb-2">Digital signatures</h2>

package/apps/www/settings/privacy/index.tsx

@@ -15,21 +15,25 @@ import {
 import {
     MailboxImportFormat,
     MailboxImportRequest,
+    ZERO_ACCESS_IMPORT_MESSAGE,
     listImportRequests,
+    mailIsZeroAccess,
     uploadMailboxImport,
 } from "../../../../lib/mail/mailboxImportApi.js";
+import { getEncryptionPolicy } from "../../../../lib/crypto/keyvaultApi.js";
 import {
     DataSubjectErasureRequest,
     createErasureRequest,
     listErasureRequests,
 } from "../../../../lib/mail/erasureRequestApi.js";
-import { Folder, listFolders } from "../../../../lib/mail/mailApi.js";
+import { Folder, Mailbox, listFolders } from "../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../lib/components/overlays/Modal.js";
 import { notifyApiError } from "../../../shared/notifications/apiErrors.js";
+import { INVALID_REQUEST_CODE } from "../../../../lib/zeroAccess/sealedMoves.js";
 import GravatarSetting from "../../../shared/components/settings/GravatarSetting.js";
 
 const NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]);
@@ -89,7 +93,7 @@ function PrivacyContent({ userUid }: { userUid?: string }) {
                 {selectedIsOwn ? (
                     <>
                         <ExportSection mailboxUid={mailboxUid} mailboxLabel={`${selected.displayName} (${selected.primarySmtpAddress})`} />
-                        <ImportSection mailboxUid={mailboxUid} />
+                        <ImportSection mailboxUid={mailboxUid} mailbox={selected} />
                         <ErasureSection mailboxLabel={`${selected.displayName} (${selected.primarySmtpAddress})`} />
                     </>
                 ) : (
@@ -238,8 +242,36 @@ function ExportSection({ mailboxUid, mailboxLabel }: { mailboxUid?: string; mail
     );
 }
 
-function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
+/**
+ * Uploads a mail archive for restapi's server-side import. Not offered for a mailbox whose mail is zero-access (`mailIsZeroAccess()`):
+ * restapi refuses it (409), since the archive would wait readable in its blob store until the import ran, and the reason is shown
+ * instead. The server's zero-access refusal given anyway (zero-access turned on since the page loaded) is shown in its place too; its other
+ * 409, an import already in progress, is not.
+ */
+function ImportSection({ mailboxUid, mailbox }: { mailboxUid?: string; mailbox: Mailbox }) {
     const client = useApiClient();
+    // Only when the mailbox's own fields say its mail is zero-access is the administrator's policy asked: `undefined` until it answers
+    // (counted as allowed), and a failed read counts as allowed too, so the upload is never offered only to be refused.
+    const zeroAccessCandidate = mailIsZeroAccess(mailbox, undefined);
+    const [allowZeroAccess, setAllowZeroAccess] = useState<boolean | undefined>(undefined);
+    const [refused, setRefused] = useState<string | null>(null);
+    useEffect(() => {
+        if (!zeroAccessCandidate) {
+            return;
+        }
+        let cancelled = false;
+        void getEncryptionPolicy(client)
+            .then((policy) => {
+                if (!cancelled) {
+                    setAllowZeroAccess(policy.allowZeroAccess);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [zeroAccessCandidate, client]);
+    const zeroAccess = mailIsZeroAccess(mailbox, allowZeroAccess);
     const [folders, setFolders] = useState<Folder[]>([]);
     const [targetFolderUid, setTargetFolderUid] = useState("");
     const [foldersError, setFoldersError] = useState<string | null>(null);
@@ -294,7 +326,18 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
         setUploading(true);
         uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid, mailboxUid: mailboxUid! }, client)
             .then(() => loadRequests())
-            .catch((err) => notifyApiError(err, "Couldn't upload the file"))
+            .catch((err) => {
+                if (err instanceof ApiRequestError && err.status === 409 && err.code === INVALID_REQUEST_CODE) {
+                    // The server refuses an import into this mailbox (its mail is zero-access): say why, in place of the upload.
+                    setRefused(err.message);
+                    return;
+                }
+                // Any other refusal - an import already in progress is a 409 too - leaves the upload offered, and shows that import.
+                notifyApiError(err, "Couldn't upload the file");
+                if (err instanceof ApiRequestError && err.status === 409) {
+                    void loadRequests();
+                }
+            })
             .finally(() => setUploading(false));
     }
 
@@ -306,43 +349,49 @@ function ImportSection({ mailboxUid }: { mailboxUid?: string }) {
                 choose below. This runs in the background — check back here for its progress.
             </p>
 
-            {folders.length > 0 && (
-                <label className="flex flex-col gap-1.5 text-sm mb-3 max-w-xs">
-                    <span className="font-semibold">Destination folder</span>
-                    <select
-                        aria-label="Destination folder"
-                        className="text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
-                        value={targetFolderUid}
-                        onChange={(e) => setTargetFolderUid(e.target.value)}
+            {zeroAccess || refused ? (
+                <Alert>{refused ?? ZERO_ACCESS_IMPORT_MESSAGE}</Alert>
+            ) : (
+                <>
+                    {folders.length > 0 && (
+                        <label className="flex flex-col gap-1.5 text-sm mb-3 max-w-xs">
+                            <span className="font-semibold">Destination folder</span>
+                            <select
+                                aria-label="Destination folder"
+                                className="text-sm border border-border rounded-sm py-1.5 px-2 bg-surface"
+                                value={targetFolderUid}
+                                onChange={(e) => setTargetFolderUid(e.target.value)}
+                            >
+                                {folders.map((folder) => (
+                                    <option key={folder.uid} value={folder.uid}>
+                                        {folder.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </label>
+                    )}
+
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto mb-3"
+                        loading={uploading}
+                        disabled={uploading || !targetFolderUid}
+                        onClick={() => fileInputRef.current?.click()}
                     >
-                        {folders.map((folder) => (
-                            <option key={folder.uid} value={folder.uid}>
-                                {folder.name}
-                            </option>
-                        ))}
-                    </select>
-                </label>
+                        Upload Mbox or PST file
+                    </Button>
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".mbox,.pst"
+                        aria-label="Upload mail archive"
+                        className="hidden"
+                        onChange={handleFileChange}
+                    />
+                </>
             )}
 
-            <Button
-                type="button"
-                variant="secondary"
-                className="!w-auto mb-3"
-                loading={uploading}
-                disabled={uploading || !targetFolderUid}
-                onClick={() => fileInputRef.current?.click()}
-            >
-                Upload Mbox or PST file
-            </Button>
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept=".mbox,.pst"
-                aria-label="Upload mail archive"
-                className="hidden"
-                onChange={handleFileChange}
-            />
-
             {foldersError && <Alert>{foldersError}</Alert>}
             {loadError && <Alert>{loadError}</Alert>}
 

package/apps/www/tasks/index.tsx

@@ -36,6 +36,9 @@ import { useShortcut } from "../../shared/keyboard/useShortcut.js";
 import { useShortcutProps } from "../../shared/keyboard/useShortcutProps.js";
 import { notifyApiError } from "../../shared/notifications/apiErrors.js";
 import { changedItemOf, useFolderLiveUpdates } from "../../shared/live/useFolderLiveUpdates.js";
+import ProtectedMark from "../../shared/zeroAccess/ProtectedMark.js";
+import { useKeysLocked } from "../../shared/zeroAccess/useKeysLocked.js";
+import { isProtectedRecord, openSealedRecord, openSealedRecords } from "../../../lib/zeroAccess/sealedRecords.js";
 
 /** The published model class name of a task on either database (`TaskMongo`, `TaskSQL`) - not a `TaskList`'s. */
 const TASK_MODEL = /^Task(Mongo|SQL)$/;
@@ -132,6 +135,7 @@ function TasksContent() {
         setLoading(true);
         setError(null);
         return listAllPages((page) => listTasks(folderUid, { limit: LIST_PAGE_SIZE, page }, client))
+            .then(async (result) => ({ ...result, items: await openSealedRecords(result.items) }))
             .then((result) => {
                 if (run === loadRun.current) {
                     setTasks(result.items);
@@ -154,6 +158,15 @@ function TasksContent() {
         void reload();
     }, [folderUid]);
 
+    // The list holds protected tasks opened with the mailbox's keys: its lock takes them off screen, read again with their placeholders. They
+    // leave the list first, so a reload that fails can't leave them shown.
+    useKeysLocked((locked) => {
+        if (locked === mailboxUid) {
+            setTasks((list) => list.filter((task) => !isProtectedRecord(task)));
+            void reload();
+        }
+    });
+
     // A task created, changed or deleted anywhere - another tab, a phone over ActiveSync - is announced on its folder's channel. It is fetched again by its
     // uid and replaces (or joins) the list while it is still in this folder; one that is gone (a delete, a 404, or moved to another folder) leaves it. A
     // failed fetch changes nothing: the next load shows it as it is.
@@ -167,7 +180,7 @@ function TasksContent() {
                 remove();
                 return;
             }
-            void getTask(change.uid, client).then(
+            void getTask(change.uid, client).then(openSealedRecord).then(
                 (fresh) => {
                     if (fresh.folderUid !== folderUid) {
                         remove();
@@ -240,7 +253,7 @@ function TasksContent() {
                 setCreateError("That mailbox has no Tasks folder.");
                 return;
             }
-            const created = await createTask(
+            const created = await openSealedRecord(await createTask(
                 {
                     mailboxUid: target,
                     folderUid: targetFolderUid,
@@ -250,7 +263,7 @@ function TasksContent() {
                     priority,
                 },
                 client,
-            );
+            ));
             if (target === mailboxUid) {
                 setAddedElsewhere(null);
                 setTasks((prev) => [...prev, created]);
@@ -289,10 +302,12 @@ function TasksContent() {
         const nextCompleted = !task.completed;
         setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: nextCompleted } : t)));
         try {
-            const updated = await setTaskCompleted(task, nextCompleted, client);
+            const updated = await openSealedRecord(await setTaskCompleted(task, nextCompleted, client));
             setTasks((prev) => prev.map((t) => (t.uid === task.uid ? updated : t)));
         } catch (err) {
-            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? task : t)));
+            // Only the flag goes back, on the row there now: `task` is the row as it was shown, opened, and a lock since may have
+            // reloaded it with its placeholders (#224), which putting it back whole would undo.
+            setTasks((prev) => prev.map((t) => (t.uid === task.uid ? { ...t, completed: task.completed } : t)));
             notifyApiError(err, "Couldn't update the task");
         } finally {
             setTogglePending(task.uid, false);
@@ -660,6 +675,7 @@ function TaskGroup({ label, tasks, checkedUids, onToggleChecked, onToggle, toggl
                         <CompletionToggle task={task} onToggle={onToggle} pending={toggling.has(task.uid)} />
                         <span className={["flex-1 text-sm", task.completed ? "line-through text-text-muted" : ""].join(" ")}>
                             {task.title}
+                            <ProtectedMark record={task} />
                         </span>
                         {task.priority !== "normal" && (
                             <span className={["text-xs font-medium", PRIORITY_CLASS[task.priority]].join(" ")}>
@@ -742,7 +758,9 @@ function TaskTable({ tasks, checkedUids, onToggleChecked, onToggle, toggling, on
                             <td className="px-3 py-2">
                                 <CompletionToggle task={task} onToggle={onToggle} pending={toggling.has(task.uid)} />
                             </td>
-                            <td className={["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" ")}>{task.title}</td>
+                            <td className={["px-3 py-2", task.completed ? "line-through text-text-muted" : ""].join(" ")}>{task.title}
+                                <ProtectedMark record={task} />
+                            </td>
                             <td className="px-3 py-2 text-text-muted">{task.dueDate ? parseDueDate(task.dueDate).toLocaleDateString() : ""}</td>
                             <td className={["px-3 py-2", PRIORITY_CLASS[task.priority]].join(" ")}>{PRIORITY_LABEL[task.priority]}</td>
                             <td className="px-3 py-2">

package/dist/apps/shared/calendar/calendarReminders.d.ts

@@ -12,7 +12,21 @@ export interface CalendarReminderNotice {
     /** The event's own `location`, verbatim - `undefined`/`null` when the event has none. Not necessarily a URL;
      * see `joinMeetingUrl()` for when it's shown as a join link. */
     location?: string | null;
+    /** The event is of a calendar zero-access encryption protects, or was made from a zero-access invitation: `title` and `location` are
+     * placeholders (`openedReminder()`). */
+    protected?: boolean;
+    /** Set by `openedReminder()` on a protected notice it opened: the placeholder title the push carried, for anything recorded beyond
+     * this tab's memory (the notification history is kept in `sessionStorage` and outlives a mailbox lock). */
+    sealedTitle?: string;
+    /** Set with `sealedTitle`: the placeholder location the push carried, which `sealedReminder()` puts back. */
+    sealedLocation?: string | null;
 }
+/** `notice` with a protected event's real title and location, read from the event itself (opened with the mailbox's keys); `notice` as it
+ * came when the event can't be read or opened - the alarm still goes off, with the placeholder. Never rejects. */
+export declare function openedReminder(notice: CalendarReminderNotice): Promise<CalendarReminderNotice>;
+/** `notice` as the push carried it, when `openedReminder()` opened it - for an alarm still shown, or snoozed, when the mailbox locks: its real
+ * title and location go with the keys that opened them. `openedReminder()` opens it again (it is still `protected`). */
+export declare function sealedReminder(notice: CalendarReminderNotice): CalendarReminderNotice;
 /** A `notice.location` worth offering as a one-click "Join Meeting" link - a plain `http(s)://` URL and nothing
  * else (a room name, an address, free-text instructions are all real, common `location` values this must not
  * treat as a link). Trimmed first, so incidental whitespace never hides a real link. */