@remit/web-client 0.0.324 → 0.0.326

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

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { bulkActionFailureDetail, bulkActionFailureTitle, bulkRunBusyRefusal, } from "../../lib/bulk-action-copy";
+import { honestProgress, mailboxesTouchedBy, runChunkedAction, runPredicateAction, } from "../../lib/bulk-actions";
+import { invalidateThreadListQueries, threadListCacheKeys, } from "../../lib/thread-list-cache";
+import { useErrorBanners } from "../ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "../ui/error-banners";
+import { isFolderRoleRefusal } from "../ui/folder-role-refusal";
+import { useRoleAppointmentPrompt } from "./RoleAppointmentPromptProvider";
+const BulkRunContext = createContext(undefined);
+/**
+ * The owner of a chunked bulk run (#112).
+ *
+ * A run is mail leaving the mailbox, and it outlives every screen that can show
+ * it: the wizard invites the user to close it mid-run, and nothing stops them
+ * navigating to another mailbox on top of that. Held in the surface that started
+ * it, the progress, the count and the cancellation all unmounted with the route,
+ * so returning showed nothing, Stop reached nothing, and an ending that landed
+ * after the move was dropped in silence.
+ *
+ * Mounted at the root beside the other app-lifetime providers, this holds the
+ * run instead: its progress, its `AbortController`, the caches it invalidates,
+ * the refusal it replays and the ending it states. A screen reads the run and
+ * offers Stop; it never owns either.
+ *
+ * In memory and per tab. A run is a sequence of requests this tab is making, so
+ * a reload ends it — persisting the reading would show a bar for a run nothing
+ * is driving.
+ */
+export const BulkRunProvider = ({ children }) => {
+    const [run, setRun] = useState(undefined);
+    // The signal every call of the live run is issued under, so a stop ends the
+    // request on the wire instead of waiting for it to come back (#113).
+    const controllerRef = useRef(undefined);
+    // Identifies the live run across the awaits below, so a run that ended after
+    // the slot was taken from it — by a sign-out — writes nothing back.
+    const liveRunRef = useRef(undefined);
+    // What is in the slot, read synchronously: two commits landing in one frame
+    // both have to see the first of them.
+    const liveRequestRef = useRef(undefined);
+    // The runs a screen is reporting on in place, by token — never a count of
+    // claims over runs in general, which any commit could hold against any run.
+    const claimsRef = useRef(new Set());
+    const queryClient = useQueryClient();
+    const { pushError } = useErrorBanners();
+    const { requestAppointment } = useRoleAppointmentPrompt();
+    // The run replays itself once a folder is appointed, so it needs a handle on
+    // itself that does not make `start` its own dependency.
+    const startRef = useRef(async () => ({
+        kind: "ran",
+        outcome: { done: 0, failedIds: [], refused: 0, cancelled: false },
+    }));
+    /**
+     * The listings a run changed, and the unseen counts it moved. A cross-account
+     * selection has no single owning account, so the run's own targets name the
+     * accounts to refresh alongside the one the surface named.
+     */
+    const invalidateAfterRun = useCallback((request) => {
+        invalidateThreadListQueries(queryClient, threadListCacheKeys(mailboxesTouchedBy(request.action, request.mailboxId)));
+        const touched = new Set();
+        if (request.accountId)
+            touched.add(request.accountId);
+        if (request.source.kind === "targets") {
+            for (const target of request.source.targets) {
+                if (target.accountId)
+                    touched.add(target.accountId);
+            }
+        }
+        for (const accountId of touched) {
+            queryClient.invalidateQueries({
+                queryKey: mailboxOperationsListMailboxesQueryKey({
+                    path: { accountId },
+                }),
+            });
+        }
+    }, [queryClient]);
+    const start = useCallback(async (request) => {
+        const inFlight = liveRequestRef.current;
+        if (inFlight) {
+            return {
+                kind: "refused",
+                reason: bulkRunBusyRefusal(inFlight.action.kind, inFlight.matched, inFlight.mailboxLabel),
+            };
+        }
+        const token = Symbol("bulk-run");
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        liveRunRef.current = token;
+        liveRequestRef.current = request;
+        if (request.claimEnding) {
+            claimsRef.current.add(token);
+            request.claimEnding(() => claimsRef.current.delete(token));
+        }
+        setRun({
+            action: request.action,
+            mailboxId: request.mailboxId,
+            progress: { done: 0, total: request.matched },
+        });
+        // `honestProgress` widens `total` if `done` overtakes it (#109) — the
+        // predicate can match more by the time the run pages it than the count
+        // saw, and the bar must never show more done than out of.
+        const onProgress = (next) => {
+            if (liveRunRef.current !== token)
+                return;
+            setRun((held) => held ? { ...held, progress: honestProgress(next) } : held);
+        };
+        const outcome = request.source.kind === "targets"
+            ? await runChunkedAction(request.source.targets, request.applyBatch, onProgress, controller.signal)
+            : await runPredicateAction(request.source.fetchPage, request.matched, request.applyBatch, onProgress, controller.signal);
+        const reportedInPlace = claimsRef.current.delete(token);
+        if (liveRunRef.current === token) {
+            liveRunRef.current = undefined;
+            liveRequestRef.current = undefined;
+            setRun(undefined);
+        }
+        // A provenance refusal is answered by the appointment prompt exactly as
+        // it is on the single-row path (#887, #876). Left to the banner it
+        // arrives as the API's own sentence — "Appoint one under Settings ›
+        // Folder roles" — which asks the user to reassemble a select-all they
+        // have already made.
+        const refusal = outcome.error
+            ? isFolderRoleRefusal(outcome.error)
+            : undefined;
+        if (refusal) {
+            requestAppointment({
+                accountId: refusal.accountId,
+                role: refusal.role,
+                reason: refusal.reason,
+                action: { kind: "delete", count: request.matched },
+                // The replay is a new run, and it claims nothing: the claim the
+                // original was started under belongs to a screen whose release has
+                // already fired or never will for this run, so re-claiming would
+                // leave the replay's ending held back by nobody and never said.
+                onAppointed: async () => {
+                    const replayed = await startRef.current({
+                        ...request,
+                        claimEnding: undefined,
+                    });
+                    if (replayed.kind === "refused") {
+                        pushError({
+                            title: bulkActionFailureTitle(request.action.kind, 0),
+                            detail: replayed.reason,
+                        });
+                    }
+                },
+            });
+        }
+        else if (outcome.error) {
+            pushError(buildMutationErrorBanner(bulkActionFailureTitle(request.action.kind, outcome.done), bulkActionFailureDetail(request.action.kind), outcome.error));
+        }
+        else if (outcome.refused > 0) {
+            // One banner for the run, not one per chunk: a select-all is walked a
+            // hundred ids at a time, and a refusal in each would stack banners
+            // until the surface caps them. The count is the run's own total.
+            pushError({
+                severity: "warning",
+                title: outcome.refused > 1
+                    ? `Couldn't delete ${outcome.refused} of ${request.matched} messages yet`
+                    : "Couldn't delete this message yet",
+                detail: "Something else moved them while the delete was being prepared. They are back where they now sit — try again.",
+            });
+        }
+        // Nobody is left showing this run, so the ending is said where the user
+        // now is. A screen still reporting on it says it in place instead.
+        if (!reportedInPlace) {
+            request.reportEnding?.(request.action.kind, request.matched, outcome);
+        }
+        if (outcome.done > 0)
+            invalidateAfterRun(request);
+        return { kind: "ran", outcome };
+    }, [invalidateAfterRun, pushError, requestAppointment]);
+    startRef.current = start;
+    const stop = useCallback((mailboxId) => {
+        if (liveRequestRef.current?.mailboxId !== mailboxId)
+            return;
+        controllerRef.current?.abort();
+    }, []);
+    // A run belongs to the session that started it. Both auth shells gate the
+    // whole app on the session, so signing out or switching accounts takes this
+    // provider down with the router — and a run left paging past that would go on
+    // deleting mail for an account nobody is signed in to.
+    useEffect(() => {
+        const claims = claimsRef.current;
+        return () => {
+            controllerRef.current?.abort();
+            controllerRef.current = undefined;
+            liveRunRef.current = undefined;
+            liveRequestRef.current = undefined;
+            claims.clear();
+        };
+    }, []);
+    const value = useMemo(() => ({ run, start, stop }), [run, start, stop]);
+    return (_jsx(BulkRunContext.Provider, { value: value, children: children }));
+};
+export const useBulkRun = () => {
+    const context = useContext(BulkRunContext);
+    if (!context) {
+        throw new Error("useBulkRun must be used within a BulkRunProvider");
+    }
+    return context;
+};

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

