@remit/web-client 0.0.313 → 0.0.315

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

@@ -0,0 +1,301 @@
+import assert from "node:assert/strict";
+import { after, afterEach, before, describe, it } from "node:test";
+import type {
+	RemitImapCalendarResponse,
+	RemitImapCalendarSuggestionResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	type RouteComponent,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { calendarSearchSchema } from "@/lib/calendar-route";
+import { stringifySearch } from "@/lib/search-params";
+import { Route as SuggestionRoute } from "../../routes/calendar/$view.$date/suggestion.$suggestionId.js";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "../../test-support/http";
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+const SUGGESTION = "22222222-2222-4222-8222-222222222222";
+const WEEK = "/calendar/week/2026-06-10";
+const ENTRY = `${WEEK}/suggestion/${SUGGESTION}`;
+
+const calendars = [
+	{
+		calendarId: WORK,
+		accountConfigId: "cfg-1",
+		urlSegment: "work",
+		displayName: "Work",
+		color: "Cal1",
+		componentSet: "VeventOnly",
+		source: "Default",
+		timezone: "Europe/Amsterdam",
+		syncSequence: 1,
+		subscriptionUrl: "",
+		subscriptionEnabled: false,
+		subscriptionCheckedAt: 0,
+		subscriptionFetchedAt: 0,
+		subscriptionError: "",
+		createdAt: 0,
+		updatedAt: 0,
+	},
+] satisfies RemitImapCalendarResponse[];
+
+const reading = (
+	overrides: Partial<RemitImapCalendarSuggestionResponse> = {},
+): RemitImapCalendarSuggestionResponse => ({
+	suggestionId: SUGGESTION,
+	accountConfigId: "cfg-1",
+	messageId: "msg-1",
+	bodyPartId: "part-1",
+	icalUid: "uid-1",
+	sequence: 0,
+	method: "Request",
+	source: "IcalendarPart",
+	state: "Pending",
+	summary: "Billing migration kickoff",
+	dtStart: "2026-06-11T12:00:00+00:00",
+	dtEnd: "2026-06-11T13:00:00+00:00",
+	allDay: false,
+	location: "Room Noord",
+	organizer: "priya@example.test",
+	zoneCertainty: "Explicit",
+	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+const runnerZone = process.env.TZ;
+
+before(() => {
+	process.env.TZ = "Europe/Amsterdam";
+});
+
+after(() => {
+	if (runnerZone === undefined) Reflect.deleteProperty(process.env, "TZ");
+	else process.env.TZ = runnerZone;
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const componentOf = (route: unknown): RouteComponent => {
+	const { component } = (route as { options: { component?: RouteComponent } })
+		.options;
+	if (!component) throw new Error("the route mounts no component");
+	return component;
+};
+
+const testRouter = (): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const viewRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/calendar/$view/$date",
+		validateSearch: calendarSearchSchema,
+		component: Outlet,
+	});
+	const routeTree = rootRoute.addChildren([
+		viewRoute.addChildren([
+			createRoute({
+				getParentRoute: () => viewRoute,
+				path: "/",
+				component: () => null,
+			}),
+			createRoute({
+				getParentRoute: () => viewRoute,
+				path: "suggestion/$suggestionId",
+				component: componentOf(SuggestionRoute),
+			}),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		stringifySearch,
+		history: createMemoryHistory({ initialEntries: [ENTRY] }),
+	}) as unknown as AnyRouter;
+};
+
+const server = (
+	suggestion: RemitImapCalendarSuggestionResponse,
+	answer: (call: HttpCall) => Response | undefined = () => undefined,
+) => {
+	let pending = [suggestion];
+	return (call: HttpCall): unknown => {
+		if (call.path.endsWith("/calendars")) return { items: calendars };
+		if (call.path.endsWith("/calendar-suggestions")) return { items: pending };
+		if (call.path.endsWith("/accept")) {
+			const refusal = answer(call);
+			if (refusal) return refusal;
+			pending = [];
+			return { ...suggestion, state: "Accepted" };
+		}
+		return { items: [] };
+	};
+};
+
+const mount = async (respond: (call: HttpCall) => unknown) => {
+	http = mockFetch(respond);
+	const router = testRouter();
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await harness.waitFor(
+		() =>
+			(harness?.queryAll<HTMLInputElement>("input") ?? []).some(
+				(input) => input.value === "Billing migration kickoff",
+			),
+		"the editor to open seeded from the suggestion",
+	);
+	await harness.waitFor(
+		() => harness?.query("input[type=radio]:checked") !== null,
+		"the default calendar to be picked",
+	);
+	return router;
+};
+
+const fieldValue = (label: string): string => {
+	if (!harness) throw new Error("not mounted");
+	return (harness.byLabel(label) as HTMLInputElement).value;
+};
+
+const acceptedEdits = (): HttpCall[] =>
+	http?.to(`/calendar-suggestions/${SUGGESTION}/accept`) ?? [];
+
+describe("changing a suggestion before adding it", () => {
+	it("opens the editor on what the mail said, on this device's clock", async () => {
+		await mount(server(reading()));
+
+		assert.equal(fieldValue("Title"), "Billing migration kickoff");
+		assert.equal(fieldValue("Location"), "Room Noord");
+		assert.equal(fieldValue("Date"), "2026-06-11");
+		assert.equal(fieldValue("Start time"), "14:00");
+		assert.equal(fieldValue("End time"), "15:00");
+	});
+
+	it("adds the corrected event, settles the suggestion and closes the editor", async () => {
+		const router = await mount(server(reading()));
+
+		harness?.type(harness.byLabel("Title"), "Billing migration kickoff, moved");
+		harness?.type(harness.byLabel("Start time"), "16:00");
+		harness?.type(harness.byLabel("End time"), "17:30");
+		await harness?.flush();
+		harness?.click(harness.byText("button", "Add"));
+
+		await harness?.waitFor(
+			() => router.state.location.pathname === WEEK,
+			"the editor to close once the server settled the suggestion",
+		);
+		const sent = acceptedEdits();
+		assert.equal(sent.length, 1);
+		assert.deepEqual(sent[0].body, {
+			calendarId: WORK,
+			event: {
+				summary: "Billing migration kickoff, moved",
+				start: "2026-06-11T16:00:00+02:00",
+				end: "2026-06-11T17:30:00+02:00",
+				allDay: false,
+				timeZone: "Europe/Amsterdam",
+			},
+		});
+		const listings = http?.to("/calendar-suggestions") ?? [];
+		assert.ok(
+			listings.length > 1,
+			"the waiting list is read again once the suggestion is settled",
+		);
+	});
+
+	it("places a reading nobody could put on a clock, even when the time is left alone", async () => {
+		await mount(
+			server(
+				reading({
+					dtStart: "2026-06-11T09:00:00+00:00",
+					dtEnd: "2026-06-11T10:00:00+00:00",
+					zoneCertainty: "Ambiguous",
+				}),
+			),
+		);
+
+		assert.equal(fieldValue("Start time"), "09:00");
+		assert.match(harness?.text() ?? "", /time zone nothing could resolve/);
+		harness?.click(harness.byText("button", "Add"));
+		await harness?.waitFor(
+			() => acceptedEdits().length === 1,
+			"the correction to be sent",
+		);
+
+		assert.deepEqual(acceptedEdits()[0].body?.event, {
+			start: "2026-06-11T09:00:00+02:00",
+			end: "2026-06-11T10:00:00+02:00",
+			allDay: false,
+			timeZone: "Europe/Amsterdam",
+		});
+	});
+
+	it("states a refusal and keeps the editor open with what was typed", async () => {
+		const router = await mount(
+			server(reading(), () => httpError(400, "Already declined.")),
+		);
+
+		harness?.type(harness.byLabel("Title"), "Kickoff, renamed");
+		await harness?.flush();
+		harness?.click(harness.byText("button", "Add"));
+
+		await harness?.waitFor(
+			() => harness?.query('[role="alert"]') !== null,
+			"the refusal to be stated",
+		);
+		assert.match(harness?.text() ?? "", /Couldn't add this to your calendar/);
+		assert.equal(fieldValue("Title"), "Kickoff, renamed");
+		assert.equal(router.state.location.pathname, ENTRY);
+	});
+
+	it("finds a suggestion that is not on the first page of what waits", async () => {
+		http = mockFetch((call: HttpCall): unknown => {
+			if (call.path.endsWith("/calendars")) return { items: calendars };
+			if (call.path.endsWith("/calendar-suggestions"))
+				return call.url.includes("continuationToken=page-2")
+					? { items: [reading()] }
+					: {
+							items: [{ ...reading(), suggestionId: "other" }],
+							continuationToken: "page-2",
+						};
+			return { items: [] };
+		});
+		const router = testRouter();
+		await router.load();
+		harness = createDomHarness();
+		harness.renderApp(createElement(RouterProvider, { router }));
+
+		await harness.waitFor(
+			() =>
+				harness
+					?.queryAll<HTMLInputElement>("input")
+					.some((input) => input.value === "Billing migration kickoff") ===
+				true,
+			"the editor to open on the suggestion from the second page",
+		);
+		assert.doesNotMatch(harness.text(), /no longer waiting/);
+	});
+});

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

@@ -63,22 +63,29 @@ const pending: RemitImapCalendarSuggestionResponse = {
 	organizer: "organizer@example.test",
 	zoneCertainty: "Explicit",
 	acceptedCalendarObjectId: "",
+	supersededByMessageId: "",
+	supersededByThreadId: "",
 	createdAt: 0,
 	updatedAt: 0,
 };
 
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
+let changedFirst: { suggestionId: string; date: string }[] = [];
 
 afterEach(() => {
 	harness?.close();
 	harness = undefined;
 	http?.restore();
 	http = undefined;
+	changedFirst = [];
 });
 
-const server = (accept: () => Response | undefined) => {
-	let waiting = [pending];
+const server = (
+	accept: () => Response | undefined,
+	reading: RemitImapCalendarSuggestionResponse = pending,
+) => {
+	let waiting = [reading];
 	return (call: HttpCall): unknown => {
 		if (call.path.endsWith("/calendars")) return { items: calendars };
 		if (call.path.endsWith("/calendar-suggestions")) return { items: waiting };
@@ -95,7 +102,12 @@ const server = (accept: () => Response | undefined) => {
 const mount = async (respond: (call: HttpCall) => unknown) => {
 	http = mockFetch(respond);
 	harness = createDomHarness();
-	harness.renderApp(createElement(PendingSuggestions));
+	harness.renderApp(
+		createElement(PendingSuggestions, {
+			onChangeFirst: (suggestionId: string, date: string) =>
+				changedFirst.push({ suggestionId, date }),
+		}),
+	);
 	await harness.waitFor(
 		() => harness?.text().includes("Quarterly review") === true,
 		"the waiting reading to be drawn",
@@ -134,4 +146,59 @@ describe("what the mail is waiting on, beside the calendar", () => {
 		assert.match(harness?.text() ?? "", /Couldn't add this to your calendar/);
 		assert.match(harness?.text() ?? "", /Quarterly review/);
 	});
+
+	it("hands the top reading to the editor on the day it falls", async () => {
+		await mount(server(() => undefined));
+		harness?.click(harness.byText("button", "Change first"));
+
+		assert.deepEqual(changedFirst, [
+			{ suggestionId: SUGGESTION, date: "2026-09-01" },
+		]);
+		assert.equal(
+			http?.to(`/calendar-suggestions/${SUGGESTION}/accept`).length,
+			0,
+		);
+	});
+
+	it("sends a reading nobody could put on a clock to the editor instead of adding it", async () => {
+		await mount(
+			server(() => undefined, { ...pending, zoneCertainty: "Ambiguous" }),
+		);
+		harness?.click(harness.byText("button", "Add"));
+
+		assert.deepEqual(
+			changedFirst.map((entry) => entry.suggestionId),
+			[SUGGESTION],
+		);
+		assert.equal(
+			http?.to(`/calendar-suggestions/${SUGGESTION}/accept`).length,
+			0,
+		);
+		assert.match(harness?.text() ?? "", /Quarterly review/);
+	});
+
+	it("applies a cancellation nobody could put on a clock, and offers no editor for it", async () => {
+		await mount(
+			server(() => undefined, {
+				...pending,
+				method: "Cancel",
+				zoneCertainty: "Ambiguous",
+			}),
+		);
+		assert.equal(
+			harness
+				?.queryAll("button")
+				.some((button) => button.textContent?.includes("Change first")),
+			false,
+		);
+
+		harness?.click(harness.byText("button", "Add"));
+		await harness?.waitFor(
+			() =>
+				(http?.to(`/calendar-suggestions/${SUGGESTION}/accept`).length ?? 0) >
+				0,
+			"the cancellation to be applied",
+		);
+		assert.deepEqual(changedFirst, []);
+	});
 });

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/calendar/draft.ts

@@ -85,7 +85,7 @@ export function draftFromEvent(
  * Stamping any other zone's offset onto those digits moves the event by the
  * difference between the two — silently, and only for whoever is travelling.
  */
-function timesFor(
+export function timesFor(
 	draft: EventDraft,
 	clock: string,
 ): { start: string; end: string } {

package/src/hooks/calendar/index.ts

@@ -63,6 +63,11 @@ export {
 	useCalendarSelection,
 	useDrawnEvents,
 } from "./selection";
+export {
+	type AcceptEditedInput,
+	acceptEditedInputFromDrafts,
+	draftFromSuggestion,
+} from "./suggestion-draft";
 export {
 	type CalendarCollectionOutcome,
 	type CalendarCollectionWrites,
@@ -89,9 +94,11 @@ export { type CalendarJumpSearch, useCalendarJump } from "./useCalendarJump";
 export {
 	type CalendarSuggestionAnswers,
 	type CalendarSuggestionsResult,
+	type PendingCalendarSuggestionResult,
 	type SuggestionAnswer,
 	useCalendarSuggestionAnswers,
 	useMessageCalendarSuggestions,
+	usePendingCalendarSuggestion,
 	usePendingCalendarSuggestions,
 } from "./useCalendarSuggestions";
 export { type CalendarsResult, useCalendars } from "./useCalendars";