@rapidmx/web-client 0.15.1 → 0.16.0

package/apps/shared/mail/newMailNotifications.ts

@@ -1,171 +1,171 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import type { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
-import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
-
-/**
- * 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 answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
-export const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
-
-/** How much of the body an announcement quotes. */
-export const PREVIEW_MAX_LENGTH = 140;
-
-/** A message received longer ago than this is not "new": mail imported or migrated in bulk arrives as `create` events too. */
-export const MAX_NEW_AGE_MS = 6 * 60 * 60 * 1000;
-
-/** The subject the server stores for an encrypted message (the real one is inside the ciphertext). */
-const ENCRYPTED_SUBJECT_PLACEHOLDER = "[...]";
-
-function readStorage(key: string): string | null {
-    try {
-        return localStorage.getItem(key);
-    } catch {
-        return null;
-    }
-}
-
-function writeStorage(key: string, value: string | null): void {
-    try {
-        if (value === null) {
-            localStorage.removeItem(key);
-        } else {
-            localStorage.setItem(key, value);
-        }
-    } catch {
-        // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
-    }
-}
-
-/** 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;
-}
-
-export function setDesktopOfferDismissed(dismissed: boolean): void {
-    writeStorage(DESKTOP_OFFER_KEY, dismissed ? "later" : null);
-}
-
-/** The browser's notification permission, or `"unsupported"` where there is no Notifications API. */
-export type DesktopPermission = NotificationPermission | "unsupported";
-
-export function desktopPermission(): DesktopPermission {
-    return typeof Notification === "undefined" ? "unsupported" : Notification.permission;
-}
-
-/** Asks the browser for permission - call it from a click. Resolves the answer; never rejects. */
-export async function requestDesktopPermission(): Promise<DesktopPermission> {
-    if (typeof Notification === "undefined") {
-        return "unsupported";
-    }
-    try {
-        return await Notification.requestPermission();
-    } catch {
-        return desktopPermission();
-    }
-}
-
-/** What an announcement shows. */
-export interface NewMailNotice {
-    /** The message's uid: the announcement's identity (and the desktop notification's `tag`). */
-    uid: string;
-    mailboxUid: string;
-    folderUid: string;
-    /** The sender's display name, `""` when there is none. */
-    senderName: string;
-    /** The sender's address - always shown, so a name can't stand in for who really sent it. */
-    senderAddress: string;
-    subject: string;
-    /** About `PREVIEW_MAX_LENGTH` characters of the body as plain text; `Encrypted message` for an encrypted one. */
-    preview: string;
-    /** Where opening it goes. */
-    href: string;
-}
-
-/** Control characters, and the invisible or bidirectional-override characters that can make text read as something else, as code point ranges. */
-const UNWANTED_RANGES: [number, number][] = [
-    [0x0000, 0x001f],
-    [0x007f, 0x009f],
-    [0x200b, 0x200f],
-    [0x2028, 0x202e],
-    [0x2060, 0x2064],
-    [0x2066, 0x2069],
-    [0xfeff, 0xfeff],
-];
-const hex = (code: number) => "\\u" + code.toString(16).padStart(4, "0");
-const UNWANTED = new RegExp("[" + UNWANTED_RANGES.map(([from, to]) => hex(from) + "-" + hex(to)).join("") + "]+", "g");
-
-/** `text` with those characters replaced by spaces, whitespace folded, and cut to `max` characters (with an ellipsis). */
-export function cleanPreview(text: string, max: number = PREVIEW_MAX_LENGTH): string {
-    const cleaned = text.replace(UNWANTED, " ").replace(/\s+/g, " ").trim();
-    return cleaned.length > max ? cleaned.slice(0, max - 1).trimEnd() + String.fromCharCode(0x2026) : cleaned;
-}
-
-/** The text of an announcement of `message`. */
-export function noticeFor(message: Message): NewMailNotice {
-    const { name, address } = splitMailAddress(message.from);
-    const encrypted = message.encrypted === true;
-    const rawSubject = cleanPreview(message.subject ?? "", 200);
-    const subject =
-        !rawSubject || rawSubject === ENCRYPTED_SUBJECT_PLACEHOLDER ? (encrypted ? "(encrypted subject)" : "(no subject)") : rawSubject;
-    return {
-        uid: message.uid,
-        mailboxUid: message.mailboxUid,
-        folderUid: message.folderUid,
-        // `splitMailAddress()` has already taken control and bidirectional-override characters out of both.
-        senderName: name ?? "",
-        senderAddress: address,
-        subject,
-        preview: encrypted ? "Encrypted message" : cleanPreview(message.bodyPreview ?? ""),
-        href: `/messages/${encodeURIComponent(message.uid)}`,
-    };
-}
-
-/** Every address that is this user's own, lowercased - a message from one of them is not new mail worth announcing. */
-export function ownAddressesOf(mailboxes: Mailbox[]): Set<string> {
-    const own = new Set<string>();
-    for (const mailbox of mailboxes) {
-        for (const address of [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])]) {
-            if (address) {
-                own.add(address.trim().toLowerCase());
-            }
-        }
-    }
-    return own;
-}
-
-/**
- * Whether the arrival of `message` is worth announcing: unread mail in an Inbox (not Drafts, Sent Items, Outbox, Deleted Items,
- * Junk Email or quarantine, which are other folders), that Focused Inbox did not put under Other, that its own user did not
- * send, and that is not old (a bulk import).
- */
-export function shouldAnnounce(
-    message: Message,
-    context: { folders: Folder[]; ownAddresses: Set<string>; now?: number },
-): boolean {
-    if (context.folders.find((folder) => folder.uid === message.folderUid)?.type !== "inbox") {
-        return false;
-    }
-    if (message.flags.read === true || message.inferenceClassification === "other") {
-        return false;
-    }
-    if (context.ownAddresses.has((message.from?.address ?? "").trim().toLowerCase())) {
-        return false;
-    }
-    const received = Date.parse(message.receivedDate);
-    return Number.isNaN(received) || (context.now ?? Date.now()) - received < MAX_NEW_AGE_MS;
-}
-
-/** `Name <address>`, or the address alone - the desktop notification's title. */
-export function noticeSender(notice: Pick<NewMailNotice, "senderName" | "senderAddress">): string {
-    return formatMailAddress({ address: notice.senderAddress, displayName: notice.senderName || undefined });
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
+import { formatMailAddress, splitMailAddress } from "@rapidmx/react-shared/mail/mailAddress.js";
+
+/**
+ * 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 answer to the desktop-notifications offer: `"later"` (not now) or `"asked"` (they were asked). */
+export const DESKTOP_OFFER_KEY = "rapidmx-desktop-notifications-offer";
+
+/** How much of the body an announcement quotes. */
+export const PREVIEW_MAX_LENGTH = 140;
+
+/** A message received longer ago than this is not "new": mail imported or migrated in bulk arrives as `create` events too. */
+export const MAX_NEW_AGE_MS = 6 * 60 * 60 * 1000;
+
+/** The subject the server stores for an encrypted message (the real one is inside the ciphertext). */
+const ENCRYPTED_SUBJECT_PLACEHOLDER = "[...]";
+
+function readStorage(key: string): string | null {
+    try {
+        return localStorage.getItem(key);
+    } catch {
+        return null;
+    }
+}
+
+function writeStorage(key: string, value: string | null): void {
+    try {
+        if (value === null) {
+            localStorage.removeItem(key);
+        } else {
+            localStorage.setItem(key, value);
+        }
+    } catch {
+        // Storage blocked or full: the choice lasts until the page is reloaded, no longer.
+    }
+}
+
+/** 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;
+}
+
+export function setDesktopOfferDismissed(dismissed: boolean): void {
+    writeStorage(DESKTOP_OFFER_KEY, dismissed ? "later" : null);
+}
+
+/** The browser's notification permission, or `"unsupported"` where there is no Notifications API. */
+export type DesktopPermission = NotificationPermission | "unsupported";
+
+export function desktopPermission(): DesktopPermission {
+    return typeof Notification === "undefined" ? "unsupported" : Notification.permission;
+}
+
+/** Asks the browser for permission - call it from a click. Resolves the answer; never rejects. */
+export async function requestDesktopPermission(): Promise<DesktopPermission> {
+    if (typeof Notification === "undefined") {
+        return "unsupported";
+    }
+    try {
+        return await Notification.requestPermission();
+    } catch {
+        return desktopPermission();
+    }
+}
+
+/** What an announcement shows. */
+export interface NewMailNotice {
+    /** The message's uid: the announcement's identity (and the desktop notification's `tag`). */
+    uid: string;
+    mailboxUid: string;
+    folderUid: string;
+    /** The sender's display name, `""` when there is none. */
+    senderName: string;
+    /** The sender's address - always shown, so a name can't stand in for who really sent it. */
+    senderAddress: string;
+    subject: string;
+    /** About `PREVIEW_MAX_LENGTH` characters of the body as plain text; `Encrypted message` for an encrypted one. */
+    preview: string;
+    /** Where opening it goes. */
+    href: string;
+}
+
+/** Control characters, and the invisible or bidirectional-override characters that can make text read as something else, as code point ranges. */
+const UNWANTED_RANGES: [number, number][] = [
+    [0x0000, 0x001f],
+    [0x007f, 0x009f],
+    [0x200b, 0x200f],
+    [0x2028, 0x202e],
+    [0x2060, 0x2064],
+    [0x2066, 0x2069],
+    [0xfeff, 0xfeff],
+];
+const hex = (code: number) => "\\u" + code.toString(16).padStart(4, "0");
+const UNWANTED = new RegExp("[" + UNWANTED_RANGES.map(([from, to]) => hex(from) + "-" + hex(to)).join("") + "]+", "g");
+
+/** `text` with those characters replaced by spaces, whitespace folded, and cut to `max` characters (with an ellipsis). */
+export function cleanPreview(text: string, max: number = PREVIEW_MAX_LENGTH): string {
+    const cleaned = text.replace(UNWANTED, " ").replace(/\s+/g, " ").trim();
+    return cleaned.length > max ? cleaned.slice(0, max - 1).trimEnd() + String.fromCharCode(0x2026) : cleaned;
+}
+
+/** The text of an announcement of `message`. */
+export function noticeFor(message: Message): NewMailNotice {
+    const { name, address } = splitMailAddress(message.from);
+    const encrypted = message.encrypted === true;
+    const rawSubject = cleanPreview(message.subject ?? "", 200);
+    const subject =
+        !rawSubject || rawSubject === ENCRYPTED_SUBJECT_PLACEHOLDER ? (encrypted ? "(encrypted subject)" : "(no subject)") : rawSubject;
+    return {
+        uid: message.uid,
+        mailboxUid: message.mailboxUid,
+        folderUid: message.folderUid,
+        // `splitMailAddress()` has already taken control and bidirectional-override characters out of both.
+        senderName: name ?? "",
+        senderAddress: address,
+        subject,
+        preview: encrypted ? "Encrypted message" : cleanPreview(message.bodyPreview ?? ""),
+        href: `/messages/${encodeURIComponent(message.uid)}`,
+    };
+}
+
+/** Every address that is this user's own, lowercased - a message from one of them is not new mail worth announcing. */
+export function ownAddressesOf(mailboxes: Mailbox[]): Set<string> {
+    const own = new Set<string>();
+    for (const mailbox of mailboxes) {
+        for (const address of [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])]) {
+            if (address) {
+                own.add(address.trim().toLowerCase());
+            }
+        }
+    }
+    return own;
+}
+
+/**
+ * Whether the arrival of `message` is worth announcing: unread mail in an Inbox (not Drafts, Sent Items, Outbox, Deleted Items,
+ * Junk Email or quarantine, which are other folders), that Focused Inbox did not put under Other, that its own user did not
+ * send, and that is not old (a bulk import).
+ */
+export function shouldAnnounce(
+    message: Message,
+    context: { folders: Folder[]; ownAddresses: Set<string>; now?: number },
+): boolean {
+    if (context.folders.find((folder) => folder.uid === message.folderUid)?.type !== "inbox") {
+        return false;
+    }
+    if (message.flags.read === true || message.inferenceClassification === "other") {
+        return false;
+    }
+    if (context.ownAddresses.has((message.from?.address ?? "").trim().toLowerCase())) {
+        return false;
+    }
+    const received = Date.parse(message.receivedDate);
+    return Number.isNaN(received) || (context.now ?? Date.now()) - received < MAX_NEW_AGE_MS;
+}
+
+/** `Name <address>`, or the address alone - the desktop notification's title. */
+export function noticeSender(notice: Pick<NewMailNotice, "senderName" | "senderAddress">): string {
+    return formatMailAddress({ address: notice.senderAddress, displayName: notice.senderName || undefined });
+}

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([]);
+}

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

