@remit/web-client 0.0.296 → 0.0.298

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.296",
+  "version": "0.0.298",
   "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": {
@@ -109,6 +109,7 @@
     "dictionary-nl": "2.0.0",
     "esbuild": "*",
     "jsdom": "^29.1.1",
+    "msw": "^2",
     "react": "^19",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4",

package/src/components/mail/daily-brief.stories.tsx

@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld, newsletterBacklog } from "@/mocks/story-frame/mail-world";
+import { longPress } from "@/mocks/story-frame/touch";
+
+const world = mailWorld();
+
+const meta = {
+	title: "Playground/Shipped/Mail/Daily brief",
+	component: AppStory,
+	args: { url: "/mail/brief" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const rows = (canvasElement: HTMLElement): HTMLElement[] =>
+	Array.from(canvasElement.querySelectorAll<HTMLElement>("[data-list-row]"));
+
+const ticked = (canvasElement: HTMLElement): number =>
+	rows(canvasElement).filter((row) =>
+		row.querySelector('[aria-label="Deselect message"]'),
+	).length;
+
+const openFilters = async (
+	canvasElement: HTMLElement,
+	label: "Expand filters" | "Search filters" = "Expand filters",
+) => {
+	const canvas = within(canvasElement);
+	await userEvent.click(await canvas.findByLabelText(label));
+};
+
+const pick = async (
+	canvasElement: HTMLElement,
+	group: "Accounts" | "Categories" | "Attributes",
+	name: string,
+) => {
+	const fieldset = await within(canvasElement).findByLabelText(group);
+	await userEvent.click(within(fieldset).getByRole("button", { name }));
+};
+
+export const Default: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(canvas.getByText("Autumn sale starts now")).toBeVisible();
+	},
+};
+
+export const Phone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+	},
+};
+
+export const CaughtUp: Story = {
+	parameters: {
+		msw: { handlers: mailHandlers(mailWorld({ threads: [] })) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("You're caught up")).toBeVisible();
+	},
+};
+
+export const FilteredToCategory: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await openFilters(canvasElement);
+		await pick(canvasElement, "Categories", "Newsletter");
+		await waitFor(() =>
+			expect(canvas.queryByText("Q3 planning")).not.toBeInTheDocument(),
+		);
+		await expect(
+			await canvas.findByText("This week in type systems"),
+		).toBeVisible();
+	},
+};
+
+export const WorkOnly: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Dinner on Saturday?");
+		await openFilters(canvasElement);
+		await pick(canvasElement, "Accounts", "alice.tan");
+		await waitFor(() =>
+			expect(canvas.queryByText("Dinner on Saturday?")).not.toBeInTheDocument(),
+		);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+	},
+};
+
+export const SelectAllThenNarrow: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					threads: [...world.threads, ...newsletterBacklog(14)],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await expect(
+			await canvas.findByRole("button", { name: /^Show (all|\d+ more)/ }),
+		).toBeVisible();
+		await openFilters(canvasElement);
+
+		const firstRow = rows(canvasElement)[0];
+		firstRow?.focus();
+		await expect(document.activeElement).toBe(firstRow);
+		await userEvent.keyboard("{Meta>}a{/Meta}");
+		await waitFor(() =>
+			expect(
+				canvas.getByText(/(loaded selected|messages? selected)$/),
+			).toHaveTextContent(`All ${rows(canvasElement).length} loaded selected`),
+		);
+		const selectedEverywhere = ticked(canvasElement);
+
+		await expect(selectedEverywhere).toBe(rows(canvasElement).length);
+
+		await pick(canvasElement, "Categories", "Newsletter");
+		await expect(
+			await canvas.findByText("Issue 1: notes from the field"),
+		).toBeVisible();
+		await waitFor(() => expect(ticked(canvasElement)).toBe(0));
+		await expect(
+			canvas.queryByText(/(loaded selected|messages? selected)$/),
+		).toBeNull();
+	},
+};
+
+export const ShiftArrowRange: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		rows(canvasElement)[0]?.focus();
+		await userEvent.keyboard("j");
+		await userEvent.keyboard("{Shift>}{ArrowDown}{ArrowDown}{/Shift}");
+		await waitFor(() =>
+			expect(canvas.getByText("2 messages selected")).toBeInTheDocument(),
+		);
+	},
+};
+
+export const OpenWithJ: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		rows(canvasElement)[0]?.focus();
+		await userEvent.keyboard("j");
+		await waitFor(() =>
+			expect(
+				canvas.getAllByText("Here is the countersigned copy for your records."),
+			).toHaveLength(2),
+		);
+	},
+};
+
+export const MultiSelect: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		const [first, , third] = rows(canvasElement);
+		for (const row of [first, third]) {
+			const toggle = row?.querySelector<HTMLElement>(
+				'[aria-label="Select message"]',
+			);
+			if (toggle) await userEvent.click(toggle);
+		}
+		await expect(await canvas.findByText("2 messages selected")).toBeVisible();
+	},
+};
+
+export const MultiSelectPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		const first = rows(canvasElement)[0];
+		if (first) await longPress(first);
+		await expect(await canvas.findByText("1 message selected")).toBeVisible();
+	},
+};
+
+export const Search: Story = {
+	args: { url: "/mail/brief?q=lease" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Signed lease attached"),
+		).toBeVisible();
+		await expect(canvas.queryByText("Dinner on Saturday?")).toBeNull();
+	},
+};
+
+export const SearchWithChips: Story = {
+	args: { url: "/mail/brief?q=your" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Signed lease attached");
+		await openFilters(canvasElement);
+		await pick(canvasElement, "Attributes", "Unread");
+		await waitFor(() =>
+			expect(canvas.getByLabelText("Search mail")).toHaveValue(
+				"your is:unread",
+			),
+		);
+	},
+};
+
+export const SearchOfChipsOnly: Story = {
+	args: { url: "/mail/brief?q=is:unread" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const offer = await canvas.findByRole("button", {
+			name: "Make this a filter",
+		});
+		await userEvent.click(offer);
+		await expect(
+			await canvas.findByText(/isn't a filter condition/, { selector: "p" }),
+		).toBeVisible();
+	},
+};
+
+export const SearchHitOutsideTheBrief: Story = {
+	args: { url: "/mail/brief?q=outline" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(await canvas.findByText("Conference talk outline"));
+		await waitFor(() =>
+			expect(
+				canvas.getAllByText("Here is the rough structure for the keynote."),
+			).toHaveLength(2),
+		);
+	},
+};

package/src/components/mail/drafts.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	mailboxIdFor,
+	mailWorld,
+	PERSONAL,
+} from "@/mocks/story-frame/mail-world";
+
+const world = mailWorld();
+const draftsMailboxId = mailboxIdFor(PERSONAL, "Drafts");
+
+const meta = {
+	title: "Playground/Shipped/Mail/Drafts",
+	component: AppStory,
+	args: { url: `/mail/${draftsMailboxId}` },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Segmented: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Not yet sent (Remit)")).toBeVisible();
+		await expect(canvas.getByText("On the server")).toBeVisible();
+		await expect(canvas.getByText("Re: Q3 planning")).toBeVisible();
+		await expect(canvas.getByText("Re: Conference talk outline")).toBeVisible();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Not yet sent (Remit)")).toBeVisible();
+	},
+};
+
+export const Empty: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers({
+				...world,
+				threads: world.threads.filter(
+					(row) => row.mailboxId !== draftsMailboxId,
+				),
+				outbox: world.outbox.filter((message) => message.status !== "draft"),
+			}),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("No drafts")).toBeVisible();
+	},
+};

