@remit/web-client 0.0.1

package/src/components/mail/MessageBodyErrorBanner.test.ts

@@ -0,0 +1,86 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { BodyFetchError } from "@/hooks/useMessageBodyContent";
+import {
+	contentForReason,
+	extractFallbackDetail,
+	extractReason,
+} from "./message-body-error-banner-content";
+
+describe("contentForReason — diagnostic banner copy per failure mode (#401)", () => {
+	it("renders a session-expired title for auth failures (Lambda@Edge 401/403 with x-remit-403-reason header)", () => {
+		const content = contentForReason("auth", "ignored fallback");
+		assert.match(content.title, /session/i);
+		assert.match(content.detail, /sign in/i);
+	});
+
+	it("renders a body-missing-in-storage title for bare S3 403/404 (no edge header — OAC blocks list so missing keys 403)", () => {
+		const content = contentForReason("body-missing", "ignored fallback");
+		assert.match(content.title, /missing in storage/i);
+		assert.match(content.detail, /reconcile|sync|support/i);
+	});
+
+	it("renders a generic title for other 4xx/5xx and falls back to the error's own message in the detail", () => {
+		const content = contentForReason("generic", "Network connection lost");
+		assert.match(content.title, /couldn.?t load/i);
+		assert.equal(content.detail, "Network connection lost");
+	});
+
+	it("renders a generic-but-safe title for content-type-mismatch (the actual reason is too technical for the user, the security guard already refused to render)", () => {
+		const content = contentForReason("content-type-mismatch", "ignored");
+		assert.match(content.title, /couldn.?t load/i);
+		assert.match(content.detail, /content type|unexpected/i);
+	});
+
+	it("renders a generic title for the spa-shell-leak regression guard (#310) and flags it as an infrastructure bug", () => {
+		const content = contentForReason("spa-shell-leak", "ignored");
+		assert.match(content.title, /couldn.?t load/i);
+		assert.match(content.detail, /shell|infrastructure|report/i);
+	});
+
+	it("never reuses the auth copy for body-missing — these must be visibly distinct so the user knows which failure they're facing (#401 acceptance)", () => {
+		const auth = contentForReason("auth", "x");
+		const missing = contentForReason("body-missing", "x");
+		assert.notEqual(auth.title, missing.title);
+		assert.notEqual(auth.detail, missing.detail);
+	});
+});
+
+describe("extractReason — pulls the discriminated reason off a BodyFetchError, falls back to generic", () => {
+	it("returns the reason from a BodyFetchError instance", () => {
+		const err = new BodyFetchError("body-missing", "missing", 403);
+		assert.equal(extractReason(err), "body-missing");
+	});
+
+	it("returns the reason from a BodyFetchError(auth)", () => {
+		const err = new BodyFetchError("auth", "Invalid id_token", 401);
+		assert.equal(extractReason(err), "auth");
+	});
+
+	it("falls back to generic for a plain Error (e.g. a network error before fetch returned)", () => {
+		assert.equal(extractReason(new Error("offline")), "generic");
+	});
+
+	it("falls back to generic for unknown shapes (null, undefined, strings)", () => {
+		assert.equal(extractReason(undefined), "generic");
+		assert.equal(extractReason(null), "generic");
+		assert.equal(extractReason("just a string"), "generic");
+		assert.equal(extractReason(42), "generic");
+	});
+});
+
+describe("extractFallbackDetail — used only when contentForReason picks the generic branch", () => {
+	it("returns an Error.message", () => {
+		assert.equal(extractFallbackDetail(new Error("boom")), "boom");
+	});
+
+	it("returns a string as-is", () => {
+		assert.equal(extractFallbackDetail("network error"), "network error");
+	});
+
+	it("returns a stable generic message for other shapes (never the raw object, never undefined)", () => {
+		const detail = extractFallbackDetail({ status: 502 });
+		assert.equal(typeof detail, "string");
+		assert.ok(detail.length > 0);
+	});
+});

package/src/components/mail/MessageBodyErrorBanner.tsx

