@remit/web-client 0.0.321 → 0.0.323

package/src/components/settings/FiltersList.tsx

@@ -1,11 +1,5 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	Badge,
-	Button,
-	LabelChip,
-	type LabelOption,
-	WidenChip,
-} from "@remit/ui";
+import { Badge, Button, LabelChip, type LabelOption } from "@remit/ui";
 import { Trash2 } from "lucide-react";
 import type { FilterRunStatus } from "@/lib/organize/filter-run";
 import {
@@ -47,12 +41,6 @@ interface FiltersListProps {
 	runFilterId?: string;
 	/** How that run stands; a failure is reported above the list. */
 	runStatus?: FilterRunStatus;
-	/**
-	 * This deployment ships no vector pipeline (RFC 038 D4). A filter carrying a
-	 * semantic anchor lists with its widen chip inactive — it matches by its
-	 * literal clauses only.
-	 */
-	semanticUnavailable?: boolean;
 	/** Injected for deterministic status in tests; defaults to now. */
 	now?: number;
 }
@@ -60,9 +48,7 @@ interface FiltersListProps {
 /**
  * The account's standing filters, each opening its rule in the editor (RFC 038
  * D6). Expired temporary filters stay listed and are marked Expired distinctly
- * rather than hidden (RFC 034 Decision 1.2). A filter with a semantic anchor
- * shows the widen chip — inactive where this deployment cannot evaluate it
- * (D4), so the list says honestly that it matches by literal clauses only.
+ * rather than hidden (RFC 034 Decision 1.2).
  */
 export function FiltersList({
 	filters,
@@ -76,7 +62,6 @@ export function FiltersList({
 	onRunNow,
 	runFilterId,
 	runStatus,
-	semanticUnavailable = false,
 	now = Date.now(),
 }: FiltersListProps) {
 	if (filters.length === 0) {
@@ -156,25 +141,15 @@ export function FiltersList({
 									{runLine}
 								</p>
 							)}
-							{(filter.hasAnchor || label) && (
+							{label && (
 								<div className="mt-1.5 flex flex-wrap gap-1.5">
-									{filter.hasAnchor && (
-										<WidenChip
-											widen={{
-												anchorCount: 1,
-												...(semanticUnavailable ? { inactive: true } : {}),
-											}}
-										/>
-									)}
-									{label && (
-										<LabelChip
-											label={{
-												labelId: label.id,
-												name: label.name,
-												color: label.color,
-											}}
-										/>
-									)}
+									<LabelChip
+										label={{
+											labelId: label.id,
+											name: label.name,
+											color: label.color,
+										}}
+									/>
 								</div>
 							)}
 						</button>

package/src/components/settings/WarningsNavIcon.tsx

@@ -0,0 +1,12 @@
+import { AttentionDot } from "@remit/ui";
+import { TriangleAlert } from "lucide-react";
+import { useWarningsAttention } from "@/hooks/useWarningsAttention";
+
+export function WarningsNavIcon() {
+	const attention = useWarningsAttention();
+	return (
+		<AttentionDot label={attention}>
+			<TriangleAlert className="size-4" />
+		</AttentionDot>
+	);
+}

package/src/components/settings/{QuarantinePanel.delimiter.test.ts → WarningsPanel.dom.test.ts}

@@ -13,7 +13,7 @@ import { meOperationsListQuarantineOptions } from "@remit/api-http-client/@tanst
 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";
+import { WarningsPanel } from "./WarningsPanel";
 
 const ACCOUNT_ID = "acct-1";
 const MAILBOX_ID = "mbx-q3";
@@ -51,6 +51,8 @@ const QUARANTINE = {
 			structure: [],
 		},
 	],
+	warnings: [],
+	warningsTotal: 0,
 };
 
 let harness: DomHarness | undefined;
@@ -76,16 +78,17 @@ const mount = async (
 	mailboxes: () => unknown,
 	settled: (view: DomHarness) => boolean,
 	description: string,
+	list: () => unknown = () => QUARANTINE,
 ): 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;
+		if (call.path.endsWith("/quarantine")) return list();
 		return {};
 	});
 	const view = createDomHarness();
 	harness = view;
-	view.renderApp(createElement(QuarantinePanel));
+	view.renderApp(createElement(WarningsPanel));
 	// 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. How
 	// many turns those waves take is the runner's business, so each case names
@@ -94,7 +97,63 @@ const mount = async (
 	return view;
 };
 
-describe("QuarantinePanel folder names", () => {
+describe("WarningsPanel reads", () => {
+	it("lists a body that gave up and a header still retrying beside the set-aside message", async () => {
+		const view = await mount(
+			() => MAILBOXES,
+			(pane) => /Gave up/.test(pane.text()),
+			"the warning to be listed",
+			() => ({
+				...QUARANTINE,
+				warnings: [
+					{
+						syncWarningId: "w-1",
+						accountConfigId: "cfg-1",
+						accountId: ACCOUNT_ID,
+						mailboxId: MAILBOX_ID,
+						uidValidity: 1_712_000_000,
+						uid: 51002,
+						stage: "Body",
+						attempts: 3,
+						createdAt: Date.parse("2026-10-17T08:12:00Z"),
+					},
+					{
+						syncWarningId: "w-2",
+						accountConfigId: "cfg-1",
+						accountId: ACCOUNT_ID,
+						mailboxId: MAILBOX_ID,
+						uidValidity: 1_712_000_000,
+						uid: 50874,
+						stage: "Header",
+						attempts: 5,
+						createdAt: Date.parse("2026-10-16T21:40:00Z"),
+					},
+				],
+				warningsTotal: 2,
+			}),
+		);
+
+		assert.match(view.text(), /uid 51002/);
+		assert.match(view.text(), /Retrying/);
+		assert.match(view.text(), /uid 50874/);
+		assert.match(view.text(), /Messages set aside/);
+		assert.match(view.text(), /uid 40251/);
+	});
+
+	it("shows a 401 on the list as signed out, never as an empty list", async () => {
+		const view = await mount(
+			() => MAILBOXES,
+			(pane) => /Your session has ended/.test(pane.text()),
+			"the signed-out notice",
+			() => httpError(401),
+		);
+
+		assert.match(view.html(), /role="alert"/);
+		assert.doesNotMatch(view.text(), /Nothing has failed|Nothing is set aside/);
+	});
+});
+
+describe("WarningsPanel folder names", () => {
 	it("waits for the account's delimiter rather than cutting on a guess", async () => {
 		// The mailbox read never resolves here, so settled means every read that
 		// can land has: the entries are in hand and only the delimiter is missing.
@@ -105,7 +164,7 @@ describe("QuarantinePanel folder names", () => {
 			"the quarantine list to land while the mailbox read hangs",
 		);
 
-		assert.match(view.text(), /Checking for messages set aside/);
+		assert.match(view.text(), /Checking for warnings/);
 		assert.doesNotMatch(
 			view.text(),
 			new RegExp(FULL_PATH.replace(/\./g, "\\.")),

package/src/components/settings/WarningsPanel.render.test.ts

@@ -0,0 +1,56 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { WarningsPanelView, type WarningsRead } from "./WarningsPanel";
+
+// See MessageToolbar.render.test.ts: the SSR test loader transpiles remit-ui
+// `.tsx` with the classic JSX runtime, which needs a global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+const render = (read: WarningsRead): string =>
+	renderToString(
+		createElement(WarningsPanelView, {
+			read,
+			signIn: createElement("button", { type: "button" }, "Sign in again"),
+		}) as never,
+	);
+
+const ready = (
+	over: Partial<Extract<WarningsRead, { kind: "Ready" }>>,
+): WarningsRead => ({
+	kind: "Ready",
+	quarantine: [],
+	warnings: [],
+	warningsTotal: 0,
+	...over,
+});
+
+describe("WarningsPanelView", () => {
+	it("says nothing failed and nothing is set aside rather than rendering nothing", () => {
+		const html = render(ready({}));
+		assert.match(html, /Messages that failed to sync/);
+		assert.match(html, /Nothing has failed/);
+		assert.match(html, /Messages set aside/);
+		assert.match(html, /Nothing is set aside/);
+	});
+
+	it("reports a failed read in the pane, with a way to file it", () => {
+		const html = render({
+			kind: "Failed",
+			error: new Error("Failed to fetch"),
+		});
+		assert.match(html, /role="alert"/);
+		assert.match(html, /could not be read/);
+		assert.match(html, /Failed to fetch/);
+		assert.match(html, /Report this/);
+		assert.doesNotMatch(html, /Nothing has failed/);
+		assert.doesNotMatch(html, /Nothing is set aside/);
+	});
+
+	it("says it is still reading rather than claiming an empty list", () => {
+		const html = render({ kind: "Pending" });
+		assert.match(html, /Checking for warnings/);
+		assert.doesNotMatch(html, /Nothing has failed/);
+	});
+});

package/src/components/settings/WarningsPanel.tsx

@@ -0,0 +1,244 @@
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapQuarantineResponse,
+	RemitImapSyncWarningResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	Button,
+	formatErrorMessage,
+	formatQuarantineReport,
+	formatSyncWarningReport,
+	MessageReportDialog,
+	type QuarantineEntry,
+	QuarantineSection,
+	quarantineIssueTitle,
+	quarantineReportSections,
+	type SyncWarningEntry,
+	SyncWarningSection,
+	syncWarningIssueTitle,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { Bug } from "lucide-react";
+import { type ReactNode, useMemo, useState } from "react";
+import { SignInAgain } from "@/auth/SignInAgain";
+import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
+import { useWarningsList } from "@/hooks/useWarningsAttention";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import { isUnauthenticated } from "@/lib/error-classifier";
+import { toQuarantineEntry } from "@/lib/quarantine-entries";
+import type { ResultFolderIndex } from "@/lib/result-folder";
+import { toSyncWarningEntry } from "@/lib/sync-warning-entries";
+
+const EMPTY_QUARANTINE: readonly RemitImapQuarantineResponse[] = [];
+const EMPTY_WARNINGS: readonly RemitImapSyncWarningResponse[] = [];
+
+interface Reporting {
+	report: string;
+	issueUrl: string;
+}
+
+function openIssue(url: string): void {
+	window.open(url, "_blank", "noopener,noreferrer");
+}
+
+function quarantineReporting(entry: QuarantineEntry): Reporting {
+	return {
+		report: formatQuarantineReport(entry),
+		issueUrl: buildGitHubIssueUrl(
+			buildBugReportContext({
+				quarantine: quarantineReportSections(entry),
+				title: quarantineIssueTitle(entry),
+			}),
+		),
+	};
+}
+
+function syncWarningReporting(entry: SyncWarningEntry): Reporting {
+	const report = formatSyncWarningReport(entry);
+	return {
+		report,
+		issueUrl: buildGitHubIssueUrl(
+			buildBugReportContext({
+				syncWarning: report,
+				title: syncWarningIssueTitle(entry),
+			}),
+		),
+	};
+}
+
+function WarningsSignedOut({ signIn }: { signIn: ReactNode }) {
+	return (
+		<section role="alert" className="space-y-3">
+			<div className="space-y-2 rounded-sm border border-danger/40 bg-danger-soft px-row-inset py-3">
+				<p className="text-sm font-medium text-danger">
+					Your session has ended.
+				</p>
+				<p className="text-sm text-fg-muted">
+					Sign in again to see the messages that failed to sync or were set
+					aside.
+				</p>
+				{signIn}
+			</div>
+		</section>
+	);
+}
+
+function WarningsReadFailure({ error }: { error: unknown }) {
+	return (
+		<section role="alert" className="space-y-3">
+			<div className="space-y-2 rounded-sm border border-danger/40 bg-danger-soft px-row-inset py-3">
+				<p className="text-sm font-medium text-danger">
+					The warnings could not be read.
+				</p>
+				<p className="break-words text-sm text-fg-muted">
+					{formatErrorMessage(error)}
+				</p>
+				<p className="text-xs text-fg-muted">
+					Mail may still be failing to sync or have been set aside — this page
+					cannot say either way until it can read the list. Reporting this gets
+					it fixed.
+				</p>
+				<Button
+					variant="secondary"
+					size="sm"
+					icon={<Bug className="size-3.5" />}
+					onClick={() =>
+						openIssue(buildGitHubIssueUrl(buildBugReportContext()))
+					}
+				>
+					Report this
+				</Button>
+			</div>
+		</section>
+	);
+}
+
+export type WarningsRead =
+	| { kind: "Pending" }
+	| { kind: "SignedOut" }
+	| { kind: "Failed"; error: unknown }
+	| {
+			kind: "Ready";
+			quarantine: readonly QuarantineEntry[];
+			warnings: readonly SyncWarningEntry[];
+			warningsTotal: number;
+	  };
+
+export interface WarningsPanelViewProps {
+	read: WarningsRead;
+	signIn: ReactNode;
+}
+
+export function WarningsPanelView({ read, signIn }: WarningsPanelViewProps) {
+	const [reporting, setReporting] = useState<Reporting | null>(null);
+	const [copyFailed, setCopyFailed] = useState(false);
+
+	if (read.kind === "Pending") {
+		return (
+			<p className="animate-pulse text-sm text-fg-subtle">
+				Checking for warnings…
+			</p>
+		);
+	}
+
+	if (read.kind === "SignedOut") return <WarningsSignedOut signIn={signIn} />;
+
+	if (read.kind === "Failed") return <WarningsReadFailure error={read.error} />;
+
+	const handleCopy = (report: string) => {
+		navigator.clipboard.writeText(report).then(
+			() => {
+				setCopyFailed(false);
+				setReporting(null);
+			},
+			() => {
+				setCopyFailed(true);
+				setReporting(null);
+			},
+		);
+	};
+
+	return (
+		<div className="space-y-6">
+			{copyFailed && (
+				<p role="alert" className="text-sm text-danger">
+					The report was not copied — this browser refused clipboard access. Cut
+					the bug again and use Open on GitHub, which needs no clipboard.
+				</p>
+			)}
+			<SyncWarningSection
+				entries={read.warnings}
+				total={read.warningsTotal}
+				onReport={(entry) => setReporting(syncWarningReporting(entry))}
+			/>
+			<QuarantineSection
+				entries={read.quarantine}
+				onCutBug={(entry) => setReporting(quarantineReporting(entry))}
+			/>
+			<MessageReportDialog
+				report={reporting?.report ?? null}
+				issueUrl={reporting?.issueUrl ?? ""}
+				onClose={() => setReporting(null)}
+				onCopy={handleCopy}
+			/>
+		</div>
+	);
+}
+
+function delimiterForMailbox(
+	folders: ResultFolderIndex,
+	mailboxId: string,
+): string {
+	return folders.get(mailboxId)?.hierarchyDelimiter ?? "";
+}
+
+export function WarningsPanel() {
+	const list = useWarningsList();
+	const config = useQuery(configOperationsGetConfigOptions());
+	const accounts = useMemo(() => config.data?.accounts ?? [], [config.data]);
+	const folders = useResultFolderIndex(accounts);
+
+	const wireQuarantine = list.data?.entries ?? EMPTY_QUARANTINE;
+	const wireWarnings = list.data?.warnings ?? EMPTY_WARNINGS;
+	const quarantine = useMemo(
+		() =>
+			wireQuarantine.map((entry) =>
+				toQuarantineEntry(
+					entry,
+					delimiterForMailbox(folders.index, entry.mailboxId),
+				),
+			),
+		[wireQuarantine, folders.index],
+	);
+	const warnings = useMemo(
+		() =>
+			wireWarnings.map((warning) =>
+				toSyncWarningEntry(warning, folders.index.get(warning.mailboxId)),
+			),
+		[wireWarnings, folders.index],
+	);
+
+	const read = readOf(
+		list.error ?? config.error ?? folders.error,
+		list.isPending || config.isPending || folders.isPending,
+		{
+			kind: "Ready",
+			quarantine,
+			warnings,
+			warningsTotal: list.data?.warningsTotal ?? 0,
+		},
+	);
+
+	return <WarningsPanelView read={read} signIn={<SignInAgain />} />;
+}
+
+function readOf(
+	error: unknown,
+	isPending: boolean,
+	ready: WarningsRead,
+): WarningsRead {
+	if (isUnauthenticated(error)) return { kind: "SignedOut" };
+	if (error) return { kind: "Failed", error };
+	if (isPending) return { kind: "Pending" };
+	return ready;
+}

package/src/components/settings/accounts.stories.tsx

@@ -253,6 +253,24 @@ export const AccountEdit: Story = {
 	},
 };
 
+export const AccountEditRevealPassword: Story = {
+	name: "Accounts — edit, reveal password",
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const panel = within(await openEditPanel(canvasElement, 0));
+		const password = panel.getByLabelText("Password");
+		await expect(password).toHaveValue("");
+		await expect(password).toHaveAttribute(
+			"placeholder",
+			"Leave empty to keep current",
+		);
+		await userEvent.type(password, "new-app-password");
+		await userEvent.click(panel.getByRole("button", { name: "Show password" }));
+		await expect(password).toHaveAttribute("type", "text");
+		await expect(password).toHaveValue("new-app-password");
+	},
+};
+
 export const AccountEditClosed: Story = {
 	name: "Accounts — edit panel closed",
 	globals: desktop,

package/src/components/settings/advanced.stories.tsx

@@ -1,57 +1,10 @@
-import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HttpResponse, http } from "msw";
 import { expect, within } from "storybook/test";
 import { AppStory } from "@/mocks/story-frame/AppStory";
 import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
-import {
-	mailboxIdFor,
-	mailWorld,
-	NOW,
-	PERSONAL,
-} from "@/mocks/story-frame/mail-world";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
 import { withRuntimeConfig } from "@/mocks/story-frame/session";
 
-const setAside = (
-	id: string,
-	role: "Inbox" | "Archive",
-	failureCode: RemitImapQuarantineResponse["failureCode"],
-	failureMessage: string,
-): RemitImapQuarantineResponse => ({
-	quarantineId: `q-${id}`,
-	accountConfigId: "cfg-1",
-	accountId: PERSONAL,
-	mailboxId: mailboxIdFor(PERSONAL, role),
-	uidValidity: 1_712_000_000,
-	uid: 40_217,
-	mailboxRole: role,
-	mailboxPath: role === "Inbox" ? "INBOX" : "Archive",
-	quarantinedAt: NOW,
-	attempts: 3,
-	failureStage: "BodyParse",
-	failureCode,
-	failureMessage,
-	workerVersion: "worker 1.0.0",
-	contentType: "multipart/mixed",
-	sizeBytes: 184_233,
-	structure: [{ depth: 0, contentType: "multipart/mixed" }],
-	createdAt: NOW,
-	updatedAt: NOW,
-});
-
-const unreadableBody = setAside(
-	"1",
-	"Inbox",
-	"UnreadableBody",
-	"multipart boundary was never closed",
-);
-const unknownCharset = setAside(
-	"2",
-	"Archive",
-	"UnknownCharset",
-	"declared charset is not a known encoding",
-);
-
 const meta = {
 	title: "Playground/Shipped/Settings/Advanced/Overview",
 	component: AppStory,
@@ -68,89 +21,14 @@ type Story = StoryObj<typeof meta>;
 export const Advanced: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText(/Every message has been read successfully/),
-		).toBeVisible();
-		await expect(canvas.getByText("About")).toBeVisible();
+		await expect(await canvas.findByText("About")).toBeVisible();
+		await expect(canvas.queryByText("Messages set aside")).toBeNull();
 		await expect(
 			canvas.queryByRole("link", { name: "Download root certificate" }),
 		).toBeNull();
 	},
 };
 
-export const AdvancedOneQuarantined: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(mailWorld({ quarantine: [unreadableBody] })),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText(/multipart boundary was never closed/),
-		).toBeVisible();
-		await expect(canvas.queryByText(/messages could not be read/)).toBeNull();
-	},
-};
-
-export const AdvancedQuarantineAlert: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(
-				mailWorld({ quarantine: [unreadableBody, unknownCharset] }),
-			),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("2 messages could not be read."),
-		).toBeVisible();
-	},
-};
-
-export const AdvancedQuarantineLoading: Story = {
-	parameters: {
-		msw: {
-			handlers: [
-				http.get(
-					"/api/me/quarantine",
-					() => new Promise<never>(() => undefined),
-				),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("Checking for messages set aside…"),
-		).toBeVisible();
-	},
-};
-
-export const AdvancedQuarantineUnreadable: Story = {
-	parameters: {
-		msw: {
-			handlers: [
-				http.get("/api/me/quarantine", () => HttpResponse.error()),
-				...mailHandlers(mailWorld()),
-			],
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText(
-				"The list of set-aside messages could not be read.",
-			),
-		).toBeVisible();
-		await expect(
-			canvas.getByRole("button", { name: "Report this" }),
-		).toBeVisible();
-	},
-};
-
 export const AdvancedTlsInternal: Story = {
 	beforeEach: withRuntimeConfig({ tlsMode: "internal" }),
 	play: async ({ canvasElement }) => {