@remit/web-client 0.0.325 → 0.0.326

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

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ReadingPaneEmpty } from "@remit/ui";
+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 { useStarredThreads } from "../../hooks/useStarredThreads";
+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 { FlaggedList } from "./FlaggedList";
+import { IntelligenceDrawer } from "./IntelligenceDrawer";
+import { IntelligencePane } from "./IntelligencePane";
+import { MessageToolbar } from "./MessageToolbar";
+const FlaggedPaneCtx = createContext(null);
+function useFlaggedPane() {
+    const ctx = useContext(FlaggedPaneCtx);
+    if (!ctx)
+        throw new Error("FlaggedPane.* must be used inside <FlaggedPane>");
+    return ctx;
+}
+function FlaggedPaneProvider({ thread, children }) {
+    const openThread = useOpenThread();
+    const closeThread = useCloseThread();
+    const goToSection = useGoToSection();
+    const { searchInput } = useMailContext();
+    const threadId = thread?.threadId;
+    const pointedAtMessageId = thread?.messageId;
+    const { threads } = useStarredThreads();
+    // The row the starred listing itself holds, preferred because a mutation
+    // patches it in place. A thread reached from a cold address is in no listing
+    // here and answers for itself — the folder it is filed in is the thread's own
+    // data, so Starred spanning folders costs the URL nothing.
+    const listedThread = useMemo(() => {
+        if (!threadId)
+            return undefined;
+        return (threads.find((t) => t.messageId === pointedAtMessageId) ??
+            threads.find((t) => t.threadId === threadId));
+    }, [threads, 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 Flagged 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: threads,
+        onAfterOptimisticRemove: handleDeselectIfRemoved,
+    });
+    const { toggleReadFor } = useToggleReadFor({
+        mailboxId: selectedThread?.mailboxId ?? "",
+        messages: threads,
+    });
+    const focusedThreadId = triage.focusedMessageId;
+    const focusedThread = useMemo(() => threads.find((t) => t.messageId === focusedThreadId), [threads, 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);
+            },
+            goBrief: () => goToSection("brief"),
+            goSettings: () => goToSection("settings"),
+        },
+    });
+    // The swipe gestures open a whole conversation, so the adjacent row has to
+    // name its thread. The starred 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 = threads.find((t) => t.messageId === messageId);
+        return row ? { threadId: row.threadId, messageId } : undefined;
+    }, [threads]);
+    const ctx = {
+        selectedMessageId,
+        selectedThread,
+        conversation,
+        onOpenThread: handleOpenThread,
+        onCloseThread: closeThread,
+        nextThread: adjacentThread(nextMessageId),
+        previousThread: adjacentThread(previousMessageId),
+        actions,
+        onReply: replyToOpenThread,
+        triage,
+        onDeleteMessages: deleteMessages,
+        handleDeselectIfRemoved,
+    };
+    return (_jsx(FlaggedPaneCtx.Provider, { value: ctx, children: children }));
+}
+/* ------------------------------------------------------------------ */
+/* Sub-views                                                            */
+/* ------------------------------------------------------------------ */
+/** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
+function FlaggedListSlot() {
+    const { selectedMessageId, onOpenThread, triage, onDeleteMessages } = useFlaggedPane();
+    return (_jsx(FlaggedList, { selectedMessageId: selectedMessageId, onOpenThread: onOpenThread, commandsRef: triage.listCommandsRef, onTriageContextChange: triage.onTriageContextChange, onDeleteMessages: onDeleteMessages }));
+}
+/**
+ * Reading pane: toolbar + ConversationView.
+ * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
+ */
+function FlaggedReading() {
+    const replyWithText = useReplyWithText();
+    const { conversation, selectedThread, actions, onReply, handleDeselectIfRemoved, onOpenThread, } = useFlaggedPane();
+    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 open thread.
+ * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
+ */
+function FlaggedIntelligence() {
+    const replyWithText = useReplyWithText();
+    const { selectedThread, handleDeselectIfRemoved, onOpenThread } = useFlaggedPane();
+    const { onToggleIntelligence } = useMailContext();
+    return (_jsx(IntelligencePane, { onClose: onToggleIntelligence, thread: selectedThread, accountId: selectedThread?.accountId, onAfterOptimisticRemove: handleDeselectIfRemoved, onReplyWithText: replyWithText, onOpenThread: onOpenThread }));
+}
+/** Phone view: ConversationView when a thread is open, else the flat list. */
+function FlaggedPhone() {
+    const replyWithText = useReplyWithText();
+    const { selectedThread, conversation, onCloseThread, onOpenThread, nextThread, previousThread, handleDeselectIfRemoved, } = useFlaggedPane();
+    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 })] }));
+    }
+    return (_jsx("div", { className: "h-full", children: _jsx(FlaggedListSlot, {}) }));
+}
+/* ------------------------------------------------------------------ */
+/* Compound component assembly                                          */
+/* ------------------------------------------------------------------ */
+const FlaggedPane = Object.assign(FlaggedPaneProvider, {
+    List: FlaggedListSlot,
+    Reading: FlaggedReading,
+    Intelligence: FlaggedIntelligence,
+    Phone: FlaggedPhone,
+});
+export { FlaggedPane };

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

