@remit/web-client 0.0.239 → 0.0.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.239",
+  "version": "0.0.240",
   "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/settings/QuarantinePanel.delimiter.test.ts

@@ -0,0 +1,112 @@
+/**
+ * A quarantine row names the folder its message sits in, which means cutting a
+ * provider path into a leaf — and that cut is only correct on the account's own
+ * hierarchy separator. The separator comes from a second read (the account's
+ * mailbox list), so the pane must never paint a row before that read lands:
+ * `INBOX.Projects.Q3` cut on a slash is one segment, and the row would show the
+ * whole path as if it were a folder name. See #900.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { QuarantinePanel } from "./QuarantinePanel";
+
+const ACCOUNT_ID = "acct-1";
+const MAILBOX_ID = "mbx-q3";
+const FULL_PATH = "INBOX.Projects.Q3";
+
+const CONFIG = {
+	accounts: [{ accountId: ACCOUNT_ID, folderAppointments: [] }],
+};
+
+const MAILBOXES = {
+	items: [
+		{
+			mailboxId: MAILBOX_ID,
+			fullPath: FULL_PATH,
+			hierarchyDelimiter: ".",
+		},
+	],
+};
+
+const QUARANTINE = {
+	entries: [
+		{
+			quarantineId: "q-1",
+			accountId: ACCOUNT_ID,
+			mailboxId: MAILBOX_ID,
+			uidValidity: 1_712_000_000,
+			uid: 40251,
+			mailboxPath: FULL_PATH,
+			failureStage: "BodyParse",
+			failureCode: "UnreadableBody",
+			failureMessage: "stream ended before the declared body length",
+			quarantinedAt: Date.parse("2026-07-19T06:03:00Z"),
+			attempts: 1,
+			sizeBytes: 2_140,
+			structure: [],
+		},
+	],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const mount = async (mailboxes: () => unknown): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return CONFIG;
+		if (call.path.endsWith("/mailboxes")) return mailboxes();
+		if (call.path.endsWith("/quarantine")) return QUARANTINE;
+		return {};
+	});
+	harness = createDomHarness();
+	harness.renderApp(createElement(QuarantinePanel));
+	// Two waves: the mailbox-list fan-out is keyed on the accounts `/config`
+	// returns, so it cannot even start until that first read has settled.
+	await harness.flush();
+	await harness.wait(0);
+	await harness.flush();
+	return harness;
+};
+
+describe("QuarantinePanel folder names", () => {
+	it("waits for the account's delimiter rather than cutting on a guess", async () => {
+		const view = await mount(() => new Promise(() => {}));
+
+		assert.match(view.text(), /Checking for messages set aside/);
+		assert.doesNotMatch(
+			view.text(),
+			new RegExp(FULL_PATH.replace(/\./g, "\\.")),
+		);
+	});
+
+	it("names the folder by its leaf once the delimiter has arrived", async () => {
+		const view = await mount(() => MAILBOXES);
+
+		assert.match(view.text(), /Q3/);
+		assert.doesNotMatch(
+			view.text(),
+			new RegExp(FULL_PATH.replace(/\./g, "\\.")),
+		);
+	});
+
+	it("reports a failed mailbox read instead of naming folders on a guess", async () => {
+		const view = await mount(() => httpError(500));
+
+		assert.match(view.html(), /role="alert"/);
+		assert.doesNotMatch(
+			view.text(),
+			new RegExp(FULL_PATH.replace(/\./g, "\\.")),
+		);
+	});
+});

package/src/components/settings/QuarantinePanel.tsx

@@ -6,7 +6,10 @@
  * visible: the list, the reassurance that there is nothing in it, and the
  * failure to read it at all. None of them is an empty panel.
  */
-import { meOperationsListQuarantineOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	configOperationsGetConfigOptions,
+	meOperationsListQuarantineOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
@@ -20,9 +23,10 @@ import { useQuery } from "@tanstack/react-query";
 import { Bug } from "lucide-react";
 import { useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
-import { useAccountDelimiters } from "@/hooks/useAccountDelimiters";
+import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { toQuarantineEntry } from "@/lib/quarantine-entries";
+import type { ResultFolderIndex } from "@/lib/result-folder";
 
 /** Stable identity, so an empty list does not rebuild the memos below. */
 const EMPTY_WIRE_ENTRIES: readonly RemitImapQuarantineResponse[] = [];
@@ -126,30 +130,49 @@ export function QuarantinePanelView({
 	);
 }
 
+/**
+ * A row names the folder it came from by the leaf of its path, which cannot be
+ * cut until that account's own delimiter has arrived. A mailbox the account no
+ * longer lists never gets one, and keeps its whole path — `folderLeaf` on an
+ * empty delimiter is the path itself.
+ */
+function delimiterForMailbox(
+	folders: ResultFolderIndex,
+	mailboxId: string,
+): string {
+	return folders.get(mailboxId)?.hierarchyDelimiter ?? "";
+}
+
+/**
+ * The folder names come from the account's mailbox lists, which are a second
+ * read — started alongside the quarantine list, never behind it. Until both have
+ * landed the pane says it is still reading, because a path cut on a delimiter
+ * that has not arrived is a wrong folder name rather than a late one, and a
+ * failure on either read is reported rather than papered over with a guess.
+ */
 export function QuarantinePanel() {
-	const { data, isPending, error } = useQuery(
-		meOperationsListQuarantineOptions(),
-	);
+	const quarantine = useQuery(meOperationsListQuarantineOptions());
+	const config = useQuery(configOperationsGetConfigOptions());
+	const accounts = useMemo(() => config.data?.accounts ?? [], [config.data]);
+	const folders = useResultFolderIndex(accounts);
 
-	const wireEntries = data?.entries ?? EMPTY_WIRE_ENTRIES;
-	const accountIds = useMemo(
-		() => [...new Set(wireEntries.map((entry) => entry.accountId))],
-		[wireEntries],
-	);
-	const delimiters = useAccountDelimiters(accountIds);
+	const wireEntries = quarantine.data?.entries ?? EMPTY_WIRE_ENTRIES;
 	const entries = useMemo(
 		() =>
 			wireEntries.map((entry) =>
-				toQuarantineEntry(entry, delimiters.get(entry.accountId) ?? "/"),
+				toQuarantineEntry(
+					entry,
+					delimiterForMailbox(folders.index, entry.mailboxId),
+				),
 			),
-		[wireEntries, delimiters],
+		[wireEntries, folders.index],
 	);
 
 	return (
 		<QuarantinePanelView
 			entries={entries}
-			isPending={isPending}
-			error={error}
+			isPending={quarantine.isPending || config.isPending || folders.isPending}
+			error={quarantine.error ?? config.error ?? folders.error}
 		/>
 	);
 }

package/src/hooks/useResultFolderIndex.ts

@@ -3,6 +3,10 @@
  * and `useMailboxNameIndex` run — cached forever, react-query dedupes the
  * identical key across call sites) and reduces it to the mailboxId → folder map
  * search results resolve their provenance against. See `lib/result-folder.ts`.
+ *
+ * The read state travels with the index: a folder label cut on a delimiter that
+ * has not arrived is wrong rather than late, so a surface that names folders can
+ * wait for this, and say so when it fails.
  */
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type {
@@ -18,37 +22,63 @@ import {
 
 type MailboxItems = RemitImapMailboxResponse[];
 
+interface MailboxListsState {
+	items: MailboxItems[];
+	isPending: boolean;
+	error: Error | null;
+}
+
+export interface ResultFolderIndexState {
+	index: ResultFolderIndex;
+	isPending: boolean;
+	error: Error | null;
+}
+
 /**
  * Hoisted, not inline: `useQueries` skips re-running `combine` when it is given
  * the same function, so a stable reference is what makes this a memo rather than
  * a per-render reduce. Without it the index — and every search-result memo keyed
  * on it — rebuilds on every render.
  */
-const combineMailboxItems = (
-	results: { data?: { items: MailboxItems } }[],
-): MailboxItems[] => results.map((result) => result.data?.items ?? []);
+const combineMailboxLists = (
+	results: {
+		data?: { items: MailboxItems };
+		isPending: boolean;
+		error: Error | null;
+	}[],
+): MailboxListsState => ({
+	items: results.map((result) => result.data?.items ?? []),
+	isPending: results.some((result) => result.isPending),
+	error: results.find((result) => result.error)?.error ?? null,
+});
 
 export function useResultFolderIndex(
 	accounts: RemitImapAccountResponse[],
-): ResultFolderIndex {
-	const mailboxItems = useQueries({
+): ResultFolderIndexState {
+	const mailboxLists = useQueries({
 		queries: accounts.map((account) => ({
 			...mailboxOperationsListMailboxesOptions({
 				path: { accountId: account.accountId },
 			}),
 			staleTime: Infinity,
 		})),
-		combine: combineMailboxItems,
+		combine: combineMailboxLists,
 	});
 
-	return useMemo(
+	const index = useMemo(
 		() =>
 			buildResultFolderIndex(
 				accounts.map((account, i) => ({
 					folderAppointments: account.folderAppointments,
-					mailboxes: mailboxItems[i] ?? [],
+					mailboxes: mailboxLists.items[i] ?? [],
 				})),
 			),
-		[accounts, mailboxItems],
+		[accounts, mailboxLists],
 	);
+
+	return {
+		index,
+		isPending: mailboxLists.isPending,
+		error: mailboxLists.error,
+	};
 }

package/src/lib/quarantine-entries.ts

@@ -8,9 +8,11 @@ import { CANONICAL_TO_NAV_ROLE } from "./folder-roles";
  * canonical PascalCase the API uses everywhere. Both differences are resolved
  * here rather than by widening the kit's entry type.
  *
- * The record carries no hierarchy delimiter either, so the caller resolves the
- * account's own from its mailbox list and hands it in — the row shows a folder
- * name, and a path cannot be cut into one without it.
+ * The record carries no hierarchy delimiter either, so the caller joins the
+ * mailbox id against the account's own mailbox list and hands the delimiter in
+ * — the row shows a folder name, and a path cannot be cut into one without it.
+ * An empty delimiter means no account lists that mailbox, and the row keeps its
+ * whole path rather than being cut on a guess.
  */
 export function toQuarantineEntry(
 	wire: RemitImapQuarantineResponse,

package/src/routes/mail.tsx

@@ -173,7 +173,7 @@ function MailLayout() {
 		[accounts],
 	);
 	const mailboxNameIndex = useMailboxNameIndex(accounts);
-	const resultFolderIndex = useResultFolderIndex(accounts);
+	const resultFolderIndex = useResultFolderIndex(accounts).index;
 	const accountNameIndex = useMemo(
 		() => buildAccountNameIndex(accounts),
 		[accounts],

package/src/hooks/useAccountDelimiters.ts

@@ -1,41 +0,0 @@
-/**
- * The hierarchy separator each account's own server reports, for surfaces that
- * hold a provider path but not the mailbox row it came from — quarantine, so
- * far. Fans out the same per-account mailbox-list query as
- * `useResultFolderIndex` (cached forever, react-query dedupes the identical key
- * across call sites) and keeps only the delimiter.
- */
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
-import { useQueries } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { folderDelimiter } from "@/lib/move-options";
-
-/**
- * Hoisted so `useQueries` treats this as a memo rather than a per-render
- * reduce — see `useResultFolderIndex`.
- */
-const combineDelimiters = (
-	results: { data?: { items: RemitImapMailboxResponse[] } }[],
-): string[] =>
-	results.map((result) => folderDelimiter(result.data?.items ?? []));
-
-export function useAccountDelimiters(
-	accountIds: readonly string[],
-): ReadonlyMap<string, string> {
-	const delimiters = useQueries({
-		queries: accountIds.map((accountId) => ({
-			...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-			staleTime: Infinity,
-		})),
-		combine: combineDelimiters,
-	});
-
-	return useMemo(
-		() =>
-			new Map(
-				accountIds.map((accountId, i) => [accountId, delimiters[i] ?? "/"]),
-			),
-		[accountIds, delimiters],
-	);
-}