@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/mail/folderTree.ts

@@ -1,143 +1,143 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import type { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
-import type { MailboxFolders } from "../components/mail/layout/MailShell.js";
-
-/**
- * The sidebar's order of a mailbox's well-known folders; anything else (`user`) follows, alphabetically. Also the order push channels are asked
- * for (`pushChannelsFor()`), so when the server's channel cap bites it is the folders lowest in this list that go without live updates.
- */
-export const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "deleted_items", "junk", "archive"];
-
-/**
- * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see `CalendarShell`/`ContactsShell`/`TasksShell`), not
- * Mail - `listFolders()` returns every well-known folder for the mailbox regardless of which app owns it, so Mail's own folder tree filters down
- * to just the mail ones itself, or those other apps' folders leak into its sidebar.
- */
-export const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
-
-/** The well-known folders the server creates lazily around a first send: what the sidebar shows a placeholder for while a message is on its way. */
-export const SEND_FOLDER_TYPES = ["outbox", "sent_items"] as const;
-
-export function isMailFolder(folder: { type: string }): boolean {
-    return MAIL_FOLDER_TYPES.has(folder.type);
-}
-
-function sortKey(type: string): number {
-    const index = FOLDER_ORDER.indexOf(type);
-    return index === -1 ? FOLDER_ORDER.length : index;
-}
-
-/** Well-known folders in `FOLDER_ORDER`, then the rest by name. A new array; the input is left alone. */
-export function sortFolders(folders: Folder[]): Folder[] {
-    return [...folders].sort((a, b) => sortKey(a.type) - sortKey(b.type) || a.name.localeCompare(b.name));
-}
-
-/** What a sidebar row is: a folder that exists, or (`placeholder`) one that is expected to but has not arrived yet. */
-export type FolderRow = { kind: "folder"; folder: Folder } | { kind: "placeholder"; type: string };
-
-/**
- * The rows of one mailbox's sidebar section, in order: every folder that exists, and - while `sending` messages are on their way and the
- * server has not made the folder yet - a placeholder for each of the Outbox and Sent Items that is missing. The one place a folder that has not
- * arrived is drawn, so it can never appear twice: the moment the real folder is in `folders` its placeholder is not built.
- */
-export function folderRows(folders: Folder[], sending: number): FolderRow[] {
-    const rows: FolderRow[] = sortFolders(folders).map((folder) => ({ kind: "folder", folder }));
-    if (sending > 0) {
-        for (const type of SEND_FOLDER_TYPES) {
-            if (!folders.some((folder) => folder.type === type)) {
-                rows.push({ kind: "placeholder", type });
-            }
-        }
-        rows.sort((a, b) => sortKey(rowType(a)) - sortKey(rowType(b)));
-    }
-    return rows;
-}
-
-function rowType(row: FolderRow): string {
-    return row.kind === "folder" ? row.folder.type : row.type;
-}
-
-/** What a folder can be changed to by an event or a refetch: everything about it except the counts, which the counts overlay owns. */
-export type FolderChange = Partial<Pick<Folder, "name" | "type" | "parentFolderUid" | "color">> & { uid: string; mailboxUid?: string };
-
-const CHANGEABLE = ["name", "type", "parentFolderUid", "color"] as const;
-
-/**
- * Files `folder` in the tree: added under its mailbox when unknown (a type Mail does not list is ignored), else its name, type, parent and
- * colour brought up to date (a folder that became a type Mail does not list leaves the tree). Returns `entries` itself - the same array - when
- * nothing changed, because everything on screen that depends on the tree starts over when it is a new one.
- */
-export function upsertFolder(entries: MailboxFolders[], folder: Folder | FolderChange): MailboxFolders[] {
-    let changed = false;
-    const next = entries.map((entry) => {
-        const existing = entry.folders.find((f) => f.uid === folder.uid);
-        if (!existing) {
-            // Only a whole folder can be added: an update for one that is not known has nothing to add it with (the refetch it causes will).
-            if (entry.mailbox.uid !== folder.mailboxUid || !isFullFolder(folder) || !isMailFolder(folder)) {
-                return entry;
-            }
-            // A well-known folder is one per mailbox - the server treats the oldest as the real one - so a second of the same type (made by a client that did
-            // not know it existed) is not a second row: the older of the two is the one shown.
-            const sameType = folder.type === "user" ? undefined : entry.folders.find((f) => f.type === folder.type);
-            if (sameType) {
-                if (!isOlder(folder, sameType)) {
-                    return entry;
-                }
-                changed = true;
-                return { ...entry, folders: entry.folders.map((f) => (f === sameType ? folder : f)) };
-            }
-            changed = true;
-            return { ...entry, folders: [...entry.folders, folder] };
-        }
-        const patch: Partial<Folder> = {};
-        for (const key of CHANGEABLE) {
-            if (key in folder && folder[key] !== undefined && folder[key] !== existing[key]) {
-                (patch as Record<string, unknown>)[key] = folder[key];
-            }
-        }
-        if (Object.keys(patch).length === 0) {
-            return entry;
-        }
-        changed = true;
-        const updated = { ...existing, ...patch };
-        return { ...entry, folders: isMailFolder(updated) ? entry.folders.map((f) => (f === existing ? updated : f)) : entry.folders.filter((f) => f !== existing) };
-    });
-    return changed ? next : entries;
-}
-
-function isFullFolder(folder: Folder | FolderChange): folder is Folder {
-    return typeof folder.name === "string" && typeof folder.type === "string";
-}
-
-/** Whether `a` was created before `b`: only when both say when. */
-function isOlder(a: Folder, b: Folder): boolean {
-    // (A folder from the network may lack the date: `Date.parse(undefined)` is NaN, which is "cannot tell".)
-    const first = Date.parse(a.dateCreated);
-    const second = Date.parse(b.dateCreated);
-    return Number.isFinite(first) && Number.isFinite(second) && first < second;
-}
-
-/** Takes a deleted folder out of the tree. The same array when it was not in it. */
-export function removeFolder(entries: MailboxFolders[], folderUid: string): MailboxFolders[] {
-    if (!entries.some((entry) => entry.folders.some((folder) => folder.uid === folderUid))) {
-        return entries;
-    }
-    return entries.map((entry) => (entry.folders.some((folder) => folder.uid === folderUid) ? { ...entry, folders: entry.folders.filter((folder) => folder.uid !== folderUid) } : entry));
-}
-
-/**
- * Brings one mailbox's part of the tree up to date with a listing the server just gave (`listFolders()`): folders it has that the tree lacks
- * are added, changed names and types are taken. Nothing is removed - a listing that began before a folder was created here would take it out
- * again, and deletions arrive as events - and the counts are not touched (see `useFolderCounts()`). The same array when there is nothing to do.
- */
-export function reconcileFolders(entries: MailboxFolders[], listed: Folder[]): MailboxFolders[] {
-    return listed.reduce((tree, folder) => upsertFolder(tree, folder), entries);
-}
-
-/** Every folder uid in the tree. */
-export function knownFolderUids(entries: MailboxFolders[]): Set<string> {
-    return new Set(entries.flatMap((entry) => entry.folders.map((folder) => folder.uid)));
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailboxFolders } from "../components/mail/layout/MailShell.js";
+
+/**
+ * The sidebar's order of a mailbox's well-known folders; anything else (`user`) follows, alphabetically. Also the order push channels are asked
+ * for (`pushChannelsFor()`), so when the server's channel cap bites it is the folders lowest in this list that go without live updates.
+ */
+export const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "deleted_items", "junk", "archive"];
+
+/**
+ * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see `CalendarShell`/`ContactsShell`/`TasksShell`), not
+ * Mail - `listFolders()` returns every well-known folder for the mailbox regardless of which app owns it, so Mail's own folder tree filters down
+ * to just the mail ones itself, or those other apps' folders leak into its sidebar.
+ */
+export const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
+
+/** The well-known folders the server creates lazily around a first send: what the sidebar shows a placeholder for while a message is on its way. */
+export const SEND_FOLDER_TYPES = ["outbox", "sent_items"] as const;
+
+export function isMailFolder(folder: { type: string }): boolean {
+    return MAIL_FOLDER_TYPES.has(folder.type);
+}
+
+function sortKey(type: string): number {
+    const index = FOLDER_ORDER.indexOf(type);
+    return index === -1 ? FOLDER_ORDER.length : index;
+}
+
+/** Well-known folders in `FOLDER_ORDER`, then the rest by name. A new array; the input is left alone. */
+export function sortFolders(folders: Folder[]): Folder[] {
+    return [...folders].sort((a, b) => sortKey(a.type) - sortKey(b.type) || a.name.localeCompare(b.name));
+}
+
+/** What a sidebar row is: a folder that exists, or (`placeholder`) one that is expected to but has not arrived yet. */
+export type FolderRow = { kind: "folder"; folder: Folder } | { kind: "placeholder"; type: string };
+
+/**
+ * The rows of one mailbox's sidebar section, in order: every folder that exists, and - while `sending` messages are on their way and the
+ * server has not made the folder yet - a placeholder for each of the Outbox and Sent Items that is missing. The one place a folder that has not
+ * arrived is drawn, so it can never appear twice: the moment the real folder is in `folders` its placeholder is not built.
+ */
+export function folderRows(folders: Folder[], sending: number): FolderRow[] {
+    const rows: FolderRow[] = sortFolders(folders).map((folder) => ({ kind: "folder", folder }));
+    if (sending > 0) {
+        for (const type of SEND_FOLDER_TYPES) {
+            if (!folders.some((folder) => folder.type === type)) {
+                rows.push({ kind: "placeholder", type });
+            }
+        }
+        rows.sort((a, b) => sortKey(rowType(a)) - sortKey(rowType(b)));
+    }
+    return rows;
+}
+
+function rowType(row: FolderRow): string {
+    return row.kind === "folder" ? row.folder.type : row.type;
+}
+
+/** What a folder can be changed to by an event or a refetch: everything about it except the counts, which the counts overlay owns. */
+export type FolderChange = Partial<Pick<Folder, "name" | "type" | "parentFolderUid" | "color">> & { uid: string; mailboxUid?: string };
+
+const CHANGEABLE = ["name", "type", "parentFolderUid", "color"] as const;
+
+/**
+ * Files `folder` in the tree: added under its mailbox when unknown (a type Mail does not list is ignored), else its name, type, parent and
+ * colour brought up to date (a folder that became a type Mail does not list leaves the tree). Returns `entries` itself - the same array - when
+ * nothing changed, because everything on screen that depends on the tree starts over when it is a new one.
+ */
+export function upsertFolder(entries: MailboxFolders[], folder: Folder | FolderChange): MailboxFolders[] {
+    let changed = false;
+    const next = entries.map((entry) => {
+        const existing = entry.folders.find((f) => f.uid === folder.uid);
+        if (!existing) {
+            // Only a whole folder can be added: an update for one that is not known has nothing to add it with (the refetch it causes will).
+            if (entry.mailbox.uid !== folder.mailboxUid || !isFullFolder(folder) || !isMailFolder(folder)) {
+                return entry;
+            }
+            // A well-known folder is one per mailbox - the server treats the oldest as the real one - so a second of the same type (made by a client that did
+            // not know it existed) is not a second row: the older of the two is the one shown.
+            const sameType = folder.type === "user" ? undefined : entry.folders.find((f) => f.type === folder.type);
+            if (sameType) {
+                if (!isOlder(folder, sameType)) {
+                    return entry;
+                }
+                changed = true;
+                return { ...entry, folders: entry.folders.map((f) => (f === sameType ? folder : f)) };
+            }
+            changed = true;
+            return { ...entry, folders: [...entry.folders, folder] };
+        }
+        const patch: Partial<Folder> = {};
+        for (const key of CHANGEABLE) {
+            if (key in folder && folder[key] !== undefined && folder[key] !== existing[key]) {
+                (patch as Record<string, unknown>)[key] = folder[key];
+            }
+        }
+        if (Object.keys(patch).length === 0) {
+            return entry;
+        }
+        changed = true;
+        const updated = { ...existing, ...patch };
+        return { ...entry, folders: isMailFolder(updated) ? entry.folders.map((f) => (f === existing ? updated : f)) : entry.folders.filter((f) => f !== existing) };
+    });
+    return changed ? next : entries;
+}
+
+function isFullFolder(folder: Folder | FolderChange): folder is Folder {
+    return typeof folder.name === "string" && typeof folder.type === "string";
+}
+
+/** Whether `a` was created before `b`: only when both say when. */
+function isOlder(a: Folder, b: Folder): boolean {
+    // (A folder from the network may lack the date: `Date.parse(undefined)` is NaN, which is "cannot tell".)
+    const first = Date.parse(a.dateCreated);
+    const second = Date.parse(b.dateCreated);
+    return Number.isFinite(first) && Number.isFinite(second) && first < second;
+}
+
+/** Takes a deleted folder out of the tree. The same array when it was not in it. */
+export function removeFolder(entries: MailboxFolders[], folderUid: string): MailboxFolders[] {
+    if (!entries.some((entry) => entry.folders.some((folder) => folder.uid === folderUid))) {
+        return entries;
+    }
+    return entries.map((entry) => (entry.folders.some((folder) => folder.uid === folderUid) ? { ...entry, folders: entry.folders.filter((folder) => folder.uid !== folderUid) } : entry));
+}
+
+/**
+ * Brings one mailbox's part of the tree up to date with a listing the server just gave (`listFolders()`): folders it has that the tree lacks
+ * are added, changed names and types are taken. Nothing is removed - a listing that began before a folder was created here would take it out
+ * again, and deletions arrive as events - and the counts are not touched (see `useFolderCounts()`). The same array when there is nothing to do.
+ */
+export function reconcileFolders(entries: MailboxFolders[], listed: Folder[]): MailboxFolders[] {
+    return listed.reduce((tree, folder) => upsertFolder(tree, folder), entries);
+}
+
+/** Every folder uid in the tree. */
+export function knownFolderUids(entries: MailboxFolders[]): Set<string> {
+    return new Set(entries.flatMap((entry) => entry.folders.map((folder) => folder.uid)));
+}