@@ -0,0 +1,19 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { OpenThreadTarget } from "../../routing";
+import type { ReplyWithText } from "../compose/reply-with-times";
+/**
+ * The intelligence pane as a modal drawer — the surface every list pane uses
+ * wherever the rail has no room, which is the phone and the two-pane desktop
+ * band between 1024 and 1280px. Its open state is the caller's
+ * (`useIntelligenceSurface`); what is inside it is the same panel the rail
+ * mounts, minus its own close, because the drawer's header already carries one.
+ */
+export declare function IntelligenceDrawer({ isOpen, onClose, thread, accountId, onAfterOptimisticRemove, onReplyWithText, onOpenThread, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    thread?: RemitImapThreadMessageResponse;
+    accountId?: string;
+    onAfterOptimisticRemove?: (messageIds: string[]) => void;
+    onReplyWithText?: ReplyWithText;
+    onOpenThread?: (target: OpenThreadTarget) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer } from "../layout/Drawer";
+import { IntelligencePane } from "./IntelligencePane";
+/**
+ * The intelligence pane as a modal drawer — the surface every list pane uses
+ * wherever the rail has no room, which is the phone and the two-pane desktop
+ * band between 1024 and 1280px. Its open state is the caller's
+ * (`useIntelligenceSurface`); what is inside it is the same panel the rail
+ * mounts, minus its own close, because the drawer's header already carries one.
+ */
+export function IntelligenceDrawer({ isOpen, onClose, thread, accountId, onAfterOptimisticRemove, onReplyWithText, onOpenThread, }) {
+    return (_jsx(Drawer, { isOpen: isOpen, onClose: onClose, ariaLabel: "Message details", side: "right", 
+        // The key that raised it takes it away again (#840); every other verb
+        // stays with the list behind the scrim, which is not the subject here.
+        answers: { toggleIntelligence: onClose }, children: _jsx(IntelligencePane, { onClose: onClose, thread: thread, accountId: accountId, hideCloseButton: true, onAfterOptimisticRemove: onAfterOptimisticRemove, onReplyWithText: onReplyWithText, onOpenThread: onOpenThread }) }));
+}

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

@@ -0,0 +1,59 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { OpenThreadTarget } from "../../routing";
+import type { ReplyWithText } from "../compose/reply-with-times";
+export interface IntelligencePaneProps {
+    onClose: () => void;
+    /**
+     * The currently selected thread row. When present, the real
+     * `IntelligencePanel` renders with wired data; when absent the pane shows
+     * the empty-state placeholder.
+     */
+    thread?: RemitImapThreadMessageResponse;
+    /** Account that owns the open message; scopes mailbox-list cache invalidation after a spam-report mutation. */
+    accountId?: string;
+    /**
+     * Hide the panel's own close (X). Set when hosted inside the mobile Drawer,
+     * whose header already renders a close button — one way back, not two (#874).
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Called once a "Report spam" / "Not spam" press succeeds, with the acted-on
+     * message id. The host's own `handleDeselectIfRemoved` (already wired into
+     * `useMoveMessages`/`useDeleteMessages` for the same reason) belongs here
+     * too: the panel's `thread` prop is a list-derived snapshot the host stops
+     * refreshing once the row leaves the list it's watching, so without this a
+     * reported message keeps rendering "Report spam" here forever, even while
+     * the reading pane's own per-thread query — a different cache — already
+     * shows "Reported as spam · Undo" (issue #648 review). Fires on every
+     * success, no-op included: neither endpoint says whether the message
+     * actually left the list, so a no-op report/undo also deselects even
+     * though the row never moved. That is a real, accepted trade — an
+     * occasional unneeded pane-close — not a bug; see `useReportSpam`.
+     */
+    onAfterOptimisticRemove?: (messageIds: string[]) => void;
+    onReplyWithText?: ReplyWithText;
+    onOpenThread?: (target: OpenThreadTarget) => void;
+}
+/**
+ * Decide which spam quick-action to offer for the current message (issue #648).
+ *
+ * Driven entirely by `Message.spamReport`, never by which mailbox the message
+ * is currently in: reporting a message that's already in Junk (the provider's
+ * own filter put it there) is a real, no-op-move case, so mailbox membership
+ * cannot stand in for "has this been reported". A message that carries a
+ * report offers the undo ("Not spam"); everything else offers "Report spam".
+ * Pure so the wiring decision can be unit-tested without rendering.
+ */
+export declare const resolveSpamAction: (thread: {
+    spamReport?: unknown;
+}) => "notSpam" | "reportSpam";
+/**
+ * Pane 4 of the 4-pane shell: the intelligence sidebar. Wired to real data via
+ * `useIntelligenceData`; renders the `IntelligencePanel` from `@remit/ui`.
+ *
+ * Data flow:
+ * - Sender basics + trust + authenticity + category: from the thread row (instant,
+ *   already loaded by the message list).
+ * - Address flags (VIP/muted/blocked/etc.) + first-seen: `GET /addresses/search`.
+ */
+export declare const IntelligencePane: ({ onClose, thread, accountId, hideCloseButton, onAfterOptimisticRemove, onReplyWithText, onOpenThread, }: IntelligencePaneProps) => import("react").JSX.Element;

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

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CATEGORY_PRESENTATION, categoryLabels, DialogBackdrop, IntelligencePanel, useModalFocus, } from "@remit/ui";
+import { Sparkles } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { useIntelligenceCalendar } from "../../hooks/useIntelligenceCalendar";
+import { useIntelligenceData } from "../../hooks/useIntelligenceData";
+import { useReportSpam } from "../../hooks/useReportSpam";
+import { useUpdateAddressFlags } from "../../hooks/useUpdateAddressFlags";
+import { isRescueCandidate } from "../../lib/rescue-candidates";
+import { recordRescueSentToJunk } from "../../lib/rescue-telemetry";
+import { useTelemetry } from "../../lib/telemetry-context";
+const isCategoryOverride = (category) => category !== "uncategorized";
+const CATEGORY_OVERRIDES = CATEGORY_PRESENTATION.map((entry) => entry.category).filter(isCategoryOverride);
+/**
+ * Decide which spam quick-action to offer for the current message (issue #648).
+ *
+ * Driven entirely by `Message.spamReport`, never by which mailbox the message
+ * is currently in: reporting a message that's already in Junk (the provider's
+ * own filter put it there) is a real, no-op-move case, so mailbox membership
+ * cannot stand in for "has this been reported". A message that carries a
+ * report offers the undo ("Not spam"); everything else offers "Report spam".
+ * Pure so the wiring decision can be unit-tested without rendering.
+ */
+export const resolveSpamAction = (thread) => (thread.spamReport ? "notSpam" : "reportSpam");
+function IntelligenceSkeleton() {
+    return (_jsxs("aside", { className: "flex h-full w-full flex-col bg-surface-sunken", children: [_jsxs("header", { className: "flex h-pane-header shrink-0 items-center gap-1.5 border-b border-line px-row-inset", children: [_jsx(Sparkles, { className: "size-3.5 text-fg-subtle" }), _jsx("span", { className: "text-2xs font-semibold uppercase tracking-wider text-fg-subtle", children: "Intelligence" })] }), _jsxs("div", { className: "flex-1 animate-pulse space-y-4 p-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-2.5 rounded bg-surface w-1/4" }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "size-10 rounded-full bg-surface shrink-0" }), _jsxs("div", { className: "flex-1 space-y-1.5", children: [_jsx("div", { className: "h-3 rounded bg-surface w-3/4" }), _jsx("div", { className: "h-2.5 rounded bg-surface w-1/2" })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-2.5 rounded bg-surface w-1/4" }), _jsx("div", { className: "h-8 rounded bg-surface" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-2.5 rounded bg-surface w-1/4" }), _jsx("div", { className: "flex gap-1.5 flex-wrap", children: Array.from({ length: 5 }).map((_, i) => (
+                                // biome-ignore lint/suspicious/noArrayIndexKey: list is static, no stable id
+                                _jsx("div", { className: "h-6 w-16 rounded bg-surface" }, i))) })] })] })] }));
+}
+/**
+ * Reclassify picker: a small modal listing the category-override options. On
+ * selection it PATCHes `AddressFlags.category` for the sender.
+ *
+ * A sender that already carries an override also gets the way back out. The
+ * override is an enum with no false-equivalent member, so removal is not a
+ * value to send — it is `clearFlags: ["category"]`, the contract's removal
+ * form for every flag (#615).
+ */
+function ReclassifyDialog({ isOpen, current, hasOverride, onSelect, onClear, onCancel, }) {
+    const dialogRef = useRef(null);
+    useModalFocus(dialogRef, isOpen);
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx(DialogBackdrop, { label: "Dismiss reclassify sender", onDismiss: onCancel, className: "backdrop-blur-sm" }), _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": "Reclassify sender", tabIndex: -1, className: "relative z-10 w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Reclassify this sender" }), _jsx("p", { className: "mt-2 text-sm text-fg-muted", children: "Set a category override for future messages from this sender." }), _jsxs("div", { className: "mt-4 flex flex-col gap-1", children: [CATEGORY_OVERRIDES.map((cat) => (_jsxs("button", { type: "button", onClick: () => onSelect(cat), className: `flex min-h-11 items-center justify-between rounded px-3 text-left text-sm transition-colors hover:bg-surface-raised ${cat === current ? "font-semibold text-accent" : "text-fg"}`, children: [categoryLabels[cat], cat === current && (_jsx("span", { className: "text-2xs text-fg-subtle", children: "current" }))] }, cat))), hasOverride && (_jsx("button", { type: "button", onClick: onClear, className: "mt-1 flex min-h-11 items-center rounded border-t border-line px-3 text-left text-sm text-fg transition-colors hover:bg-surface-raised", children: "Remove override \u2014 classify automatically again" }))] }), _jsx("div", { className: "mt-6 flex justify-end", children: _jsx("button", { type: "button", onClick: onCancel, className: "inline-flex min-h-11 items-center justify-center rounded border border-line px-4 text-sm font-medium transition-colors hover:bg-surface-raised", children: "Cancel" }) })] })] }));
+}
+/**
+ * Inner panel that resolves intelligence data and wires quick-action mutations.
+ */
+function WiredPanel({ thread, onClose, accountId, hideCloseButton, onAfterOptimisticRemove, onReplyWithText, onOpenThread, }) {
+    const { data, address, addressId } = useIntelligenceData(thread);
+    const calendar = useIntelligenceCalendar(thread, onReplyWithText, onOpenThread);
+    const [reclassifyOpen, setReclassifyOpen] = useState(false);
+    const senderEmail = thread.fromEmail ?? undefined;
+    const { updateFlags, clearFlags } = useUpdateAddressFlags({
+        addressId,
+        senderEmail,
+    });
+    // "Report spam" / "Not spam" are a contextual pair, decided by whether the
+    // message carries a spam report — never by the mailbox it's in (issue #648).
+    const { reportSpam, notSpam, isReporting, isRestoring } = useReportSpam({
+        mailboxId: thread.mailboxId,
+        threadId: thread.threadId,
+        accountId,
+        onAfterOptimisticRemove,
+    });
+    const telemetry = useTelemetry();
+    const spamAction = resolveSpamAction(thread);
+    const handleNotSpam = useCallback(() => {
+        notSpam([thread.messageId]);
+    }, [notSpam, thread.messageId]);
+    const handleReportSpam = useCallback(() => {
+        recordRescueSentToJunk(telemetry, {
+            count: 1,
+            senderTrust: thread.senderTrust,
+            wasRescuable: isRescueCandidate(thread),
+        });
+        reportSpam([thread.messageId]);
+    }, [reportSpam, thread, telemetry]);
+    const handleToggleVip = useCallback(() => {
+        const next = !(data?.flags?.vip === true);
+        updateFlags({ vip: { value: next } });
+    }, [data?.flags?.vip, updateFlags]);
+    const handleToggleMute = useCallback(() => {
+        const next = !(data?.flags?.muted === true);
+        updateFlags({ muted: { value: next } });
+    }, [data?.flags?.muted, updateFlags]);
+    const handleReclassifySelect = useCallback((category) => {
+        setReclassifyOpen(false);
+        updateFlags({ category: { value: category } });
+    }, [updateFlags]);
+    const handleReclassifyClear = useCallback(() => {
+        setReclassifyOpen(false);
+        clearFlags(["category"]);
+    }, [clearFlags]);
+    // Every per-sender flag toggle PATCHes the sender's address row, so none of
+    // them can be serviced until that row resolves. Leave them unwired until it
+    // does: the panel renders an unwired quick action as disabled, so the flow is
+    // never reachable in a state where a click can only fail (issue #51).
+    const canUpdateFlags = addressId !== undefined;
+    const actions = {
+        onToggleVip: canUpdateFlags ? handleToggleVip : undefined,
+        onToggleMute: canUpdateFlags ? handleToggleMute : undefined,
+        onReclassify: canUpdateFlags ? () => setReclassifyOpen(true) : undefined,
+        onNotSpam: spamAction === "notSpam" ? handleNotSpam : undefined,
+        onReportSpam: spamAction === "reportSpam" ? handleReportSpam : undefined,
+    };
+    if (!data) {
+        return _jsx(IntelligenceSkeleton, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(IntelligencePanel, { data: data, calendar: calendar.surface, tab: calendar.tab, onTabChange: calendar.onTabChange, onClose: onClose, hideCloseButton: hideCloseButton, actions: actions, reportSpamPending: isReporting, notSpamPending: isRestoring, 
+                // No left border: the ResizableHandle to our left already draws the
+                // hairline seam. The remit-ui IntelligencePanel default `border-l`
+                // would double it to 2px.
+                className: "border-l-0 h-full w-full" }), _jsx(ReclassifyDialog, { isOpen: reclassifyOpen, current: data.category.value, hasOverride: address?.flags?.category?.value != null, onSelect: handleReclassifySelect, onClear: handleReclassifyClear, onCancel: () => setReclassifyOpen(false) })] }));
+}
+/**
+ * Pane 4 of the 4-pane shell: the intelligence sidebar. Wired to real data via
+ * `useIntelligenceData`; renders the `IntelligencePanel` from `@remit/ui`.
+ *
+ * Data flow:
+ * - Sender basics + trust + authenticity + category: from the thread row (instant,
+ *   already loaded by the message list).
+ * - Address flags (VIP/muted/blocked/etc.) + first-seen: `GET /addresses/search`.
+ */
+export const IntelligencePane = ({ onClose, thread, accountId, hideCloseButton, onAfterOptimisticRemove, onReplyWithText, onOpenThread, }) => {
+    if (!thread) {
+        return (_jsxs("aside", { className: "flex h-full w-full flex-col bg-surface-sunken", children: [_jsxs("header", { className: "flex h-pane-header shrink-0 items-center gap-1.5 border-b border-line px-row-inset", children: [_jsx(Sparkles, { className: "size-3.5 text-fg-subtle" }), _jsx("span", { className: "text-2xs font-semibold uppercase tracking-wider text-fg-subtle", children: "Intelligence" })] }), _jsxs("div", { className: "flex flex-1 flex-col items-center justify-center px-row-inset text-center", children: [_jsx(Sparkles, { className: "size-8 text-fg-subtle" }), _jsx("p", { className: "mt-3 text-sm text-fg-muted", children: "Intelligence" }), _jsx("p", { className: "mt-1 text-2xs text-fg-subtle", children: "Sender trust and authenticity will appear here." })] })] }));
+    }
+    return (_jsx(WiredPanel, { thread: thread, onClose: onClose, accountId: accountId, hideCloseButton: hideCloseButton, onAfterOptimisticRemove: onAfterOptimisticRemove, onReplyWithText: onReplyWithText, onOpenThread: onOpenThread }));
+};

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

