@remit/web-client 0.0.129 → 0.0.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.129",
+  "version": "0.0.131",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/AutoMovedIndicator.tsx

@@ -1,4 +1,7 @@
-import type { RemitImapAutoMovedInfo } from "@remit/api-http-client/types.gen.ts";
+import type {
+	RemitImapAutoMovedInfo,
+	RemitImapMessageSpamReport,
+} from "@remit/api-http-client/types.gen.ts";
 import { AutoMovedBadge } from "@remit/ui";
 import { useAutoMovedBadge } from "@/hooks/useAutoMovedBadge";
 
@@ -8,16 +11,17 @@ interface AutoMovedIndicatorProps {
 	threadId: string;
 	mailboxId: string;
 	autoMoved: RemitImapAutoMovedInfo | undefined;
+	spamReport: RemitImapMessageSpamReport | undefined;
 }
 
 /**
- * Renders the "auto-moved by Remit" badge on the open message only while the
- * move is still in effect (current mailbox matches the verdict's implied
- * destination) — see `useAutoMovedBadge`. Mailbox list rows deliberately do not
- * show it: there the move is noise, and here it carries the Undo and
- * Manage-filter actions. Mount this only when `autoMoved` is present (callers
- * gate with `threadMessage.autoMoved &&`) so messages without a move never pay
- * for the Inbox/Junk mailbox lookups.
+ * 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,
@@ -25,6 +29,7 @@ export function AutoMovedIndicator({
 	threadId,
 	mailboxId,
 	autoMoved,
+	spamReport,
 }: AutoMovedIndicatorProps) {
 	const badge = useAutoMovedBadge({
 		accountId,
@@ -32,6 +37,7 @@ export function AutoMovedIndicator({
 		threadId,
 		mailboxId,
 		autoMoved,
+		spamReport,
 	});
 
 	if (!badge.show) return null;

package/src/components/mail/BriefPane.tsx

@@ -73,6 +73,13 @@ interface BriefPaneContextValue {
 	onDeleteMessages: (messageIds: string[]) => void;
 	nextMessageId: string | undefined;
 	previousMessageId: string | undefined;
+	/**
+	 * Deselects the open message when it's the one a mutation just removed
+	 * from view — wired into every mutation that can take the open message out
+	 * of view (delete, report-spam/undo), so the reading pane and intelligence
+	 * panel never keep rendering a message that's left the list.
+	 */
+	handleDeselectIfRemoved: (removedIds: string[]) => void;
 }
 
 const BriefPaneCtx = createContext<BriefPaneContextValue | null>(null);
@@ -257,6 +264,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		onDeleteMessages: deleteMessages,
 		nextMessageId,
 		previousMessageId,
+		handleDeselectIfRemoved,
 	};
 
 	return <BriefPaneCtx.Provider value={ctx}>{children}</BriefPaneCtx.Provider>;