package/apps/shared/mail/listAllPages.ts

@@ -1,39 +1,39 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/** Page size the list pages (Contacts, Tasks) request per call - restapi caps `limit` at 500. */
-export const LIST_PAGE_SIZE = 500;
-
-/** Safety cap on pages fetched - stops a server that ignores `page` (and keeps returning a full first
- * page) from looping forever. 40 pages x 500 = 20,000 items. */
-export const MAX_LIST_PAGES = 40;
-
-export interface ListAllPagesResult<T> {
-    items: T[];
-    /** `true` when fetching stopped at `maxPages` with the last page still full - there may be more items
-     * the caller isn't showing, so it should say so rather than presenting `items` as the whole list. */
-    truncated: boolean;
-}
-
-/**
- * Fetches every page of a zero-based `limit`/`page` list endpoint, stopping at the first short page
- * (fewer than `pageSize` items) - so a folder with more items than one page holds is shown in full
- * rather than silently cut off at the first page. Stops at `maxPages` regardless, reporting `truncated`.
- */
-export async function listAllPages<T>(
-    fetchPage: (page: number) => Promise<T[]>,
-    pageSize: number = LIST_PAGE_SIZE,
-    maxPages: number = MAX_LIST_PAGES,
-): Promise<ListAllPagesResult<T>> {
-    const items: T[] = [];
-    for (let page = 0; page < maxPages; page++) {
-        const batch = await fetchPage(page);
-        items.push(...batch);
-        if (batch.length < pageSize) {
-            return { items, truncated: false };
-        }
-    }
-    return { items, truncated: true };
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** Page size the list pages (Contacts, Tasks) request per call - restapi caps `limit` at 500. */
+export const LIST_PAGE_SIZE = 500;
+
+/** Safety cap on pages fetched - stops a server that ignores `page` (and keeps returning a full first
+ * page) from looping forever. 40 pages x 500 = 20,000 items. */
+export const MAX_LIST_PAGES = 40;
+
+export interface ListAllPagesResult<T> {
+    items: T[];
+    /** `true` when fetching stopped at `maxPages` with the last page still full - there may be more items
+     * the caller isn't showing, so it should say so rather than presenting `items` as the whole list. */
+    truncated: boolean;
+}
+
+/**
+ * Fetches every page of a zero-based `limit`/`page` list endpoint, stopping at the first short page
+ * (fewer than `pageSize` items) - so a folder with more items than one page holds is shown in full
+ * rather than silently cut off at the first page. Stops at `maxPages` regardless, reporting `truncated`.
+ */
+export async function listAllPages<T>(
+    fetchPage: (page: number) => Promise<T[]>,
+    pageSize: number = LIST_PAGE_SIZE,
+    maxPages: number = MAX_LIST_PAGES,
+): Promise<ListAllPagesResult<T>> {
+    const items: T[] = [];
+    for (let page = 0; page < maxPages; page++) {
+        const batch = await fetchPage(page);
+        items.push(...batch);
+        if (batch.length < pageSize) {
+            return { items, truncated: false };
+        }
+    }
+    return { items, truncated: true };
+}

package/apps/shared/mail/newMailNotifications.ts

@@ -6,17 +6,14 @@ import type { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailAp
 import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
 
 /**
- * What decides whether a new message is announced, what the announcement says, and the two settings behind it (both per
- * browser, in `localStorage`): whether new-mail pop-ups are on at all, and what the user told the "turn on desktop
- * notifications" offer.
+ * What decides whether a new message is announced, what the announcement says, and the setting behind it (per browser, in
+ * `localStorage`): what the user told the "turn on desktop notifications" offer. Whether pop-ups are on at all is the
+ * notifications switch (`notifications/preferences.ts`).
  *
  * The announcement is built only from what the push event carries - the whole `Message`, including `bodyPreview` - and only
  * ever as text: React escapes it on screen and the Notifications API takes plain strings, so nothing here is HTML.
  */
 
-/** `localStorage` key of the pop-ups switch. Absent means on; `"off"` means the user turned them off. */
-export const NEW_MAIL_POPUPS_KEY = "rapidmx-new-mail-popups";
-
 /** `localStorage` key of the answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
 export const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
 
@@ -49,15 +46,6 @@ function writeStorage(key: string, value: string | null): void {
     }
 }
 
-/** Whether new-mail pop-ups are on (the default). */
-export function getNewMailPopupsEnabled(): boolean {
-    return readStorage(NEW_MAIL_POPUPS_KEY) !== "off";
-}
-
-export function setNewMailPopupsEnabled(enabled: boolean): void {
-    writeStorage(NEW_MAIL_POPUPS_KEY, enabled ? null : "off");
-}
-
 /** Whether the "turn on desktop notifications" offer has been put away with "Not now" (or answered). */
 export function getDesktopOfferDismissed(): boolean {
     return readStorage(DESKTOP_OFFER_KEY) !== null;

package/apps/shared/mail/outbox/outgoingReplies.ts

@@ -0,0 +1,192 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useSyncExternalStore } from "react";
+import type { Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MailAddressLike } from "@rapidmx/react-shared/mail/mailAddress.js";
+import type { NotificationAction } from "../../notifications/store.js";
+import type { SendRequest } from "./sendJob.js";
+
+/**
+ * A reply (or forward) this tab has sent, as the open conversation shows it until the server's own copy is in the thread.
+ *
+ * This is a *view* of the background send that is already there, not a second state machine: `startSend()` (`sendJob.ts`) opens an entry, and the
+ * places that already report how a send went close it - the client-side failure (`notifyFailure()`), the server's own outcome (`handleSendEvent()`
+ * in `sendOutcomes.ts`: `send-succeeded`, `send-failed`) and a synchronous send. The Outbox indicator, the pop-ups and this entry therefore agree,
+ * because they are all told by the same code at the same moment.
+ *
+ * Why the message has to be shown from here for a while: a message the server accepted is in Outbox, which has no `conversationId` yet - it is
+ * resolved when the message is relayed and filed in Sent Items (`ScheduledSendJob`), keeping the same `uid`. Until then no fetch of the
+ * conversation can return it, so the thread pane draws it from what was composed.
+ *
+ * `sending` covers everything up to the server's answer (assembling, the request, the queue in Outbox); `failed` is a send that did not go and is
+ * the sender's to resolve (`actions` are the very ones the pop-up offers: Retry, Open draft ...); `sent` is a message the server has relayed and
+ * that is waiting for the thread to be read again to find its Sent Items copy.
+ */
+export type OutgoingState = "sending" | "failed" | "sent";
+
+export interface OutgoingReply {
+    /** The draft's uid - which is also the uid of the message in Outbox and of its Sent Items copy, and so what the real message replaces this by. */
+    uid: string;
+    mailboxUid: string;
+    /** What the message replies to (`Message.inReplyTo` / `references`): how the pane knows which conversation it belongs to. */
+    inReplyTo?: string;
+    references: string[];
+    sender: MailAddressLike;
+    to: MailAddressLike[];
+    cc: MailAddressLike[];
+    bcc: MailAddressLike[];
+    subject: string;
+    /** The composed body, as the editor wrote it. */
+    html: string;
+    startedAt: number;
+    state: OutgoingState;
+    /** `failed`: why. */
+    failure?: string;
+    /** `failed`: what the sender can do about it. */
+    actions: NotificationAction[];
+    /** `sent`: how many times the thread was read without finding the message - see `settleOutgoing()`. */
+    misses: number;
+}
+
+/** The most entries kept; the oldest go first. Every entry is a message this tab sent, so this is generous. */
+const MAX_TRACKED = 25;
+/** A sent message that a read of its conversation has not found this many times is not part of that conversation (the server filed it elsewhere). */
+export const MAX_SETTLE_MISSES = 2;
+
+const NO_REPLIES: readonly OutgoingReply[] = [];
+let replies: OutgoingReply[] = [];
+let snapshot: readonly OutgoingReply[] = replies;
+const listeners = new Set<() => void>();
+
+function commit(next: OutgoingReply[]): void {
+    replies = next;
+    snapshot = next;
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}
+
+function update(uid: string, patch: Partial<OutgoingReply>): void {
+    if (replies.some((reply) => reply.uid === uid)) {
+        commit(replies.map((reply) => (reply.uid === uid ? { ...reply, ...patch } : reply)));
+    }
+}
+
+/**
+ * Starts showing `request`'s message in the conversation it replies to - or does nothing for a message that replies to nothing (a new message
+ * starts a conversation of its own, it is never part of an open one) and for a send-later message (it is not sent yet). Called again for the same
+ * message - a Retry - it starts over as `sending`.
+ *
+ * The thread is `request.threading` (the compose session's), else what the draft itself records: a draft opened again from "Open draft" is a
+ * session with no threading of its own, but the server kept it on the message.
+ */
+export function trackOutgoing(request: SendRequest): void {
+    const source = request.threading ?? request.draft;
+    const references = source.references ?? [];
+    if (request.scheduledSendTime || (!source.inReplyTo && references.length === 0)) {
+        return;
+    }
+    const { mailbox } = request;
+    const reply: OutgoingReply = {
+        uid: request.draft.uid,
+        mailboxUid: request.mailboxUid,
+        inReplyTo: source.inReplyTo,
+        references,
+        // The mailbox is only unknown when the window's own load of it had not succeeded: "Me" is what a sender is called then.
+        sender: mailbox ? { address: mailbox.primarySmtpAddress, displayName: mailbox.displayName } : { address: "Me" },
+        to: request.to,
+        cc: request.cc,
+        bcc: request.bcc,
+        subject: request.subject,
+        html: request.html,
+        startedAt: Date.now(),
+        state: "sending",
+        actions: [],
+        misses: 0,
+    };
+    commit([...replies.filter((existing) => existing.uid !== reply.uid), reply].slice(-MAX_TRACKED));
+}
+
+/** The send did not go: `failure` is why, `actions` what can be done (Retry, Open draft ...). */
+export function failOutgoing(uid: string, failure: string, actions: NotificationAction[]): void {
+    update(uid, { state: "failed", failure, actions });
+}
+
+/** A failed send is being tried again. */
+export function markOutgoingSending(uid: string): void {
+    update(uid, { state: "sending", failure: undefined, actions: [] });
+}
+
+/** The server has relayed the message: its Sent Items copy is what the conversation shows next. */
+export function markOutgoingSent(uid: string): void {
+    update(uid, { state: "sent" });
+}
+
+/** Stops showing a message - it went back to Drafts to be edited. */
+export function forgetOutgoing(uid: string): void {
+    if (replies.some((reply) => reply.uid === uid)) {
+        commit(replies.filter((reply) => reply.uid !== uid));
+    }
+}
+
+/** Whether `reply` continues the conversation `messages` are: it answers one of them, or its `References` chain runs through one. */
+export function belongsToThread(reply: OutgoingReply, messages: readonly Pick<Message, "messageId">[]): boolean {
+    return messages.some((message) => !!message.messageId && (message.messageId === reply.inReplyTo || reply.references.includes(message.messageId)));
+}
+
+/** The uids of the messages sent from here whose real copy is in `messages`, the thread as it was just read. */
+export function adoptedOutgoing(mailboxUid: string, messages: readonly Message[]): string[] {
+    return replies.filter((reply) => reply.mailboxUid === mailboxUid && messages.some((message) => message.uid === reply.uid)).map((reply) => reply.uid);
+}
+
+/**
+ * Called with a mailbox's conversation as it was just read, `messages` being the whole thread: forgets the messages whose real copy is now in it
+ * (`adoptedOutgoing()`), and gives up on a *sent* message that belongs to this thread but that the read did not find `MAX_SETTLE_MISSES` times in a
+ * row - the server filed it in a conversation of its own, and it is not to be shown here. A message of another conversation is left alone.
+ *
+ * A pane draws the messages it has read *before* it calls this, so that there is never a moment with neither the pending card nor the real one.
+ */
+export function settleOutgoing(mailboxUid: string, messages: readonly Message[]): void {
+    const adopted = new Set(adoptedOutgoing(mailboxUid, messages));
+    const next: OutgoingReply[] = [];
+    let changed = adopted.size > 0;
+    for (const reply of replies) {
+        if (adopted.has(reply.uid)) {
+            continue;
+        }
+        if (reply.mailboxUid === mailboxUid && reply.state === "sent" && belongsToThread(reply, messages)) {
+            changed = true;
+            if (reply.misses + 1 < MAX_SETTLE_MISSES) {
+                next.push({ ...reply, misses: reply.misses + 1 });
+            }
+        } else {
+            next.push(reply);
+        }
+    }
+    if (changed) {
+        commit(next);
+    }
+}
+
+export function getOutgoingReplies(): readonly OutgoingReply[] {
+    return snapshot;
+}
+
+function subscribe(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/** The messages this tab has sent that a conversation may still need to show, oldest first. */
+export function useOutgoingReplies(): readonly OutgoingReply[] {
+    return useSyncExternalStore(subscribe, getOutgoingReplies, () => NO_REPLIES);
+}
+
+/** Forgets everything - for a test. */
+export function resetOutgoingReplies(): void {
+    commit([]);
+}