@remit/web-client 0.0.324 → 0.0.326

package/dist/src/components/layout/MailShell.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppShellSlotted } from "@remit/ui";
+import { createContext, useContext } from "react";
+import { useIsComposing } from "../../routing";
+import { FullCompose } from "../compose/FullCompose";
+import { AppShellSkeleton } from "./AppShellSkeleton";
+const MailShellCtx = createContext(null);
+export const MailShellProvider = ({ chrome, children, }) => _jsx(MailShellCtx.Provider, { value: chrome, children: children });
+/**
+ * The shell a list route mounts around its own panes.
+ *
+ * Below the reading boundary the shell is one pane and takes `phone`, which
+ * swaps between the list and whatever is open in place. Above it the panes sit
+ * side by side and the reading and intelligence slots are filled.
+ *
+ * Compose is the one surface the single pane cannot take from the `Outlet`,
+ * because at this width there is no reading slot to fill. It is read off the
+ * address here rather than in each list's phone view, so the four lists cannot
+ * disagree about it.
+ */
+export function MailShell({ phone, list, reading, intelligence, hasThread = false, }) {
+    const chrome = useContext(MailShellCtx);
+    const isComposing = useIsComposing();
+    if (!chrome)
+        return _jsx(AppShellSkeleton, {});
+    const shared = {
+        nav: chrome.nav,
+        overlay: chrome.overlay,
+        skeleton: _jsx(AppShellSkeleton, {}),
+        isLoading: chrome.isLoading,
+        navOpen: chrome.navOpen,
+        onOpenNav: chrome.onOpenNav,
+        onCloseNav: chrome.onCloseNav,
+    };
+    if (chrome.isSinglePane) {
+        return (_jsx(AppShellSlotted, { ...shared, list: isComposing ? _jsx(FullCompose, {}) : phone, intelligenceOpen: chrome.intelligenceOpen }));
+    }
+    return (_jsx(AppShellSlotted, { ...shared, topBar: chrome.topBar, list: list, reading: reading, intelligence: intelligence, intelligenceOpen: chrome.intelligenceOpen, hasThread: hasThread }));
+}

package/dist/src/components/layout/MailTopBar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * MailTopBar — the `/mail` shell's top bar, wired to the app.
+ *
+ * The bar itself is `ShellTopBar` in the kit. This supplies what the kit cannot
+ * know: the search scope the route carries, the app's routes, its keymap and
+ * its signed-in session. Which actions the bar carries, in what order and with
+ * what wording is not decided here.
+ */
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+interface MailTopBarProps {
+    accounts: RemitImapAccountResponse[];
+}
+export declare function MailTopBar({ accounts }: MailTopBarProps): import("react").JSX.Element;
+export {};

package/dist/src/components/layout/MailTopBar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RefreshButton, ShellTopBar, shortcutHintForAction } from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { AccountMenu } from "../../auth/AccountMenu";
+import { useRefreshControl } from "../../hooks/useRefreshControl";
+import { useSearchScope } from "../../hooks/useSearchScope";
+import { useWarningsAttention } from "../../hooks/useWarningsAttention";
+import { openBugReport } from "../../lib/bug-report";
+import { useMailContext } from "../../lib/mail-context";
+import { useMailFreshness } from "../../lib/mail-freshness";
+import { invalidateThreadListQueries, threadListCacheKeys, } from "../../lib/thread-list-cache";
+import { useGoToSection, useOpenCompose } from "../../routing";
+export function MailTopBar({ accounts }) {
+    const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery, resultFolderIndex, } = useMailContext();
+    const queryClient = useQueryClient();
+    const goToSection = useGoToSection();
+    const compose = useOpenCompose();
+    const { scope, clearScope } = useSearchScope(accounts);
+    const settingsAttention = useWarningsAttention();
+    const chips = scope.kind === "scoped"
+        ? [{ id: scope.chip.id, label: scope.chip.label, tone: "scope" }]
+        : undefined;
+    // Every connected account — the global refresh's whole point, distinct from
+    // the account-scoped controls on the inbox and brief headers.
+    const allAccountIds = useMemo(() => accounts.map((account) => account.accountId), [accounts]);
+    const { hasNewMail } = useMailFreshness();
+    const { state: refreshState, errorMessage: refreshError, refresh, } = useRefreshControl(allAccountIds, {
+        // Without this the bar's refresh confirmed against a thread list it
+        // never reloaded: the sync landed, the button ticked, and the mail it
+        // fetched stayed off screen until something else invalidated the list.
+        // Every open account's folders, so whichever list is on screen reloads.
+        onSettled: () => invalidateThreadListQueries(queryClient, threadListCacheKeys(resultFolderIndex.keys())),
+    });
+    return (_jsx(ShellTopBar, { search: {
+            value: searchInput,
+            scope: scope.kind,
+            chips,
+            onChange: onSearchChange,
+            onClear: onSearchClear,
+            onClearQuery: onSearchClearQuery,
+            onRemoveChip: clearScope,
+        }, onCompose: compose, onReportBug: openBugReport, onOpenSettings: () => goToSection("accounts"), settingsAttention: settingsAttention, composeShortcut: shortcutHintForAction("compose"), refreshControl: _jsx(RefreshButton, { state: refreshState, onRefresh: refresh, label: "Refresh all accounts", errorMessage: refreshError, hasUpdate: hasNewMail(allAccountIds) }), account: _jsx(AccountMenu, {}) }));
+}

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

