@rapidmx/web-client 0.12.0 → 0.14.0

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

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useRef, useState } from "react";
+import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attendee,
@@ -10,6 +10,7 @@ import {
     AttendeeResponseStatus,
     AttendeeRole,
     BusyStatus,
+    CalendarEvent,
     CalendarEventInput,
     RecurrenceRule,
     createCalendarEvent,
@@ -17,6 +18,12 @@ import {
     respondToEvent,
     updateCalendarEvent,
 } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import {
+    VideoMeetingInvitee,
+    createVideoMeeting,
+    getVideoMeeting,
+    updateVideoMeeting,
+} from "@rapidmx/react-shared/videoconf/videoMeetingsApi.js";
 import { deleteEventOccurrence, deleteEventSeries, detachOccurrence, saveEventSeries } from "@rapidmx/react-shared/calendar/calendarMutations.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
 import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -28,6 +35,7 @@ import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import RecurrenceEditor from "./RecurrenceEditor.js";
 import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
 import ResourcePicker from "./ResourcePicker.js";
+import { joinMeetingUrl } from "../../calendar/calendarReminders.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";
@@ -44,6 +52,21 @@ const RESPONSE_STATUS_LABEL: Record<AttendeeResponseStatus, string> = {
     tentative: "Tentative",
 };
 
+/**
+ * The Location text this modal writes when it mints a video meeting for an event, and the one value it will
+ * clear again when video conferencing is turned back off (see `applyVideoConferencing()`).
+ *
+ * Deliberately generic and identical for everyone: each attendee's own personal join link is substituted into
+ * their own copy of the invitation server-side (`@rapidmx/restapi`'s `MeetingSchedulingJob`), so no link -
+ * personal or otherwise - may be stored on the shared event itself, where every attendee would read the same
+ * one.
+ */
+export const VIDEO_LOCATION_PLACEHOLDER = "Video call — link in this invitation";
+
+/** The plugin's own title bound (`BaseVideoMeetingRoute`'s `MAX_TITLE_LENGTH`) - a longer title is a 400, so
+ * an over-long event title is trimmed to fit rather than failing the whole meeting. */
+const MAX_MEETING_TITLE_LENGTH = 200;
+
 export interface EventModalProps {
     open: boolean;
     onClose: () => void;
@@ -211,6 +234,17 @@ export default function EventModal({
     const [autoReplyEnabled, setAutoReplyEnabled] = useState(occurrence?.autoReplyEnabled ?? false);
     const [autoReplyMessage, setAutoReplyMessage] = useState(occurrence?.autoReplyMessage ?? "");
     const [editScope, setEditScope] = useState<EditScope>("occurrence");
+    // Video conferencing: the toggle, the meeting this event is linked to (if any), the organizer's own join
+    // link for it, and whatever went wrong with the last attempt to mint/cancel one.
+    const [videoEnabled, setVideoEnabled] = useState(!!occurrence?.videoMeetingUid);
+    const [videoMeetingUid, setVideoMeetingUid] = useState<string | undefined>(occurrence?.videoMeetingUid);
+    // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
+    const [organizerJoinUrl, setOrganizerJoinUrl] = useState<string | null | undefined>(undefined);
+    const [videoError, setVideoError] = useState<string | null>(null);
+    // The event as this modal last persisted it. Set only when a save got the event stored but could not
+    // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
+    // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
+    const [savedEvent, setSavedEvent] = useState<CalendarEvent | null>(null);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -220,6 +254,31 @@ export default function EventModal({
     const [resourcePickerOpen, setResourcePickerOpen] = useState(false);
     const addResourceButtonRef = useRef<HTMLButtonElement>(null);
 
+    // An event that already carried a meeting when it was opened (e.g. after a page reload) knows only that
+    // meeting's uid - the organizer's own join link lives on the meeting, so it is fetched once here. A
+    // meeting minted in this session already has its link from the create call (see
+    // `applyVideoConferencing()`), which is why this deliberately reads the *prop*, not the state: it must
+    // not re-fetch what was just handed to us. A failure and a meeting with no link at all are the same
+    // thing to this UI - there is nothing to open either way - so both settle on `null`.
+    useEffect(() => {
+        const uid = occurrence?.videoMeetingUid;
+        if (!uid) {
+            return;
+        }
+        let cancelled = false;
+        void getVideoMeeting(uid)
+            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .catch(() => null)
+            .then((url) => {
+                if (!cancelled) {
+                    setOrganizerJoinUrl(url);
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [occurrence?.videoMeetingUid]);
+
     // The viewing mailbox can respond to an *existing* event it's invited to but doesn't organize —
     // `organizerAddress` (plus the aliases) are this mailbox's own addresses (see `EventModalProps`), so
     // finding one among `attendees` (and not as that attendee's own organizer flag) identifies exactly
@@ -245,9 +304,110 @@ export default function EventModal({
         setResourcePickerOpen(false);
     }
 
+    /**
+     * Brings the event's video meeting in line with the toggle, once the event itself is saved (so the
+     * attendee list a new meeting's invitees are built from is the one that was just stored).
+     *
+     * Turning it **on** mints a meeting for the saved event's attendees - every one of them except the
+     * organizer, who reaches their own meeting through ownership (`organizerJoinUrl`), not as a guest - and
+     * then patches the event with the meeting's uid and the generic `VIDEO_LOCATION_PLACEHOLDER` location.
+     * No join link is written onto the event: each attendee's own link is substituted into their own copy of
+     * the invitation server-side.
+     *
+     * Turning it **off** cancels the meeting and clears the link, restoring Location to `""` only when it
+     * still holds exactly the placeholder this modal wrote - anything the user has typed there since is
+     * theirs and is preserved.
+     *
+     * **Known, deliberate limitation:** an event that already has a meeting is left completely alone, even
+     * when its attendee list has just changed. `@rapidmx/meet-plugin`'s `PUT /mail/video-meetings/:id`
+     * is deliberately minimal (title and cancellation only) and cannot add or remove invitees, and a private
+     * meeting's personal join links are minted once at creation - so there is no way to reconcile an invitee
+     * list, and silently pretending otherwise would leave a new attendee with no link and a removed one with
+     * a working one. The helper text under the checkbox says so, and turning the toggle off and on again
+     * reissues links for the current attendee list.
+     *
+     * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
+     * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
+     */
+    async function applyVideoConferencing(saved: CalendarEvent): Promise<{ event: CalendarEvent; failed: boolean }> {
+        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
+        if (videoEnabled === !!videoMeetingUid) {
+            return { event: saved, failed: false };
+        }
+        // Detaching a single occurrence (`detachOccurrence()`, react-shared's `calendarMutations.ts`)
+        // deliberately never copies the series' `videoMeetingUid` onto the new standalone event - that
+        // shared meeting belongs to the series, not to the one occurrence being split off, and every other
+        // occurrence still needs it live. But this component's own `videoMeetingUid` *state* was seeded
+        // from the series' occurrence at mount and is untouched by the detach, so unchecking the toggle
+        // while detaching would otherwise still look like "off, but state says linked" above and fall into
+        // the cancel branch below - cancelling the series' shared meeting for every remaining occurrence,
+        // not just this one. `saved.videoMeetingUid` is the actual just-persisted record, so when the
+        // toggle is off and that record already has no meeting reference (true for every detach, checked or
+        // not - see this function's own doc comment on the still-checked case being a separate, documented
+        // gap), there is nothing of *this* record's to cancel.
+        if (!videoEnabled && !saved.videoMeetingUid) {
+            return { event: saved, failed: false };
+        }
+        try {
+            if (videoEnabled) {
+                const organizerAddressLower = saved.organizer.address.toLowerCase();
+                const invitees: VideoMeetingInvitee[] = attendees
+                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
+                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+                if (invitees.length === 0) {
+                    setVideoError("Add at least one attendee other than yourself to add video conferencing.");
+                    return { event: saved, failed: true };
+                }
+                const result = await createVideoMeeting({
+                    mailboxUid: saved.mailboxUid,
+                    title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                    visibility: "private",
+                    calendarEventUid: saved.uid,
+                    startTime: saved.startDate,
+                    endTime: saved.endDate,
+                    invitees,
+                });
+                const patched = await updateCalendarEvent({
+                    uid: saved.uid,
+                    version: saved.version,
+                    location: VIDEO_LOCATION_PLACEHOLDER,
+                    videoMeetingUid: result.meeting.uid,
+                });
+                setVideoMeetingUid(result.meeting.uid);
+                setOrganizerJoinUrl(result.organizerJoinUrl ?? null);
+                setLocation(VIDEO_LOCATION_PLACEHOLDER);
+                return { event: patched, failed: false };
+            }
+            await updateVideoMeeting(videoMeetingUid!, { status: "cancelled" });
+            const restoredLocation = location.trim() === VIDEO_LOCATION_PLACEHOLDER ? "" : location.trim();
+            // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
+            // leave the placeholder (and the link to the now-cancelled meeting) in place.
+            const patch: EventFields = { location: restoredLocation || null, videoMeetingUid: null };
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) });
+            setVideoMeetingUid(undefined);
+            setOrganizerJoinUrl(undefined);
+            setLocation(restoredLocation);
+            return { event: patched, failed: false };
+        } catch (err) {
+            // `videoMeetingsApi.ts`'s own doc comment: when the plugin isn't installed at all, its routes
+            // simply aren't mounted and every call here fails with a plain 404 - a caller offering video
+            // conferencing optionally must treat that as "not available here," not alarm the reader with
+            // the raw (often server-generated, unhelpful) 404 body text.
+            setVideoError(
+                err instanceof ApiRequestError
+                    ? err.status === 404
+                        ? "Video conferencing is not available on this server."
+                        : err.message
+                    : "Could not update this event's video conferencing.",
+            );
+            return { event: saved, failed: true };
+        }
+    }
+
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
+        setVideoError(null);
 
         if (!title.trim()) {
             setError("A title is required.");
@@ -294,25 +454,42 @@ export default function EventModal({
 
         setSaving(true);
         try {
-            if (!occurrence) {
+            let saved: CalendarEvent;
+            let detachedSyncFailed = false;
+            if (savedEvent) {
+                // A retry after the event was stored but its video meeting couldn't be (see `savedEvent`):
+                // update exactly the record the first attempt left behind, whichever branch below created it.
+                // A series' own exception/detached-occurrence re-pointing already ran on that attempt and has
+                // nothing left to shift - the dates being sent again are the ones it moved everything to.
+                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(fields as Partial<CalendarEventInput>) });
+            } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
-                await createCalendarEvent({
+                saved = await createCalendarEvent({
                     mailboxUid: targetMailboxUid,
                     folderUid: targetFolderUid,
                     ...fields,
                     organizer: { address: effectiveOrganizerAddress, type: "to" },
                 } as CalendarEventInput);
             } else if (editingSingleOccurrence) {
-                await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
+                saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>);
             } else if (occurrence.isRecurringOccurrence) {
-                const saved = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
-                if (saved.detachedOccurrenceSyncFailed) {
-                    // The series itself was saved - say so, and leave closing to the user once they've read it.
-                    setSyncWarning(true);
-                    return;
-                }
+                const series = await saveEventSeries(occurrence, (await toSeriesFields(occurrence, fields)) as Partial<CalendarEventInput>);
+                saved = series;
+                detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
-                await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) });
+            }
+            const video = await applyVideoConferencing(saved);
+            if (video.failed) {
+                // The event itself is saved - keep the modal open on the inline error so the video meeting
+                // can be retried (or the toggle put back) rather than closing over it.
+                setSavedEvent(video.event);
+                return;
+            }
+            if (detachedSyncFailed) {
+                // The series itself was saved - say so, and leave closing to the user once they've read it.
+                setSyncWarning(true);
+                return;
             }
             onSaved();
         } catch (err) {
@@ -384,6 +561,14 @@ export default function EventModal({
         );
     }
 
+    // Same scheme allow-list `calendarReminders.ts#joinMeetingUrl()` already applies to a reminder's own
+    // `location` field - reused here rather than duplicated so a video-conferencing plugin (or a stray
+    // manual edit of `videoMeetingUid`'s otherwise-plugin-owned join link) can't smuggle a `javascript:`/
+    // `file:`/other non-http(s) URL into `window.open()`. `undefined` (still loading) and `null` (fetch
+    // came back with nothing to join) both fail validation the same way as a bad scheme would - the button
+    // stays disabled either way, and the two are told apart below purely from `organizerJoinUrl` itself.
+    const validatedJoinUrl = joinMeetingUrl(organizerJoinUrl);
+
     return (
         <Modal open={open} onClose={onClose} title={occurrence ? "Edit event" : "New event"}>
             <form onSubmit={handleSubmit} className="flex flex-col gap-1">
@@ -433,6 +618,28 @@ export default function EventModal({
                     </p>
                 )}
 
+                {/* Outside the `disabled` fieldset below: joining a call is not editing the event, so it stays
+                    available on an invitation's read-only copy too (where the link, like the meeting itself,
+                    is only reachable by whoever holds access to its mailbox). */}
+                {videoMeetingUid && (
+                    <div className="flex items-center gap-3 mb-3">
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto"
+                            disabled={!validatedJoinUrl}
+                            onClick={() => window.open(validatedJoinUrl!, "_blank", "noopener,noreferrer")}
+                        >
+                            Join video call
+                        </Button>
+                        {!validatedJoinUrl && (
+                            <span className="text-xs text-text-muted">
+                                {organizerJoinUrl === undefined ? "Loading the join link…" : "This meeting’s join link isn’t available."}
+                            </span>
+                        )}
+                    </div>
+                )}
+
                 <fieldset disabled={isInvited} className="flex flex-col gap-1 min-w-0">
 
                 {!occurrence && mailboxOptions && mailboxOptions.length > 1 && (
@@ -478,6 +685,24 @@ export default function EventModal({
                     <input id="event-location" type="text" className={INPUT_CLASS} value={location} onChange={(e) => setLocation(e.target.value)} />
                 </FormField>
 
+                <div className="mb-3">
+                    <label className="flex items-center gap-2 text-sm font-medium">
+                        <input type="checkbox" checked={videoEnabled} onChange={(e) => setVideoEnabled(e.target.checked)} />
+                        Add video conferencing
+                    </label>
+                    {videoEnabled && (
+                        <p className="text-xs text-text-muted mt-1">
+                            Changing attendees after enabling video conferencing won&rsquo;t update meeting invitees &mdash;
+                            turn this off and back on to reissue links to the current attendee list.
+                        </p>
+                    )}
+                    {videoError && (
+                        <p role="alert" className="text-xs text-danger mt-1">
+                            {videoError}
+                        </p>
+                    )}
+                </div>
+
                 <label className="flex items-center gap-2 text-sm font-medium mb-3">
                     <input type="checkbox" checked={allDay} onChange={(e) => handleAllDayChange(e.target.checked)} />
                     All day

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

@@ -48,6 +48,7 @@ import NotificationHistoryDialog from "../../notifications/NotificationHistoryDi
 import { notifySessionExpired, setSignInUrl } from "../../notifications/apiErrors.js";
 import { useUnseenErrorCount } from "../../notifications/useNotifications.js";
 import { useSigningEnrollmentWatcher } from "../../signing/useSigningEnrollmentWatcher.js";
+import { useCalendarReminders } from "../../calendar/useCalendarReminders.js";
 
 /** How long sign-out waits for auth-server's logout before navigating anyway. */
 export const LOGOUT_TIMEOUT_MS = 3_000;
@@ -200,6 +201,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 });
 
     useRedirectIfUnauthenticated(userUid, authServerUrl);
     // Any request this app makes that the server answers with a 401 - the session ended - raises one "Your session expired" pop-up with a

package/apps/shared/components/mail/compose/ComposeWindow.tsx

@@ -126,6 +126,20 @@ function parseAddresses(value: string): ComposeRecipientInput[] {
     return parseRecipientList(value);
 }
 
+/**
+ * Normalizes an address into the key `recipientStatuses`/the in-flight and failure trackers below use -
+ * matching `classifyRecipientTier()`'s own lowercase-domain comparison (`@rapidmx/react-shared`'s
+ * `composeSecurity.ts`), but applied to the whole address rather than just the domain. Without this, the
+ * same mailbox typed with different casing across To/Cc/Bcc (plausible via autocomplete vs. a pasted
+ * signature block) is tracked as two independent recipients: if one lookup lags or fails while the other
+ * succeeds, `decideMessageEncryption()`'s all-or-nothing check sees a spurious unresolved recipient and
+ * denies auto-encryption even though every *real* recipient resolved fine. Only ever used as an internal
+ * cache key - `ComposeRecipientInput.address` itself (what is actually sent as the recipient) is untouched.
+ */
+function addressCacheKey(address: string): string {
+    return address.trim().toLowerCase();
+}
+
 function HeaderButton({
     label,
     onClick,
@@ -411,26 +425,27 @@ export default function ComposeWindow({
         const ownPrefersMutual = mailbox.encryptPreference?.preferEncrypt === "mutual";
         const generation = discoveryGenerationRef.current;
         const inFlight = lookupsInFlightRef.current;
-        const unchecked = addresses.filter((r) => !(r.address in recipientStatuses) && !inFlight.has(r.address));
+        const unchecked = addresses.filter((r) => !(addressCacheKey(r.address) in recipientStatuses) && !inFlight.has(addressCacheKey(r.address)));
         for (const recipient of unchecked) {
-            inFlight.add(recipient.address);
+            const key = addressCacheKey(recipient.address);
+            inFlight.add(key);
             void lookupKeys(mailbox.uid, recipient.address)
                 .then(
                     (lookup) => ({ lookup }),
                     () => null,
                 )
                 .then((result) => {
-                    inFlight.delete(recipient.address);
+                    inFlight.delete(key);
                     if (generation !== discoveryGenerationRef.current) {
                         return;
                     }
                     if (!result) {
-                        noteLookupFailed(recipient.address);
+                        noteLookupFailed(key);
                         return;
                     }
-                    lookupFailuresRef.current.delete(recipient.address);
+                    lookupFailuresRef.current.delete(key);
                     const status = resolveRecipientEncryption(mailbox.primarySmtpAddress, ownPrefersMutual, encryptionPolicy, recipient.address, result.lookup);
-                    setRecipientStatuses((prev) => ({ ...prev, [recipient.address]: status }));
+                    setRecipientStatuses((prev) => ({ ...prev, [key]: status }));
                 });
         }
     }
@@ -1070,7 +1085,7 @@ export default function ComposeWindow({
     // (4) Send encrypts (or is refused, with the override, when it can't) - never silently plaintext. And back: when it stops being encrypted
     // (a recipient removed) autosave simply resumes.
     const currentAddresses = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)].map((r) => r.address);
-    const currentStatuses = currentAddresses.map((address) => recipientStatuses[address]);
+    const currentStatuses = currentAddresses.map((address) => recipientStatuses[addressCacheKey(address)]);
     const hasEncryptionKey = !!unlockedKeys?.encryptionPrivateKey || hasEnrolledEncryptionKey || offeredCryptoRef.current.encrypt;
     const requirement = evaluateEncryptionRequirement({
         encryptRequested,
@@ -1480,8 +1495,22 @@ export default function ComposeWindow({
                 )}
 
                 {(() => {
+                    // De-duplicated by the same normalized key `recipientStatuses` itself is keyed by - two
+                    // fields (or one field twice) naming the same mailbox in different casing now resolve to
+                    // one shared status object (see `addressCacheKey()`'s own doc comment), so without this
+                    // the list below would render - and React would warn about - two `<li key=...>`s sharing
+                    // the exact same key.
+                    const seenKeys = new Set<string>();
                     const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
-                        .map((r) => recipientStatuses[r.address])
+                        .filter((r) => {
+                            const key = addressCacheKey(r.address);
+                            if (seenKeys.has(key)) {
+                                return false;
+                            }
+                            seenKeys.add(key);
+                            return true;
+                        })
+                        .map((r) => recipientStatuses[addressCacheKey(r.address)])
                         .filter((status): status is RecipientEncryptionStatus => !!status);
                     if (knownRecipients.length === 0) {
                         return null;

package/apps/shared/notifications/NotificationCenter.tsx

@@ -5,6 +5,7 @@
 import React, { useEffect } from "react";
 import type { IconType } from "react-icons";
 import {
+    HiOutlineBell,
     HiOutlineCheckCircle,
     HiOutlineEnvelope,
     HiOutlineExclamationCircle,
@@ -19,6 +20,7 @@ import { useSystemErrorNotifications } from "./systemErrors.js";
 
 const KIND_STYLE: Record<NotificationKind, { border: string; icon: string; Icon: IconType; label: string }> = {
     mail: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineEnvelope, label: "New message" },
+    calendar: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineBell, label: "Reminder" },
     info: { border: "border-l-primary", icon: "text-primary-dark", Icon: HiOutlineInformationCircle, label: "Information" },
     success: { border: "border-l-success", icon: "text-success", Icon: HiOutlineCheckCircle, label: "Success" },
     warning: { border: "border-l-warning", icon: "text-warning", Icon: HiOutlineExclamationTriangle, label: "Warning" },

package/apps/shared/notifications/NotificationHistoryDialog.tsx

@@ -10,6 +10,7 @@ import { useNotifications } from "./useNotifications.js";
 
 const KIND_LABEL: Record<NotificationKind, string> = {
     mail: "New message",
+    calendar: "Reminder",
     info: "Information",
     success: "Done",
     warning: "Warning",

package/apps/shared/notifications/store.ts

@@ -26,7 +26,7 @@
  * `notify()` only hands back an id.
  */
 
-export type NotificationKind = "mail" | "info" | "success" | "warning" | "error";
+export type NotificationKind = "mail" | "calendar" | "info" | "success" | "warning" | "error";
 
 export interface NotificationAction {
     label: string;
@@ -119,6 +119,8 @@ export const MAX_DETAIL_LINE_LENGTH = 500;
 /** How long a non-sticky notification stays, by kind. Errors are sticky, so theirs is only for an explicit `sticky: false`. */
 export const DEFAULT_TIMEOUT_MS: Record<NotificationKind, number> = {
     mail: 8_000,
+    // Irrelevant in practice - a reminder always carries actions, which makes it sticky (see `applyInput()`) regardless of this value.
+    calendar: 8_000,
     info: 6_000,
     success: 5_000,
     warning: 10_000,

package/apps/shared/search/localIndexRpcClient.ts

@@ -20,6 +20,11 @@
  *
  * **Failed deletions are retried**: a destroy that couldn't remove a directory (another tab held it, the page
  * navigated away first) is recorded in `localStorage` and retried before this tab's first `init`.
+ *
+ * **A crashed Worker never leaves a caller hanging**: the `error` listener registered in `getWorker()` rejects
+ * every pending request and drops the module-level `worker` reference so the next `call()` spawns a
+ * replacement. `searchTier2.ts` additionally races its own calls against a timeout, since a Worker that's
+ * merely stuck (not crashed) posts no `error` event at all.
  */
 import type { ParsedSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
 import type {
@@ -71,8 +76,12 @@ function getWorker(): Worker {
     if (!worker) {
         // Named by its compiled `.js` file, like every other relative import: tsc copies the literal into
         // `dist` unchanged, where only the `.js` file exists, and Vite maps it back to the `.ts` source.
-        worker = new Worker(new URL("./localIndexWorker.js", import.meta.url), { type: "module" });
-        worker.addEventListener("message", (event: MessageEvent<LocalIndexResponse>) => {
+        // Captured in its own `created` const (not just read back from the module-level `worker` variable)
+        // so the `error` listener below can tell whether it still refers to *this* Worker - see that
+        // listener's own comment for why that guard matters.
+        const created = new Worker(new URL("./localIndexWorker.js", import.meta.url), { type: "module" });
+        worker = created;
+        created.addEventListener("message", (event: MessageEvent<LocalIndexResponse>) => {
             const entry = pending.get(event.data.id);
             if (!entry) {
                 return;
@@ -84,6 +93,28 @@ function getWorker(): Worker {
                 entry.reject(new Error(event.data.error));
             }
         });
+        // A Worker that crashes (an uncaught exception, the WASM module aborting) never posts a response to
+        // its in-flight requests - without this, every pending call() promise would sit unresolved forever,
+        // and searchTier2.ts's try/catch (which can only catch a *rejection*) couldn't rescue it. Reject
+        // everything outstanding and drop the reference so the next call() spawns a fresh Worker instead of
+        // continuing to postMessage into a dead one.
+        //
+        // Scoped to `created`, this listener's own Worker, via the `worker !== created` check below - not
+        // scoped, a very unlikely double-error (this same Worker firing a second `error` event after the
+        // first already replaced `worker` with a healthy new instance) would reject that new instance's own
+        // in-flight requests and terminate it too, for no reason of its own.
+        created.addEventListener("error", (event: ErrorEvent) => {
+            if (worker !== created) {
+                return;
+            }
+            const err = new Error(`Local search Worker crashed: ${event.message || "unknown error"}`);
+            for (const entry of pending.values()) {
+                entry.reject(err);
+            }
+            pending.clear();
+            created.terminate();
+            worker = undefined;
+        });
         // Only a tab with a Worker has connections to close when another tab signs out.
         listenForSignOut();
     }

package/apps/shared/search/searchTier2.ts

@@ -44,36 +44,54 @@ async function ensureInitialized(mailboxUid: string, unlocked: UnlockedKeys): Pr
     await initLocalIndex({ mailboxUid, indexKey });
 }
 
+/** How long a Tier 2 search may run before this function gives up on it and degrades to "no local results" -
+ * `localIndexRpcClient.ts`'s own `error` listener rescues a Worker that *crashes*, but a Worker that's merely
+ * wedged (an infinite loop in the WASM module, a stuck OPFS lock) posts no `error` event and no response
+ * either; without this, the caller's `Promise.all()` (`apps/www/index.tsx`) would wait on this tier forever
+ * even though Tier 1's results already arrived. */
+export const TIER2_SEARCH_TIMEOUT_MS = 5_000;
+
 export async function searchLocalIndex(
     mailboxUid: string,
     parsed: ParsedSearchQuery,
     unlocked: UnlockedKeys | undefined,
     limit = 50,
     offset = 0,
+    timeoutMs = TIER2_SEARCH_TIMEOUT_MS,
 ): Promise<Tier2SearchOutcome> {
     if (!unlocked) {
         return { results: [], hasMore: false };
     }
+    let timer: ReturnType<typeof setTimeout> | undefined;
     try {
-        await ensureInitialized(mailboxUid, unlocked);
-        const [page, coverage] = await Promise.all([searchLocal(mailboxUid, parsed, limit, offset), getLocalCoverage(mailboxUid)]);
-        const results: SearchResult[] = page.hits.map((hit) => ({
-            entityType: "message",
-            entityUid: hit.entityUid,
-            // Negated: bm25()'s own convention is "more negative is a better match" (SQLite), the
-            // opposite of every other score this codebase merges (Postgres ts_rank, OpenSearch _score,
-            // and normalizeServerScores() itself all treat "higher is better"). Negating here, once,
-            // keeps that convention uniform for the caller (apps/www/index.tsx's merge layer) - it never
-            // needs to know this tier's underlying scoring function works backwards from the others.
-            score: -hit.score,
-            snippet: hit.snippet,
-            source: "local",
-            metadataOnly: false,
-        }));
-        return { results, coverage, hasMore: page.hasMore };
+        return await Promise.race([
+            (async (): Promise<Tier2SearchOutcome> => {
+                await ensureInitialized(mailboxUid, unlocked);
+                const [page, coverage] = await Promise.all([searchLocal(mailboxUid, parsed, limit, offset), getLocalCoverage(mailboxUid)]);
+                const results: SearchResult[] = page.hits.map((hit) => ({
+                    entityType: "message",
+                    entityUid: hit.entityUid,
+                    // Negated: bm25()'s own convention is "more negative is a better match" (SQLite), the
+                    // opposite of every other score this codebase merges (Postgres ts_rank, OpenSearch _score,
+                    // and normalizeServerScores() itself all treat "higher is better"). Negating here, once,
+                    // keeps that convention uniform for the caller (apps/www/index.tsx's merge layer) - it never
+                    // needs to know this tier's underlying scoring function works backwards from the others.
+                    score: -hit.score,
+                    snippet: hit.snippet,
+                    source: "local",
+                    metadataOnly: false,
+                }));
+                return { results, coverage, hasMore: page.hasMore };
+            })(),
+            new Promise<Tier2SearchOutcome>((resolve) => {
+                timer = setTimeout(() => resolve({ results: [], hasMore: false }), timeoutMs);
+            }),
+        ]);
     } catch {
         // See this function's own doc comment - a broken local index degrades to "nothing to contribute
         // this time," never a rejected search.
         return { results: [], hasMore: false };
+    } finally {
+        clearTimeout(timer);
     }
 }