package/src/components/mail/flagged.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+
+const world = mailWorld();
+
+const meta = {
+	title: "Playground/Shipped/Mail/Flagged",
+	component: AppStory,
+	args: { url: "/mail/flagged" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const filterToCategory = async (canvasElement: HTMLElement, name: string) => {
+	const canvas = within(canvasElement);
+	await userEvent.click(await canvas.findByLabelText("Expand filters"));
+	const categories = await canvas.findByLabelText("Categories");
+	await userEvent.click(within(categories).getByRole("button", { name }));
+};
+
+const listHeader = (canvasElement: HTMLElement): HTMLElement => {
+	const title = within(canvasElement)
+		.getAllByText("Starred")
+		.find((element) => element.closest("header"));
+	const header = title?.closest("header");
+	if (!header) throw new Error("The Starred list header is not on screen");
+	return header;
+};
+
+export const Default: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(canvas.getByText("Conference talk outline")).toBeVisible();
+		await expect(canvas.getByText("Invoice #1042")).toBeVisible();
+		await expect(canvas.queryByText("Dinner on Saturday?")).toBeNull();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+	},
+};
+
+export const CountUnavailable: Story = {
+	parameters: {
+		msw: { handlers: mailHandlers(world, { withholdCounts: true }) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await expect(listHeader(canvasElement).textContent).not.toMatch(/\d/);
+	},
+};
+
+export const FilteredWithResults: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Invoice #1042");
+		await filterToCategory(canvasElement, "Personal");
+		await waitFor(() =>
+			expect(canvas.queryByText("Invoice #1042")).not.toBeInTheDocument(),
+		);
+		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
+		await expect(canvas.getByText("Conference talk outline")).toBeVisible();
+	},
+};
+
+export const FilteredEmpty: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await filterToCategory(canvasElement, "Newsletter");
+		await expect(
+			await canvas.findByText("Every message in this folder was checked."),
+		).toBeVisible();
+		await expect(canvas.queryByText("No messages in Starred")).toBeNull();
+	},
+};
+
+export const FilteredSearchEmpty: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await filterToCategory(canvasElement, "Newsletter");
+		await canvas.findByText("Every message in this folder was checked.");
+		await userEvent.type(
+			canvas.getByLabelText("Search mail"),
+			"planning{Enter}",
+		);
+		await expect(
+			await canvas.findByText("No results for “planning” in Newsletter mail"),
+		).toBeVisible();
+		await expect(
+			canvas.getByText("Every message in this folder was checked."),
+		).toBeVisible();
+	},
+};
+
+export const FilteredWithMorePages: Story = {
+	parameters: {
+		msw: { handlers: mailHandlers(world, { pageSize: 2 }) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await filterToCategory(canvasElement, "Personal");
+		await expect(
+			await canvas.findByRole("button", { name: "Load more" }),
+		).toBeEnabled();
+	},
+};
+
+export const FilteredFetchingMore: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(world, { pageSize: 2, holdLaterPages: true }),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Q3 planning");
+		await filterToCategory(canvasElement, "Personal");
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Load more" }),
+		);
+		await expect(
+			await canvas.findByRole("button", { name: "Loading…" }),
+		).toBeDisabled();
+	},
+};
+
+export const Empty: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers({
+				...world,
+				threads: world.threads.filter((row) => !row.hasStars),
+			}),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("No messages in Starred"),
+		).toBeVisible();
+	},
+};

