@remit/web-client 0.0.324 → 0.0.326

package/dist/src/components/mail/MessageActionMenu.d.ts

@@ -0,0 +1,36 @@
+interface MessageActionMenuProps {
+    messageId: string;
+    threadId: string;
+    mailboxId: string;
+    isRead: boolean;
+    /**
+     * Account that owns this message's mailbox. When provided the
+     * Move-to-folder trigger is rendered next to the overflow; when
+     * omitted (e.g. the surrounding view hasn't resolved the account
+     * yet) the trigger is hidden so we never present a picker scoped to
+     * the wrong account.
+     */
+    accountId?: string;
+    /**
+     * The From-address `addressId` for the message. When omitted (e.g. the
+     * envelope has no parseable From) the "Trusted sender" toggle is
+     * disabled with an explanatory tooltip.
+     */
+    fromAddressId?: string;
+    /**
+     * Whether the From-address is currently flagged as trusted.
+     */
+    isTrusted?: boolean;
+    /**
+     * Whether the body area is currently showing the raw RFC822/MIME source
+     * instead of the rendered body. Controls the label/icon of the toggle.
+     */
+    showRaw?: boolean;
+    /**
+     * Toggle between the rendered body and the raw source. Owned by the
+     * parent card so the body area and this menu stay in sync.
+     */
+    onToggleRaw?: () => void;
+}
+export declare const MessageActionMenu: ({ messageId, threadId, mailboxId, isRead, accountId, fromAddressId, isTrusted, showRaw, onToggleRaw, }: MessageActionMenuProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MessageActionMenu.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { messageBulkOperationsUpdateFlagsMutation, threadDetailOperationsListThreadMessagesQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, ErrorState, } from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { BadgeCheck, Check, Code, MailOpen, MoreVertical, Trash2, } from "lucide-react";
+import { useCallback } from "react";
+import { useDeleteMessages } from "../../hooks/useDeleteMessages";
+import { setReadOnItems } from "../../hooks/useMarkAsRead";
+import { useMoveMessages } from "../../hooks/useMoveMessages";
+import { useToggleTrusted } from "../../hooks/useToggleTrusted";
+import { cancelThreadListQueries, invalidateThreadListQueries, patchThreadListQueries, restoreThreadListQueries, snapshotThreadListQueries, threadListCacheKeys, } from "../../lib/thread-list-cache";
+import { useCloseThread, useOpenThreadPath } from "../../routing";
+import { useErrorBanners } from "../ui/ErrorBannerProvider";
+import { formatErrorDetail } from "../ui/error-banners";
+import { MoveToTrigger } from "./MoveToTrigger";
+export const MessageActionMenu = ({ messageId, threadId, mailboxId, isRead, accountId, fromAddressId, isTrusted = false, showRaw = false, onToggleRaw, }) => {
+    const queryClient = useQueryClient();
+    const closeThread = useCloseThread();
+    const { pushError } = useErrorBanners();
+    const selectedMessageId = useOpenThreadPath()?.messageId;
+    const { mutate: updateFlags, isPending: isUpdatingFlags } = useMutation({
+        ...messageBulkOperationsUpdateFlagsMutation(),
+        onMutate: async (variables) => {
+            const isReadNext = variables.body.isRead ?? true;
+            const targetIds = new Set(variables.body.messageIds ?? []);
+            const threadMessagesPrefix = threadDetailOperationsListThreadMessagesQueryKey({
+                path: { threadId },
+            });
+            const listPrefixes = threadListCacheKeys([mailboxId]);
+            await Promise.all([
+                queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
+                cancelThreadListQueries(queryClient, listPrefixes),
+            ]);
+            const previousThreadMessages = queryClient
+                .getQueriesData({ queryKey: threadMessagesPrefix })
+                .filter((entry) => entry[1] !== undefined)
+                .map(([queryKey, data]) => ({ queryKey, data }));
+            const previousThreadsList = snapshotThreadListQueries(queryClient, listPrefixes);
+            queryClient.setQueriesData({ queryKey: threadMessagesPrefix }, (old) => {
+                if (!old)
+                    return old;
+                return {
+                    ...old,
+                    items: setReadOnItems(old.items, targetIds, isReadNext),
+                };
+            });
+            patchThreadListQueries(queryClient, listPrefixes, (items) => setReadOnItems(items, targetIds, isReadNext));
+            return {
+                threadMessagesPrefix,
+                listPrefixes,
+                previousThreadMessages,
+                previousThreadsList,
+            };
+        },
+        onError: (err, variables, context) => {
+            if (context) {
+                for (const entry of context.previousThreadMessages) {
+                    queryClient.setQueryData(entry.queryKey, entry.data);
+                }
+                restoreThreadListQueries(queryClient, context.previousThreadsList);
+            }
+            const isReadNext = variables.body.isRead ?? true;
+            pushError({
+                title: isReadNext ? "Couldn't mark as read" : "Couldn't mark as unread",
+                detail: formatErrorDetail(err),
+                error: err,
+            });
+        },
+        onSettled: (_data, _err, _vars, context) => {
+            if (!context)
+                return;
+            queryClient.invalidateQueries({
+                queryKey: context.threadMessagesPrefix,
+            });
+            invalidateThreadListQueries(queryClient, context.listPrefixes);
+        },
+    });
+    // Close the conversation before the server response arrives if the message
+    // being deleted is the one currently routed to. Mirrors the bulk-delete
+    // flow on the mailbox route — without this, the address keeps naming a
+    // message after the row vanishes from the list.
+    const handleAfterOptimisticRemove = useCallback((removedIds) => {
+        if (!selectedMessageId)
+            return;
+        if (!removedIds.includes(selectedMessageId))
+            return;
+        closeThread();
+    }, [selectedMessageId, closeThread]);
+    const { deleteMessages, isPending: isDeleting } = useDeleteMessages({
+        mailboxId,
+        threadId,
+        onAfterOptimisticRemove: handleAfterOptimisticRemove,
+    });
+    const { moveMessages, isPending: isMoving } = useMoveMessages({
+        mailboxId,
+        threadId,
+        accountId,
+        onAfterOptimisticRemove: handleAfterOptimisticRemove,
+    });
+    const { toggleTrusted, isPending: isUpdatingTrusted, error: trustedError, reset: resetTrustedError, } = useToggleTrusted({ messageId });
+    const handleMarkAsUnread = () => {
+        updateFlags({
+            body: {
+                messageIds: [messageId],
+                isRead: false,
+            },
+        });
+    };
+    const handleDelete = () => {
+        deleteMessages([messageId]);
+    };
+    const handleToggleTrusted = () => {
+        if (!fromAddressId)
+            return;
+        toggleTrusted(fromAddressId, isTrusted);
+    };
+    const isDisabled = isUpdatingFlags || isDeleting || isMoving || isUpdatingTrusted;
+    const trustedItemDisabled = isDisabled || !fromAddressId;
+    const handleMove = useCallback((destinationMailboxId) => {
+        moveMessages([messageId], destinationMailboxId);
+    }, [moveMessages, messageId]);
+    const trustedItemTitle = !fromAddressId
+        ? "Sender has no parseable address"
+        : undefined;
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsxs("div", { className: "flex items-center gap-1", children: [accountId && (_jsx(MoveToTrigger, { accountId: accountId, currentMailboxId: mailboxId, onMove: handleMove, disabled: isDisabled, label: "Move this message" })), _jsxs(DropdownMenu, { trigger: _jsx(MoreVertical, { className: "size-4" }), children: [_jsxs(DropdownMenuItem, { onClick: handleToggleTrusted, disabled: trustedItemDisabled, children: [isTrusted ? (_jsx(BadgeCheck, { className: "size-4 text-positive" })) : (_jsx(Check, { className: "size-4 opacity-0" })), _jsx("span", { title: trustedItemTitle, children: "Trusted sender" })] }), isRead && (_jsxs(DropdownMenuItem, { onClick: handleMarkAsUnread, disabled: isDisabled, children: [_jsx(MailOpen, { className: "size-4" }), "Mark as unread"] })), onToggleRaw && (_jsxs(DropdownMenuItem, { onClick: onToggleRaw, children: [_jsx(Code, { className: "size-4" }), showRaw ? "Show formatted" : "Show raw email"] })), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleDelete, disabled: isDisabled, destructive: true, children: [_jsx(Trash2, { className: "size-4" }), "Delete"] })] })] }), trustedError && (_jsx("div", { className: "w-64", children: _jsx(ErrorState, { variant: "inline", title: "Couldn't update trust", error: trustedError, onRetry: () => {
+                        resetTrustedError();
+                        handleToggleTrusted();
+                    } }) }))] }));
+};

