@remit/web-client 0.0.264 → 0.0.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.264",
+  "version": "0.0.266",
   "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/compose/ComposeProvider.tsx

@@ -41,17 +41,23 @@ const ComposeContext = createContext<ComposeContextValue | undefined>(
 const POLL_INTERVAL_MS = 2000;
 const MAX_POLL_DURATION_MS = 60_000;
 
+/**
+ * `sent` is not one of these. It is the window between SMTP handing the message
+ * over and the APPEND either filing it — row deleted, 404 — or settling it
+ * `unfiled`, and the outbox list renders no `sent` row (`isOutboxListRow`). A
+ * watch that stopped there invalidated the list over a row nothing displays and
+ * never asked again, so the `unfiled` a beat later reached no screen: #824's
+ * message the sender can reach in no view, arrived at from the client's side.
+ * A row stranded at `sent` by a delete that failed polls to the cap below,
+ * which is what the cap is for.
+ */
 const isSettledStatus = (status: string | undefined): boolean =>
-	status === "sent" ||
-	status === "unfiled" ||
-	status === "failed" ||
-	status === "blocked";
+	status === "unfiled" || status === "failed" || status === "blocked";
 
 /**
  * A send that lands is filed and then forgotten: the worker APPENDs the message
  * to Sent and drops the outbox row, so the row's absence is the settled state
- * and the 404 is the confirmation. `sent` lives for under a second and this poll
- * runs every two, so the 404 is the outcome it normally reads.
+ * and the 404 is the confirmation.
  *
  * Only the 404 is this call site's to own. A 401 or a 403 here is a session that
  * lapsed under a send, which the app owes the user an answer about.

package/src/components/compose/send-watch-outlives-sent.render.test.ts

@@ -0,0 +1,121 @@
+/**
+ * Issue #1040: the send watch counted `sent` as its answer and came down on it.
+ *
+ * `sent` is the window between SMTP handing the message over and the APPEND
+ * either filing it — row deleted, 404 — or settling it `unfiled`. It is a few
+ * tens of milliseconds wide and the watch's first read lands inside it perhaps
+ * one send in twenty, which is where the e2e flake came from. What the user got
+ * when it did land there is worse than a flake: the watch stopped, invalidated
+ * the outbox list over a row the list does not render, and never asked again —
+ * so a message that went out unfiled was on no screen at all, which is the very
+ * state #824 exists to prevent.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { outboxOperationsListOutboxMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement, useEffect } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+const OUTBOX_MESSAGE_ID = "ob-1040";
+const POLL_INTERVAL_MS = 2000;
+
+const UNFILED_REASON =
+	"Sent, but not filed: this account has no folder appointed to the Sent role.";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let status = "sent";
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	status = "sent";
+});
+
+const polls = (): number => (http?.to(OUTBOX_MESSAGE_ID) ?? []).length;
+
+const outboxListIsStale = (): boolean =>
+	harness?.queryClient
+		.getQueryCache()
+		.find({ queryKey: outboxOperationsListOutboxMessagesQueryKey() })?.state
+		.isInvalidated === true;
+
+const Sender = () => {
+	const { startSendPolling } = useCompose();
+
+	useEffect(() => {
+		startSendPolling(OUTBOX_MESSAGE_ID);
+	}, [startSendPolling]);
+
+	return null;
+};
+
+const mount = async (): Promise<void> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith(OUTBOX_MESSAGE_ID)) {
+			return {
+				outboxMessageId: OUTBOX_MESSAGE_ID,
+				status,
+				lastError: status === "unfiled" ? UNFILED_REASON : undefined,
+			};
+		}
+		return { messages: [] };
+	});
+
+	harness = createDomHarness();
+	harness.queryClient.setQueryData(
+		outboxOperationsListOutboxMessagesQueryKey(),
+		{ messages: [] },
+	);
+	harness.renderApp(
+		createElement(ComposeProvider, null, createElement(Sender)),
+	);
+	await harness.flush();
+};
+
+const reachedPolls = async (count: number): Promise<void> => {
+	await harness?.waitFor(
+		() => polls() >= count,
+		`the watch to have read the row ${count} times`,
+		POLL_INTERVAL_MS * count + POLL_INTERVAL_MS,
+	);
+};
+
+describe("a send whose filing is still owed (#1040)", () => {
+	it("keeps asking while the row reads sent", async () => {
+		await mount();
+		await reachedPolls(1);
+
+		assert.ok(
+			!outboxListIsStale(),
+			"nothing was settled, so nothing refetched",
+		);
+
+		await reachedPolls(3);
+		assert.ok(
+			!outboxListIsStale(),
+			"`sent` is not an answer the watch stops on",
+		);
+	});
+
+	it("stops on the unfiled row, and only then refetches the list", async () => {
+		await mount();
+		await reachedPolls(2);
+
+		status = "unfiled";
+		await harness?.waitFor(
+			() => outboxListIsStale(),
+			"the watch to settle on the unfiled row and invalidate the list",
+			POLL_INTERVAL_MS * 3,
+		);
+
+		const settled = polls();
+		await harness?.wait(POLL_INTERVAL_MS * 2);
+		assert.equal(polls(), settled, "the settled row ended the watch");
+	});
+});

package/src/components/mail/IntelligencePane.tsx

@@ -1,10 +1,13 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
+	CATEGORY_PRESENTATION,
+	categoryLabels,
 	DialogBackdrop,
 	IntelligencePanel,
 	type IntelligenceQuickActions,
 	type SimilarMessageLinkComponent,
 	type SimilarState,
+	type ThreadCategory,
 } from "@remit/ui";
 import { Sparkles } from "lucide-react";
 import { useCallback, useState } from "react";
@@ -52,18 +55,20 @@ export interface IntelligencePaneProps {
 
 /**
  * Category-override values accepted by the `AddressFlags.category` override
- * (PATCH /addresses/{id}). Matches `MessageCategory` — the full taxonomy the
- * user can assign as a sender-level override.
+ * (PATCH /addresses/{id}), in the kit's chip-row order and named with the kit's
+ * words. `uncategorized` is left out: it names the classifier not having reached
+ * a message yet, which is not something a reader chooses for a sender.
  */
-const CATEGORY_OVERRIDES = [
-	"personal",
-	"newsletter",
-	"marketing",
-	"automated",
-	"transactional",
-	"social",
-] as const;
-type CategoryOverride = (typeof CATEGORY_OVERRIDES)[number];
+type CategoryOverride = Exclude<ThreadCategory, "uncategorized">;
+
+const isCategoryOverride = (
+	category: ThreadCategory,
+): category is CategoryOverride => category !== "uncategorized";
+
+const CATEGORY_OVERRIDES: readonly CategoryOverride[] =
+	CATEGORY_PRESENTATION.map((entry) => entry.category).filter(
+		isCategoryOverride,
+	);
 
 /**
  * Decide which spam quick-action to offer for the current message (issue #648).
@@ -189,11 +194,11 @@ function ReclassifyDialog({
 							key={cat}
 							type="button"
 							onClick={() => onSelect(cat)}
-							className={`flex min-h-11 items-center justify-between rounded px-3 text-left text-sm capitalize transition-colors hover:bg-surface-raised ${
+							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"
 							}`}
 						>
-							{cat}
+							{categoryLabels[cat]}
 							{cat === current && (
 								<span className="text-2xs text-fg-subtle">current</span>
 							)}

package/src/components/mail/brief-server-sections.render.test.ts

@@ -605,14 +605,10 @@ describe("the brief's sections come from the server (#312)", () => {
 				shown.indexOf("Weekly digest for you"),
 			"an old newsletter still outranked a newer match",
 		);
-		for (const label of ["Newsletter", "Automated", "Personal"]) {
-			assert.ok(
-				!shown.includes(label),
-				`the search kept the ${label} section header`,
-			);
-		}
+		// A category's word still reaches the screen on a row badge, so the
+		// headers are counted rather than read off the text.
 		assert.equal(
-			mounted.queryAll('button[aria-expanded="true"]').length,
+			mounted.queryAll("[data-section-header]").length,
 			0,
 			"the search rendered a section header",
 		);

package/src/lib/brief.test.ts

@@ -1,8 +1,14 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import type { ResultCount, ThreadCategory, ThreadRowData } from "@remit/ui";
 import {
+	categoryLabels,
+	type ResultCount,
+	type ThreadCategory,
+	type ThreadRowData,
+} from "@remit/ui";
+import {
+	BRIEF_CATEGORIES,
 	type BriefCategoryResult,
 	briefSections,
 	briefSectionTotal,
@@ -109,16 +115,8 @@ describe("briefSections", () => {
 	});
 
 	test("each category answers for its own section, with its own label", () => {
-		const labels = new Map<ThreadCategory, string>([
-			["personal", "Personal"],
-			["transactional", "Transactional"],
-			["newsletter", "Newsletter"],
-			["marketing", "Marketing"],
-			["social", "Social"],
-			["automated", "Automated"],
-			["uncategorized", "Unclassified"],
-		]);
-		for (const [category, label] of labels) {
+		for (const category of BRIEF_CATEGORIES) {
+			const label = categoryLabels[category];
 			const sections = briefSections([
 				result(category, [row({ id: "1", category })]),
 			]);

package/src/lib/brief.ts

@@ -36,13 +36,14 @@
  */
 
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { MessageCategory } from "@remit/domain-enums";
-import type {
-	ResultCount,
-	SenderTrustLevel,
-	ThreadCategory,
-	ThreadRowData,
-	ThreadSection,
+import {
+	CATEGORY_SECTION_ORDER,
+	categoryLabels,
+	type ResultCount,
+	type SenderTrustLevel,
+	type ThreadCategory,
+	type ThreadRowData,
+	type ThreadSection,
 } from "@remit/ui";
 import { toDisplayCategory } from "./display-category.js";
 import { formatEmailDate } from "./format.js";
@@ -145,39 +146,12 @@ export function mergeSearchRows(
 }
 
 /**
- * Category sections in fixed display order. The `id`/`label` drive the rendered
- * section; `category` is both the section's own scope and the query parameter
- * the section's request carries.
+ * The categories the brief asks for, in the order it renders them. A category
+ * is both the section's own scope and the query parameter its request carries;
+ * the order and the label come from the kit's category table.
  */
-export const CATEGORY_SECTIONS: ReadonlyArray<{
-	id: string;
-	label: string;
-	category: ThreadCategory;
-}> = [
-	{ id: "personal", label: "Personal", category: MessageCategory.personal },
-	{
-		id: "transactional",
-		label: "Transactional",
-		category: MessageCategory.transactional,
-	},
-	{
-		id: "newsletter",
-		label: "Newsletter",
-		category: MessageCategory.newsletter,
-	},
-	{ id: "marketing", label: "Marketing", category: MessageCategory.marketing },
-	{ id: "social", label: "Social", category: MessageCategory.social },
-	{ id: "automated", label: "Automated", category: MessageCategory.automated },
-	{
-		id: "uncategorized",
-		label: "Unclassified",
-		category: MessageCategory.uncategorized,
-	},
-];
-
-/** The categories the brief asks for, in the order it renders them. */
 export const BRIEF_CATEGORIES: readonly ThreadCategory[] =
-	CATEGORY_SECTIONS.map((section) => section.category);
+	CATEGORY_SECTION_ORDER;
 
 /** One category's own server answer: its newest rows and how many it holds. */
 export interface BriefCategoryResult {
@@ -214,8 +188,8 @@ export function briefSections(
 		results.map((result) => [result.category, result] as const),
 	);
 	const sections: ThreadSection[] = [];
-	for (const section of CATEGORY_SECTIONS) {
-		const result = byCategory.get(section.category);
+	for (const category of BRIEF_CATEGORIES) {
+		const result = byCategory.get(category);
 		if (!result) continue;
 		const holdsMail =
 			result.loading ||
@@ -224,8 +198,8 @@ export function briefSections(
 			(result.total.kind === "exact" && result.total.value > 0);
 		if (!holdsMail) continue;
 		sections.push({
-			id: section.id,
-			label: section.label,
+			id: category,
+			label: categoryLabels[category],
 			threads: result.rows,
 			total: result.total,
 			atCap: result.atCap,

package/src/lib/inbox-filters.ts

@@ -3,7 +3,7 @@ import type {
 	ThreadOperationsSearchThreadsData,
 } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
-import { type FilterReach, inboxFilterConfig } from "@remit/ui";
+import { categoryLabels, type FilterReach, isThreadCategory } from "@remit/ui";
 
 /** The request `threadOperationsSearchThreads` takes, whole. */
 export type ThreadSearchQuery = NonNullable<
@@ -131,14 +131,7 @@ export const sameInboxFilter = (
 /**
  * The label the empty state names an active category filter by, or undefined
  * when the id names no category — `"all"` is how the category is cleared, not a
- * category. Read off the preset so the chip and the sentence about it can never
- * disagree; every list preset draws its categories from the same set.
+ * category.
  */
-const CATEGORY_LABELS = new Map(
-	inboxFilterConfig()
-		.categories.filter((category) => category.id !== "all")
-		.map((category) => [category.id, category.label]),
-);
-
 export const categoryLabel = (id: string): string | undefined =>
-	CATEGORY_LABELS.get(id);
+	isThreadCategory(id) ? categoryLabels[id] : undefined;

package/src/lib/search-tokens.ts

@@ -43,6 +43,7 @@
 import type { RemitImapMessageCategory } from "@remit/api-http-client/types.gen.ts";
 import { MessageCategory } from "@remit/domain-enums";
 import {
+	categoryLabels,
 	quoteSearchTokenValue,
 	type SearchQueryWord,
 	type SearchTermParts,
@@ -134,24 +135,9 @@ export interface SearchTokenSpec {
 	options?: readonly SearchTokenValueOption[];
 }
 
-/**
- * Category labels, keyed by the API enum. `uncategorized` reads "Unclassified"
- * — the same word the filter chips use (issue #45): mail the classifier has not
- * reached is a pending state with a name, never the absence of one.
- */
-const CATEGORY_LABELS: Record<RemitImapMessageCategory, string> = {
-	personal: "Personal",
-	uncategorized: "Unclassified",
-	transactional: "Transactional",
-	newsletter: "Newsletter",
-	marketing: "Marketing",
-	social: "Social",
-	automated: "Automated",
-};
-
 const CATEGORY_OPTIONS: readonly SearchTokenValueOption[] = Object.values(
 	MessageCategory,
-).map((value) => ({ value, label: CATEGORY_LABELS[value] }));
+).map((value) => ({ value, label: categoryLabels[value] }));
 
 /**
  * Spellings that resolve to a category beyond the enum values themselves — the
@@ -313,7 +299,7 @@ export function searchTokenLabel(token: SearchToken): string {
 		case "subject":
 			return `Subject: ${token.value}`;
 		case "category":
-			return `Category: ${CATEGORY_LABELS[token.category]}`;
+			return `Category: ${categoryLabels[token.category]}`;
 		case "hasAttachment":
 			return "Has attachment";
 		case "isUnread":