@rapidmx/web-client 0.33.0 → 0.35.0

package/apps/shared/calendar/calendarLiveUpdates.ts

@@ -5,6 +5,7 @@
 /** Pure helper behind the calendar page's live updates: which push events say "an event changed". */
 
 import type { PushEvent } from "../../../lib/mail/pushClient.js";
+import { changedItemOf } from "../live/useFolderLiveUpdates.js";
 
 /** The published model name of a calendar event on either database (`CalendarEventMongo`, `CalendarEventSQL`) - and not the reminder's `"CalendarEvent"`,
  * which has its own action. */
@@ -20,9 +21,5 @@ const EVENT_MODEL = /^CalendarEvent(Mongo|SQL)$/;
  * changed event is handled that way, an ordinary one (an invitation arriving, an edit on another device) included.
  */
 export function changedEventOf(event: PushEvent): { uid: string; deleted: boolean } | undefined {
-    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update" && event.action !== "delete")) {
-        return undefined;
-    }
-    const data = event.data as { uid?: unknown } | null | undefined;
-    return typeof data?.uid === "string" ? { uid: data.uid, deleted: event.action === "delete" } : undefined;
+    return changedItemOf(event, EVENT_MODEL);
 }

package/apps/shared/calendar/calendarReminders.ts

@@ -7,7 +7,7 @@
 
 import type { PushEvent } from "../../../lib/mail/pushClient.js";
 
-/** How long "Snooze" waits before the reminder reappears - or less, if the meeting starts sooner (`snoozeDelayMs()`). */
+/** How long "Snooze" waits before the alarm comes back. */
 export const SNOOZE_MS = 5 * 60_000;
 
 /** The payload restapi's `CalendarReminderJob` publishes (`{ eventUid, title, startDate, location }`) as a `"CalendarEvent"`/`"reminder"` push event. */
@@ -49,17 +49,26 @@ export function joinMeetingUrl(location: string | null | undefined): string | un
     return url.protocol === "http:" || url.protocol === "https:" ? trimmed : undefined;
 }
 
+/** What the alarm's button that opens an event's location URL is called: "Join" for a video meeting (a conferencing service's link, or any link that says
+ * it is one to join), "Open" for any other web address. */
+export function locationActionLabel(url: string): "Join" | "Open" {
+    const { hostname, pathname } = new URL(url);
+    const host = hostname.toLowerCase();
+    const conferencing = /(^|\.)(zoom\.us|zoom\.com|zoomgov\.com|webex\.com|gotomeeting\.com|goto\.com|whereby\.com|bluejeans\.com|chime\.aws|meet\.jit\.si)$/;
+    const known = conferencing.test(host) || host === "meet.google.com" || host === "teams.microsoft.com" || host === "teams.live.com";
+    return known || /\/(join|meet|meeting|room|call)(\/|$)/i.test(pathname) || /^(meet|video|call|conference)\./.test(host) ? "Join" : "Open";
+}
+
+/** Where an alarm's View button leads: the Calendar, with the event (and the occurrence due) open. */
+export function calendarEventHref(eventUid: string, startDate: string): string {
+    return `/calendar?event=${encodeURIComponent(eventUid)}&start=${encodeURIComponent(startDate)}`;
+}
+
 /** The reminder `event` carries, or `undefined` for anything else the shared push connection delivers (mail, folders, appearance, ...). */
 export function calendarReminderOf(event: PushEvent): CalendarReminderNotice | undefined {
     return event.type === "CalendarEvent" && event.action === "reminder" && isReminderNotice(event.data) ? event.data : undefined;
 }
 
-/** How long "Snooze" waits before showing the reminder again: `SNOOZE_MS`, or less if the meeting starts first - never negative (snoozing a
- * reminder for a meeting that has already started shows it again at once rather than waiting a further five minutes). */
-export function snoozeDelayMs(startDate: string, now: number = Date.now()): number {
-    return Math.max(0, Math.min(SNOOZE_MS, new Date(startDate).getTime() - now));
-}
-
 /** The pop-up's message line: when the meeting starts, relative to `now`. */
 export function reminderMessage(startDate: string, now: number = Date.now()): string {
     const time = new Date(startDate).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });

package/apps/shared/calendar/useCalendarReminders.ts

@@ -2,14 +2,12 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { getPushClient } from "../../../lib/mail/pushClient.js";
+import { getNotificationsEnabled } from "../notifications/preferences.js";
+import { playNotificationSound } from "../notifications/sounds.js";
 import { notify } from "../notifications/store.js";
-import { CalendarReminderNotice, calendarReminderOf, joinMeetingUrl, reminderMessage, reminderNotificationId, snoozeDelayMs } from "./calendarReminders.js";
-
-/** Where a reminder's title leads. There is no per-event deep link yet (the calendar opens an event by local state, not a URL - see
- * `apps/www/calendar/index.tsx`'s `openEvent()`), so every reminder opens the calendar itself. */
-export const CALENDAR_HREF = "/calendar";
+import { CalendarReminderNotice, SNOOZE_MS, calendarReminderOf, reminderMessage, reminderNotificationId } from "./calendarReminders.js";
 
 export interface UseCalendarRemindersOptions {
     /** Nothing is shown without a signed-in user. */
@@ -18,76 +16,83 @@ export interface UseCalendarRemindersOptions {
     enabled: boolean;
 }
 
+/** The calendar alarms waiting on the person, as `CalendarAlarmDialog` draws them. */
+export interface CalendarAlarms {
+    /** The alarm on screen: the oldest one not yet answered. `undefined` when there is none. */
+    current?: CalendarReminderNotice;
+    /** How many more are waiting behind `current`. */
+    waiting: number;
+    /** Closes `current` and brings it back after `SNOOZE_MS` (five minutes). */
+    snooze: () => void;
+    /** Closes `current` for good. */
+    dismiss: () => void;
+}
+
 /**
- * Pop-up meeting reminders. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate }`)
- * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open
- * (`getPushClient()`) - every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the
- * event is published to the mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its
- * own. Lives in the persistent app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so a reminder shows wherever the user is signed in -
- * Mail, Calendar, Contacts, Settings.
+ * Calendar alarms. restapi's `CalendarReminderJob` fires a `"CalendarEvent"`/`"reminder"` push event (`{ eventUid, title, startDate, location }`)
+ * when an event's `reminderMinutesBeforeStart` comes due, over the same shared push connection Mail already keeps open (`getPushClient()`) -
+ * every accessible mailbox's own channel is already subscribed (`useMailLiveUpdates`'s `pushChannelsFor()`, and the event is published to the
+ * mailbox channel as well as the folder's own), so this hook only has to listen, never to manage channels of its own. Lives in the persistent
+ * app frame (`AppShell`), like `useSigningEnrollmentWatcher`, so an alarm shows wherever the user is signed in - Mail, Calendar, Contacts, Settings.
+ *
+ * An alarm is a modal (`CalendarAlarmDialog`), with a bell: not a pop-up that goes by itself, since a meeting missed to a toast that timed out
+ * is the failure an alarm exists to prevent. Alarms that arrive together queue, one dialog at a time. **Snooze** closes it and brings it back -
+ * with the bell again - after exactly `SNOOZE_MS`. A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the alarm itself (the
+ * push event is never replayed), it does not survive the tab closing.
  *
- * Each reminder is a sticky pop-up (`notify()`, kind `"calendar"`) with two actions: **Dismiss** closes it and does nothing else. **Snooze**
- * closes it and shows it again - reusing the same notification id, so it replaces rather than stacks - after `SNOOZE_MS` (five minutes), or
- * sooner if the meeting starts first (`snoozeDelayMs()`). A snooze is this tab's own `setTimeout`, cleared on unmount or sign-out; like the
- * reminder itself (the push event is never replayed), it does not survive the tab closing.
+ * With pop-ups turned off (`getNotificationsEnabled()`) no dialog is shown and nothing is heard: the alarm is only recorded in "Recent notifications".
  */
-export function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): void {
-    useEffect(() => {
-        if (!enabled || !userUid) {
+export function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersOptions): CalendarAlarms {
+    const [queue, setQueue] = useState<CalendarReminderNotice[]>([]);
+    // The queue as of the last render, for the callbacks below to read (a state updater must not start a timer: React may run it twice).
+    const queueRef = useRef(queue);
+    queueRef.current = queue;
+    const timers = useRef(new Set<ReturnType<typeof setTimeout>>());
+
+    const present = useCallback((notice: CalendarReminderNotice) => {
+        if (!getNotificationsEnabled()) {
+            // Off: only the history keeps it.
+            notify({ id: reminderNotificationId(notice.eventUid, notice.startDate), kind: "calendar", title: notice.title, message: reminderMessage(notice.startDate) });
             return;
         }
-        const timers = new Set<ReturnType<typeof setTimeout>>();
+        const id = reminderNotificationId(notice.eventUid, notice.startDate);
+        setQueue((current) => (current.some((queued) => reminderNotificationId(queued.eventUid, queued.startDate) === id) ? current : [...current, notice]));
+        playNotificationSound("calendar");
+    }, []);
 
-        function show(notice: CalendarReminderNotice): void {
-            const joinUrl = joinMeetingUrl(notice.location);
-            notify({
-                id: reminderNotificationId(notice.eventUid, notice.startDate),
-                kind: "calendar",
-                title: notice.title,
-                message: reminderMessage(notice.startDate),
-                // Anyone who can invite you can put any address in an event's location: the button says where it goes.
-                hint: joinUrl ? `Join Meeting opens ${new URL(joinUrl).host}` : undefined,
-                href: CALENDAR_HREF,
-                sticky: true,
-                actions: [
-                    ...(joinUrl
-                        ? [
-                              {
-                                  label: "Join Meeting",
-                                  onClick: () => window.open(joinUrl, "_blank", "noopener,noreferrer"),
-                                  // Joining isn't resolving the reminder - Dismiss/Snooze are still there afterward.
-                                  keepOpen: true,
-                              },
-                          ]
-                        : []),
-                    { label: "Dismiss" },
-                    {
-                        label: "Snooze",
-                        onClick: () => {
-                            const timer = setTimeout(() => {
-                                timers.delete(timer);
-                                show(notice);
-                            }, snoozeDelayMs(notice.startDate));
-                            timers.add(timer);
-                        },
-                    },
-                ],
-            });
+    useEffect(() => {
+        if (!enabled || !userUid) {
+            return;
         }
-
         const offEvent = getPushClient().onEvent((event) => {
             const notice = calendarReminderOf(event);
             if (notice) {
-                show(notice);
+                present(notice);
             }
         });
-
+        const pending = timers.current;
         return () => {
             offEvent();
-            for (const timer of timers) {
+            for (const timer of pending) {
                 clearTimeout(timer);
             }
-            timers.clear();
+            pending.clear();
+            setQueue([]);
         };
-    }, [enabled, userUid]);
+    }, [enabled, userUid, present]);
+
+    const dismiss = useCallback(() => setQueue((current) => current.slice(1)), []);
+    const snooze = useCallback(() => {
+        const first = queueRef.current[0];
+        if (first) {
+            const timer = setTimeout(() => {
+                timers.current.delete(timer);
+                present(first);
+            }, SNOOZE_MS);
+            timers.current.add(timer);
+        }
+        setQueue((current) => current.slice(1));
+    }, [present]);
+
+    return { current: queue[0], waiting: Math.max(0, queue.length - 1), snooze, dismiss };
 }

package/apps/shared/components/calendar/CalendarAlarmDialog.tsx

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Button from "../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import { calendarEventHref, joinMeetingUrl, locationActionLabel, reminderMessage } from "../../calendar/calendarReminders.js";
+import type { CalendarAlarms } from "../../calendar/useCalendarReminders.js";
+import { useNavigate } from "../../navigation/index.js";
+
+export interface CalendarAlarmDialogProps {
+    alarms: CalendarAlarms;
+}
+
+/**
+ * The modal an event's alarm raises (see `useCalendarReminders()`): what is starting and when, where, and three actions. **View** opens the event's card
+ * in the Calendar. **Join** or **Open** - named for what the event's location is, a video meeting or any other web address - opens that address in a new
+ * tab; it is only there when the location is a web address, and says which site it goes to, since anyone who can invite you can put any address in an
+ * event. **Snooze** closes the dialog and brings it back after five minutes. Closing it with the close button or Escape dismisses the alarm.
+ * View and Join/Open also dismiss it: the person has answered it.
+ */
+export default function CalendarAlarmDialog({ alarms }: CalendarAlarmDialogProps) {
+    const navigate = useNavigate();
+    const { current: alarm, waiting, snooze, dismiss } = alarms;
+    if (!alarm) {
+        return null;
+    }
+    const url = joinMeetingUrl(alarm.location);
+    const location = alarm.location?.trim();
+    return (
+        <Modal open onClose={dismiss} title={alarm.title}>
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-1 text-sm">
+                    <p className="font-semibold">{reminderMessage(alarm.startDate)}</p>
+                    {location && <p className="text-text-muted break-words">{location}</p>}
+                    {waiting > 0 && (
+                        <p className="text-xs text-text-muted">
+                            {waiting} more alarm{waiting === 1 ? "" : "s"} after this one
+                        </p>
+                    )}
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto"
+                        onClick={() => {
+                            navigate(calendarEventHref(alarm.eventUid, alarm.startDate));
+                            dismiss();
+                        }}
+                    >
+                        View
+                    </Button>
+                    {url && (
+                        <Button
+                            type="button"
+                            className="!w-auto"
+                            onClick={() => {
+                                window.open(url, "_blank", "noopener,noreferrer");
+                                dismiss();
+                            }}
+                        >
+                            {locationActionLabel(url)}
+                        </Button>
+                    )}
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={snooze}>
+                        Snooze
+                    </Button>
+                </div>
+                {url && <p className="text-xs text-text-muted">{`${locationActionLabel(url)} opens ${new URL(url).host}`}</p>}
+            </div>
+        </Modal>
+    );
+}

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

@@ -12,6 +12,7 @@ import { notifyApiError } from "../../notifications/apiErrors.js";
 
 export type ContactsView =
     | { type: "all" }
+    | { type: "everyone" }
     | { type: "favorites" }
     | { type: "suggested" }
     | { type: "list"; uid: string; name: string }
@@ -94,7 +95,7 @@ function NavItem({
 }
 
 /**
- * Contacts' Outlook-style left sidebar: "Your contacts" (all, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
+ * Contacts' Outlook-style left sidebar: "All contacts" (the mailbox's own and its suggested ones together, when there are suggested ones), "Your contacts" (the mailbox's own, with count), "Favorites", "Suggested contacts" (the people the mailbox has corresponded with, when there are any), "Your contact
  * lists" (real `ContactList` records, fetched here), "Deleted", and "Categories" (derived from the
  * distinct `categories` values across the loaded contacts — no separate category registry exists
  * server-side). Owns its own contact-list data-fetching, per this app's convention of keeping
@@ -166,6 +167,9 @@ export default function ContactsSidebar({ mailboxUid, contacts, active, onSelect
     const navContent = (idPrefix: string) => (
         <>
             <div className="flex flex-col gap-0.5">
+                {suggestedCount !== undefined && (
+                    <NavItem label="All contacts" count={contacts.length + suggestedCount} active={active.type === "everyone"} onClick={() => handleSelect({ type: "everyone" })} />
+                )}
                 <NavItem label="Your contacts" count={contacts.length} active={active.type === "all"} onClick={() => handleSelect({ type: "all" })} />
                 <NavItem label="Favorites" count={favoriteCount} active={active.type === "favorites"} onClick={() => handleSelect({ type: "favorites" })} />
                 {suggestedCount !== undefined && (

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

@@ -104,8 +104,11 @@ export async function loadUpcomingEvents(folders: readonly Folder[], address: st
         .slice(0, CARD_LIST_SIZE);
 }
 
-/** A vCard attachment's text. */
-export async function fetchVCardText(attachmentUid: string): Promise<string> {
+/** A vCard attachment's text - through `client` (its origin and token) when given, else the cookie request it always was. */
+export async function fetchVCardText(attachmentUid: string, client?: ApiClient): Promise<string> {
+    if (client) {
+        return (await client.fetchBlob(`/mail/attachments/${encodeURIComponent(attachmentUid)}/content`)).text();
+    }
     const res = await fetch(attachmentContentUrl(attachmentUid), { credentials: "include" });
     if (!res.ok) {
         throw new ApiRequestError(res.statusText || "Could not load this contact card.", res.status);
@@ -130,7 +133,7 @@ export async function loadParticipantCard(participant: Participant, context: Con
         const isSender = !!context.message && normalizeAddress(context.message.from.address) === normalizeAddress(participant.address);
         let fallback: ParsedVCardContact | undefined;
         for (const attachment of await vCardAttachments(context, client)) {
-            const cards = parseVCards(await fetchVCardText(attachment.uid));
+            const cards = parseVCards(await fetchVCardText(attachment.uid, client));
             const match = cardForAddress(cards, participant.address, false);
             if (match) {
                 return match;

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

@@ -50,6 +50,7 @@ import { MailConnectionContext, useMailConnection } from "../../mail/useMailConn
 import { useUnreadTitle } from "../../mail/useUnreadTitle.js";
 import UnlockBridge from "../../mail/outbox/UnlockBridge.js";
 import NotificationCenter from "../../notifications/NotificationCenter.js";
+import CalendarAlarmDialog from "../calendar/CalendarAlarmDialog.js";
 import { useHeaderHeightRef } from "../../notifications/headerOffset.js";
 import NotificationHistoryDialog from "../../notifications/NotificationHistoryDialog.js";
 import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
@@ -210,8 +211,8 @@ export function AppChrome({
     const mail = useMailConnection({ userUid, enabled: inFrame, open: navigate });
     // A signing certificate the user asked for is announced when it is issued (or fails), on whichever page they are - see the hook.
     useSigningEnrollmentWatcher({ userUid, mailboxes: mail.mailboxes, enabled: inFrame });
-    // A meeting reminder pops up on whichever page they are - see the hook.
-    useCalendarReminders({ userUid, enabled: inFrame });
+    // An event's alarm raises a modal (drawn by `CalendarAlarmDialog`, below) on whichever page they are - see the hook.
+    const calendarAlarms = useCalendarReminders({ userUid, enabled: inFrame });
 
     // A refused refresh means the sign-in has ended: open compose windows save what they hold (the access token still works for a while) and the
     // browser goes to sign-in. Not while viewing as another user - the refresh cookie is the admin's own, and refreshing would end the impersonation.
@@ -459,6 +460,7 @@ export function AppChrome({
                         )}
                         {/* The one pop-up stack for the whole app: right under the header row, so it never covers the account menu. */}
                         <NotificationCenter />
+                        <CalendarAlarmDialog alarms={calendarAlarms} />
                         <div
                             id="app-content"
                             tabIndex={-1}

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

@@ -10,6 +10,7 @@ import {
     HiOutlineArrowUturnLeft,
     HiOutlineBell,
     HiOutlineBellAlert,
+    HiOutlineSpeakerWave,
     HiOutlineClock,
     HiOutlineCog6Tooth,
     HiOutlineCommandLine,
@@ -34,7 +35,12 @@ import {
     requestDesktopPermission,
     setDesktopOfferDismissed,
 } from "../../mail/newMailNotifications.js";
-import { getNotificationsEnabled, setNotificationsEnabled } from "../../notifications/preferences.js";
+import {
+    getNotificationSoundsEnabled,
+    getNotificationsEnabled,
+    setNotificationSoundsEnabled,
+    setNotificationsEnabled,
+} from "../../notifications/preferences.js";
 import { dismissAll } from "../../notifications/store.js";
 
 export interface UserMenuProps {
@@ -134,6 +140,7 @@ export default function UserMenu({
     const menuRef = useRef<HTMLDivElement>(null);
     const [detectedAdmin, setDetectedAdmin] = useState(false);
     const [popups, setPopups] = useState(true);
+    const [sounds, setSounds] = useState(true);
     const [permission, setPermission] = useState<DesktopPermission>("unsupported");
     const [profile, setProfile] = useState<Profile | undefined>(undefined);
     // Whether the profile lookup has answered, with a profile or without: the fallback names are only worth asking for after that.
@@ -230,10 +237,16 @@ export default function UserMenu({
     useEffect(() => {
         if (open && showNotificationSettings) {
             setPopups(getNotificationsEnabled());
+            setSounds(getNotificationSoundsEnabled());
             setPermission(desktopPermission());
         }
     }, [open, showNotificationSettings]);
 
+    function toggleSounds() {
+        setNotificationSoundsEnabled(!sounds);
+        setSounds(!sounds);
+    }
+
     function togglePopups() {
         setNotificationsEnabled(!popups);
         setPopups(!popups);
@@ -386,6 +399,21 @@ export default function UserMenu({
                             <span className="text-xs font-semibold text-text-muted">{popups ? "On" : "Off"}</span>
                         </button>
                     )}
+                    {showNotificationSettings && (
+                        <button
+                            role="menuitemcheckbox"
+                            aria-checked={sounds}
+                            type="button"
+                            onClick={toggleSounds}
+                            className="flex w-full items-center justify-between gap-2 px-3.5 py-2 text-left text-sm text-text hover:bg-surface-alt"
+                        >
+                            <span className="flex items-center gap-2">
+                                <HiOutlineSpeakerWave size={16} aria-hidden="true" className="shrink-0 text-text-muted" />
+                                Notification sounds
+                            </span>
+                            <span className="text-xs font-semibold text-text-muted">{sounds ? "On" : "Off"}</span>
+                        </button>
+                    )}
                     {showNotificationSettings && permission === "default" && (
                         <button
                             role="menuitem"

package/apps/shared/components/mail/MessageDetailPane.tsx

@@ -16,7 +16,7 @@ import {
     HiOutlineNoSymbol,
     HiOutlineSun,
 } from "react-icons/hi2";
-import { ApiRequestError } from "../../../../lib/util/api.js";
+import { ApiRequestError, type ApiClient } from "../../../../lib/util/api.js";
 import {
     Attachment,
     Folder,
@@ -200,6 +200,23 @@ function downloadFromUrl(url: string, filename: string): void {
     a.remove();
 }
 
+/** How long an attachment saved through an explicit client keeps its object URL: the download has started well before this. */
+const DOWNLOAD_URL_LIFETIME_MS = 60_000;
+
+/**
+ * Saves the file at `path` through `client` (its origin and token, which a link's `href` cannot carry): its bytes become an object URL handed to
+ * `downloadFromUrl()`. The URL stays in `urls` until it is revoked - after `DOWNLOAD_URL_LIFETIME_MS`, or when the pane unmounts.
+ */
+async function downloadThroughClient(client: ApiClient, path: string, filename: string, urls: Set<string>): Promise<void> {
+    const url = URL.createObjectURL(await client.fetchBlob(path));
+    urls.add(url);
+    downloadFromUrl(url, filename);
+    setTimeout(() => {
+        urls.delete(url);
+        URL.revokeObjectURL(url);
+    }, DOWNLOAD_URL_LIFETIME_MS);
+}
+
 /** Saves one attachment recovered from inside a signed/encrypted entity. Always handed to the browser as an
  * opaque download (`application/octet-stream`), never rendered in this origin. */
 function downloadMimeAttachment(attachment: MimeAttachment): void {
@@ -529,6 +546,17 @@ function MessageDetailContent({
     const { mailboxes, trackMessageChange } = useMailShell();
     const { requestUnlock } = useUnlockPrompt();
     const client = useApiClient();
+    // Object URLs of attachments saved through `client`, revoked when they have been left to lapse or when this pane unmounts.
+    const downloadUrls = useRef(new Set<string>());
+    useEffect(() => {
+        const urls = downloadUrls.current;
+        return () => {
+            for (const url of urls) {
+                URL.revokeObjectURL(url);
+            }
+            urls.clear();
+        };
+    }, []);
     // Bumped after a successful on-demand unlock to re-run the effect below - it's not a dependency the
     // effect could read reactively otherwise (getUnlockedKeys() is a plain module-level read, not React
     // state; see keySession.ts's own doc comment).
@@ -783,11 +811,23 @@ function MessageDetailContent({
         return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
 
+    /** Saves a listed attachment: through the explicit client when there is one (failures are reported, the file is an object URL), else as the
+     * cookie link always did. */
+    function saveAttachment(attachment: Attachment) {
+        if (client) {
+            downloadThroughClient(client, `/mail/attachments/${encodeURIComponent(attachment.uid)}/content`, attachment.filename, downloadUrls.current).catch(
+                (err) => notifyApiError(err, "Couldn't download this attachment"),
+            );
+            return;
+        }
+        downloadFromUrl(attachmentContentUrl(attachment.uid), attachment.filename);
+    }
+
     /** Starts fetching what Reply/Reply All/Forward will need (the compose window's code, the original's body) as the
      * pointer or keyboard reaches one of their buttons, so the click itself finds it already on its way or here. */
     function prefetchReply() {
         prefetchComposeWindow();
-        prefetchOriginalMessage(message);
+        prefetchOriginalMessage(message, client);
     }
 
     /**
@@ -812,7 +852,7 @@ function MessageDetailContent({
             // Never rejects: loadOriginalMessage() and ownAddresses() don't, and the rest is pure.
             const late = (async (): Promise<ComposeLateInput> => {
                 const [original, own] = await Promise.all([
-                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
+                    loadOriginalMessage(message, security, { recipients: kind === "replyAll" }, client),
                     kind === "forward" ? [] : (knownOwn ?? ownAddresses()),
                 ]);
                 if (kind === "forward") {
@@ -1141,11 +1181,11 @@ function MessageDetailContent({
      * sanitized body - in a frame of its own; see `printMessage.ts`. */
     async function handlePrint() {
         try {
-            const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
+            const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version, undefined, client));
             const older = await olderConversationMessages(message, client).catch(() => []);
             // A few at a time: a long conversation is hundreds of messages, each of them several requests.
             const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) =>
-                printableOlderMessage(other).catch(
+                printableOlderMessage(other, client).catch(
                     (): PrintableMessage => ({
                         subject: other.subject || "(no subject)",
                         headers: printHeaders(other, formatMailAddress(other.from)),
@@ -1643,9 +1683,18 @@ function MessageDetailContent({
                                           <VCardAttachmentChip
                                               label={`${attachment.filename} (${formatBytes(attachment.sizeBytes)})`}
                                               message={message}
-                                              loadText={() => fetchVCardText(attachment.uid)}
-                                              onDownload={() => downloadFromUrl(attachmentContentUrl(attachment.uid), attachment.filename)}
+                                              loadText={() => fetchVCardText(attachment.uid, client)}
+                                              onDownload={() => saveAttachment(attachment)}
                                           />
+                                      ) : client ? (
+                                          // Through the explicit client a link cannot carry the token, so the file is fetched and saved from a button.
+                                          <button
+                                              type="button"
+                                              onClick={() => saveAttachment(attachment)}
+                                              className="text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted hover:text-primary-dark"
+                                          >
+                                              {attachment.filename} ({formatBytes(attachment.sizeBytes)})
+                                          </button>
                                       ) : (
                                           <a
                                               href={attachmentContentUrl(attachment.uid)}