package/dist/src/components/mail/MessageAttachments.d.ts

@@ -0,0 +1,21 @@
+import type { RemitImapBodyPartResponse } from "@remit/api-http-client/types.gen.ts";
+interface MessageAttachmentsProps {
+    messageId: string;
+    /** Body parts from `describeMessage`; absent while the message is loading. */
+    bodyParts?: readonly RemitImapBodyPartResponse[];
+    /** The thread row's server-side attachment flag. */
+    hasAttachment?: boolean;
+    className?: string;
+}
+/**
+ * The attachments carried by an open message, and the download behind each row.
+ *
+ * Download state is per row and lives here rather than in a query: a download is
+ * a one-shot user action with no cached result to hold, and the bytes are handed
+ * to the browser rather than rendered.
+ *
+ * A forwarded message also opens in place: its own parts render through the
+ * same body and attachment components as the message carrying it.
+ */
+export declare const MessageAttachments: ({ messageId, bodyParts, hasAttachment, className, }: MessageAttachmentsProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MessageAttachments.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { messageOperationsDescribeMessageQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { encapsulatedParts } from "@remit/data-ports/message-parts";
+import { AttachmentList } from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useAuthProvider } from "../../auth/provider";
+import { attachmentFailureContent, attachmentReportUrl, extractAttachmentFailureDetail, extractAttachmentFailureReason, fetchAttachment, isRepairableByRefetch, saveBlob, } from "../../lib/attachment-download";
+import { selectMessageAttachments, } from "../../lib/message-attachments";
+import { MessageBody } from "./MessageBody";
+const IDLE = { status: "idle" };
+/**
+ * The attachments carried by an open message, and the download behind each row.
+ *
+ * Download state is per row and lives here rather than in a query: a download is
+ * a one-shot user action with no cached result to hold, and the bytes are handed
+ * to the browser rather than rendered.
+ *
+ * A forwarded message also opens in place: its own parts render through the
+ * same body and attachment components as the message carrying it.
+ */
+export const MessageAttachments = ({ messageId, bodyParts, hasAttachment = false, className, }) => {
+    const { getToken } = useAuthProvider();
+    const queryClient = useQueryClient();
+    const [downloads, setDownloads] = useState({});
+    const [openedId, setOpenedId] = useState(null);
+    const attachments = useMemo(() => selectMessageAttachments(bodyParts ?? []), [bodyParts]);
+    const describeKey = messageOperationsDescribeMessageQueryKey({
+        path: { messageId },
+    });
+    /**
+     * A stale signature and an unmaterialized part are both repaired by re-reading
+     * the message: `describeMessage` re-signs every `contentUrl`, and it
+     * materializes the deferred per-part objects on its way through. Re-hitting
+     * the same URL alone cannot fix either (remit-mail/remit#1240), so the retry
+     * goes through the read path and then uses the URL it just minted.
+     */
+    const fetchThroughRefreshedDescribe = (attachment) => fetchAttachment(attachment.contentUrl, getToken).catch((error) => {
+        if (!isRepairableByRefetch(extractAttachmentFailureReason(error))) {
+            throw error;
+        }
+        return queryClient
+            .refetchQueries({ queryKey: describeKey })
+            .then(() => {
+            const refreshed = queryClient.getQueryData(describeKey);
+            const renewed = refreshed
+                ? selectMessageAttachments(refreshed.bodyParts).find((candidate) => candidate.bodyPartId === attachment.bodyPartId)
+                : undefined;
+            return fetchAttachment(renewed?.contentUrl ?? attachment.contentUrl, getToken);
+        });
+    });
+    const setState = (id, state) => setDownloads((current) => ({ ...current, [id]: state }));
+    const download = (bodyPartId) => {
+        const attachment = attachments.find((candidate) => candidate.bodyPartId === bodyPartId);
+        if (!attachment) {
+            throw new Error(`No attachment part ${bodyPartId} on message ${messageId}`);
+        }
+        setState(bodyPartId, { status: "downloading" });
+        fetchThroughRefreshedDescribe(attachment)
+            .then((blob) => {
+            saveBlob(blob, attachment.filename);
+            setState(bodyPartId, IDLE);
+        })
+            .catch((error) => {
+            const reason = extractAttachmentFailureReason(error);
+            const fallback = extractAttachmentFailureDetail(error);
+            const { title, detail } = attachmentFailureContent(reason, attachment.filename, fallback);
+            setState(bodyPartId, {
+                status: "failed",
+                title,
+                detail,
+                reportUrl: attachmentReportUrl(reason, attachment.filename, fallback),
+            });
+        });
+    };
+    // Only claim an attachment is unaccounted for once the parts have arrived;
+    // while `describeMessage` is in flight there is nothing to contradict.
+    const hasUnlistedAttachment = hasAttachment && bodyParts !== undefined && attachments.length === 0;
+    const openedMessage = attachments.find((attachment) => attachment.kind === "message" && attachment.bodyPartId === openedId);
+    const openedParts = openedMessage
+        ? encapsulatedParts(bodyParts ?? [], openedMessage.partPath)
+        : [];
+    return (_jsx(AttachmentList, { className: className, attachments: attachments.map((attachment) => ({
+            attachmentId: attachment.bodyPartId,
+            kind: attachment.kind,
+            filename: attachment.filename,
+            typeLabel: attachment.typeLabel,
+            sizeOctets: attachment.sizeOctets,
+            download: downloads[attachment.bodyPartId] ?? IDLE,
+        })), onDownload: download, hasUnlistedAttachment: hasUnlistedAttachment, onToggleOpen: (bodyPartId) => setOpenedId((current) => (current === bodyPartId ? null : bodyPartId)), opened: openedMessage
+            ? {
+                attachmentId: openedMessage.bodyPartId,
+                content: (_jsxs(_Fragment, { children: [_jsx(MessageBody, { bodyParts: openedParts, messageId: messageId }), _jsx(MessageAttachments, { messageId: messageId, bodyParts: openedParts, className: "mt-4" })] })),
+            }
+            : undefined }));
+};

package/dist/src/components/mail/MessageBody.d.ts

@@ -0,0 +1,72 @@
+import { type EmailRenderCategory } from "@remit/ui";
+/**
+ * Subset of the OpenAPI `BodyPartResponse` consumed by this component for
+ * inline-image / attachment URL resolution and the body fetcher. Pinning a
+ * structural subset avoids a hard import on the generated types so this file
+ * compiles before `make` runs in fresh checkouts.
+ */
+export interface MessageBodyPart {
+    bodyPartId: string;
+    partPath: string;
+    mediaType: string;
+    mediaSubtype: string;
+    contentId?: string;
+    contentUrl: string;
+    disposition?: string;
+    dispositionFilename?: string;
+    isMultipart: boolean;
+}
+interface MessageBodyProps {
+    /**
+     * Body parts from `describeMessage`. The component picks the first
+     * `text/html` part (fallback `text/plain`) and fetches its `contentUrl`
+     * from CloudFront. `cid:CONTENT_ID` references in HTML resolve to other
+     * parts' `contentUrl` via the same list (#224 PR 3).
+     */
+    bodyParts?: readonly MessageBodyPart[];
+    /**
+     * Local-render fallback for callers that don't have BodyParts (Outbox
+     * drafts, Compose preview). When `bodyParts` is provided, these are
+     * ignored — the component fetches via CloudFront instead.
+     */
+    html?: string;
+    text?: string;
+    /**
+     * Whether the From-address has the `trusted` flag set. Trusted senders
+     * auto-load images. The "Load images" bar is suppressed entirely for
+     * trusted senders. Ignored when `isBlocked` is set.
+     */
+    isTrusted?: boolean;
+    /**
+     * Whether the From-address has the `blocked` flag set. A blocked sender
+     * never loads images, "even on explicit click" (`BlockedFlag`), so this
+     * suppresses auto-load and removes the manual load affordances rather than
+     * greying them out. Blocked outranks trusted: it is the more restrictive
+     * instruction, and a sender carrying both is still blocked.
+     */
+    isBlocked?: boolean;
+    /**
+     * The current message id. Required for the body-content query cache key
+     * and by `useToggleTrusted` for the optimistic cache patch.
+     */
+    messageId?: string;
+    /**
+     * The From-address `addressId`. When omitted (e.g. the envelope has no
+     * parseable From) the "Always trust" button is hidden.
+     */
+    fromAddressId?: string;
+    /**
+     * Message category (personal/newsletter/marketing/…). Together with
+     * `hasAuthorBackground` this determines whether to apply the framed
+     * newsletter treatment or the plain-email normalization CSS.
+     */
+    category?: EmailRenderCategory;
+    /**
+     * Extra classes for the `.message-body` wrapper. `MessageCard` leaves this
+     * unset: the kit's `ExpandedMessage` owns the gutter, and runs the sandboxed
+     * email frame out of it so mail renders on its own ground.
+     */
+    className?: string;
+}
+export declare const MessageBody: ({ bodyParts, html, text, isTrusted, isBlocked, messageId, fromAddressId, category, className, }: MessageBodyProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MessageBody.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildCidResolver, cn, MessageBodyView, } from "@remit/ui";
+import { useMemo, useState } from "react";
+import { useIsDark } from "../../hooks/useIsDark";
+import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
+import { useToggleTrusted } from "../../hooks/useToggleTrusted";
+import { BlockedImagesNotice } from "./BlockedImagesNotice";
+import { MessageBodyErrorBanner } from "./MessageBodyErrorBanner";
+const LoadingSkeleton = () => (
+// biome-ignore lint/a11y/useSemanticElements: <div> with role="status" preserves block layout; <output> is inline
+_jsxs("div", { className: "animate-pulse space-y-2", role: "status", "aria-label": "Loading message body", children: [_jsx("div", { className: "h-4 bg-surface-sunken rounded w-full" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-11/12" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-3/4" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-5/6" })] }));
+const EmptyBody = () => (_jsx("p", { className: "text-fg-muted text-sm italic", children: "This message has no body content." }));
+export const MessageBody = ({ bodyParts, html, text, isTrusted = false, isBlocked = false, messageId, fromAddressId, category, className, }) => {
+    // "Load once" is a decision about one message. Reset it when the instance is
+    // handed a different message so the grant can't ride along — today every
+    // caller keys this component by message, which makes the leak unreachable,
+    // but the guarantee should hold structurally rather than by a caller's key.
+    const [allowImagesOnce, setAllowImagesOnce] = useState(false);
+    const [grantedFor, setGrantedFor] = useState(messageId);
+    if (grantedFor !== messageId) {
+        setGrantedFor(messageId);
+        setAllowImagesOnce(false);
+    }
+    const allowImages = !isBlocked && (isTrusted || allowImagesOnce);
+    const isDark = useIsDark();
+    // `useToggleTrusted` surfaces its own failure (banner + rollback) and a fatal
+    // 5xx escalates globally — no consumer-side error effect needed here.
+    const { toggleTrusted, isPending: isTrustPending } = useToggleTrusted({
+        messageId: messageId ?? "",
+    });
+    const hasParts = !!bodyParts && bodyParts.length > 0;
+    const { picked, data: fetched, isLoading: isBodyLoading, isError: isBodyError, error: bodyError, refetch: refetchBody, } = useMessageBodyContent({
+        messageId,
+        bodyParts,
+        enabled: hasParts,
+    });
+    const resolveCid = useMemo(() => buildCidResolver(bodyParts ?? []), [bodyParts]);
+    const renderedHtml = hasParts && fetched?.kind === "html" ? fetched.body : html;
+    const renderedText = hasParts && fetched?.kind === "text" ? fetched.body : text;
+    if (hasParts) {
+        if (isBodyLoading) {
+            return (_jsx("div", { className: cn("message-body", className), children: _jsx(LoadingSkeleton, {}) }));
+        }
+        if (isBodyError) {
+            return (_jsx("div", { className: cn("message-body", className), children: _jsx(MessageBodyErrorBanner, { error: bodyError, onRetry: () => refetchBody() }) }));
+        }
+        if (!picked) {
+            return (_jsx("div", { className: cn("message-body", className), children: _jsx(EmptyBody, {}) }));
+        }
+    }
+    else if (!html && !text) {
+        return (_jsx("div", { className: cn("message-body", className), children: _jsx(EmptyBody, {}) }));
+    }
+    const canAlwaysTrust = Boolean(fromAddressId && messageId);
+    const handleAlwaysTrust = () => {
+        if (!fromAddressId || isTrustPending)
+            return;
+        setAllowImagesOnce(true);
+        toggleTrusted(fromAddressId, false);
+    };
+    // The sanitize → classify → sandboxed-iframe rendering lives in the kit's
+    // `MessageBodyView` (the single source of truth, shared with Storybook's
+    // reading panes — #940). This component keeps the data orchestration:
+    // bodyParts → html/text, the allow-images-once trust state, and the
+    // privacy "images blocked" bar (it touches app trust state, so it stays
+    // here and is injected via `renderBlockedNotice`).
+    return (_jsx(MessageBodyView, { className: className, html: renderedHtml, text: renderedText, isDark: isDark, category: category, allowImages: allowImages, resolveCid: resolveCid, renderBlockedNotice: (blockedImageCount) => (_jsx(BlockedImagesNotice, { blockedImageCount: blockedImageCount, canAlwaysTrust: canAlwaysTrust, isTrustPending: isTrustPending, isSenderBlocked: isBlocked, onLoadOnce: () => setAllowImagesOnce(true), onAlwaysTrust: handleAlwaysTrust })) }));
+};

package/dist/src/components/mail/MessageBodyErrorBanner.d.ts

@@ -0,0 +1,20 @@
+interface MessageBodyErrorBannerProps {
+    error: unknown;
+    onRetry?: () => void;
+}
+/**
+ * Inline alert banner for a body-fetch failure. Renders variant-specific copy
+ * for auth-expired vs. body-missing-in-storage 403s (issue #401), with a
+ * Retry button (always) and a Sign-in button (auth variant only, and only
+ * when a session is active to sign out of). Dismissible — once dismissed, the
+ * message body area falls back to an empty state until Retry is clicked.
+ *
+ * The sign-in affordance goes through the composed auth provider's `Account`
+ * render-prop: it renders only when there is a session to sign out of, so no
+ * identity SDK hook fires in a build (or a local-dev run) that has none.
+ *
+ * Uses the same destructive colour palette as `ErrorState(variant="inline")`
+ * so it looks at home in the message body slot.
+ */
+export declare const MessageBodyErrorBanner: ({ error, onRetry, }: MessageBodyErrorBannerProps) => import("react").JSX.Element | null;
+export {};

package/dist/src/components/mail/MessageBodyErrorBanner.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, X } from "lucide-react";
+import { useState } from "react";
+import { useAuthProvider } from "../../auth/provider";
+import { contentForReason, extractFallbackDetail, extractReason, } from "./message-body-error-banner-content";
+/**
+ * Inline alert banner for a body-fetch failure. Renders variant-specific copy
+ * for auth-expired vs. body-missing-in-storage 403s (issue #401), with a
+ * Retry button (always) and a Sign-in button (auth variant only, and only
+ * when a session is active to sign out of). Dismissible — once dismissed, the
+ * message body area falls back to an empty state until Retry is clicked.
+ *
+ * The sign-in affordance goes through the composed auth provider's `Account`
+ * render-prop: it renders only when there is a session to sign out of, so no
+ * identity SDK hook fires in a build (or a local-dev run) that has none.
+ *
+ * Uses the same destructive colour palette as `ErrorState(variant="inline")`
+ * so it looks at home in the message body slot.
+ */
+export const MessageBodyErrorBanner = ({ error, onRetry, }) => {
+    const reason = extractReason(error);
+    const fallback = extractFallbackDetail(error);
+    const { title, detail } = contentForReason(reason, fallback);
+    const [dismissed, setDismissed] = useState(false);
+    const { Account } = useAuthProvider();
+    if (dismissed)
+        return null;
+    return (_jsxs("div", { role: "alert", "data-testid": "message-body-error-banner", "data-reason": reason, className: "flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm", children: [_jsx(AlertCircle, { className: "size-4 shrink-0 text-danger mt-0.5", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "font-medium text-danger", children: title }), _jsx("p", { className: "text-fg-muted mt-1 break-words", children: detail })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [reason === "auth" && (_jsx(Account, { children: ({ signOut }) => (_jsx("button", { type: "button", onClick: () => signOut(), className: "text-sm font-medium text-accent hover:underline", children: "Sign in again" })) })), onRetry && (_jsx("button", { type: "button", onClick: onRetry, className: "text-sm font-medium text-accent hover:underline", children: "Retry" })), _jsx("button", { type: "button", onClick: () => setDismissed(true), "aria-label": "Dismiss message body error", className: "rounded-md p-1 text-fg-muted hover:bg-surface-raised hover:text-fg transition-colors", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] })] }));
+};

package/dist/src/components/mail/MessageCard.d.ts

@@ -0,0 +1,29 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+interface MessageCardProps {
+    threadMessage: RemitImapThreadMessageResponse;
+    isExpanded: boolean;
+    isFocused?: boolean;
+    onToggle: () => void;
+    onToggleStar: () => void;
+    isStarPending?: boolean;
+    /**
+     * Owning account for the thread's mailbox. Forwarded to
+     * `MessageActionMenu` so the per-message Move trigger can scope its
+     * folder picker to the right account. Optional because the resolver
+     * is async — when omitted the Move trigger is hidden until the lookup
+     * completes.
+     */
+    accountId?: string;
+    /**
+     * Single-pane mobile reading: the expanded card owns a per-message
+     * `MobileMessageBar` (reply / star / move / delete / overflow) instead of
+     * the desktop star indicator + kebab, so nothing is duplicated against the
+     * shell. Reply verbs are supplied by the conversation.
+     */
+    mobile?: boolean;
+    onReply?: () => void;
+    onReplyAll?: () => void;
+    onForward?: () => void;
+}
+export declare const MessageCard: ({ threadMessage, isExpanded, isFocused, onToggle, onToggleStar, isStarPending, accountId, mobile, onReply, onReplyAll, onForward, }: MessageCardProps) => import("react").JSX.Element;
+export {};

package/dist/src/components/mail/MessageCard.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { AddressList, CollapsedMessage, cn, EmptyState, ErrorState, ExpandedMessage, } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { BadgeCheck, Paperclip, Star } from "lucide-react";
+import { useState } from "react";
+import { toDisplayCategory } from "../../lib/display-category";
+import { formatDatePreset } from "../../lib/format";
+import { isMessageGoneFromServerError, isMessageNotFoundError, } from "../ui/error-banners";
+import { AutoMovedIndicator } from "./AutoMovedIndicator";
+import { MessageActionMenu } from "./MessageActionMenu";
+import { MessageAttachments } from "./MessageAttachments";
+import { MessageBody } from "./MessageBody";
+import { MessageSettlementAlert } from "./MessageSettlementAlert";
+import { MobileMessageBar } from "./MobileMessageBar";
+import { RawMessageView } from "./RawMessageView";
+const TrustedSenderBadge = () => (_jsx(BadgeCheck, { className: "inline-block size-4 ml-1 -mt-0.5 text-positive align-middle", "aria-label": "Trusted sender", "data-testid": "trusted-sender-badge" }));
+/**
+ * Builds the kit's `ThreadMessageData` view shape from an IMAP thread message.
+ * The kit reading rows own the row layout; MessageCard supplies the data and
+ * injects its interactivity through slots — so the row rhythm has one source of
+ * truth and can't drift from Storybook (#945).
+ */
+const toThreadMessageData = (threadMessage, dateLabel) => ({
+    id: threadMessage.messageId,
+    fromName: threadMessage.fromName ?? threadMessage.fromEmail ?? "?",
+    fromEmail: threadMessage.fromEmail ?? "",
+    toLabel: "",
+    dateLabel,
+    snippet: threadMessage.snippet || "",
+    bodyHtml: "",
+});
+const StarButton = ({ isStarred, onToggleStar, isStarPending, hoverReveal, }) => (_jsx("button", { type: "button", onClick: (e) => {
+        e.stopPropagation();
+        onToggleStar();
+    }, disabled: isStarPending, "aria-label": isStarred ? "Remove star" : "Add star", className: cn("shrink-0 p-0.5 rounded transition-colors", isStarred
+        ? "text-warning"
+        : cn("text-fg-subtle hover:text-warning", hoverReveal &&
+            "opacity-0 group-hover:opacity-100 focus:opacity-100"), isStarPending && "opacity-50"), children: _jsx(Star, { className: cn("size-3.5", isStarred && "fill-current") }) }));
+const CollapsedCard = ({ threadMessage, isFocused, onToggle, onToggleStar, isStarPending, }) => {
+    const date = formatDatePreset(threadMessage.sentDate, "datetime");
+    const message = toThreadMessageData(threadMessage, date);
+    return (_jsx(CollapsedMessage, { message: message, onClick: onToggle, isFocused: isFocused, isUnread: !threadMessage.isRead, trailing: _jsxs(_Fragment, { children: [threadMessage.hasAttachment && (_jsx(Paperclip, { className: "size-3 shrink-0 text-fg-subtle", role: "img", "aria-label": "Has an attachment" })), _jsx(StarButton, { isStarred: threadMessage.hasStars, onToggleStar: onToggleStar, isStarPending: isStarPending, hoverReveal: true }), _jsx("span", { "data-testid": "message-date", className: "shrink-0 text-2xs text-fg-subtle tabular-nums", children: date })] }) }));
+};
+const ExpandedCard = ({ threadMessage, messageData, isLoading, isError, error, onRetry, isFocused, onToggle, onToggleStar, isStarPending, accountId, showRaw, onToggleRaw, mobile, onReply, onReplyAll, onForward, }) => {
+    const date = formatDatePreset(threadMessage.sentDate, "long");
+    const isUnread = !threadMessage.isRead;
+    const isTrusted = messageData?.envelope.from[0]?.flags?.trusted?.value === true;
+    // `BlockedFlag`: never load images, even on explicit click. Read alongside
+    // `trusted` and handed to the body, which lets blocked win over trusted —
+    // including on the header, where a trusted badge beside "you blocked this
+    // sender" would tell the user two opposite things about the same address.
+    const isBlocked = messageData?.envelope.from[0]?.flags?.blocked?.value === true;
+    const fromAddressId = messageData?.envelope.from[0]?.addressId;
+    const message = toThreadMessageData(threadMessage, date);
+    const autoMovedNode = threadMessage.autoMoved || threadMessage.spamReport ? (_jsx(AutoMovedIndicator, { accountId: accountId, messageId: threadMessage.messageId, threadId: threadMessage.threadId, mailboxId: threadMessage.mailboxId, autoMoved: threadMessage.autoMoved, spamReport: threadMessage.spamReport })) : null;
+    return (_jsx(ExpandedMessage, { message: message, isFocused: mobile ? false : isFocused, onHeaderClick: onToggle, senderBadge: isTrusted && !isBlocked ? _jsx(TrustedSenderBadge, {}) : undefined, trailing: _jsx("span", { "data-testid": "message-date", className: "text-2xs text-fg-subtle", children: date }), to: messageData ? (_jsx(AddressList, { label: "To", addresses: messageData.envelope.to })) : null, indicators: autoMovedNode || !mobile ? (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 mt-0.5", children: [autoMovedNode, !mobile && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-end gap-1", children: _jsx(StarButton, { isStarred: threadMessage.hasStars, onToggleStar: onToggleStar, isStarPending: isStarPending }) }), isUnread && (
+                        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on decorative indicator provides useful context for assistive tech
+                        _jsx("span", { className: "size-1.5 rounded-full bg-accent", "aria-label": "Unread" }))] }))] })) : undefined, actionMenu: mobile ? undefined : (_jsx(MessageActionMenu, { messageId: threadMessage.messageId, threadId: threadMessage.threadId, mailboxId: threadMessage.mailboxId, isRead: threadMessage.isRead, accountId: accountId, fromAddressId: fromAddressId, isTrusted: isTrusted, showRaw: showRaw, onToggleRaw: onToggleRaw })), actionBar: mobile ? (_jsx(MobileMessageBar, { messageId: threadMessage.messageId, threadId: threadMessage.threadId, mailboxId: threadMessage.mailboxId, accountId: accountId, isRead: threadMessage.isRead, isStarred: threadMessage.hasStars, onToggleStar: onToggleStar, fromAddressId: fromAddressId, isTrusted: isTrusted, showRaw: showRaw, onToggleRaw: onToggleRaw, onReply: onReply, onReplyAll: onReplyAll, onForward: onForward })) : undefined, body: _jsxs(_Fragment, { children: [_jsx(MessageSettlementAlert, { threadMessage: threadMessage, accountId: accountId, className: "mt-3" }), isLoading ? (_jsxs("div", { className: "mt-3 animate-pulse space-y-2", children: [_jsx("div", { className: "h-4 bg-surface-sunken rounded w-full" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-3/4" }), _jsx("div", { className: "h-4 bg-surface-sunken rounded w-1/2" })] })) : isError && isMessageGoneFromServerError(error) ? (_jsx("div", { className: "mt-3", children: _jsx(EmptyState, { message: "This message is no longer on the mail server. It was moved or deleted in another mail app." }) })) : isError && isMessageNotFoundError(error) ? (_jsx("div", { className: "mt-3", children: _jsx(EmptyState, { message: "This message has been deleted" }) })) : isError ? (_jsx("div", { className: "mt-3", children: _jsx(ErrorState, { variant: "inline", title: "Couldn't load this message", error: error, onRetry: onRetry }) })) : showRaw ? (_jsx("div", { className: "mt-3", children: _jsx(RawMessageView, { messageId: threadMessage.messageId }) })) : (_jsxs("div", { className: "mt-3", children: [_jsx(MessageBody, { bodyParts: messageData?.bodyParts, messageId: threadMessage.messageId, fromAddressId: messageData?.envelope.from[0]?.addressId, isTrusted: isTrusted, isBlocked: isBlocked, category: toDisplayCategory(threadMessage.category) }), _jsx(MessageAttachments, { messageId: threadMessage.messageId, bodyParts: messageData?.bodyParts, hasAttachment: threadMessage.hasAttachment, className: "mt-4" })] }))] }) }));
+};
+export const MessageCard = ({ threadMessage, isExpanded, isFocused, onToggle, onToggleStar, isStarPending, accountId, mobile, onReply, onReplyAll, onForward, }) => {
+    const [showRaw, setShowRaw] = useState(false);
+    const { data: messageData, isLoading, isError, error, refetch, } = useQuery({
+        ...messageOperationsDescribeMessageOptions({
+            path: { messageId: threadMessage.messageId },
+        }),
+        enabled: isExpanded,
+        // A 404 (row deleted / mid-refresh) renders the inline "deleted" empty
+        // state below — opt it out of the global fatal overlay. A 5xx still
+        // escalates globally (meta.softError is ignored for 5xx — #1059).
+        meta: { softError: true },
+    });
+    if (!isExpanded) {
+        return (_jsx(CollapsedCard, { threadMessage: threadMessage, isFocused: isFocused, onToggle: onToggle, onToggleStar: onToggleStar, isStarPending: isStarPending }));
+    }
+    return (_jsx(ExpandedCard, { threadMessage: threadMessage, messageData: messageData, isLoading: isLoading, isError: isError, error: error, onRetry: () => refetch(), isFocused: isFocused, onToggle: onToggle, onToggleStar: onToggleStar, isStarPending: isStarPending, accountId: accountId, showRaw: showRaw, onToggleRaw: () => setShowRaw((prev) => !prev), mobile: mobile, onReply: onReply, onReplyAll: onReplyAll, onForward: onForward }));
+};