@@ -0,0 +1,90 @@
+import { AlertCircle, X } from "lucide-react";
+import { useState } from "react";
+import { useAuthProvider } from "@/auth/provider";
+import {
+	contentForReason,
+	extractFallbackDetail,
+	extractReason,
+} from "./message-body-error-banner-content";
+
+interface MessageBodyErrorBannerProps {
+	error: unknown;
+	onRetry?: () => void;
+}
+
+/**
+ * Inline alert banner for a body-fetch failure. Renders variant-specific copy
+ * for auth-expired vs. body-missing-in-storage 403s (issue #401), with a
+ * Retry button (always) and a Sign-in button (auth variant only, and only
+ * when a session is active to sign out of). Dismissible — once dismissed, the
+ * message body area falls back to an empty state until Retry is clicked.
+ *
+ * The sign-in affordance goes through the composed auth provider's `Account`
+ * render-prop: it renders only when there is a session to sign out of, so no
+ * identity SDK hook fires in a build (or a local-dev run) that has none.
+ *
+ * Uses the same destructive colour palette as `ErrorState(variant="inline")`
+ * so it looks at home in the message body slot.
+ */
+export const MessageBodyErrorBanner = ({
+	error,
+	onRetry,
+}: MessageBodyErrorBannerProps) => {
+	const reason = extractReason(error);
+	const fallback = extractFallbackDetail(error);
+	const { title, detail } = contentForReason(reason, fallback);
+	const [dismissed, setDismissed] = useState(false);
+	const { Account } = useAuthProvider();
+
+	if (dismissed) return null;
+
+	return (
+		<div
+			role="alert"
+			data-testid="message-body-error-banner"
+			data-reason={reason}
+			className="flex items-start gap-2 rounded-md border border-danger/40 bg-danger-soft px-3 py-2 text-sm"
+		>
+			<AlertCircle
+				className="size-4 shrink-0 text-danger mt-0.5"
+				aria-hidden="true"
+			/>
+			<div className="flex-1 min-w-0">
+				<p className="font-medium text-danger">{title}</p>
+				<p className="text-fg-muted mt-1 break-words">{detail}</p>
+			</div>
+			<div className="flex shrink-0 items-center gap-3">
+				{reason === "auth" && (
+					<Account>
+						{({ signOut }) => (
+							<button
+								type="button"
+								onClick={() => signOut()}
+								className="text-sm font-medium text-accent hover:underline"
+							>
+								Sign in again
+							</button>
+						)}
+					</Account>
+				)}
+				{onRetry && (
+					<button
+						type="button"
+						onClick={onRetry}
+						className="text-sm font-medium text-accent hover:underline"
+					>
+						Retry
+					</button>
+				)}
+				<button
+					type="button"
+					onClick={() => setDismissed(true)}
+					aria-label="Dismiss message body error"
+					className="rounded-md p-1 text-fg-muted hover:bg-surface-raised hover:text-fg transition-colors"
+				>
+					<X className="size-4" aria-hidden="true" />
+				</button>
+			</div>
+		</div>
+	);
+};

package/src/components/mail/MessageCard.tsx