@@ -0,0 +1,14 @@
+import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
+/**
+ * Danger banner rendered above the thread body when DKIM mismatch is detected.
+ * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
+ * the body: 'This message claims to be a company but was sent from a personal
+ * mailbox.' with a 'Why?' link that opens/highlights this section."
+ *
+ * The link sits in the sentence at the sentence's own size. Set apart as
+ * smaller, right-floated chrome it read as a label rather than the way in.
+ */
+export declare function AuthenticityBanner({ authenticity, onOpenIntelligence, }: {
+    authenticity: RemitImapMessageAuthenticity;
+    onOpenIntelligence?: () => void;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShieldAlert } from "lucide-react";
+/**
+ * Danger banner rendered above the thread body when DKIM mismatch is detected.
+ * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
+ * the body: 'This message claims to be a company but was sent from a personal
+ * mailbox.' with a 'Why?' link that opens/highlights this section."
+ *
+ * The link sits in the sentence at the sentence's own size. Set apart as
+ * smaller, right-floated chrome it read as a label rather than the way in.
+ */
+export function AuthenticityBanner({ authenticity, onOpenIntelligence, }) {
+    if (!authenticity.dkimMismatch)
+        return null;
+    return (_jsxs("div", { className: "flex items-start gap-2 rounded-none border-b border-danger/20 bg-danger-soft px-5 py-2.5 text-sm", children: [_jsx(ShieldAlert, { className: "mt-0.5 size-4 shrink-0 text-danger" }), _jsxs("p", { className: "flex-1 leading-snug text-fg", children: ["This message claims to be from", " ", _jsx("span", { className: "font-semibold", children: authenticity.fromDomain }), " but was sent", authenticity.dkimDomain
+                        ? ` via ${authenticity.dkimDomain}`
+                        : " from a different domain", ".", " ", onOpenIntelligence && (_jsx("button", { type: "button", onClick: onOpenIntelligence, className: "font-medium text-danger hover:underline", children: "Why?" }))] })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { RemitImapAutoMovedInfo, RemitImapMessageSpamReport } from "@remit/api-http-client/types.gen.ts";
+interface AutoMovedIndicatorProps {
+    accountId: string | undefined;
+    messageId: string;
+    threadId: string;
+    mailboxId: string;
+    autoMoved: RemitImapAutoMovedInfo | undefined;
+    spamReport: RemitImapMessageSpamReport | undefined;
+}
+/**
+ * Renders the "auto-moved by Remit" / "Reported as spam" badge on the open
+ * message only while the underlying state is still in effect — see
+ * `useAutoMovedBadge`. Mailbox list rows deliberately do not show it: there
+ * the indicator is noise, and here it carries the Undo and Manage-filter
+ * actions. Mount this only when `autoMoved` or `spamReport` is present
+ * (callers gate with `threadMessage.autoMoved || threadMessage.spamReport`)
+ * so messages with neither never pay for the Inbox/Junk mailbox lookups.
+ */
+export declare function AutoMovedIndicator({ accountId, messageId, threadId, mailboxId, autoMoved, spamReport, }: AutoMovedIndicatorProps): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AutoMovedBadge } from "@remit/ui";
+import { useAutoMovedBadge } from "../../hooks/useAutoMovedBadge";
+/**
+ * Renders the "auto-moved by Remit" / "Reported as spam" badge on the open
+ * message only while the underlying state is still in effect — see
+ * `useAutoMovedBadge`. Mailbox list rows deliberately do not show it: there
+ * the indicator is noise, and here it carries the Undo and Manage-filter
+ * actions. Mount this only when `autoMoved` or `spamReport` is present
+ * (callers gate with `threadMessage.autoMoved || threadMessage.spamReport`)
+ * so messages with neither never pay for the Inbox/Junk mailbox lookups.
+ */
+export function AutoMovedIndicator({ accountId, messageId, threadId, mailboxId, autoMoved, spamReport, }) {
+    const badge = useAutoMovedBadge({
+        accountId,
+        messageId,
+        threadId,
+        mailboxId,
+        autoMoved,
+        spamReport,
+    });
+    if (!badge.show)
+        return null;
+    return (_jsx(AutoMovedBadge, { label: badge.label, onUndo: badge.onUndo, undoLabel: badge.isUndoing ? "Undoing…" : "Undo", filtersHref: badge.filtersHref }));
+}

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

@@ -0,0 +1,17 @@
+interface BlockedImagesNoticeProps {
+    blockedImageCount: number;
+    canAlwaysTrust: boolean;
+    isTrustPending: boolean;
+    /**
+     * The From-address carries the `blocked` flag. Blocking is a stronger
+     * instruction than "not trusted": images never load, "even on explicit
+     * click", so the bar states why the message is image-free instead of
+     * offering a way past it. The affordances are absent, never disabled — a
+     * dead button reads as broken (#943).
+     */
+    isSenderBlocked: boolean;
+    onLoadOnce: () => void;
+    onAlwaysTrust: () => void;
+}
+export declare const BlockedImagesNotice: ({ blockedImageCount, canAlwaysTrust, isTrustPending, isSenderBlocked, onLoadOnce, onAlwaysTrust, }: BlockedImagesNoticeProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noticeCopy = (blockedImageCount, isSenderBlocked) => {
+    const images = `${blockedImageCount} image${blockedImageCount > 1 ? "s" : ""}`;
+    if (isSenderBlocked)
+        return `${images} hidden — you blocked this sender`;
+    return `${images} blocked for privacy`;
+};
+export const BlockedImagesNotice = ({ blockedImageCount, canAlwaysTrust, isTrustPending, isSenderBlocked, onLoadOnce, onAlwaysTrust, }) => (_jsxs("div", { "data-testid": "blocked-images-notice", className: "mb-3 flex items-center justify-between rounded-md bg-surface-sunken/50 px-3 py-2 text-sm", children: [_jsx("span", { className: "text-fg-muted", children: noticeCopy(blockedImageCount, isSenderBlocked) }), !isSenderBlocked && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: onLoadOnce, className: "text-accent hover:underline", children: "Load once" }), canAlwaysTrust && (_jsx("button", { type: "button", onClick: onAlwaysTrust, "aria-busy": isTrustPending, className: "text-accent hover:underline aria-busy:opacity-50", children: isTrustPending ? "Trusting…" : "Always trust" }))] }))] }));

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+import { type OpenThreadPath } from "../../routing";
+interface BriefPaneProps {
+    /** The open conversation, as the address states it. */
+    thread: OpenThreadPath | undefined;
+    children: ReactNode;
+}
+declare function BriefPaneProvider({ thread, children }: BriefPaneProps): import("react").JSX.Element;
+/**
+ * Daily brief list. Mount in the `list` slot of `AppShellSlotted`.
+ */
+declare function BriefList(): import("react").JSX.Element;
+/**
+ * Brief reading pane: toolbar + ConversationView.
+ * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
+ */
+declare function BriefReading(): import("react").JSX.Element;
+/**
+ * Intelligence pane: IntelligencePane for the thread open in the brief.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+declare function BriefIntelligence(): import("react").JSX.Element;
+/**
+ * Phone view: ConversationView when thread is open, or the DailyBrief list.
+ */
+declare function BriefPhone(): import("react").JSX.Element;
+declare const BriefPane: typeof BriefPaneProvider & {
+    List: typeof BriefList;
+    Reading: typeof BriefReading;
+    Intelligence: typeof BriefIntelligence;
+    Phone: typeof BriefPhone;
+};
+export { BriefPane };

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