@@ -357,7 +365,7 @@ function BriefReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function BriefIntelligence() {
-	const { selectedThread } = useBriefPane();
+	const { selectedThread, handleDeselectIfRemoved } = useBriefPane();
 	const { onToggleIntelligence } = useMailContext();
 
 	return (
@@ -366,6 +374,7 @@ function BriefIntelligence() {
 			thread={selectedThread}
 			mailboxId={selectedThread?.mailboxId}
 			accountId={selectedThread?.accountId}
+			onAfterOptimisticRemove={handleDeselectIfRemoved}
 		/>
 	);
 }
@@ -381,6 +390,7 @@ function BriefPhone() {
 		onCloseThread,
 		nextMessageId,
 		previousMessageId,
+		handleDeselectIfRemoved,
 	} = useBriefPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
@@ -414,7 +424,10 @@ function BriefPhone() {
 					<IntelligencePane
 						onClose={onToggleIntelligence}
 						thread={selectedThread}
+						mailboxId={selectedThread?.mailboxId}
+						accountId={selectedThread?.accountId}
 						hideCloseButton
+						onAfterOptimisticRemove={handleDeselectIfRemoved}
 					/>
 				</Drawer>
 			</>

package/src/components/mail/FlaggedPane.tsx

@@ -66,6 +66,13 @@ interface FlaggedPaneContextValue {
 	onDeleteMessages: (messageIds: string[]) => void;
 	nextMessageId: string | undefined;
 	previousMessageId: string | undefined;
+	/**
+	 * Deselects the open message when it's the one a mutation just removed
+	 * from view — wired into every mutation that can take the open message out
+	 * of view (delete, report-spam/undo), so the reading pane and intelligence
+	 * panel never keep rendering a message that's left the list.
+	 */
+	handleDeselectIfRemoved: (removedIds: string[]) => void;
 }
 
 const FlaggedPaneCtx = createContext<FlaggedPaneContextValue | null>(null);
@@ -190,6 +197,7 @@ function FlaggedPaneProvider({
 		onDeleteMessages: deleteMessages,
 		nextMessageId,
 		previousMessageId,
+		handleDeselectIfRemoved,
 	};
 
 	return (
@@ -280,7 +288,7 @@ function FlaggedReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function FlaggedIntelligence() {
-	const { selectedThread } = useFlaggedPane();
+	const { selectedThread, handleDeselectIfRemoved } = useFlaggedPane();
 	const { onToggleIntelligence } = useMailContext();
 
 	return (
@@ -289,6 +297,7 @@ function FlaggedIntelligence() {
 			thread={selectedThread}
 			mailboxId={selectedThread?.mailboxId}
 			accountId={selectedThread?.accountId}
+			onAfterOptimisticRemove={handleDeselectIfRemoved}
 		/>
 	);
 }
@@ -301,6 +310,7 @@ function FlaggedPhone() {
 		onSelectMessage,
 		nextMessageId,
 		previousMessageId,
+		handleDeselectIfRemoved,
 	} = useFlaggedPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
@@ -333,7 +343,10 @@ function FlaggedPhone() {
 					<IntelligencePane
 						onClose={onToggleIntelligence}
 						thread={selectedThread}
+						mailboxId={selectedThread?.mailboxId}
+						accountId={selectedThread?.accountId}
 						hideCloseButton
+						onAfterOptimisticRemove={handleDeselectIfRemoved}
 					/>
 				</Drawer>
 			</>

package/src/components/mail/IntelligencePane.test.ts

@@ -2,101 +2,30 @@ import assert from "node:assert/strict";
 import { describe, test } from "node:test";
 import { resolveSimilarState, resolveSpamAction } from "./IntelligencePane";
 
-const junkId = "junk-mailbox";
-const inboxId = "inbox-mailbox";
-
-describe("resolveSpamAction (#594)", () => {
-	test("offers Not spam when the message is in Junk and Inbox is resolved", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: junkId,
-				junkMailboxId: junkId,
-				inboxMailboxId: inboxId,
-			}),
-			"notSpam",
-		);
-	});
-
-	test("offers Mark spam when the message is outside Junk and Junk is resolved", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: inboxId,
-				junkMailboxId: junkId,
-				inboxMailboxId: inboxId,
-			}),
-			"markSpam",
-		);
-	});
-
-	test("offers nothing when the move source mailbox is unknown", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: undefined,
-				junkMailboxId: junkId,
-				inboxMailboxId: inboxId,
-			}),
-			null,
-		);
+describe("resolveSpamAction (#648)", () => {
+	test("offers Report spam when the message carries no spam report", () => {
+		assert.equal(resolveSpamAction({}), "reportSpam");
 	});
 
-	test("offers nothing in Junk when the Inbox target hasn't loaded", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: junkId,
-				junkMailboxId: junkId,
-				inboxMailboxId: undefined,
-			}),
-			null,
-		);
-	});
-
-	test("offers nothing outside Junk when the Junk target hasn't loaded", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: inboxId,
-				junkMailboxId: undefined,
-				inboxMailboxId: inboxId,
-			}),
-			null,
-		);
+	test("offers Report spam regardless of which mailbox the message is in", () => {
+		// A report is never derived from placement — reporting a message the
+		// provider's own filter already put in Junk is a real, no-op-move case.
+		assert.equal(resolveSpamAction({ spamReport: undefined }), "reportSpam");
 	});
 