@@ -6,6 +6,7 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attachment,
     ComposeRecipientInput,
+    DraftThreading,
     Mailbox,
     Message,
     assembleDraft,
@@ -26,6 +27,7 @@ import { policyCanAutoEncrypt } from "../../components/mail/compose/encryptionRe
 import { NotificationAction, dismiss, notify } from "../../notifications/store.js";
 import { INLINE_IMAGE_PATTERN, SendBlock, SendDecisionInput, decideSend } from "./sendDecision.js";
 import { beginPendingSend, finishPendingSend, setPendingStage } from "./pendingSends.js";
+import { failOutgoing, forgetOutgoing, markOutgoingSending, markOutgoingSent, trackOutgoing } from "./outgoingReplies.js";
 import { openComposeFromOutside, requestUnlockFromOutside } from "./composeBridge.js";
 import { OutboxCountTracker, sendState } from "./sendState.js";
 
@@ -60,6 +62,10 @@ export interface SendRequest {
     forcePlaintext: boolean;
     /** Settles when the window's own autosaves have landed, so none can overwrite the assembly below. */
     saved?: Promise<unknown>;
+    /** The thread this message continues (a reply or forward), as the compose session was opened with it - what lets the conversation on screen
+     * show the message as soon as it is sent (see `outgoingReplies.ts`). Absent for a new message, and for a draft opened again, which the draft's own
+     * `inReplyTo`/`references` stand in for. */
+    threading?: DraftThreading;
 }
 
 /** How long a background send waits for the mailbox / encryption policy it did not have, before it goes ahead treating them as unknown. Nobody waits for it. */