@@ -0,0 +1,15 @@
+interface LabelApplyTriggerProps {
+    accountId: string;
+    mailboxId: string;
+    messageIds: string[];
+}
+/**
+ * "Apply label" for a selection — the manual "just these" scope (issue #26,
+ * RFC 034 recap). A worded row at the foot of the selection bar's overflow
+ * menu, opening the account's labels; picking one applies it to every selected
+ * message. Renders nothing when the account has no labels yet — an empty menu
+ * offering only "create one in Settings" is dead weight; Settings › Labels is
+ * where creation lives.
+ */
+export declare function LabelApplyTrigger({ accountId, mailboxId, messageIds, }: LabelApplyTriggerProps): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isLabelColorValue, labelDotClass, PopoverMenu, } from "@remit/ui";
+import { Tag } from "lucide-react";
+import { useMemo } from "react";
+import { useApplyLabel } from "../../hooks/useApplyLabel";
+import { useLabelList } from "../../hooks/useLabels";
+/**
+ * "Apply label" for a selection — the manual "just these" scope (issue #26,
+ * RFC 034 recap). A worded row at the foot of the selection bar's overflow
+ * menu, opening the account's labels; picking one applies it to every selected
+ * message. Renders nothing when the account has no labels yet — an empty menu
+ * offering only "create one in Settings" is dead weight; Settings › Labels is
+ * where creation lives.
+ */
+export function LabelApplyTrigger({ accountId, mailboxId, messageIds, }) {
+    const { labels } = useLabelList(accountId);
+    const { applyLabel } = useApplyLabel({ accountId, mailboxId });
+    const items = useMemo(() => labels.map((label) => ({
+        key: label.labelId,
+        label: label.name,
+        icon: (_jsx("span", { className: `size-2.5 rounded-full ${isLabelColorValue(label.color)
+                ? labelDotClass[label.color]
+                : labelDotClass.Default}` })),
+        onSelect: () => applyLabel(messageIds, label.labelId, "Apply"),
+    })), [labels, messageIds, applyLabel]);
+    if (items.length === 0)
+        return null;
+    return (_jsx(PopoverMenu, { triggerLabel: "Apply label to selected messages", triggerIcon: _jsx(Tag, { className: "size-4 text-fg-subtle" }), triggerText: "Apply label", items: items, align: "start", nested: true, touch: false, triggerClassName: "min-h-11 w-full justify-start gap-3 px-4 py-2.5 text-sm font-normal text-fg" }));
+}

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