-	test("offers nothing once the panel has moved this message", () => {
+	test("offers Not spam once the message carries a spam report", () => {
 		assert.equal(
-			resolveSpamAction({
-				mailboxId: junkId,
-				junkMailboxId: junkId,
-				inboxMailboxId: inboxId,
-				moveApplied: true,
-			}),
-			null,
-		);
-	});
-
-	test("offers Not spam again when the move came back failed", () => {
-		assert.equal(
-			resolveSpamAction({
-				mailboxId: junkId,
-				junkMailboxId: junkId,
-				inboxMailboxId: inboxId,
-				moveApplied: false,
-			}),
+			resolveSpamAction({ spamReport: { reportedAt: Date.now() } }),
 			"notSpam",
 		);
 	});
 
 	test("the two actions are mutually exclusive", () => {
-		const inJunk = resolveSpamAction({
-			mailboxId: junkId,
-			junkMailboxId: junkId,
-			inboxMailboxId: inboxId,
-		});
-		const elsewhere = resolveSpamAction({
-			mailboxId: inboxId,
-			junkMailboxId: junkId,
-			inboxMailboxId: inboxId,
+		const reportable = resolveSpamAction({});
+		const reported = resolveSpamAction({
+			spamReport: { reportedAt: Date.now() },
 		});
-		assert.notEqual(inJunk, elsewhere);
+		assert.notEqual(reportable, reported);
 	});
 });
 

package/src/components/mail/IntelligencePane.tsx

@@ -8,10 +8,8 @@ import {
 import { Link } from "@tanstack/react-router";
 import { Sparkles } from "lucide-react";
 import { useCallback, useState } from "react";
-import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
-import { useInboxMailbox, useJunkMailbox } from "@/hooks/useArchiveMailbox";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
+import { useReportSpam } from "@/hooks/useReportSpam";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
 import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
@@ -27,13 +25,28 @@ export interface IntelligencePaneProps {
 	thread?: RemitImapThreadMessageResponse;
 	/** The mailbox the message list is currently showing. */
 	mailboxId?: string;
-	/** Account that owns the open message; resolves the Junk/Inbox move targets. */
+	/** 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;
 }
 
 /**
@@ -52,39 +65,18 @@ const CATEGORY_OVERRIDES = [
 type CategoryOverride = (typeof CATEGORY_OVERRIDES)[number];
 
 /**
- * Decide which spam quick-action to offer for the current message (issue #594).
- *
- * `mailboxId` is the mailbox the MESSAGE is in, which is what the move acts on.
- * The two buttons are symmetric and mutually exclusive:
- * - In the Junk mailbox → offer **Not spam** (move out, promote sender), but
- *   only when an Inbox destination is resolved.
- * - Anywhere else → offer **Mark spam** (move in, demote sender), but only when
- *   the Junk destination is resolved.
+ * Decide which spam quick-action to offer for the current message (issue #648).
  *
- * `moveApplied` says the panel has already moved this message and the row it is
- * rendering has not caught up. The list drops the row on the move, but the
- * reading pane keeps the message open from the row it was opened with, whose
- * mailbox is still the source — so without this the button survives its own
- * press, and a second press asks the server to move the message to where it now
- * already is.
- *
- * Returns `"notSpam"`, `"markSpam"`, or `null` (no actionable button — e.g. the
- * move source isn't known, or the needed target mailbox hasn't loaded). Pure so
- * the wiring decision can be unit-tested without rendering.
+ * 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 = (input: {
-	mailboxId?: string;
-	junkMailboxId?: string;
-	inboxMailboxId?: string;
-	moveApplied?: boolean;
-}): "notSpam" | "markSpam" | null => {
-	const { mailboxId, junkMailboxId, inboxMailboxId, moveApplied } = input;
-	if (moveApplied) return null;
-	if (!mailboxId) return null;
-	const isInJunk = Boolean(junkMailboxId && mailboxId === junkMailboxId);
-	if (isInJunk) return inboxMailboxId ? "notSpam" : null;
-	return junkMailboxId ? "markSpam" : null;
-};
+export const resolveSpamAction = (thread: {
+	spamReport?: unknown;
+}): "notSpam" | "reportSpam" => (thread.spamReport ? "notSpam" : "reportSpam");
 
 /**
  * Decide the "Similar messages" section state from the semantic-search query.
@@ -217,6 +209,7 @@ interface WiredPanelProps {
 	mailboxId?: string;
 	accountId?: string;
 	hideCloseButton?: boolean;
+	onAfterOptimisticRemove?: (messageIds: string[]) => void;
 }
 
 /**
@@ -228,6 +221,7 @@ function WiredPanel({
 	mailboxId,
 	accountId,
 	hideCloseButton,
+	onAfterOptimisticRemove,
 }: WiredPanelProps) {
 	const {
 		data,
@@ -236,61 +230,37 @@ function WiredPanel({
 		similarError,
 		similarErrorIsFatal,
 	} = useIntelligenceData(thread, mailboxId);
-	const [confirmBlock, setConfirmBlock] = useState(false);
 	const [reclassifyOpen, setReclassifyOpen] = useState(false);
 	const senderEmail = thread.fromEmail ?? undefined;
 
-	const { updateFlags, isPending } = useUpdateAddressFlags({
+	const { updateFlags } = useUpdateAddressFlags({
 		addressId,
 		senderEmail,
 	});
 
-	// "Not spam" / "Mark spam" move the message across the Junk boundary. Only
-	// one is wired at a time, decided by the mailbox the message itself is in —
-	// not by the list the user happens to be looking at, which for a search or a
-	// cross-account view names a different folder (issue #594).
-	const { junkMailboxId } = useJunkMailbox(accountId);
-	const { inboxMailboxId } = useInboxMailbox(accountId);
-	const { moveMessages, isError: moveFailed } = useMoveMessages({
+	// "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 [lastMove, setLastMove] = useState<
-		{ messageId: string; mailboxId: string } | undefined
-	>(undefined);
-
-	// Spent while the row this panel is rendering still names the mailbox the
-	// move took the message OUT of. It resolves itself: a row that has caught up
-	// with the move offers the actions again, and a move that comes back failed
-	// is rolled back with a banner, so the retry is against the same button.
-	const spamAction = resolveSpamAction({
-		mailboxId: thread.mailboxId,
-		junkMailboxId,
-		inboxMailboxId,
-		moveApplied:
-			!moveFailed &&
-			lastMove?.messageId === thread.messageId &&
-			lastMove.mailboxId !== thread.mailboxId,
-	});
+	const spamAction = resolveSpamAction(thread);
 
 	const handleNotSpam = useCallback(() => {
-		if (!inboxMailboxId) return;
-		setLastMove({ messageId: thread.messageId, mailboxId: inboxMailboxId });
-		moveMessages([thread.messageId], inboxMailboxId);
-	}, [inboxMailboxId, moveMessages, thread.messageId]);
+		notSpam([thread.messageId]);
+	}, [notSpam, thread.messageId]);
 
-	const handleMarkSpam = useCallback(() => {
-		if (!junkMailboxId) return;
+	const handleReportSpam = useCallback(() => {
 		recordRescueSentToJunk(telemetry, {
 			count: 1,
 			senderTrust: thread.senderTrust,
 			wasRescuable: isRescueCandidate(thread),
 		});
-		setLastMove({ messageId: thread.messageId, mailboxId: junkMailboxId });
-		moveMessages([thread.messageId], junkMailboxId);
-	}, [junkMailboxId, moveMessages, thread, telemetry]);
+		reportSpam([thread.messageId]);
+	}, [reportSpam, thread, telemetry]);
 
 	const handleShowSimilar = useCallback(() => {
 		// The similar-messages section scrolls into view automatically when
@@ -309,20 +279,6 @@ function WiredPanel({
 		updateFlags({ muted: { value: next } });
 	}, [data?.flags?.muted, updateFlags]);
 
-	const handleToggleBlock = useCallback(() => {
-		if (data?.flags?.blocked === true) {
-			// Unblock — no confirm needed
-			updateFlags({ blocked: { value: false } });
-		} else {
-			setConfirmBlock(true);
-		}
-	}, [data?.flags?.blocked, updateFlags]);
-
-	const handleBlockConfirm = useCallback(() => {
-		setConfirmBlock(false);
-		updateFlags({ blocked: { value: true } });
-	}, [updateFlags]);
-
 	const handleToggleUnsubscribe = useCallback(() => {
 		const next = !(data?.flags?.unsubscribed === true);
 		updateFlags({ unsubscribed: { value: next } });
@@ -344,11 +300,10 @@ function WiredPanel({
 	const actions: IntelligenceQuickActions = {
 		onToggleVip: canUpdateFlags ? handleToggleVip : undefined,
 		onToggleMute: canUpdateFlags ? handleToggleMute : undefined,
-		onToggleBlock: canUpdateFlags ? handleToggleBlock : undefined,
 		onToggleUnsubscribe: canUpdateFlags ? handleToggleUnsubscribe : undefined,
 		onReclassify: canUpdateFlags ? () => setReclassifyOpen(true) : undefined,
 		onNotSpam: spamAction === "notSpam" ? handleNotSpam : undefined,
-		onMarkSpam: spamAction === "markSpam" ? handleMarkSpam : undefined,
+		onReportSpam: spamAction === "reportSpam" ? handleReportSpam : undefined,
 	};
 
 	// Each similar-message row is a real router anchor — same link shape as a
@@ -392,21 +347,13 @@ function WiredPanel({
 				actions={actions}
 				similarState={similarState}
 				similarLinkComponent={similarLinkComponent}
+				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"
 			/>
-			<ConfirmDialog
-				isOpen={confirmBlock}
-				title="Block this sender?"
-				description={`Messages from ${senderEmail ?? "this sender"} will never load images and will be flagged. You can undo this in Settings → Senders.`}
-				confirmLabel="Block sender"
-				destructive
-				isBusy={isPending}
-				onConfirm={handleBlockConfirm}
-				onCancel={() => setConfirmBlock(false)}
-			/>
 			<ReclassifyDialog
 				isOpen={reclassifyOpen}
 				current={data.category.value}
@@ -433,6 +380,7 @@ export const IntelligencePane = ({
 	mailboxId,
 	accountId,
 	hideCloseButton,
+	onAfterOptimisticRemove,
 }: IntelligencePaneProps) => {
 	if (!thread) {
 		return (
@@ -461,6 +409,7 @@ export const IntelligencePane = ({
 			mailboxId={mailboxId}
 			accountId={accountId}
 			hideCloseButton={hideCloseButton}
+			onAfterOptimisticRemove={onAfterOptimisticRemove}
 		/>
 	);
 };

package/src/components/mail/MailboxPane.tsx

@@ -173,6 +173,14 @@ interface MailboxPaneContextValue {
 	listFilter: MessageListFilter | undefined;
 	intelligenceOpen: boolean;
 	onToggleIntelligence: () => void;
+	/**
+	 * Deselects the open message when it's the one a mutation just removed
+	 * from this mailbox's list — wired into every mutation that can take the
+	 * open message out of view (delete, move, report-spam/undo), so the
+	 * reading pane and intelligence panel never keep rendering a message
+	 * that's left the list they're watching.
+	 */
+	handleDeselectIfRemoved: (removedIds: string[]) => void;
 	/**
 	 * The active search predicate — undefined when not searching. Threaded
 	 * down so the mobile list can re-issue the identical filter while paging
@@ -867,6 +875,7 @@ function MailboxPaneProvider({
 		listFilter,
 		intelligenceOpen,
 		onToggleIntelligence,
+		handleDeselectIfRemoved,
 		// Escalation ("select all N matching") re-issues this predicate server-side
 		// and acts on every match, so it is only offered when the predicate IS the
 		// search: a residual token narrows the rows on screen but not the request,
@@ -1223,8 +1232,13 @@ function MailboxReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function MailboxIntelligence() {
-	const { mailboxId, mailboxAccountId, selectedThread, onToggleIntelligence } =
-		useMailboxPane();
+	const {
+		mailboxId,
+		mailboxAccountId,
+		selectedThread,
+		onToggleIntelligence,
+		handleDeselectIfRemoved,
+	} = useMailboxPane();
 
 	return (
 		<IntelligencePane
@@ -1232,6 +1246,7 @@ function MailboxIntelligence() {
 			thread={selectedThread}
 			mailboxId={mailboxId}
 			accountId={mailboxAccountId}
+			onAfterOptimisticRemove={handleDeselectIfRemoved}
 		/>
 	);
 }
@@ -1243,6 +1258,7 @@ function MailboxIntelligence() {
 function MailboxPhone() {
 	const {
 		mailboxId,
+		mailboxAccountId,
 		selectedThread,
 		conversation,
 		intelligenceOpen,
@@ -1251,6 +1267,7 @@ function MailboxPhone() {
 		nextMessageId,
 		previousMessageId,
 		composeState,
+		handleDeselectIfRemoved,
 	} = useMailboxPane();
 	const navigate = useNavigate();
 
@@ -1293,7 +1310,10 @@ function MailboxPhone() {
 					<IntelligencePane
 						onClose={onToggleIntelligence}
 						thread={selectedThread}
+						mailboxId={mailboxId}
+						accountId={mailboxAccountId}
 						hideCloseButton
+						onAfterOptimisticRemove={handleDeselectIfRemoved}
 					/>
 				</Drawer>
 			</>

package/src/components/mail/MessageCard.tsx

@@ -198,15 +198,17 @@ const ExpandedCard = ({
 	const fromAddressId = messageData?.envelope.from[0]?.addressId;
 	const message = toThreadMessageData(threadMessage, date);
 
-	const autoMovedNode = threadMessage.autoMoved ? (
-		<AutoMovedIndicator
-			accountId={accountId}
-			messageId={threadMessage.messageId}
-			threadId={threadMessage.threadId}
-			mailboxId={threadMessage.mailboxId}
-			autoMoved={threadMessage.autoMoved}
-		/>
-	) : null;
+	const autoMovedNode =
+		threadMessage.autoMoved || threadMessage.spamReport ? (
+			<AutoMovedIndicator
+				accountId={accountId}
+				messageId={threadMessage.messageId}
+				threadId={threadMessage.threadId}
+				mailboxId={threadMessage.mailboxId}
+				autoMoved={threadMessage.autoMoved}
+				spamReport={threadMessage.spamReport}
+			/>
+		) : null;
 
 	return (
 		<ExpandedMessage