@@ -0,0 +1,52 @@
+import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
+interface ConversationViewProps {
+    threadId: string;
+    mailboxId: string;
+    subject?: string;
+    /**
+     * The messageId of the row the user clicked in the thread list. When
+     * provided, this message is expanded on open (in addition to the newest
+     * message) so that viewing an older unread message marks it as read.
+     */
+    selectedMessageId?: string;
+    /**
+     * Authenticity signal from the thread row (DKIM mismatch). When present
+     * and `dkimMismatch` is true, a danger banner renders above the message
+     * body with a "Why?" link that opens the intelligence sidebar.
+     */
+    authenticity?: RemitImapMessageAuthenticity;
+    /**
+     * Callback for the "Why?" link in the authenticity banner — opens /
+     * focuses the intelligence sidebar.
+     */
+    onOpenIntelligence?: () => void;
+    /**
+     * Mobile callers pass `onBack` to render a sticky Back button at the
+     * bottom of the conversation. Desktop callers omit it — the message
+     * list is always visible in the resizable side pane.
+     */
+    onBack?: () => void;
+    /**
+     * Mobile only: swipe-left handler to open the next message in the list the
+     * thread was opened from. Omitted at the end of the list so the gesture
+     * no-ops gracefully.
+     */
+    onSwipeNext?: () => void;
+    /**
+     * Mobile only: swipe-right handler to open the previous message in the list.
+     * Omitted at the start of the list.
+     */
+    onSwipePrevious?: () => void;
+    /** Whether the intelligence drawer is currently open (drives the ⓘ button pressed state). */
+    mobileIntelligenceOpen?: boolean;
+    /**
+     * The message list is on screen beside this conversation, so it — not this
+     * pane — owns j/k, the arrows and Enter (`shortcut-tree`: those sit at
+     * `detail` only where no list is visible). Both used to act on the same
+     * press, moving two cursors at once (#723). Answering the conversation is
+     * unaffected: r, R and f are the open thread's at every width.
+     */
+    listOnScreen?: boolean;
+}
+export declare const ConversationView: ({ threadId, mailboxId, subject, selectedMessageId, authenticity, onOpenIntelligence, onBack, onSwipeNext, onSwipePrevious, mobileIntelligenceOpen, listOnScreen, }: ConversationViewProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,279 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { EmptyState, ErrorState, MobileReadingPane } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
+import { useMailboxAccount } from "../../hooks/useMailboxAccount";
+import { useMarkAsRead } from "../../hooks/useMarkAsRead";
+import { useIsDesktop } from "../../hooks/useMediaQuery";
+import { useToggleStar } from "../../hooks/useToggleStar";
+import { useOpenReply, useReplySurface } from "../../routing";
+import { ConversationCompose } from "../compose/ConversationCompose";
+import { AuthenticityBanner } from "./AuthenticityBanner";
+import { MessageCard } from "./MessageCard";
+const LoadingSkeleton = () => (_jsxs("div", { className: "animate-pulse p-4", children: [_jsx("div", { className: "h-6 bg-surface-sunken rounded w-3/4 mb-5" }), _jsx("div", { className: "space-y-4", children: Array.from({ length: 2 }).map((_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+            _jsxs("div", { className: "flex gap-3 py-3", children: [_jsx("div", { className: "size-10 bg-surface-sunken rounded-full shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "h-4 bg-surface-sunken rounded w-32 mb-2" }), _jsx("div", { className: "h-3 bg-surface-sunken rounded w-48" })] })] }, i))) })] }));
+export const ConversationView = ({ threadId, mailboxId, subject, selectedMessageId, authenticity, onOpenIntelligence, onBack, onSwipeNext, onSwipePrevious, mobileIntelligenceOpen, listOnScreen = false, }) => {
+    const isDesktop = useIsDesktop();
+    const { accountId: mailboxAccountId } = useMailboxAccount(mailboxId);
+    const { data: messagesResponse, isLoading, isError, error, refetch, } = useQuery({
+        // The API reads a conversation oldest first (#81) and no `order` is asked
+        // for: which turn came first is the thread's own fact, and which end of it
+        // the pane puts at the top is the pane's.
+        ...threadDetailOperationsListThreadMessagesOptions({
+            path: { threadId },
+        }),
+    });
+    const messages = useMemo(() => messagesResponse?.items ?? [], [messagesResponse?.items]);
+    const latestMessage = messages[messages.length - 1];
+    // Newest first, under the reply that answers it. The turn a reader came for
+    // is the last one, and reading it should not cost a scroll past everything
+    // that led to it.
+    const orderedMessages = useMemo(() => [...messages].reverse(), [messages]);
+    const messageRefs = useRef(new Map());
+    // Track which messages are expanded
+    // By default, the latest message is expanded
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const [currentThreadId, setCurrentThreadId] = useState(null);
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    // Reset and expand the latest message when thread changes or messages load.
+    // Also expand the selected message (the row the user clicked in the list)
+    // so that an older unread message is visible and gets marked as read.
+    useEffect(() => {
+        if (messages.length > 0 && threadId !== currentThreadId) {
+            setCurrentThreadId(threadId);
+            const initialExpanded = new Set([
+                messages[messages.length - 1].threadMessageId,
+            ]);
+            if (selectedMessageId) {
+                const selected = messages.find((m) => m.messageId === selectedMessageId);
+                if (selected)
+                    initialExpanded.add(selected.threadMessageId);
+            }
+            setExpandedIds(initialExpanded);
+            setFocusedIndex(0);
+        }
+    }, [threadId, messages, currentThreadId, selectedMessageId]);
+    const toggleExpanded = useCallback((threadMessageId) => {
+        setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(threadMessageId)) {
+                next.delete(threadMessageId);
+            }
+            else {
+                next.add(threadMessageId);
+            }
+            return next;
+        });
+    }, []);
+    // Scroll focused message into view. j and k walk the pane as it reads, so
+    // the index they move is over the displayed order, not the fetched one.
+    const scrollToMessage = useCallback((index) => {
+        const message = orderedMessages[index];
+        if (!message)
+            return;
+        const element = messageRefs.current.get(message.threadMessageId);
+        element?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }, [orderedMessages]);
+    // Keyboard navigation handlers
+    const focusNext = useCallback(() => {
+        if (orderedMessages.length === 0)
+            return;
+        const nextIndex = Math.min(focusedIndex + 1, orderedMessages.length - 1);
+        setFocusedIndex(nextIndex);
+        scrollToMessage(nextIndex);
+    }, [orderedMessages.length, focusedIndex, scrollToMessage]);
+    const focusPrevious = useCallback(() => {
+        if (orderedMessages.length === 0)
+            return;
+        const prevIndex = Math.max(focusedIndex - 1, 0);
+        setFocusedIndex(prevIndex);
+        scrollToMessage(prevIndex);
+    }, [orderedMessages.length, focusedIndex, scrollToMessage]);
+    const toggleFocusedMessage = useCallback(() => {
+        const message = orderedMessages[focusedIndex];
+        if (message) {
+            toggleExpanded(message.threadMessageId);
+        }
+    }, [orderedMessages, focusedIndex, toggleExpanded]);
+    // Mark messages as read immediately when expanded. The unread badge that has
+    // to be refreshed belongs to the account this mailbox is in, so the
+    // invalidation is scoped to that one rather than to the first configured
+    // account, whose list was being refetched while the right one went stale
+    // (#819).
+    useMarkAsRead({
+        messages,
+        expandedIds,
+        threadId,
+        mailboxId,
+        accountId: mailboxAccountId,
+    });
+    // Star toggle functionality
+    const { toggleStar, isPending: isStarPending, pendingMessageId, } = useToggleStar({
+        threadId,
+        mailboxId,
+        messages,
+    });
+    // The reply is a segment under the message it answers, so what is being
+    // written and which turn it answers are the address's to state. Nothing here
+    // keeps a second opinion about whether a composer is up.
+    const reply = useReplySurface();
+    const openReply = useOpenReply();
+    // Which turn a verb aimed at the whole conversation answers: the message the
+    // address names, or the latest turn when it names none. A per-message button
+    // passes its own instead, which the address could not express before this.
+    const answeredMessageId = selectedMessageId ?? latestMessage?.messageId;
+    const replyWith = useCallback((mode, messageId) => {
+        if (!messageId)
+            return;
+        openReply({ threadId, messageId, mode });
+    }, [openReply, threadId]);
+    const handleReply = useCallback(() => replyWith("reply", answeredMessageId), [replyWith, answeredMessageId]);
+    const handleReplyAll = useCallback(() => replyWith("reply-all", answeredMessageId), [replyWith, answeredMessageId]);
+    const handleForward = useCallback(() => replyWith("forward", answeredMessageId), [replyWith, answeredMessageId]);
+    // Compose opens at the head of the pane, which from halfway down a long
+    // thread is several screens up: without this, replying looks like nothing
+    // happening. Aligned on its top edge, where the recipients are, and left
+    // alone afterwards — it grows downward as it is written into, so following
+    // its height would pull the rows being typed into off the top.
+    //
+    // Keyed on what is being answered and how, not on the draft under it: the
+    // address gains a draft segment while the reader types, and scrolling there
+    // would move the pane mid-sentence.
+    const composeRef = useRef(null);
+    const answering = reply?.kind === "reply"
+        ? `${reply.mode}:${reply.sourceMessageId}`
+        : undefined;
+    useEffect(() => {
+        if (!answering)
+            return;
+        composeRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    }, [answering]);
+    // Register keyboard shortcuts
+    useKeyboardNavigation({
+        enabled: !isLoading && messages.length > 0 && reply === undefined,
+        bindings: [
+            // Left unbound rather than bound and guarded: an unbound key is never
+            // preventDefault-ed, so it reaches the list's own window listener
+            // instead of the two racing on one press.
+            ...(listOnScreen
+                ? []
+                : [
+                    {
+                        key: "j",
+                        action: "focusNext",
+                        handler: focusNext,
+                        preventDefault: true,
+                    },
+                    {
+                        key: "ArrowDown",
+                        action: "focusNext",
+                        handler: focusNext,
+                        preventDefault: true,
+                    },
+                    {
+                        key: "k",
+                        action: "focusPrevious",
+                        handler: focusPrevious,
+                        preventDefault: true,
+                    },
+                    {
+                        key: "ArrowUp",
+                        action: "focusPrevious",
+                        handler: focusPrevious,
+                        preventDefault: true,
+                    },
+                    {
+                        key: "Enter",
+                        action: "openFocused",
+                        handler: toggleFocusedMessage,
+                        preventDefault: true,
+                    },
+                    {
+                        key: "o",
+                        action: "openFocused",
+                        handler: toggleFocusedMessage,
+                        preventDefault: true,
+                    },
+                ]),
+            {
+                key: "r",
+                action: "reply",
+                handler: handleReply,
+                preventDefault: true,
+            },
+            {
+                key: "R",
+                action: "replyAll",
+                handler: handleReplyAll,
+                noModifiers: false,
+                preventDefault: true,
+            },
+            {
+                key: "f",
+                action: "forward",
+                handler: handleForward,
+                preventDefault: true,
+            },
+        ],
+    });
+    if (isLoading) {
+        return _jsx(LoadingSkeleton, {});
+    }
+    // A reply addressed over a conversation that never arrived says why the
+    // composer is not there, rather than repeating the read failure unchanged —
+    // otherwise pressing Reply on a failed thread changes the address and nothing
+    // on screen, which is the shape of a broken button.
+    if (isError) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(ErrorState, { title: reply
+                    ? "Couldn't load this conversation, so there is nothing to answer"
+                    : "Couldn't load this conversation", error: error, onRetry: () => refetch() }) }));
+    }
+    // An address naming a reply over a conversation with nothing in it says so.
+    // The mailbox is shared with other clients, so a thread can empty underneath
+    // the reader between opening it and answering it, and a composer that simply
+    // failed to appear reads as a broken button.
+    if (messages.length === 0) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: reply ? (_jsx(ErrorState, { variant: "inline", title: "There is nothing here to answer", error: "This conversation has no messages left. Another mail client may have moved or deleted them." })) : (_jsx(EmptyState, { message: "No messages in this thread" })) }));
+    }
+    const displaySubject = subject || messages[0]?.subject || "(No subject)";
+    const messageCount = messages.length;
+    // Message list wrapper — no extra x-padding; each MessageCard handles
+    // its own px-5 inset (matches the AppShell ReadingPane geometry). On mobile
+    // each expanded card owns a per-message action bar. Its reply verbs are
+    // wired whatever the account's SMTP state: compose is where an account that
+    // cannot send says so. A card's verb answers that card's message, which is
+    // the turn the address then names.
+    const renderMessages = (mobile) => (_jsx("div", { "data-testid": "conversation-messages", children: orderedMessages.map((message, index) => (_jsx("div", { ref: (el) => {
+                if (el)
+                    messageRefs.current.set(message.threadMessageId, el);
+            }, children: _jsx(MessageCard, { threadMessage: message, isExpanded: expandedIds.has(message.threadMessageId), isFocused: index === focusedIndex, onToggle: () => toggleExpanded(message.threadMessageId), onToggleStar: () => toggleStar(message.messageId, message.hasStars), isStarPending: isStarPending && pendingMessageId === message.messageId, accountId: mailboxAccountId, mobile: mobile, onReply: mobile ? () => replyWith("reply", message.messageId) : undefined, onReplyAll: mobile
+                    ? () => replyWith("reply-all", message.messageId)
+                    : undefined, onForward: mobile ? () => replyWith("forward", message.messageId) : undefined }) }, message.threadMessageId))) }));
+    // The reply leads the pane, above the turn it answers: what is being written
+    // is what the reader came back for, and it is not something to go looking
+    // for under a thread. It scrolls with the conversation rather than floating
+    // over it, so the pane has one scrollbar whether or not a reply is open.
+    //
+    // A segment naming no mode is a hand-typed address, and it says so where the
+    // composer would have been rather than opening nothing: the conversation
+    // behind it is still open and still readable.
+    const compose = reply && (_jsx("div", { ref: composeRef, children: reply.kind === "reply" ? (_jsx(ConversationCompose, { surface: reply })) : (_jsx("div", { className: "border-b border-line bg-canvas p-4", children: _jsx(ErrorState, { variant: "inline", title: "That is not a way to answer a message", error: `"${reply.segment}" is not reply, reply-all or forward.` }) })) }));
+    // Subject block: matches the AppShell ReadingPane reference exactly —
+    // px-5 pt-5 pb-3, text-lg leading-snug, 2xs count. Subject scrolls
+    // with the thread body; no subject in the toolbar chrome.
+    const header = (_jsxs("header", { className: "border-b border-line px-5 pt-5 pb-3", children: [_jsx("h1", { className: "max-w-2xl text-lg font-semibold leading-snug text-fg", children: displaySubject }), _jsxs("p", { className: "mt-1 text-2xs text-fg-subtle", children: [messageCount, " ", messageCount === 1 ? "message" : "messages"] })] }));
+    // Mobile: the kit MobileReadingPane owns the chrome — a top app bar with
+    // back, the email subject and the intelligence toggle (the host owns the
+    // drawer). Each expanded card owns its per-message action bar; there is no
+    // thread-level reply footer. The phishing warning leads the scroll content.
+    if (!isDesktop) {
+        return (_jsxs(MobileReadingPane, { thread: { subject: displaySubject, messages: [] }, onBack: onBack ?? (() => undefined), intelligenceOpen: mobileIntelligenceOpen, onToggleIntelligence: onOpenIntelligence, onSwipeNext: onSwipeNext, onSwipePrevious: onSwipePrevious, children: [authenticity?.dkimMismatch && (_jsx(AuthenticityBanner, { authenticity: authenticity, onOpenIntelligence: onOpenIntelligence })), compose, renderMessages(true)] }));
+    }
+    return (_jsxs("article", { className: "h-full flex flex-col", children: [header, authenticity?.dkimMismatch && (_jsx(AuthenticityBanner, { authenticity: authenticity, onOpenIntelligence: onOpenIntelligence })), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto", children: [compose, renderMessages(false)] })] }));
+};

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

@@ -0,0 +1,46 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { type SelectionRestriction, type ThreadRowData } from "@remit/ui";
+import { type RefObject } from "react";
+import type { TriageContextUpdate } from "../../hooks/useTriageLayer";
+import { type OpenThreadTarget } from "../../routing";
+import type { MessageListCommands } from "./MessageList";
+import { type OpenMessageOptions } from "./ThreadListInteraction";
+export interface BriefSelectionScope {
+    /** Owning account, when every selected row shares one. */
+    accountId?: string;
+    /** Source folder, when every selected row shares one. */
+    mailboxId?: string;
+    /** Which scope the selection spans more of than those verbs can take. */
+    restriction?: SelectionRestriction;
+    /** Why folder-scoped verbs are withheld, in the toolbar's own words. */
+    moveDisabledHint?: string;
+}
+/**
+ * The account and source folder a brief selection resolves to.
+ *
+ * The mailbox list gets these from the route and scopes Move, Apply label and
+ * Organize to them. The brief spans accounts and folders, so it resolves them
+ * from the selection itself and withholds those verbs — with the reason on
+ * screen — whenever the selection spans more than one. Delete and mark-read
+ * carry no such scope and are always offered.
+ *
+ * Pure so the guard is unit-testable without a DOM.
+ */
+export declare const resolveBriefSelectionScope: (rows: readonly ThreadRowData[], selectedIds: ReadonlySet<string>) => BriefSelectionScope;
+interface DailyBriefProps {
+    accounts: RemitImapAccountResponse[];
+    selectedMessageId?: string;
+    /**
+     * Opens a row. Every row the brief renders names its thread, so the row the
+     * search widened in from another folder opens by exactly the same route as one
+     * from the unified inbox.
+     */
+    onOpenThread?: (target: OpenThreadTarget, options?: OpenMessageOptions) => void;
+    /** Where the list publishes the commands the keyboard layer drives. */
+    commandsRef?: RefObject<MessageListCommands | null>;
+    /** Cursor / selection / display order, reported up to the triage layer. */
+    onTriageContextChange?: (context: TriageContextUpdate) => void;
+    onDeleteMessages: (messageIds: string[]) => void;
+}
+export declare function DailyBrief({ accounts, selectedMessageId, onOpenThread, commandsRef, onTriageContextChange, onDeleteMessages, }: DailyBriefProps): import("react").JSX.Element;
+export {};