package/src/components/mail/outbox.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+
+const meta = {
+	title: "Playground/Shipped/Mail/Outbox",
+	component: AppStory,
+	args: { url: "/mail/outbox" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllStatuses: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Design review notes")).toBeVisible();
+		for (const subject of [
+			"Re: Q3 planning",
+			"Weekly update",
+			"Signed lease",
+			"Re: contract",
+		]) {
+			await expect(canvas.getByText(subject)).toBeVisible();
+		}
+		for (const error of [
+			"Sent, but not filed: this account has no Sent folder",
+			"SMTP connection timed out",
+			"No SMTP server configured for this account",
+		]) {
+			await expect(canvas.getByText(error, { exact: false })).toBeVisible();
+		}
+		await expect(canvas.queryByText("Invoice #1042")).toBeNull();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Design review notes")).toBeVisible();
+	},
+};
+
+export const Empty: Story = {
+	parameters: {
+		msw: { handlers: mailHandlers(mailWorld({ outbox: [] })) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("No outbox messages")).toBeVisible();
+	},
+};

package/src/hooks/useIntelligenceData.ts

@@ -138,8 +138,8 @@ function joinDomains(domains: readonly string[]): string {
 /**
  * The clauses naming what does not line up on a message whose signature checks
  * out. Empty when everything the backend compared agreed — including when it
- * compared nothing, which is every message the provider's filter did not
- * already call spam.
+ * compared nothing, which is every message outside Junk that the provider's
+ * filter did not already call spam.
  *
  * Each clause leads with the concern and names `auth.fromDomain` — the
  * domain `classifyDisplayNameCorrespondence` actually compared the display

package/src/mocks/story-frame/AppStory.tsx

@@ -0,0 +1,47 @@
+import {
+	MutationCache,
+	QueryCache,
+	QueryClient,
+	QueryClientProvider,
+} from "@tanstack/react-query";
+import { createMemoryHistory, RouterProvider } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	handleMutationCacheError,
+	handleQueryCacheError,
+} from "@/lib/query-error-handler";
+import { noopTelemetry } from "@/lib/telemetry";
+import { createAppRouter } from "@/router";
+import "@/lib/i18n";
+import "@/lib/client";
+
+export interface AppStoryProps {
+	url: string;
+}
+
+const createStoryQueryClient = (): QueryClient =>
+	new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		mutationCache: new MutationCache({ onError: handleMutationCacheError }),
+		defaultOptions: {
+			queries: { staleTime: Number.POSITIVE_INFINITY, retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+export function AppStory({ url }: AppStoryProps) {
+	const [queryClient] = useState(createStoryQueryClient);
+	const [router] = useState(() =>
+		createAppRouter(
+			queryClient,
+			noopTelemetry,
+			createMemoryHistory({ initialEntries: [url] }),
+		),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<RouterProvider router={router} />
+		</QueryClientProvider>
+	);
+}