@remit/web-client 0.0.321 → 0.0.323

package/src/components/mail/MailboxPane.tsx

@@ -91,7 +91,6 @@ import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useRescueCandidates } from "@/hooks/useRescueCandidates";
 import { useResultCount } from "@/hooks/useResultCount";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
-import { useSemanticSearch } from "@/hooks/useSemanticSearch";
 import { useThreadActions } from "@/hooks/useThreadActions";
 import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
 import { useThreadRow } from "@/hooks/useThreadRow";
@@ -116,10 +115,7 @@ import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
 import { shouldRequestResultCount } from "@/lib/result-count";
 import { normalizeSearchQuery } from "@/lib/search-query";
-import {
-	relatedSearchResults,
-	threadToSearchResult,
-} from "@/lib/search-result";
+import { threadToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { useTelemetry } from "@/lib/telemetry-context";
 import {
@@ -961,33 +957,14 @@ function MailboxList() {
 			threads.map((thread) => threadToSearchResult(thread, resultFolderIndex)),
 		[threads, resultFolderIndex],
 	);
-	// The route scopes this view and the top bar's chip says so, so every engine
-	// here respects it: the literal engine searches this mailbox, and the
-	// semantic engine takes the same `mailboxId`. No chip means global; a chip
-	// means nothing on the route reaches past it. Results are deduped by thread,
-	// so a thread never shows in both sections.
-	const { hits: semanticHits, isLoading: relatedLoading } = useSemanticSearch({
-		mailboxId,
-		filterCategory,
-	});
-	const relatedResults = useMemo(
-		() =>
-			relatedSearchResults(
-				semanticHits,
-				threads.map((t) => t.threadId),
-				resultFolderIndex,
-			),
-		[semanticHits, threads, resultFolderIndex],
-	);
-	// The two-engine results panel, whose semantic hits are in no list at all —
-	// each one carries the thread it belongs to.
+	// The results panel; each result carries the thread it belongs to.
 	const handleSelectSearchResult = useCallback(
 		(result: SearchResult) => {
 			const threadId =
 				result.threadId ??
 				threads.find((thread) => thread.messageId === result.id)?.threadId;
 			if (!threadId) return;
-			// Both sections are scoped to this mailbox, so a result's own mailbox is
+			// The search is scoped to this mailbox, so a result's own mailbox is
 			// normally this one; keep reading it off the result so a row can never
 			// open under a mailbox it does not belong to.
 			openThread(
@@ -1096,13 +1073,11 @@ function MailboxList() {
 			onClearFilters={onClearFilters}
 			searchResults={searchResults}
 			searchLoading={isLoading}
-			relatedResults={relatedResults}
-			relatedLoading={relatedLoading}
 			onSelectSearchResult={handleSelectSearchResult}
 			// A committed mailbox search renders in the body's own `MessageList`
 			// (its threads filter to the results), so the multi-select toolbar and
 			// the "Select all N matching" escalation are reachable on desktop (#212).
-			// The typing/uncommitted state still shows the two-engine panel.
+			// The typing/uncommitted state still shows the results panel.
 			searchResultsInBody
 			refreshControl={refreshControl}
 		>
@@ -1204,7 +1179,6 @@ function MailboxReading() {
 				isOpen={intelligence.drawerOpen}
 				onClose={intelligence.closeDrawer}
 				thread={selectedThread}
-				mailboxId={mailboxId}
 				accountId={mailboxAccountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
 				onReplyWithText={replyWithText}
@@ -1221,7 +1195,6 @@ function MailboxReading() {
 function MailboxIntelligence() {
 	const replyWithText = useReplyWithText();
 	const {
-		mailboxId,
 		mailboxAccountId,
 		selectedThread,
 		onToggleIntelligence,
@@ -1233,7 +1206,6 @@ function MailboxIntelligence() {
 		<IntelligencePane
 			onClose={onToggleIntelligence}
 			thread={selectedThread}
-			mailboxId={mailboxId}
 			accountId={mailboxAccountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
 			onReplyWithText={replyWithText}
@@ -1249,7 +1221,6 @@ function MailboxIntelligence() {
 function MailboxPhone() {
 	const replyWithText = useReplyWithText();
 	const {
-		mailboxId,
 		mailboxAccountId,
 		selectedThread,
 		conversation,
@@ -1288,7 +1259,6 @@ function MailboxPhone() {
 					isOpen={drawer.isOpen}
 					onClose={drawer.close}
 					thread={selectedThread}
-					mailboxId={mailboxId}
 					accountId={mailboxAccountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
 					onReplyWithText={replyWithText}

package/src/components/mail/MessageActionMenu.tsx

@@ -2,6 +2,12 @@ import {
 	messageBulkOperationsUpdateFlagsMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	DropdownMenu,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	ErrorState,
+} from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
 	BadgeCheck,
@@ -12,13 +18,7 @@ import {
 	Trash2,
 } from "lucide-react";
 import { useCallback } from "react";
-import {
-	DropdownMenu,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-} from "@/components/ui/DropdownMenu";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { formatErrorDetail } from "@/components/ui/error-banners";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { setReadOnItems } from "@/hooks/useMarkAsRead";

package/src/components/mail/MessageAttachments.tsx

@@ -3,6 +3,7 @@ import type {
 	RemitImapBodyPartResponse,
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import { encapsulatedParts } from "@remit/data-ports/message-parts";
 import { type AttachmentDownloadState, AttachmentList } from "@remit/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
@@ -20,6 +21,7 @@ import {
 	type MessageAttachment,
 	selectMessageAttachments,
 } from "@/lib/message-attachments";
+import { MessageBody } from "./MessageBody";
 
 interface MessageAttachmentsProps {
 	messageId: string;
@@ -38,6 +40,9 @@ const IDLE: AttachmentDownloadState = { status: "idle" };
  * Download state is per row and lives here rather than in a query: a download is
  * a one-shot user action with no cached result to hold, and the bytes are handed
  * to the browser rather than rendered.
+ *
+ * A forwarded message also opens in place: its own parts render through the
+ * same body and attachment components as the message carrying it.
  */
 export const MessageAttachments = ({
 	messageId,
@@ -50,6 +55,7 @@ export const MessageAttachments = ({
 	const [downloads, setDownloads] = useState<
 		Record<string, AttachmentDownloadState>
 	>({});
+	const [openedId, setOpenedId] = useState<string | null>(null);
 
 	const attachments = useMemo(
 		() => selectMessageAttachments(bodyParts ?? []),
@@ -136,11 +142,20 @@ export const MessageAttachments = ({
 	const hasUnlistedAttachment =
 		hasAttachment && bodyParts !== undefined && attachments.length === 0;
 
+	const openedMessage = attachments.find(
+		(attachment) =>
+			attachment.kind === "message" && attachment.bodyPartId === openedId,
+	);
+	const openedParts = openedMessage
+		? encapsulatedParts(bodyParts ?? [], openedMessage.partPath)
+		: [];
+
 	return (
 		<AttachmentList
 			className={className}
 			attachments={attachments.map((attachment) => ({
 				attachmentId: attachment.bodyPartId,
+				kind: attachment.kind,
 				filename: attachment.filename,
 				typeLabel: attachment.typeLabel,
 				sizeOctets: attachment.sizeOctets,
@@ -148,6 +163,26 @@ export const MessageAttachments = ({
 			}))}
 			onDownload={download}
 			hasUnlistedAttachment={hasUnlistedAttachment}
+			onToggleOpen={(bodyPartId) =>
+				setOpenedId((current) => (current === bodyPartId ? null : bodyPartId))
+			}
+			opened={
+				openedMessage
+					? {
+							attachmentId: openedMessage.bodyPartId,
+							content: (
+								<>
+									<MessageBody bodyParts={openedParts} messageId={messageId} />
+									<MessageAttachments
+										messageId={messageId}
+										bodyParts={openedParts}
+										className="mt-4"
+									/>
+								</>
+							),
+						}
+					: undefined
+			}
 		/>
 	);
 };

package/src/components/mail/MessageBody.tsx

@@ -20,6 +20,7 @@ import { MessageBodyErrorBanner } from "./MessageBodyErrorBanner";
  */
 export interface MessageBodyPart {
 	bodyPartId: string;
+	partPath: string;
 	mediaType: string;
 	mediaSubtype: string;
 	contentId?: string;

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

@@ -1,6 +1,5 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { BodyFetchError } from "@/hooks/useMessageBodyContent";
 import {
 	contentForReason,
 	extractFallbackDetail,
@@ -8,18 +7,6 @@ import {
 } 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);
@@ -37,26 +24,9 @@ describe("contentForReason — diagnostic banner copy per failure mode (#401)",
 		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");
 	});

package/src/components/mail/MessageCard.tsx

@@ -4,13 +4,21 @@ import type {
 	RemitImapThreadMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import type { ThreadMessageData } from "@remit/ui";
-import { AddressList, CollapsedMessage, cn, ExpandedMessage } from "@remit/ui";
+import {
+	AddressList,
+	CollapsedMessage,
+	cn,
+	EmptyState,
+	ErrorState,
+	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 {
+	isMessageGoneFromServerError,
+	isMessageNotFoundError,
+} from "@/components/ui/error-banners";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatDatePreset } from "@/lib/format";
 import { AutoMovedIndicator } from "./AutoMovedIndicator";
@@ -310,6 +318,10 @@ const ExpandedCard = ({
 							<div className="h-4 bg-surface-sunken rounded w-3/4" />
 							<div className="h-4 bg-surface-sunken rounded w-1/2" />
 						</div>
+					) : isError && isMessageGoneFromServerError(error) ? (
+						<div className="mt-3">
+							<EmptyState message="This message is no longer on the mail server. It was moved or deleted in another mail app." />
+						</div>
 					) : isError && isMessageNotFoundError(error) ? (
 						<div className="mt-3">
 							<EmptyState message="This message has been deleted" />

package/src/components/mail/MessageList.run-reporting.test.ts

@@ -1,8 +1,5 @@
 import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
 import { describe, it } from "node:test";
-import { fileURLToPath } from "node:url";
 import { runEndingBanner } from "@/lib/bulk-action-copy";
 import type { BulkRunOutcome } from "@/lib/bulk-actions";
 import { type DeleteOutcome, deleteExpunges } from "@/lib/format";
@@ -13,22 +10,10 @@ import { type DeleteOutcome, deleteExpunges } from "@/lib/format";
  * the run with no screen of its own — so the list says what it reached, whether
  * that was everything or a hundred out of three thousand.
  *
- * Which ending gets which banner is `runEndingBanner`, and it is asserted here
- * by its result. It used to be asserted by matching the source text of
- * `reportRunOutcome`, which meant the rule held only as long as nobody moved
- * those lines — adding an argument to the completion call broke all three
- * cases while the behaviour they protect was intact. The one fact that still
- * cannot be read off a result is the wiring: that the wizard is handed
- * somewhere to report an ending after it has closed. That stays a source read,
- * because reaching it otherwise means mounting the list's virtualizer, router
- * and data hooks around a run that has already finished.
- *
- * Which runs reach this seam at all is `SelectionWizardHost.run-exit.test.ts`.
+ * Which ending gets which banner is `runEndingBanner`, asserted here by its
+ * result.
  */
 
-const here = dirname(fileURLToPath(import.meta.url));
-const source = readFileSync(resolve(here, "MessageList.tsx"), "utf8");
-
 const expunging: DeleteOutcome[] = ["permanent", "unconfirmed"];
 
 const ended = (over: Partial<BulkRunOutcome> = {}): BulkRunOutcome => ({
@@ -40,21 +25,6 @@ const ended = (over: Partial<BulkRunOutcome> = {}): BulkRunOutcome => ({
 });
 
 describe("reporting how a run ended", () => {
-	it("hands the wizard somewhere to report an ending it can no longer show", () => {
-		const host = source.match(/<SelectionWizardHost[\s\S]*?\/>/)?.[0] ?? "";
-		assert.match(host, /onRunEnded=\{reportRunOutcome\}/);
-		assert.match(
-			source,
-			/const reportRunOutcome = useCallback\(/,
-			"the list reports no run outcome",
-		);
-		assert.match(
-			source,
-			/runEndingBanner\(kind, matched, outcome, deleteOutcome\)/,
-			"and the ending it reports is the one runEndingBanner decides",
-		);
-	});
-
 	it("names both endings: what it covered, and what it stopped short of", () => {
 		const stopped = runEndingBanner(
 			"delete",
@@ -115,17 +85,3 @@ describe("reporting how a run ended", () => {
 		});
 	}
 });
-
-describe("the run the wizard leaves behind", () => {
-	it("is stoppable from the wizard, which is not the same as closing it", () => {
-		assert.match(source, /stop: escalation\.stop,/);
-	});
-
-	it("keeps reporting on the bar from the moment it starts", () => {
-		assert.match(
-			source,
-			/escalation\.progress\?\.total \?\? selectionCount/,
-			"a run with no batch finished yet has no denominator to show",
-		);
-	});
-});

package/src/components/mail/MessageList.tsx

@@ -4,6 +4,7 @@ import {
 	cn,
 	type Density,
 	deriveIsMultiSelectMode,
+	formatErrorMessage,
 	ListResultHeader,
 	type MessageListFilter,
 	MessageListLoadingMore,
@@ -20,7 +21,6 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import type { RefObject } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
-import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useJunkMailbox } from "@/hooks/useArchiveMailbox";
 import { useDeleteOutcome } from "@/hooks/useDeleteOutcome";
 import {
@@ -501,9 +501,8 @@ export const MessageList = ({
 	const orderedIds = useMemo(() => threads.map((t) => t.messageId), [threads]);
 
 	// The checked rows as the wizard reads them: the sample it shows under every
-	// screen that names a match, and the senders its widen falls back to on a
-	// deployment with no vector pipeline. Read off the already-loaded thread rows,
-	// so no extra round-trip.
+	// screen that names a match, and the senders its properties prefill reads.
+	// Read off the already-loaded thread rows, so no extra round-trip.
 	const wizardSelection = useMemo<WizardSelectionMessage[]>(() => {
 		const rows: WizardSelectionMessage[] = [];
 		for (const thread of threads) {
@@ -673,8 +672,16 @@ export const MessageList = ({
 	// and the selection toolbar — not a message — is what the user is looking at.
 	// Suspended off desktop too, where the reading pane replaces the list
 	// entirely, so following the cursor would throw the user off the list.
+	//
+	// The open lands a navigation later, and the cursor may have moved on by
+	// then. The open records which row it was for, so its arrival does not drag
+	// the cursor back off the row the user has since moved to.
+	const followOpenedRef = useRef<string | undefined>(undefined);
 	const followFocusOpen = useCallback(
-		(messageId: string) => openRow(messageId, { replace: true }),
+		(messageId: string) => {
+			followOpenedRef.current = messageId;
+			openRow(messageId, { replace: true });
+		},
 		[openRow],
 	);
 	useFollowFocusOpen({
@@ -877,13 +884,18 @@ export const MessageList = ({
 	// Opening a thread (click or Enter, anywhere) seeds the focus cursor onto it
 	// so subsequent j/k continue from the open row — focus and open stay in
 	// sync on open while remaining independent during scanning.
+	// A row the cursor itself opened is the exception: the cursor was already on
+	// it, and if the user has pressed j again since, Enter must act on the row
+	// they are on now rather than the one the reading pane caught up to.
 	useEffect(() => {
-		if (selectedMessageId) {
-			// A thread going open is the list's own move, whatever opened it — a
-			// deep link arrives with the row far down and has to be scrolled to.
-			cursorMovedByPointerRef.current = false;
-			setFocusedMessageId(selectedMessageId);
-		}
+		if (!selectedMessageId) return;
+		const openedByCursor = followOpenedRef.current === selectedMessageId;
+		followOpenedRef.current = undefined;
+		if (openedByCursor) return;
+		// A thread going open is the list's own move, whatever opened it — a
+		// deep link arrives with the row far down and has to be scrolled to.
+		cursorMovedByPointerRef.current = false;
+		setFocusedMessageId(selectedMessageId);
 	}, [selectedMessageId, setFocusedMessageId]);
 
 	// Keep the focus cursor valid as the thread list changes (after delete /

package/src/components/mail/MessageRow.render.test.ts

@@ -51,11 +51,4 @@ describe("MessageRow semantics", () => {
 		assert.match(html, /role="option"/);
 		assert.match(html, /aria-selected/);
 	});
-
-	it("renders the row's sender, subject and snippet", () => {
-		const html = render({ thread });
-		assert.match(html, /Alex Rivera/);
-		assert.match(html, /Quarterly numbers are in/);
-		assert.match(html, /shared drive/);
-	});
 });

package/src/components/mail/MoveToTrigger.tsx

@@ -2,6 +2,7 @@ import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@t
 import {
 	Button,
 	cn,
+	ErrorState,
 	type FolderTreeNode,
 	FolderTreePicker,
 	PopoverMenuPortal,
@@ -18,7 +19,6 @@ import {
 	useState,
 } from "react";
 import { Drawer } from "vaul";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { useFolderAppointments } from "@/hooks/useArchiveMailbox";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";

package/src/components/mail/RawMessageView.tsx

@@ -1,6 +1,6 @@
 import { messageOperationsGetRawMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ErrorState } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { ErrorState } from "@/components/ui/ErrorState";
 
 interface RawMessageViewProps {
 	/** The message whose raw RFC822/MIME source to fetch and display. */

package/src/components/mail/SelectionWizardHost.search-entry.test.ts

@@ -21,7 +21,6 @@ const conversion = (
 	matchOperator: "all",
 	droppedFacets: [],
 	keptTerms: false,
-	droppedSemantic: false,
 	...over,
 });