@@ -0,0 +1,255 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BriefPane — compound component for the daily brief.
+ *
+ * Usage in the list layout route:
+ *
+ *   <BriefPane thread={useOpenThreadPath()}>
+ *     <MailShell
+ *       list={<BriefPane.List />}
+ *       reading={<Outlet />}
+ *     />
+ *   </BriefPane>
+ *
+ * On phone, use `<BriefPane.Phone />` instead.
+ */
+import { unifiedThreadOperationsListAllThreadsOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ReadingPaneEmpty } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useMemo, } from "react";
+import { useDeleteMessages } from "../../hooks/useDeleteMessages";
+import { useIntelligenceDrawer } from "../../hooks/useIntelligenceDrawer";
+import { useIntelligenceSurface } from "../../hooks/useIntelligenceSurface";
+import { useToggleReadFor } from "../../hooks/useMarkAsRead";
+import { useThreadActions, } from "../../hooks/useThreadActions";
+import { useThreadRow } from "../../hooks/useThreadRow";
+import { useTriageContext, useTriageLayer, } from "../../hooks/useTriageLayer";
+import { useMailContext } from "../../lib/mail-context";
+import { replyToThread, useCloseThread, useGoToSection, useIsComposing, useIsReplying, useOpenReply, useOpenThread, } from "../../routing";
+import { useReplyWithText } from "../compose/reply-with-times";
+import { ConversationView } from "./ConversationView";
+import { DailyBrief } from "./DailyBrief";
+import { IntelligenceDrawer } from "./IntelligenceDrawer";
+import { IntelligencePane } from "./IntelligencePane";
+import { MessageToolbar } from "./MessageToolbar";
+const BriefPaneCtx = createContext(null);
+function useBriefPane() {
+    const ctx = useContext(BriefPaneCtx);
+    if (!ctx)
+        throw new Error("BriefPane.* must be used inside <BriefPane>");
+    return ctx;
+}
+function BriefPaneProvider({ thread, children }) {
+    const openThread = useOpenThread();
+    const closeThread = useCloseThread();
+    const goToSection = useGoToSection();
+    const { searchInput } = useMailContext();
+    const threadId = thread?.threadId;
+    const pointedAtMessageId = thread?.messageId;
+    const { data: threadsData } = useQuery({
+        ...unifiedThreadOperationsListAllThreadsOptions(),
+        staleTime: 60_000,
+    });
+    const briefThreads = useMemo(() => threadsData?.items ?? [], [threadsData]);
+    // The row the brief itself lists, preferred because a mutation patches it in
+    // place. A thread reached from a cross-folder search hit or a cold address is
+    // in no listing here, and answers for itself — which is where
+    // `selectedMailboxId` used to come in: the folder a thread is filed in is the
+    // thread's own data, so the brief spanning folders costs the URL nothing.
+    const listedThread = useMemo(() => {
+        if (!threadId)
+            return undefined;
+        return (briefThreads.find((t) => t.messageId === pointedAtMessageId) ??
+            briefThreads.find((t) => t.threadId === threadId));
+    }, [briefThreads, threadId, pointedAtMessageId]);
+    const ownRow = useThreadRow(threadId, pointedAtMessageId);
+    const selectedThread = listedThread ?? ownRow;
+    const selectedMessageId = pointedAtMessageId ?? selectedThread?.messageId;
+    const conversation = useMemo(() => {
+        if (!threadId)
+            return undefined;
+        return {
+            threadId,
+            mailboxId: selectedThread?.mailboxId ?? "",
+            subject: selectedThread?.subject,
+            messageId: selectedMessageId,
+            authenticity: selectedThread?.authenticity,
+        };
+    }, [threadId, selectedThread, selectedMessageId]);
+    const handleOpenThread = useCallback((target, options) => {
+        openThread(target, { replace: options?.replace, query: searchInput });
+    }, [openThread, searchInput]);
+    const handleDeselectIfRemoved = useCallback((removedIds) => {
+        if (!selectedMessageId)
+            return;
+        if (!removedIds.includes(selectedMessageId))
+            return;
+        closeThread();
+    }, [selectedMessageId, closeThread]);
+    const actions = useThreadActions({
+        thread: selectedThread,
+        isOpen: true,
+        onAfterOptimisticRemove: handleDeselectIfRemoved,
+    });
+    const triage = useTriageContext();
+    // A brief selection spans accounts and mailboxes, so the listings these
+    // patch are resolved from each message's own mailbox — the open thread's is
+    // only the fallback.
+    const { deleteMessages } = useDeleteMessages({
+        mailboxId: selectedThread?.mailboxId ?? "",
+        messages: briefThreads,
+        onAfterOptimisticRemove: handleDeselectIfRemoved,
+    });
+    const { toggleReadFor } = useToggleReadFor({
+        mailboxId: selectedThread?.mailboxId ?? "",
+        messages: briefThreads,
+    });
+    const focusedThreadId = triage.focusedMessageId;
+    const focusedThread = useMemo(() => briefThreads.find((t) => t.messageId === focusedThreadId), [briefThreads, focusedThreadId]);
+    const triageTarget = focusedThread ?? selectedThread;
+    const triageActions = useThreadActions({
+        thread: triageTarget,
+        isOpen: triageTarget?.messageId === selectedMessageId,
+    });
+    // The toolbar answers the conversation on screen; the keyboard answers the
+    // row the cursor is on, which may be one the address has not opened yet.
+    // Both are one navigation, because the mode and the message it answers are
+    // segments of the same address — there is no open-it-first step for the
+    // answering half to be dropped from.
+    const isComposing = useIsComposing();
+    const isReplying = useIsReplying();
+    const openReply = useOpenReply();
+    const replyToOpenThread = useMemo(() => replyToThread(openReply, threadId, selectedMessageId), [openReply, threadId, selectedMessageId]);
+    const replyToFocusedThread = useMemo(() => {
+        if (!triageTarget)
+            return undefined;
+        return (mode) => openReply({
+            threadId: triageTarget.threadId,
+            messageId: triageTarget.messageId,
+            mode,
+        });
+    }, [openReply, triageTarget]);
+    const { nextMessageId, previousMessageId } = useTriageLayer({
+        context: triage,
+        orderedIds: triage.orderedIds,
+        selectedMessageId,
+        // The list stays mounted under both writing surfaces, so the triage keys
+        // would otherwise fire at the message behind whatever is being typed — or
+        // answer a row the cursor moved to while a reply was open.
+        enabled: !isComposing && !isReplying,
+        hasOpenThread: threadId !== undefined,
+        onClose: closeThread,
+        handlers: {
+            reply: () => replyToFocusedThread?.("reply"),
+            replyAll: () => replyToFocusedThread?.("reply-all"),
+            forward: () => replyToFocusedThread?.("forward"),
+            // The list takes any verb aimed at its selection and opens the wizard
+            // on it, so a shortcut can never reach a bulk action the bar would have
+            // reviewed. What comes back here is a verb aimed at the bare cursor.
+            delete: () => {
+                if (triage.listCommandsRef.current?.requestVerb("delete"))
+                    return;
+                triageActions.deleteThread();
+            },
+            toggleStar: triageActions.toggleStar,
+            toggleRead: () => {
+                if (triage.listCommandsRef.current?.requestVerb("markRead"))
+                    return;
+                if (!triageTarget)
+                    return;
+                toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
+            },
+            goFlagged: () => goToSection("flagged"),
+            goSettings: () => goToSection("settings"),
+        },
+    });
+    // The swipe gestures open a whole conversation, so the adjacent row has to
+    // name its thread. The brief's own listing is where that is looked up, so a
+    // row it does not hold offers no gesture rather than a tap that goes nowhere.
+    const adjacentThread = useCallback((messageId) => {
+        if (!messageId)
+            return undefined;
+        const row = briefThreads.find((t) => t.messageId === messageId);
+        return row ? { threadId: row.threadId, messageId } : undefined;
+    }, [briefThreads]);
+    const ctx = {
+        selectedMessageId,
+        selectedThread,
+        conversation,
+        onOpenThread: handleOpenThread,
+        onCloseThread: closeThread,
+        nextThread: adjacentThread(nextMessageId),
+        previousThread: adjacentThread(previousMessageId),
+        actions,
+        onReply: replyToOpenThread,
+        triage,
+        onDeleteMessages: deleteMessages,
+        handleDeselectIfRemoved,
+    };
+    return _jsx(BriefPaneCtx.Provider, { value: ctx, children: children });
+}
+/* ------------------------------------------------------------------ */
+/* Sub-views                                                            */
+/* ------------------------------------------------------------------ */
+/**
+ * Daily brief list. Mount in the `list` slot of `AppShellSlotted`.
+ */
+function BriefList() {
+    const { selectedMessageId, onOpenThread, triage, onDeleteMessages } = useBriefPane();
+    const { accounts } = useMailContext();
+    return (_jsx(DailyBrief, { accounts: accounts, selectedMessageId: selectedMessageId, onOpenThread: onOpenThread, commandsRef: triage.listCommandsRef, onTriageContextChange: triage.onTriageContextChange, onDeleteMessages: onDeleteMessages }));
+}
+/**
+ * Brief reading pane: toolbar + ConversationView.
+ * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
+ */
+function BriefReading() {
+    const replyWithText = useReplyWithText();
+    const { conversation, selectedThread, actions, onReply, handleDeselectIfRemoved, onOpenThread, } = useBriefPane();
+    const hasThread = Boolean(conversation);
+    const intelligence = useIntelligenceSurface(conversation?.threadId);
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: "flex h-full w-full min-w-0 flex-col bg-canvas", children: [_jsx(MessageToolbar, { hasThread: hasThread, intelligenceOpen: intelligence.isShowing, canToggleIntelligence: intelligence.canToggle, onToggleIntelligence: intelligence.toggle, onReply: onReply ? () => onReply("reply") : undefined, onReplyAll: onReply ? () => onReply("reply-all") : undefined, onForward: onReply ? () => onReply("forward") : undefined, onDelete: hasThread ? actions.deleteThread : undefined, onToggleStar: hasThread ? actions.toggleStar : undefined, isStarred: actions.isStarred, moveContext: hasThread && actions.accountId && actions.mailboxId
+                            ? {
+                                accountId: actions.accountId,
+                                currentMailboxId: actions.mailboxId,
+                                onMove: actions.moveThread,
+                            }
+                            : undefined }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: conversation ? (_jsx(ConversationView, { threadId: conversation.threadId, mailboxId: conversation.mailboxId, subject: conversation.subject, selectedMessageId: conversation.messageId, authenticity: conversation.authenticity, onOpenIntelligence: intelligence.open, listOnScreen: true })) : (_jsx(ReadingPaneEmpty, {})) })] }), _jsx(IntelligenceDrawer, { isOpen: intelligence.drawerOpen, onClose: intelligence.closeDrawer, thread: selectedThread, accountId: selectedThread?.accountId, onAfterOptimisticRemove: handleDeselectIfRemoved, onReplyWithText: replyWithText, onOpenThread: onOpenThread })] }));
+}
+/**
+ * Intelligence pane: IntelligencePane for the thread open in the brief.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function BriefIntelligence() {
+    const replyWithText = useReplyWithText();
+    const { selectedThread, handleDeselectIfRemoved, onOpenThread } = useBriefPane();
+    const { onToggleIntelligence } = useMailContext();
+    return (_jsx(IntelligencePane, { onClose: onToggleIntelligence, thread: selectedThread, accountId: selectedThread?.accountId, onAfterOptimisticRemove: handleDeselectIfRemoved, onReplyWithText: replyWithText, onOpenThread: onOpenThread }));
+}
+/**
+ * Phone view: ConversationView when thread is open, or the DailyBrief list.
+ */
+function BriefPhone() {
+    const replyWithText = useReplyWithText();
+    const { selectedThread, conversation, onOpenThread, onCloseThread, nextThread, previousThread, handleDeselectIfRemoved, } = useBriefPane();
+    const drawer = useIntelligenceDrawer(conversation?.threadId ?? null);
+    if (conversation) {
+        return (_jsxs(_Fragment, { children: [_jsx(ConversationView, { threadId: conversation.threadId, mailboxId: conversation.mailboxId, subject: conversation.subject, selectedMessageId: conversation.messageId, authenticity: conversation.authenticity, onBack: onCloseThread, onOpenIntelligence: drawer.toggle, onSwipeNext: nextThread ? () => onOpenThread(nextThread) : undefined, onSwipePrevious: previousThread ? () => onOpenThread(previousThread) : undefined, mobileIntelligenceOpen: drawer.isOpen }), _jsx(IntelligenceDrawer, { isOpen: drawer.isOpen, onClose: drawer.close, thread: selectedThread, accountId: selectedThread?.accountId, onAfterOptimisticRemove: handleDeselectIfRemoved, onReplyWithText: replyWithText, onOpenThread: onOpenThread })] }));
+    }
+    // The same list slot the multi-pane layout mounts, so the phone brief wires
+    // the bulk verbs and the selection bar through `DailyBrief` exactly as the
+    // desktop list does. Rendering `DailyBrief` here directly dropped
+    // `onDeleteMessages`, so a phone selection raised no action bar (#203) — the
+    // same reuse `FlaggedPhone` already relies on.
+    return (_jsx("div", { className: "h-full", children: _jsx(BriefList, {}) }));
+}
+/* ------------------------------------------------------------------ */
+/* Compound component assembly                                          */
+/* ------------------------------------------------------------------ */
+const BriefPane = Object.assign(BriefPaneProvider, {
+    List: BriefList,
+    Reading: BriefReading,
+    Intelligence: BriefIntelligence,
+    Phone: BriefPhone,
+});
+export { BriefPane };

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