@@ -0,0 +1,102 @@
+/**
+ * MailListHeader — the header-only list-pane shell shared by every list view.
+ *
+ * Composes the kit `MailHeader` (hamburger + title + unread + search) and the
+ * `<section>` column shell with an optional pinned footer. It owns no filter
+ * surface: the daily brief lets the kit `BriefSections` own the filter row,
+ * while `MailViewChrome` slots a `FilterSheet` into the body for the inbox /
+ * flagged views.
+ *
+ * Search comes from `MailContext` (one source of truth, mirrored to the URL).
+ * On phone the magnifier opens a full-screen `MobileSearchView` takeover instead
+ * of expanding over the title; tablet and desktop keep the inline header search
+ * and, once a query is present, swap the list-pane body to the same kit
+ * `SearchResults` sections. Consumers feed the filter chrome and query-narrowed
+ * results; both tiers render identical rows.
+ *
+ * The field offers what the search API can be told: token names for a bare word,
+ * that token's values once its name is committed. The list sits under the field
+ * on both tiers, in flow, so it takes its own space instead of covering the
+ * query it completes.
+ *
+ * An active query owns the pane. The filter chrome is not rendered while one is
+ * present — the two narrow the same list by the same intent and would sit in the
+ * same place — and its place is taken by `MakeFilterAction`, which the pane mounts
+ * itself so it is there for every search on every view, whichever body is showing
+ * the results.
+ *
+ * Results render as one section; an empty section drops out kit-side. The
+ * hamburger opens the nav drawer via the enclosing `AppShellSlotted`.
+ *
+ * This is also the one place the route's scope reaches the results list, so both
+ * tiers agree on it: a global search labels every row with the folder it came
+ * from and offers the spam it held out, and a scoped search does neither. See
+ * `resultsScopeForRoute` and `lib/spam-offer.ts`.
+ */
+import { type FilterSheetProps, type SearchResult } from "@remit/ui";
+import { type ReactNode } from "react";
+import { type ListHeaderChrome } from "../../lib/list-header-chrome";
+import type { SpamOffer } from "../../lib/spam-offer";
+export interface MailListHeaderProps {
+    title: string;
+    /**
+     * Unread count beside the title. `null` is the one way to say the number is
+     * not known, and the header then shows none: a count the server has not
+     * answered is never replaced by a figure derived from the rows that happen to
+     * be loaded (#308). Required so a caller that has no number says so.
+     */
+    unreadCount: number | null;
+    /** The list body (filter sheet / sections / virtualized rows). */
+    children: ReactNode;
+    /**
+     * The header itself, built from the chrome this component owns. Views whose
+     * selection state sits above this one (the brief) render their bar here;
+     * views whose selection sits below it (the mailbox list, starred) leave this
+     * unset and render the bar in their own pane header slot, reading the same
+     * chrome from `useListHeaderChrome`.
+     */
+    selectionBar?: (chrome: ListHeaderChrome) => ReactNode;
+    /**
+     * An overlay covering the pane, above the list (the selection wizard). Kept
+     * out of the body and rendered on both the ordinary layout and the phone
+     * search takeover, so a surface that covers the screen is not taken down by
+     * whatever the body swapped to underneath it. Inside the chrome provider, so
+     * an overlay a view mounts from above still reads the search state.
+     */
+    paneOverlay?: ReactNode;
+    /** Pinned below the scrollable list (e.g. the keyboard hint bar). */
+    footer?: ReactNode;
+    /** Filter chrome for the phone search takeover. Omit to drop the filter row. */
+    searchFilter?: Omit<FilterSheetProps, "children">;
+    /** Literal/instant results — the "Top matches" section. */
+    searchResults?: SearchResult[];
+    searchLoading?: boolean;
+    onSelectSearchResult?: (result: SearchResult) => void;
+    /** The results section heading. */
+    searchResultsLabel?: string;
+    /**
+     * The body renders the committed search itself as a selectable list — the
+     * mailbox route's `MessageList` and the brief and Starred's own rows filter
+     * to the search and host the multi-select toolbar and (on the mailbox route)
+     * the "Select all N matching" escalation (#212). When set, a committed query
+     * keeps the body on tablet/desktop instead of swapping in the read-only
+     * `SearchResults` panel; the panel still shows while the query is
+     * being typed (uncommitted). A view whose body is not a search-result list
+     * leaves this unset and keeps the panel for every query.
+     */
+    searchResultsInBody?: boolean;
+    /**
+     * The Spam offer this view is making, if any: where "Go to Spam" lands and
+     * how much of the search sits there, counted by the server over every junk
+     * folder it reached. Only the global scope holds spam out, so only the brief
+     * passes one; every other view leaves it unset and no offer is made.
+     */
+    spamOffer?: SpamOffer;
+    /**
+     * The refresh control for this view — the mailbox route and the brief pass
+     * one, scoped to the account(s) they show; a view with nothing account-scoped
+     * to refresh (Starred) leaves it unset.
+     */
+    refreshControl?: ReactNode;
+}
+export declare function MailListHeader({ title, unreadCount, children, selectionBar, paneOverlay, footer, searchFilter, searchResults, searchLoading, onSelectSearchResult, searchResultsLabel, searchResultsInBody, spamOffer, refreshControl, }: MailListHeaderProps): import("react").JSX.Element;