@@ -0,0 +1,401 @@
+import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapDescribeMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { ThreadMessageData } from "@remit/ui";
+import {
+	AddressList,
+	CollapsedMessage,
+	ExpandedMessage,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { BadgeCheck, Paperclip, Star } from "lucide-react";
+import { useState } from "react";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { isMessageNotFoundError } from "@/components/ui/error-banners";
+import { toDisplayCategory } from "@/lib/display-category";
+import { formatDatePreset } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { AutoMovedIndicator } from "./AutoMovedIndicator";
+import { MessageActionMenu } from "./MessageActionMenu";
+import { MessageBody } from "./MessageBody";
+import { MobileMessageBar } from "./MobileMessageBar";
+import { RawMessageView } from "./RawMessageView";
+
+const TrustedSenderBadge = () => (
+	<BadgeCheck
+		className="inline-block size-4 ml-1 -mt-0.5 text-positive align-middle"
+		aria-label="Trusted sender"
+		data-testid="trusted-sender-badge"
+	/>
+);
+
+/**
+ * Builds the kit's `ThreadMessageData` view shape from an IMAP thread message.
+ * The kit reading rows own the row layout; MessageCard supplies the data and
+ * injects its interactivity through slots — so the row rhythm has one source of
+ * truth and can't drift from Storybook (#945).
+ */
+const toThreadMessageData = (
+	threadMessage: RemitImapThreadMessageResponse,
+	dateLabel: string,
+): ThreadMessageData => ({
+	id: threadMessage.messageId,
+	fromName: threadMessage.fromName ?? threadMessage.fromEmail ?? "?",
+	fromEmail: threadMessage.fromEmail ?? "",
+	toLabel: "",
+	dateLabel,
+	snippet: threadMessage.snippet || "",
+	bodyHtml: "",
+});
+
+const StarButton = ({
+	isStarred,
+	onToggleStar,
+	isStarPending,
+	hoverReveal,
+}: {
+	isStarred: boolean;
+	onToggleStar: () => void;
+	isStarPending?: boolean;
+	hoverReveal?: boolean;
+}) => (
+	<button
+		type="button"
+		onClick={(e) => {
+			e.stopPropagation();
+			onToggleStar();
+		}}
+		disabled={isStarPending}
+		aria-label={isStarred ? "Remove star" : "Add star"}
+		className={cn(
+			"shrink-0 p-0.5 rounded transition-colors",
+			isStarred
+				? "text-warning"
+				: cn(
+						"text-fg-subtle hover:text-warning",
+						hoverReveal &&
+							"opacity-0 group-hover:opacity-100 focus:opacity-100",
+					),
+			isStarPending && "opacity-50",
+		)}
+	>
+		<Star className={cn("size-3.5", isStarred && "fill-current")} />
+	</button>
+);
+
+interface MessageCardProps {
+	threadMessage: RemitImapThreadMessageResponse;
+	isExpanded: boolean;
+	isFocused?: boolean;
+	onToggle: () => void;
+	onToggleStar: () => void;
+	isStarPending?: boolean;
+	/**
+	 * Owning account for the thread's mailbox. Forwarded to
+	 * `MessageActionMenu` so the per-message Move trigger can scope its
+	 * folder picker to the right account. Optional because the resolver
+	 * is async — when omitted the Move trigger is hidden until the lookup
+	 * completes.
+	 */
+	accountId?: string;
+	/**
+	 * Single-pane mobile reading: the expanded card owns a per-message
+	 * `MobileMessageBar` (reply / star / move / delete / overflow) instead of
+	 * the desktop star indicator + kebab, so nothing is duplicated against the
+	 * shell. Reply verbs are supplied by the conversation.
+	 */
+	mobile?: boolean;
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+}
+
+const CollapsedCard = ({
+	threadMessage,
+	isFocused,
+	onToggle,
+	onToggleStar,
+	isStarPending,
+}: {
+	threadMessage: RemitImapThreadMessageResponse;
+	isFocused?: boolean;
+	onToggle: () => void;
+	onToggleStar: () => void;
+	isStarPending?: boolean;
+}) => {
+	const date = formatDatePreset(threadMessage.sentDate, "datetime");
+	const message = toThreadMessageData(threadMessage, date);
+
+	return (
+		<CollapsedMessage
+			message={message}
+			onClick={onToggle}
+			isFocused={isFocused}
+			isUnread={!threadMessage.isRead}
+			trailing={
+				<>
+					{threadMessage.hasAttachment && (
+						<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+					)}
+					<StarButton
+						isStarred={threadMessage.hasStars}
+						onToggleStar={onToggleStar}
+						isStarPending={isStarPending}
+						hoverReveal
+					/>
+					<span
+						data-testid="message-date"
+						className="shrink-0 text-2xs text-fg-subtle tabular-nums"
+					>
+						{date}
+					</span>
+				</>
+			}
+		/>
+	);
+};
+
+const ExpandedCard = ({
+	threadMessage,
+	messageData,
+	isLoading,
+	isError,
+	error,
+	onRetry,
+	isFocused,
+	onToggle,
+	onToggleStar,
+	isStarPending,
+	accountId,
+	showRaw,
+	onToggleRaw,
+	mobile,
+	onReply,
+	onReplyAll,
+	onForward,
+}: {
+	threadMessage: RemitImapThreadMessageResponse;
+	messageData?: RemitImapDescribeMessageResponse;
+	isLoading: boolean;
+	isError: boolean;
+	error: unknown;
+	onRetry: () => void;
+	isFocused?: boolean;
+	onToggle: () => void;
+	onToggleStar: () => void;
+	isStarPending?: boolean;
+	accountId?: string;
+	showRaw: boolean;
+	onToggleRaw: () => void;
+	mobile?: boolean;
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+}) => {
+	const date = formatDatePreset(threadMessage.sentDate, "long");
+	const isUnread = !threadMessage.isRead;
+	const isTrusted =
+		messageData?.envelope.from[0]?.flags?.trusted?.value === true;
+	const fromAddressId = messageData?.envelope.from[0]?.addressId;
+	const message = toThreadMessageData(threadMessage, date);
+
+	const autoMovedNode = threadMessage.autoMoved ? (
+		<AutoMovedIndicator
+			accountId={accountId}
+			messageId={threadMessage.messageId}
+			threadId={threadMessage.threadId}
+			mailboxId={threadMessage.mailboxId}
+			autoMoved={threadMessage.autoMoved}
+			size="md"
+		/>
+	) : null;
+
+	return (
+		<ExpandedMessage
+			message={message}
+			isFocused={isFocused}
+			onHeaderClick={onToggle}
+			senderBadge={isTrusted ? <TrustedSenderBadge /> : undefined}
+			trailing={
+				<span data-testid="message-date" className="text-2xs text-fg-subtle">
+					{date}
+				</span>
+			}
+			to={
+				messageData ? (
+					<AddressList label="To" addresses={messageData.envelope.to} />
+				) : null
+			}
+			indicators={
+				autoMovedNode || !mobile ? (
+					<div className="flex flex-wrap items-center gap-1.5 mt-0.5">
+						{autoMovedNode}
+						{!mobile && (
+							<>
+								<div className="flex items-center justify-end gap-1">
+									<StarButton
+										isStarred={threadMessage.hasStars}
+										onToggleStar={onToggleStar}
+										isStarPending={isStarPending}
+									/>
+									{threadMessage.hasAttachment && (
+										<span className="text-fg-subtle p-0.5">
+											<Paperclip className="size-3.5" />
+										</span>
+									)}
+								</div>
+								{isUnread && (
+									// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on decorative indicator provides useful context for assistive tech
+									<span
+										className="size-1.5 rounded-full bg-accent"
+										aria-label="Unread"
+									/>
+								)}
+							</>
+						)}
+					</div>
+				) : undefined
+			}
+			actionMenu={
+				mobile ? undefined : (
+					<MessageActionMenu
+						messageId={threadMessage.messageId}
+						threadId={threadMessage.threadId}
+						mailboxId={threadMessage.mailboxId}
+						isRead={threadMessage.isRead}
+						accountId={accountId}
+						fromAddressId={fromAddressId}
+						isTrusted={isTrusted}
+						showRaw={showRaw}
+						onToggleRaw={onToggleRaw}
+					/>
+				)
+			}
+			actionBar={
+				mobile ? (
+					<MobileMessageBar
+						messageId={threadMessage.messageId}
+						threadId={threadMessage.threadId}
+						mailboxId={threadMessage.mailboxId}
+						accountId={accountId}
+						isRead={threadMessage.isRead}
+						isStarred={threadMessage.hasStars}
+						onToggleStar={onToggleStar}
+						fromAddressId={fromAddressId}
+						isTrusted={isTrusted}
+						showRaw={showRaw}
+						onToggleRaw={onToggleRaw}
+						onReply={onReply}
+						onReplyAll={onReplyAll}
+						onForward={onForward}
+					/>
+				) : undefined
+			}
+			body={
+				isLoading ? (
+					<div className="mt-3 animate-pulse space-y-2">
+						<div className="h-4 bg-surface-sunken rounded w-full" />
+						<div className="h-4 bg-surface-sunken rounded w-3/4" />
+						<div className="h-4 bg-surface-sunken rounded w-1/2" />
+					</div>
+				) : isError && isMessageNotFoundError(error) ? (
+					<div className="mt-3">
+						<EmptyState message="This message has been deleted" />
+					</div>
+				) : isError ? (
+					<div className="mt-3">
+						<ErrorState
+							variant="inline"
+							title="Couldn't load this message"
+							error={error}
+							onRetry={onRetry}
+						/>
+					</div>
+				) : showRaw ? (
+					<div className="mt-3">
+						<RawMessageView messageId={threadMessage.messageId} />
+					</div>
+				) : (
+					<div className="mt-3">
+						<MessageBody
+							bodyParts={messageData?.bodyParts}
+							messageId={threadMessage.messageId}
+							fromAddressId={messageData?.envelope.from[0]?.addressId}
+							isTrusted={isTrusted}
+							category={toDisplayCategory(threadMessage.category)}
+						/>
+					</div>
+				)
+			}
+		/>
+	);
+};
+
+export const MessageCard = ({
+	threadMessage,
+	isExpanded,
+	isFocused,
+	onToggle,
+	onToggleStar,
+	isStarPending,
+	accountId,
+	mobile,
+	onReply,
+	onReplyAll,
+	onForward,
+}: MessageCardProps) => {
+	const [showRaw, setShowRaw] = useState(false);
+	const {
+		data: messageData,
+		isLoading,
+		isError,
+		error,
+		refetch,
+	} = useQuery({
+		...messageOperationsDescribeMessageOptions({
+			path: { messageId: threadMessage.messageId },
+		}),
+		enabled: isExpanded,
+		// A 404 (row deleted / mid-refresh) renders the inline "deleted" empty
+		// state below — opt it out of the global fatal overlay. A 5xx still
+		// escalates globally (meta.softError is ignored for 5xx — #1059).
+		meta: { softError: true },
+	});
+
+	if (!isExpanded) {
+		return (
+			<CollapsedCard
+				threadMessage={threadMessage}
+				isFocused={isFocused}
+				onToggle={onToggle}
+				onToggleStar={onToggleStar}
+				isStarPending={isStarPending}
+			/>
+		);
+	}
+
+	return (
+		<ExpandedCard
+			threadMessage={threadMessage}
+			messageData={messageData}
+			isLoading={isLoading}
+			isError={isError}
+			error={error}
+			onRetry={() => refetch()}
+			isFocused={isFocused}
+			onToggle={onToggle}
+			onToggleStar={onToggleStar}
+			isStarPending={isStarPending}
+			accountId={accountId}
+			showRaw={showRaw}
+			onToggleRaw={() => setShowRaw((prev) => !prev)}
+			mobile={mobile}
+			onReply={onReply}
+			onReplyAll={onReplyAll}
+			onForward={onForward}
+		/>
+	);
+};