@@ -0,0 +1,90 @@
+import { type ReactNode } from "react";
+import { type ApplyBatch, type BulkActionProgress, type BulkActionTarget, type BulkRunOutcome, type BulkRunStart, type EscalatedAction, type FetchIdsPage } from "../../lib/bulk-actions";
+/**
+ * What the run pages, which is the one thing a bounded and an escalated run do
+ * differently: a ticked selection is a list of ids the surface already holds,
+ * an escalated one is a predicate the server re-resolves page by page.
+ */
+export type BulkRunSource = {
+    kind: "targets";
+    targets: readonly BulkActionTarget[];
+} | {
+    kind: "predicate";
+    fetchPage: FetchIdsPage;
+};
+export interface BulkRunRequest {
+    action: EscalatedAction;
+    /** The mailbox the run belongs to — where its progress shows on return. */
+    mailboxId: string;
+    /** That mailbox in the user's words, for a refusal that names this run. */
+    mailboxLabel?: string;
+    /** Owning account, for the unseen-count invalidation on completion. */
+    accountId: string | undefined;
+    /** The count the run was offered against, for the bar and for the ending. */
+    matched: number;
+    source: BulkRunSource;
+    /** Issues one batch of the action. Closed over the SDK, never over a screen. */
+    applyBatch: ApplyBatch;
+    /**
+     * States how the run ended, once no screen is left reporting on it in place.
+     * Called by the provider rather than by the caller, so an ending that lands
+     * after the surface unmounted is still said out loud (#112). Absent on a
+     * surface with nowhere to say it.
+     */
+    reportEnding?: (kind: EscalatedAction["kind"], matched: number, outcome: BulkRunOutcome) => void;
+    /**
+     * Handed the release for this run's ending, for a screen that is showing the
+     * ending itself. The claim is made inside `start`, for the run it starts, so
+     * a commit that starts no run holds nothing over the ending of one that is
+     * already going (#112). Released when that screen goes.
+     */
+    claimEnding?: (release: () => void) => void;
+}
+/** A run in flight, as any screen reads it. */
+export interface ActiveBulkRun {
+    action: EscalatedAction;
+    mailboxId: string;
+    /** Seeded from the count the run was offered against, so the bar has a
+     *  denominator before the first batch comes back. */
+    progress: BulkActionProgress;
+}
+interface BulkRunContextValue {
+    run: ActiveBulkRun | undefined;
+    /**
+     * Runs `request`, or refuses it because one is already going. There is one
+     * slot: a second run would page behind the first's bar and answer to the
+     * first's Stop, so it is refused with the run in flight named rather than
+     * queued or started alongside.
+     */
+    start: (request: BulkRunRequest) => Promise<BulkRunStart>;
+    /**
+     * Ends the run `mailboxId` owns: the request on the wire is aborted and
+     * nothing more leaves. A stop aimed at any other mailbox is not this run's,
+     * and reaches nothing.
+     */
+    stop: (mailboxId: string) => void;
+}
+/**
+ * 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 declare const BulkRunProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useBulkRun: () => BulkRunContextValue;
+export {};