@@ -311,7 +317,7 @@ export function describeMessage(subject: string, recipients: string): string {
 
 /** Re-opens the compose window around a request's message, with everything as it was typed. */
 export function openDraftFromRequest(request: SendRequest): boolean {
-    return openComposeFromOutside({
+    const opened = openComposeFromOutside({
         mailboxUid: request.mailboxUid,
         resume: {
             draft: request.draft,
@@ -327,6 +333,11 @@ export function openDraftFromRequest(request: SendRequest): boolean {
             encryptRequested: request.encryptRequested,
         },
     });
+    // Being edited again, it is no longer a message on its way in the conversation.
+    if (opened) {
+        forgetOutgoing(request.draft.uid);
+    }
+    return opened;
 }
 
 function failureNotificationId(draftUid: string): string {
@@ -363,6 +374,8 @@ function notifyFailure(request: SendRequest, failure: Failure): void {
         details: failure.details,
         actions,
     });
+    // The conversation on screen shows the same failure under the message, with the same ways out.
+    failOutgoing(uid, failure.message, actions);
 }
 
 const SENT_BURST_MS = 6_000;
@@ -389,6 +402,8 @@ export function startSend(request: SendRequest): boolean {
     }
     // The failure of an earlier attempt is resolved by trying again.
     dismiss(failureNotificationId(uid));
+    // A reply or forward is on screen in its conversation from this moment, before any of the work below.
+    trackOutgoing(request);
     const tracker = sendState.countTracker?.(request.mailboxUid);
     void attempt(request).then((outcome) => {
         finishPendingSend(uid);
@@ -402,6 +417,8 @@ export function startSend(request: SendRequest): boolean {
             retain(request);
             sendState.queuedListener?.(request.mailboxUid);
         } else if (outcome.kind === "sent") {
+            // A server with no queue relayed it before answering: the Sent Items copy exists already.
+            markOutgoingSent(uid);
             notifySent();
         } else {
             notify({
@@ -420,6 +437,7 @@ export function startSend(request: SendRequest): boolean {
 export async function retrySend(request: SendRequest): Promise<void> {
     if (await alreadyAccepted(request)) {
         dismiss(failureNotificationId(request.draft.uid));
+        markOutgoingSending(request.draft.uid);
         notify({ id: `already-sent:${request.draft.uid}`, kind: "info", title: "This message is already on its way", timeoutMs: 5_000 });
         return;
     }