@remit/web-client 0.0.314 → 0.0.315

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.314",
+  "version": "0.0.315",
   "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/calendar/ChangeCalendarSuggestion.stories.tsx

@@ -33,6 +33,8 @@ const suggestion = (
 	organizer: "priya@example.invalid",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 	...overrides,

package/src/components/calendar/change-suggestion-first.render.test.ts

@@ -74,6 +74,8 @@ const reading = (
 	organizer: "priya@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 	...overrides,

package/src/components/calendar/pending-suggestions.render.test.ts

@@ -63,6 +63,8 @@ const pending: RemitImapCalendarSuggestionResponse = {
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 };

package/src/components/mail/BriefPane.tsx

@@ -325,6 +325,7 @@ function BriefReading() {
 		actions,
 		onReply,
 		handleDeselectIfRemoved,
+		onOpenThread,
 	} = useBriefPane();
 	const hasThread = Boolean(conversation);
 	const intelligence = useIntelligenceSurface(conversation?.threadId);
@@ -377,6 +378,7 @@ function BriefReading() {
 				accountId={selectedThread?.accountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
 				onReplyWithText={replyWithText}
+				onOpenThread={onOpenThread}
 			/>
 		</>
 	);
@@ -388,7 +390,8 @@ function BriefReading() {
  */
 function BriefIntelligence() {
 	const replyWithText = useReplyWithText();
-	const { selectedThread, handleDeselectIfRemoved } = useBriefPane();
+	const { selectedThread, handleDeselectIfRemoved, onOpenThread } =
+		useBriefPane();
 	const { onToggleIntelligence } = useMailContext();
 
 	return (
@@ -399,6 +402,7 @@ function BriefIntelligence() {
 			accountId={selectedThread?.accountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
 			onReplyWithText={replyWithText}
+			onOpenThread={onOpenThread}
 		/>
 	);
 }
@@ -444,6 +448,7 @@ function BriefPhone() {
 					accountId={selectedThread?.accountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
 					onReplyWithText={replyWithText}
+					onOpenThread={onOpenThread}
 				/>
 			</>
 		);

package/src/components/mail/FlaggedPane.tsx

@@ -328,6 +328,7 @@ function FlaggedReading() {
 		actions,
 		onReply,
 		handleDeselectIfRemoved,
+		onOpenThread,
 	} = useFlaggedPane();
 	const hasThread = Boolean(conversation);
 	const intelligence = useIntelligenceSurface(conversation?.threadId);
@@ -380,6 +381,7 @@ function FlaggedReading() {
 				accountId={selectedThread?.accountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
 				onReplyWithText={replyWithText}
+				onOpenThread={onOpenThread}
 			/>
 		</>
 	);
@@ -391,7 +393,8 @@ function FlaggedReading() {
  */
 function FlaggedIntelligence() {
 	const replyWithText = useReplyWithText();
-	const { selectedThread, handleDeselectIfRemoved } = useFlaggedPane();
+	const { selectedThread, handleDeselectIfRemoved, onOpenThread } =
+		useFlaggedPane();
 	const { onToggleIntelligence } = useMailContext();
 
 	return (
@@ -402,6 +405,7 @@ function FlaggedIntelligence() {
 			accountId={selectedThread?.accountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
 			onReplyWithText={replyWithText}
+			onOpenThread={onOpenThread}
 		/>
 	);
 }
@@ -445,6 +449,7 @@ function FlaggedPhone() {
 					accountId={selectedThread?.accountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
 					onReplyWithText={replyWithText}
+					onOpenThread={onOpenThread}
 				/>
 			</>
 		);

package/src/components/mail/IntelligenceDrawer.tsx

@@ -2,6 +2,7 @@ import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/type
 import type { ReplyWithText } from "@/components/compose/reply-with-times";
 import { Drawer } from "@/components/layout/Drawer";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
+import type { OpenThreadTarget } from "@/routing";
 
 /**
  * The intelligence pane as a modal drawer — the surface every list pane uses
@@ -18,6 +19,7 @@ export function IntelligenceDrawer({
 	accountId,
 	onAfterOptimisticRemove,
 	onReplyWithText,
+	onOpenThread,
 }: {
 	isOpen: boolean;
 	onClose: () => void;
@@ -26,6 +28,7 @@ export function IntelligenceDrawer({
 	accountId?: string;
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
 	onReplyWithText?: ReplyWithText;
+	onOpenThread?: (target: OpenThreadTarget) => void;
 }) {
 	return (
 		<Drawer
@@ -45,6 +48,7 @@ export function IntelligenceDrawer({
 				hideCloseButton
 				onAfterOptimisticRemove={onAfterOptimisticRemove}
 				onReplyWithText={onReplyWithText}
+				onOpenThread={onOpenThread}
 			/>
 		</Drawer>
 	);

package/src/components/mail/IntelligencePane.tsx

@@ -19,7 +19,7 @@ import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
 import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
 import { useTelemetry } from "@/lib/telemetry-context";
-import { NavLink } from "@/routing";
+import { NavLink, type OpenThreadTarget } from "@/routing";
 import type { ReplyWithText } from "../compose/reply-with-times";
 
 export interface IntelligencePaneProps {
@@ -55,6 +55,7 @@ export interface IntelligencePaneProps {
 	 */
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
 	onReplyWithText?: ReplyWithText;
+	onOpenThread?: (target: OpenThreadTarget) => void;
 }
 
 /**
@@ -254,6 +255,7 @@ interface WiredPanelProps {
 	hideCloseButton?: boolean;
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
 	onReplyWithText?: ReplyWithText;
+	onOpenThread?: (target: OpenThreadTarget) => void;
 }
 
 /**
@@ -267,6 +269,7 @@ function WiredPanel({
 	hideCloseButton,
 	onAfterOptimisticRemove,
 	onReplyWithText,
+	onOpenThread,
 }: WiredPanelProps) {
 	const {
 		data,
@@ -277,7 +280,11 @@ function WiredPanel({
 		similarErrorIsFatal,
 		semanticEnabled,
 	} = useIntelligenceData(thread, mailboxId);
-	const calendar = useIntelligenceCalendar(thread, onReplyWithText);
+	const calendar = useIntelligenceCalendar(
+		thread,
+		onReplyWithText,
+		onOpenThread,
+	);
 	const [reclassifyOpen, setReclassifyOpen] = useState(false);
 	const senderEmail = thread.fromEmail ?? undefined;
 
@@ -437,6 +444,7 @@ export const IntelligencePane = ({
 	hideCloseButton,
 	onAfterOptimisticRemove,
 	onReplyWithText,
+	onOpenThread,
 }: IntelligencePaneProps) => {
 	if (!thread) {
 		return (
@@ -467,6 +475,7 @@ export const IntelligencePane = ({
 			hideCloseButton={hideCloseButton}
 			onAfterOptimisticRemove={onAfterOptimisticRemove}
 			onReplyWithText={onReplyWithText}
+			onOpenThread={onOpenThread}
 		/>
 	);
 };

package/src/components/mail/MailboxPane.tsx

@@ -1130,6 +1130,7 @@ function MailboxReading() {
 		onToolbarMove,
 		handleDeselectIfRemoved,
 		intelligenceRef,
+		onOpenThread,
 	} = useMailboxPane();
 	const hasThread = Boolean(conversation);
 	const intelligence = useIntelligenceSurface(conversation?.threadId);
@@ -1207,6 +1208,7 @@ function MailboxReading() {
 				accountId={mailboxAccountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
 				onReplyWithText={replyWithText}
+				onOpenThread={onOpenThread}
 			/>
 		</>
 	);
@@ -1224,6 +1226,7 @@ function MailboxIntelligence() {
 		selectedThread,
 		onToggleIntelligence,
 		handleDeselectIfRemoved,
+		onOpenThread,
 	} = useMailboxPane();
 
 	return (
@@ -1234,6 +1237,7 @@ function MailboxIntelligence() {
 			accountId={mailboxAccountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
 			onReplyWithText={replyWithText}
+			onOpenThread={onOpenThread}
 		/>
 	);
 }
@@ -1288,6 +1292,7 @@ function MailboxPhone() {
 					accountId={mailboxAccountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
 					onReplyWithText={replyWithText}
+					onOpenThread={onOpenThread}
 				/>
 			</>
 		);

package/src/components/mail/offer-times-reply.render.test.ts

@@ -149,6 +149,8 @@ const invitation: RemitImapCalendarSuggestionResponse = {
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 };

package/src/hooks/intelligence-calendar.render.test.ts

@@ -23,6 +23,7 @@ import {
 	RouterProvider,
 } from "@tanstack/react-router";
 import { createElement } from "react";
+import { useOpenThread } from "@/routing";
 import { createDomHarness, type DomHarness } from "@/test-support/dom";
 import { makeThreadMessage } from "@/test-support/fixtures";
 import {
@@ -31,6 +32,7 @@ import {
 	httpError,
 	mockFetch,
 } from "@/test-support/http";
+import { threadRouter } from "@/test-support/thread-router";
 import { useIntelligenceCalendar } from "./useIntelligenceCalendar";
 
 const CALENDAR = "11111111-1111-4111-8111-111111111111";
@@ -95,12 +97,14 @@ const invitation = (
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 });
 
 const Harness = () => {
-	const calendar = useIntelligenceCalendar(thread);
+	const calendar = useIntelligenceCalendar(thread, undefined, useOpenThread());
 	return createElement(IntelligencePanel, {
 		data: sender,
 		calendar: calendar.surface,
@@ -146,14 +150,19 @@ const server = (
 	};
 };
 
-const mount = async (respond: (call: HttpCall) => unknown) => {
+const mount = async (
+	respond: (call: HttpCall) => unknown,
+): Promise<AnyRouter> => {
 	http = mockFetch(respond);
 	harness = createDomHarness();
-	harness.renderApp(createElement(Harness));
+	const router = threadRouter(Harness, "/mail/brief/thread-1/msg-1");
+	await router.load();
+	harness.renderApp(createElement(RouterProvider, { router }));
 	await harness.waitFor(
 		() => harness?.text().includes("Quarterly review") === true,
 		"the invitation to be drawn",
 	);
+	return router;
 };
 
 const press = (label: string) => {
@@ -396,3 +405,48 @@ describe("changing a suggestion beside the message before adding it", () => {
 		assert.equal(router.state.location.pathname, "/mail");
 	});
 });
+
+describe("an invitation a newer revision replaced", () => {
+	const retired = (
+		supersededByThreadId: string,
+	): RemitImapCalendarSuggestionResponse => ({
+		...invitation("Superseded"),
+		supersededByMessageId: "msg-2",
+		supersededByThreadId,
+	});
+
+	const serving =
+		(suggestion: RemitImapCalendarSuggestionResponse) =>
+		(call: HttpCall): unknown => {
+			if (call.path.endsWith("/calendars")) return { items: calendars };
+			if (call.path.endsWith("/messages/msg-1/calendar-suggestions"))
+				return { items: [suggestion] };
+			return { items: [] };
+		};
+
+	it("opens the conversation that carries the newer revision", async () => {
+		const router = await mount(serving(retired("thread-2")));
+		assert.match(harness?.text() ?? "", /has sent a newer version of this/);
+
+		press("Open the newer invitation");
+
+		await harness?.waitFor(
+			() => router.state.location.pathname === "/mail/brief/thread-2/msg-2",
+			"the reading pane to move to the newer revision",
+		);
+	});
+
+	it("offers no way there when the newer message sits in no conversation", async () => {
+		await mount(serving(retired("")));
+
+		assert.match(harness?.text() ?? "", /has sent a newer version of this/);
+		assert.equal(
+			harness
+				?.queryAll("button")
+				.some((button) =>
+					button.textContent?.includes("Open the newer invitation"),
+				),
+			false,
+		);
+	});
+});

package/src/hooks/useIntelligenceCalendar.ts

@@ -51,6 +51,7 @@ import {
 	toEventSuggestion,
 } from "@/lib/calendar-suggestion";
 import {
+	type OpenThreadTarget,
 	useChangeSuggestionOnCalendar,
 	useOpenEventOnCalendar,
 } from "@/routing";
@@ -95,6 +96,7 @@ export interface IntelligenceCalendar {
 export function useIntelligenceCalendar(
 	thread: RemitImapThreadMessageResponse,
 	replyWithText?: ReplyWithText,
+	openThread?: (target: OpenThreadTarget) => void,
 ): IntelligenceCalendar {
 	const messageId = thread.messageId;
 	const { suggestions, isLoading, error } =
@@ -294,6 +296,14 @@ export function useIntelligenceCalendar(
 						answers.dismiss(invitationId, false),
 					)
 			: undefined,
+		onOpenNewerInvite:
+			openThread && invitation && invitation.supersededByThreadId !== ""
+				? () =>
+						openThread({
+							threadId: invitation.supersededByThreadId,
+							messageId: invitation.supersededByMessageId,
+						})
+				: undefined,
 		onOfferOtherTimes: () => update({ offering: true }),
 		onToggleSlot: (slot) =>
 			update({

package/src/lib/calendar-suggestion.test.ts

@@ -36,6 +36,8 @@ const suggestion = (
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 	...over,

package/src/lib/calendar-suggestion.west.test.ts

@@ -31,6 +31,8 @@ const allDay = {
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 } as const;

package/src/test-support/thread-router.ts

@@ -0,0 +1,54 @@
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+} from "@tanstack/react-router";
+import { createElement, type FunctionComponent } from "react";
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+/**
+ * The brief's thread routes, with `surface` mounted above them so it stays on
+ * screen while the address moves. A surface that opens a conversation is
+ * asserted by where the router lands, not by the callback it was handed.
+ */
+export const threadRouter = (
+	surface: FunctionComponent,
+	path: string,
+): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement("div", null, createElement(surface), createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		component: Outlet,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: Outlet,
+	});
+	return createRouter({
+		routeTree: rootRoute.addChildren([
+			mailRoute.addChildren([
+				briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+			]),
+		]),
+		history: createMemoryHistory({ initialEntries: [path] }),
+	}) as unknown as AnyRouter;
+};