@remit/web-client 0.0.62 → 0.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "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/MessageList.tsx

@@ -474,6 +474,19 @@ export const MessageList = ({
 	// handled the click (caller should preventDefault and skip navigation);
 	// false for a plain click (caller lets the Link navigate).
 	const orderedIds = useMemo(() => threads.map((t) => t.messageId), [threads]);
+
+	// Sender addresses of the checked rows, for the organize widen's literal
+	// fallback when this deployment ships no vector pipeline (the sheet matches
+	// all mail from these senders). Read off the already-loaded thread rows, so
+	// no extra round-trip; the widen hook dedupes.
+	const selectedSenders = useMemo(() => {
+		const emails: string[] = [];
+		for (const thread of threads) {
+			if (!selectedIds.has(thread.messageId)) continue;
+			if (thread.fromEmail) emails.push(thread.fromEmail);
+		}
+		return emails;
+	}, [threads, selectedIds]);
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
 			if (modifiers.shiftKey) {
@@ -1256,6 +1269,7 @@ export const MessageList = ({
 				accountId={accountId}
 				mailboxId={mailboxId}
 				selectedMessageIds={Array.from(selectedIds)}
+				selectedSenders={selectedSenders}
 				junkMailboxId={junkMailboxId}
 				onClose={() => {
 					setMobileOrganizeEntry(null);
@@ -1497,6 +1511,7 @@ export const MessageList = ({
 					accountId={accountId}
 					mailboxId={mailboxId}
 					selectedMessageIds={Array.from(selectedIds)}
+					selectedSenders={selectedSenders}
 					onClose={() => setOrganizeOpen(false)}
 				/>
 			)}

package/src/components/mail/organize/MobileOrganizeFlow.render.test.ts

@@ -25,6 +25,7 @@ const render = (entry: OrganizeEntry) =>
 					accountId: "acc-1",
 					mailboxId: "mbx-inbox",
 					selectedMessageIds: ["msg-1", "msg-2"],
+					selectedSenders: ["npm@github.com"],
 					onClose: () => undefined,
 				}),
 			),

package/src/components/mail/organize/MobileOrganizeFlow.tsx

@@ -3,7 +3,7 @@ import { BottomSheet, Button } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { Loader2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { useOrganizePreview } from "@/hooks/useOrganizePreview";
+import { useOrganizeWiden } from "@/hooks/useOrganizeWiden";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { buildMoveTargets } from "@/lib/move-targets";
 import {
@@ -20,6 +20,11 @@ interface MobileOrganizeFlowProps {
 	accountId: string;
 	mailboxId: string;
 	selectedMessageIds: string[];
+	/**
+	 * Sender addresses of the selected messages, driving the literal fallback on
+	 * a deployment without the vector pipeline (semantic-capability.ts).
+	 */
+	selectedSenders: string[];
 	junkMailboxId?: string;
 	/** Close the flow and return to the list — dismiss, "Not now", and Done all use it. */
 	onClose: () => void;
@@ -50,6 +55,7 @@ export function MobileOrganizeFlow({
 	accountId,
 	mailboxId,
 	selectedMessageIds,
+	selectedSenders,
 	junkMailboxId,
 	onClose,
 }: MobileOrganizeFlowProps) {
@@ -60,15 +66,16 @@ export function MobileOrganizeFlow({
 		preview,
 		matchedCount,
 		semanticUnavailable,
+		senders,
+		matchPredicate,
 		isPending,
 		isError,
 		error,
-	} = useOrganizePreview(accountId);
+	} = useOrganizeWiden(accountId, anchorMessageId, selectedSenders);
 
 	useEffect(() => {
-		if (!anchorMessageId) return;
-		preview({ anchorMessageId, matchOperator: "And", literalClauses: [] });
-	}, [anchorMessageId, preview]);
+		preview();
+	}, [preview]);
 
 	const { data: mailboxesData } = useQuery({
 		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
@@ -122,12 +129,13 @@ export function MobileOrganizeFlow({
 					accountId={accountId}
 					mailboxId={mailboxId}
 					selectedMessageIds={selectedMessageIds}
-					anchorMessageId={anchorMessageId}
+					matchPredicate={matchPredicate}
 					matchedCount={stage.matchedCount}
 					initialScope={seed?.scope}
 					seedMailboxId={seed?.moveMailboxId}
 					fallback={stage.fallback}
 					semanticUnavailable={semanticUnavailable}
+					senders={senders}
 					onClose={onClose}
 				/>
 			)}

package/src/components/mail/organize/OrganizeDialog.render.test.ts

@@ -20,6 +20,7 @@ const render = (open: boolean) =>
 				accountId: "acc-1",
 				mailboxId: "mbx-inbox",
 				selectedMessageIds: ["msg-1", "msg-2"],
+				selectedSenders: ["npm@github.com"],
 				onClose: () => undefined,
 			}),
 		) as never,

package/src/components/mail/organize/OrganizeDialog.tsx

@@ -1,7 +1,7 @@
 import { Button, Dialog } from "@remit/ui";
 import { Loader2 } from "lucide-react";
 import { useEffect } from "react";
-import { useOrganizePreview } from "@/hooks/useOrganizePreview";
+import { useOrganizeWiden } from "@/hooks/useOrganizeWiden";
 import { OrganizePanel } from "./OrganizePanel";
 
 interface OrganizeDialogProps {
@@ -9,6 +9,11 @@ interface OrganizeDialogProps {
 	accountId: string;
 	mailboxId: string;
 	selectedMessageIds: string[];
+	/**
+	 * Sender addresses of the selected messages, driving the literal fallback on
+	 * a deployment without the vector pipeline (semantic-capability.ts).
+	 */
+	selectedSenders: string[];
 	onClose: () => void;
 }
 
@@ -23,6 +28,7 @@ export function OrganizeDialog({
 	accountId,
 	mailboxId,
 	selectedMessageIds,
+	selectedSenders,
 	onClose,
 }: OrganizeDialogProps) {
 	const anchorMessageId = selectedMessageIds[0];
@@ -31,19 +37,17 @@ export function OrganizeDialog({
 		reset,
 		matchedCount,
 		semanticUnavailable,
+		senders,
+		matchPredicate,
 		isPending,
 		isError,
 		error,
-	} = useOrganizePreview(accountId);
+	} = useOrganizeWiden(accountId, anchorMessageId, selectedSenders);
 
 	useEffect(() => {
-		if (!open || !anchorMessageId) return;
-		preview({
-			anchorMessageId,
-			matchOperator: "And",
-			literalClauses: [],
-		});
-	}, [open, anchorMessageId, preview]);
+		if (!open) return;
+		preview();
+	}, [open, preview]);
 
 	const handleClose = () => {
 		reset();
@@ -80,9 +84,10 @@ export function OrganizeDialog({
 					accountId={accountId}
 					mailboxId={mailboxId}
 					selectedMessageIds={selectedMessageIds}
-					anchorMessageId={anchorMessageId}
+					matchPredicate={matchPredicate}
 					matchedCount={matchedCount}
 					semanticUnavailable={semanticUnavailable}
+					senders={senders}
 					onClose={handleClose}
 				/>
 			)}

package/src/components/mail/organize/OrganizePanel.progress.test.ts

@@ -0,0 +1,113 @@
+/**
+ * The back-apply progress copy. On a deployment without the vector pipeline the
+ * "all like these" job moves the sender-matched set, so the in-progress line must
+ * state the sender semantics — never "similar mail" (#250's honesty
+ * requirement). The semantic path keeps the "similar mail" wording.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement } from "react";
+import type { OrganizeMatchPredicate } from "../../../lib/organize/sender-fallback";
+import { createDomHarness, type DomHarness } from "../../../test-support/dom";
+import { makeMailbox } from "../../../test-support/fixtures";
+import { type HttpMock, mockFetch } from "../../../test-support/http";
+import { OrganizePanel } from "./OrganizePanel";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const MAILBOXES = [
+	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
+	makeMailbox({ mailboxId: "mbx-archive", fullPath: "Archive" }),
+];
+
+const SEMANTIC_PREDICATE: OrganizeMatchPredicate = {
+	anchorMessageId: "msg-1",
+	matchOperator: "And",
+	literalClauses: [],
+};
+
+const SENDER_PREDICATE: OrganizeMatchPredicate = {
+	matchOperator: "Or",
+	literalClauses: [{ field: "From", value: "npm@github.com" }],
+};
+
+const mount = (
+	props: Partial<Parameters<typeof OrganizePanel>[0]>,
+): DomHarness => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/organize") && call.method === "POST") {
+			return { organizeJobId: "job-1", state: "Processing" };
+		}
+		if (call.path.endsWith("/organize/job-1") && call.method === "GET") {
+			return {
+				organizeJobId: "job-1",
+				state: "Processing",
+				matchedCount: 128,
+				appliedCount: 0,
+				failedCount: 0,
+			};
+		}
+		return {};
+	});
+	harness = createDomHarness();
+	harness.queryClient.setQueryData(
+		mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT_ID } }),
+		{ items: MAILBOXES },
+	);
+	harness.renderApp(
+		createElement(OrganizePanel, {
+			accountId: ACCOUNT_ID,
+			mailboxId: "mbx-inbox",
+			selectedMessageIds: ["msg-1", "msg-2"],
+			matchPredicate: SEMANTIC_PREDICATE,
+			matchedCount: 128,
+			seedMailboxId: "mbx-archive",
+			onClose: () => undefined,
+			...props,
+		}),
+	);
+	return harness;
+};
+
+async function startJob(dom: DomHarness): Promise<void> {
+	dom.click(dom.byText("button", "Organize"));
+	for (let attempt = 0; attempt < 20; attempt += 1) {
+		await dom.flush();
+		if (/Organizing/.test(dom.text())) return;
+		await dom.wait(1);
+	}
+}
+
+describe("OrganizePanel back-apply progress copy", () => {
+	it("states the sender semantics while organizing in the sender fallback", async () => {
+		const dom = mount({
+			matchPredicate: SENDER_PREDICATE,
+			semanticUnavailable: true,
+			senders: ["npm@github.com"],
+		});
+		await startJob(dom);
+
+		assert.match(dom.text(), /Organizing mail from these senders/);
+		assert.doesNotMatch(dom.text(), /Organizing similar mail/);
+	});
+
+	it("keeps the similar-mail wording on the semantic path", async () => {
+		const dom = mount({});
+		await startJob(dom);
+
+		assert.match(dom.text(), /Organizing similar mail/);
+		assert.doesNotMatch(dom.text(), /from these senders/);
+	});
+});

package/src/components/mail/organize/OrganizePanel.render.test.ts

@@ -26,7 +26,11 @@ const render = (overrides: Partial<Parameters<typeof OrganizePanel>[0]> = {}) =>
 					accountId: "acc-1",
 					mailboxId: "mbx-inbox",
 					selectedMessageIds: ["msg-1", "msg-2"],
-					anchorMessageId: "msg-1",
+					matchPredicate: {
+						anchorMessageId: "msg-1",
+						matchOperator: "And",
+						literalClauses: [],
+					},
 					matchedCount: 47,
 					onClose: () => undefined,
 					...overrides,
@@ -62,12 +66,38 @@ describe("OrganizePanel", () => {
 		assert.match(html, /organizing just your 2 selected/);
 	});
 
-	it("names the missing vector pipeline and organizes just the selection when the widen is unavailable (#226/#201)", () => {
+	it("names the missing vector pipeline and organizes just the selection when the widen is unavailable and no senders are known (#226/#201)", () => {
 		const html = render({ matchedCount: 0, semanticUnavailable: true });
 		assert.match(html, /available on this server/);
 		assert.match(html, /organizing just your 2 selected/);
 	});
 
+	it("names the senders and states it is matching all mail from them when the widen fell back (no vector pipeline)", () => {
+		const html = render({
+			matchedCount: 128,
+			semanticUnavailable: true,
+			senders: ["npm@github.com", "notifications@github.com"],
+			matchPredicate: {
+				matchOperator: "Or",
+				literalClauses: [
+					{ field: "From", value: "npm@github.com" },
+					{ field: "From", value: "notifications@github.com" },
+				],
+			},
+		});
+		assert.match(html, /matching all mail from/);
+		assert.match(html, /npm@github\.com/);
+		assert.match(html, /notifications@github\.com/);
+		assert.match(html, /128 matches/);
+		// Never claims the matched set is semantically similar (only denies that
+		// similar-mail matching is available).
+		assert.doesNotMatch(html, /similar message/i);
+		assert.doesNotMatch(html, /similar ones found/i);
+		// The sender fallback is a real widen: the scopes reach it, so the
+		// default scope is "all like these", not "just these".
+		assert.match(html, /All like these/);
+	});
+
 	it("pre-selects the seeded scope (a 'Something else' shortcut seeds the sentence)", () => {
 		const html = render({ initialScope: "standing" });
 		// The standing scope's "Always keep" phrasing only renders when it is active.

package/src/components/mail/organize/OrganizePanel.tsx

@@ -13,17 +13,25 @@ import {
 	commitButtonLabel,
 	commitDisabledReason,
 	scopeActionCount,
+	senderFallbackSummary,
 } from "@/lib/organize/organize-copy";
 import type {
 	OrganizeDraft,
 	OrganizeScope,
 } from "@/lib/organize/organize-model";
+import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
 
 interface OrganizePanelProps {
 	accountId: string;
 	mailboxId: string;
 	selectedMessageIds: string[];
-	anchorMessageId: string;
+	/**
+	 * The predicate the widen previewed — the semantic anchor, or the
+	 * sender-derived literal clauses when the vector pipeline is absent. Every
+	 * commit scope carries exactly this, so the previewed set equals the set the
+	 * scope acts on.
+	 */
+	matchPredicate: OrganizeMatchPredicate;
 	/** Similar messages the widen preview matched. */
 	matchedCount: number;
 	/**
@@ -44,10 +52,17 @@ interface OrganizePanelProps {
 	fallback?: boolean;
 	/**
 	 * The server ran no semantic widen because this deployment ships no vector
-	 * pipeline. Like {@link fallback} it organizes just the selection, but the
-	 * heading names the real reason rather than "no similar found".
+	 * pipeline. With senders to match on ({@link senders}) the widen fell back to
+	 * matching all mail from those senders; with none it organizes just the
+	 * selection. Either way the heading names the real reason, never "similar".
 	 */
 	semanticUnavailable?: boolean;
+	/**
+	 * Distinct sender addresses driving the sender fallback. Non-empty only when
+	 * {@link semanticUnavailable} and the fallback produced a literal match set;
+	 * named in the heading and folder line so the copy states the real semantics.
+	 */
+	senders?: string[];
 	onClose: () => void;
 }
 
@@ -78,17 +93,22 @@ export function OrganizePanel({
 	accountId,
 	mailboxId,
 	selectedMessageIds,
-	anchorMessageId,
+	matchPredicate,
 	matchedCount,
 	initialScope,
 	seedMailboxId,
 	fallback = false,
 	semanticUnavailable = false,
+	senders = [],
 	onClose,
 }: OrganizePanelProps) {
+	// The vector pipeline is absent but the selection has senders to match on:
+	// the widen fell back to sender matching, which produces a real widened set
+	// the commit scopes reach — unlike a missing or empty widen.
+	const senderFallback = semanticUnavailable && senders.length > 0;
 	// A missing widen and an empty widen both organize just the selection; only
-	// the heading distinguishes them.
-	const noWiden = fallback || semanticUnavailable;
+	// the heading distinguishes them. The sender fallback is a real widen.
+	const noWiden = (fallback || semanticUnavailable) && !senderFallback;
 	const [scope, setScope] = useState<OrganizeScope>(
 		initialScope ?? (noWiden ? "just-these" : "all-like-these"),
 	);
@@ -113,14 +133,12 @@ export function OrganizePanel({
 
 	const draft: OrganizeDraft = useMemo(
 		() => ({
-			anchorMessageId,
-			matchOperator: "And",
-			literalClauses: [],
+			...matchPredicate,
 			moveMailboxId: moveMailboxId || undefined,
 			expiresAt:
 				scope === "temporary" ? pickedDateToExpiresAt(pickedDate) : undefined,
 		}),
-		[anchorMessageId, moveMailboxId, scope, pickedDate],
+		[matchPredicate, moveMailboxId, scope, pickedDate],
 	);
 
 	const { moveMessages } = useMoveMessages({ mailboxId, accountId });
@@ -161,6 +179,7 @@ export function OrganizePanel({
 			<JobProgress
 				progress={organizeJob.progress}
 				isDone={organizeJob.isDone}
+				senderFallback={senderFallback}
 				onClose={onClose}
 			/>
 		);
@@ -188,13 +207,17 @@ export function OrganizePanel({
 			<div className="border-b border-line px-5 py-3">
 				<h2 className="text-sm font-semibold text-fg">Organize</h2>
 				<p className="mt-0.5 text-xs text-fg-muted">
-					{semanticUnavailable
-						? `Finding similar mail isn't available on this server — organizing just your ${selectionCount} selected.`
-						: fallback
-							? `No similar messages found — organizing just your ${selectionCount} selected.`
-							: `${matchedCount} similar message${matchedCount === 1 ? "" : "s"} found${
-									selectionCount > 0 ? ` from ${selectionCount} selected` : ""
-								}.`}
+					{senderFallback
+						? `${senderFallbackSummary(senders)} ${matchedCount} match${
+								matchedCount === 1 ? "" : "es"
+							}.`
+						: semanticUnavailable
+							? `Finding similar mail isn't available on this server — organizing just your ${selectionCount} selected.`
+							: fallback
+								? `No similar messages found — organizing just your ${selectionCount} selected.`
+								: `${matchedCount} similar message${matchedCount === 1 ? "" : "s"} found${
+										selectionCount > 0 ? ` from ${selectionCount} selected` : ""
+									}.`}
 				</p>
 			</div>
 
@@ -205,7 +228,12 @@ export function OrganizePanel({
 							<span className="font-semibold text-fg">Always keep </span>
 						)}
 						{scope === "standing" ? "" : "Keep "}
-						{scope === "just-these" ? "these" : "emails like these"} in
+						{scope === "just-these"
+							? "these"
+							: senderFallback
+								? "mail from these senders"
+								: "emails like these"}{" "}
+						in
 					</p>
 					<Select
 						aria-label="Destination folder"
@@ -232,6 +260,10 @@ export function OrganizePanel({
 				<section className="space-y-1.5">
 					{SCOPE_OPTIONS.map((option) => {
 						const active = scope === option.id;
+						const caption =
+							senderFallback && option.id === "all-like-these"
+								? "including others from these senders"
+								: option.caption;
 						return (
 							<button
 								key={option.id}
@@ -263,7 +295,7 @@ export function OrganizePanel({
 										{option.label}
 									</span>
 									<span className="block text-xs text-fg-subtle">
-										{option.caption}
+										{caption}
 									</span>
 								</span>
 							</button>
@@ -330,10 +362,12 @@ export function OrganizePanel({
 function JobProgress({
 	progress,
 	isDone,
+	senderFallback,
 	onClose,
 }: {
 	progress: ReturnType<typeof useOrganizeJob>["progress"];
 	isDone: boolean;
+	senderFallback: boolean;
 	onClose: () => void;
 }) {
 	const failed = progress.state === "Failed";
@@ -350,7 +384,11 @@ function JobProgress({
 			)}
 
 			{!isDone && (
-				<p className="text-sm font-medium text-fg">Organizing similar mail…</p>
+				<p className="text-sm font-medium text-fg">
+					{senderFallback
+						? "Organizing mail from these senders…"
+						: "Organizing similar mail…"}
+				</p>
 			)}
 
 			{isDone && !failed && (

package/src/components/mail/organize/smart-organize.stories.tsx

@@ -117,7 +117,11 @@ export const Organize: Story = {
 				accountId={ACCOUNT_ID}
 				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2", "msg-3"]}
-				anchorMessageId="msg-1"
+				matchPredicate={{
+					anchorMessageId: "msg-1",
+					matchOperator: "And",
+					literalClauses: [],
+				}}
 				matchedCount={47}
 				onClose={() => undefined}
 			/>
@@ -137,7 +141,11 @@ export const FromSearch: Story = {
 				accountId={ACCOUNT_ID}
 				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1"]}
-				anchorMessageId="msg-1"
+				matchPredicate={{
+					anchorMessageId: "msg-1",
+					matchOperator: "And",
+					literalClauses: [],
+				}}
 				matchedCount={412}
 				seedMailboxId="mbx-archive"
 				onClose={() => undefined}
@@ -155,7 +163,11 @@ export const AlwaysRule: Story = {
 				accountId={ACCOUNT_ID}
 				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				anchorMessageId="msg-1"
+				matchPredicate={{
+					anchorMessageId: "msg-1",
+					matchOperator: "And",
+					literalClauses: [],
+				}}
 				matchedCount={47}
 				initialScope="standing"
 				seedMailboxId="mbx-travel"
@@ -174,7 +186,11 @@ export const NoSimilarFound: Story = {
 				accountId={ACCOUNT_ID}
 				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				anchorMessageId="msg-1"
+				matchPredicate={{
+					anchorMessageId: "msg-1",
+					matchOperator: "And",
+					literalClauses: [],
+				}}
 				matchedCount={0}
 				fallback
 				onClose={() => undefined}
@@ -196,7 +212,11 @@ export const SemanticUnavailable: Story = {
 				accountId={ACCOUNT_ID}
 				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				anchorMessageId="msg-1"
+				matchPredicate={{
+					anchorMessageId: "msg-1",
+					matchOperator: "And",
+					literalClauses: [],
+				}}
 				matchedCount={0}
 				semanticUnavailable
 				onClose={() => undefined}
@@ -205,6 +225,75 @@ export const SemanticUnavailable: Story = {
 	),
 };
 
+/**
+ * No vector pipeline, but the selection has senders to match on — the widen
+ * fell back to matching all mail from those senders. The heading names the
+ * senders and states the real semantics, and every commit scope (including the
+ * standing filter) carries the sender `From` clauses, so it reaches the widened
+ * set and keeps working on future mail.
+ */
+export const SenderFallback: Story = {
+	name: "Sender Fallback",
+	render: () => (
+		<SheetStage>
+			<OrganizePanel
+				accountId={ACCOUNT_ID}
+				mailboxId="mbx-inbox"
+				selectedMessageIds={["msg-1", "msg-2"]}
+				matchPredicate={{
+					matchOperator: "Or",
+					literalClauses: [
+						{ field: "From", value: "npm@github.com" },
+						{ field: "From", value: "notifications@github.com" },
+					],
+				}}
+				matchedCount={128}
+				semanticUnavailable
+				senders={["npm@github.com", "notifications@github.com"]}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/**
+ * The sender fallback with a standing rule pre-selected — the "Always keep mail
+ * from these senders" sentence, the filter that will match future mail at index
+ * time.
+ */
+export const SenderFallbackStanding: Story = {
+	name: "Sender Fallback (standing)",
+	render: () => (
+		<SheetStage>
+			<OrganizePanel
+				accountId={ACCOUNT_ID}
+				mailboxId="mbx-inbox"
+				selectedMessageIds={["msg-1", "msg-2", "msg-3", "msg-4"]}
+				matchPredicate={{
+					matchOperator: "Or",
+					literalClauses: [
+						{ field: "From", value: "npm@github.com" },
+						{ field: "From", value: "notifications@github.com" },
+						{ field: "From", value: "noreply@medium.com" },
+						{ field: "From", value: "digest@substack.com" },
+					],
+				}}
+				matchedCount={412}
+				semanticUnavailable
+				senders={[
+					"npm@github.com",
+					"notifications@github.com",
+					"noreply@medium.com",
+					"digest@substack.com",
+				]}
+				initialScope="standing"
+				seedMailboxId="mbx-archive"
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
 /** The "Something else" fallback: shortcuts derived from folders + an input. */
 export const SomethingElse: Story = {
 	render: () => (