@remit/web-client 0.0.294 → 0.0.295

package/src/components/mail/intelligence-drawer.stories.tsx

@@ -12,6 +12,7 @@ import { expect, userEvent, within } from "storybook/test";
 import { Drawer } from "@/components/layout/Drawer";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
 import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
+import { quietCalendar } from "./intelligence-story-calendar";
 
 /**
  * The intelligence drawer below the desktop tier (#777, #778).
@@ -159,7 +160,11 @@ const PhoneReader = () => {
 					ariaLabel="Message details"
 					side="right"
 				>
-					<IntelligencePanel data={intelligence} hideCloseButton />
+					<IntelligencePanel
+						data={intelligence}
+						calendar={quietCalendar}
+						hideCloseButton
+					/>
 				</Drawer>
 			</div>
 			<p className="font-mono text-2xs text-fg-subtle">
@@ -291,7 +296,11 @@ const MidWidthReader = () => {
 				ariaLabel="Message details"
 				side="right"
 			>
-				<IntelligencePanel data={intelligence} hideCloseButton />
+				<IntelligencePanel
+					data={intelligence}
+					calendar={quietCalendar}
+					hideCloseButton
+				/>
 			</Drawer>
 		</div>
 	);

package/src/components/mail/intelligence-story-calendar.ts

@@ -0,0 +1,19 @@
+import type { IntelligenceCalendarSurface } from "@remit/ui";
+
+/**
+ * The calendar half the shipping pane always carries, for a message that says
+ * nothing about time. Stories of the Sender half mount it too, so the tab strip
+ * they draw is the one the app draws.
+ */
+export const quietCalendar: IntelligenceCalendarSurface = {
+	data: { suggestions: [], day: [], dayLabel: "" },
+	actions: {
+		onAddInvite: () => undefined,
+		onDeclineInvite: () => undefined,
+		onOfferOtherTimes: () => undefined,
+		onToggleSlot: () => undefined,
+		onAddSuggestion: () => undefined,
+		onDismissSuggestion: () => undefined,
+		onSelectEvent: () => undefined,
+	},
+};

package/src/hooks/calendar/agenda-window.test.ts

@@ -7,6 +7,11 @@
  * free-time half asserts that busy spans the strip did not draw still take the
  * hours they cover — the rule itself is `@remit/ui`'s, and this only decides
  * which spans a day gets.
+ *
+ * The window a day names is a civil date, and the clock time carried on it is
+ * the device's own — so every case here is asserted in more than one zone. A
+ * window boundary asserted only in UTC would miss the hour a DST change hides
+ * from anything that measures it as elapsed time instead of a calendar date.
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
@@ -48,41 +53,81 @@ const clocks = (
 			`${Math.floor(stretch.startMinute / 60)}–${Math.floor(stretch.endMinute / 60)}`,
 	);
 
+/** The days between two civil dates, ignoring whatever offset each one carries. */
+const daysBetween = (from: string, to: string): number =>
+	(Date.parse(to.slice(0, 10)) - Date.parse(from.slice(0, 10))) / 86_400_000;
+
+/** The zones a reader's device might be on, asserted so a body cannot pass silently. */
+const ZONES = [
+	{ name: "UTC", hourAtNoonUtc: 12 },
+	{ name: "Europe/Amsterdam", hourAtNoonUtc: 14 },
+	{ name: "America/New_York", hourAtNoonUtc: 8 },
+];
+
+function inEveryZone(body: () => void): void {
+	const before = process.env.TZ;
+	try {
+		for (const zone of ZONES) {
+			process.env.TZ = zone.name;
+			assert.equal(
+				new Date("2026-06-11T12:00:00Z").getHours(),
+				zone.hourAtNoonUtc,
+				`the machine never moved to ${zone.name}`,
+			);
+			body();
+		}
+	} finally {
+		if (before === undefined) delete process.env.TZ;
+		else process.env.TZ = before;
+	}
+}
+
 describe("the days the strip holds", () => {
 	it("opens further ahead than behind, because a diary is read forwards", () => {
-		const range = rangeAround(DATE);
-		assert.equal(range.from, "2026-05-31");
-		assert.equal(range.to, "2026-07-04");
-		assert.equal(datesInRange(range).length, LEAD_IN + LEAD_OUT + 1);
+		inEveryZone(() => {
+			const range = rangeAround(DATE);
+			assert.equal(range.from, "2026-05-31");
+			assert.equal(range.to, "2026-07-04");
+			assert.equal(datesInRange(range).length, LEAD_IN + LEAD_OUT + 1);
+		});
 	});
 
 	it("grows the run at whichever end was reached, keeping the other", () => {
-		const range = rangeAround(DATE);
-		assert.deepEqual(extendRangeStart(range), { ...range, from: "2026-05-24" });
-		assert.deepEqual(extendRangeEnd(range), { ...range, to: "2026-07-11" });
-		assert.equal(
-			datesInRange(extendRangeEnd(range)).length,
-			datesInRange(range).length + PAGE,
-		);
+		inEveryZone(() => {
+			const range = rangeAround(DATE);
+			assert.deepEqual(extendRangeStart(range), {
+				...range,
+				from: "2026-05-24",
+			});
+			assert.deepEqual(extendRangeEnd(range), { ...range, to: "2026-07-11" });
+			assert.equal(
+				datesInRange(extendRangeEnd(range)).length,
+				datesInRange(range).length + PAGE,
+			);
+		});
 	});
 
 	it("keeps the run a day is already in, so a scroll refetches nothing", () => {
-		const range = rangeAround(DATE);
-		for (const day of ["2026-05-31", DATE, "2026-06-28", "2026-07-04"]) {
-			assert.equal(rangeCovering(range, day), range, `${day} moved the run`);
-		}
+		inEveryZone(() => {
+			const range = rangeAround(DATE);
+			for (const day of ["2026-05-31", DATE, "2026-06-28", "2026-07-04"]) {
+				assert.equal(rangeCovering(range, day), range, `${day} moved the run`);
+			}
+		});
 	});
 
 	it("opens a window where a jump landed rather than stretching to it", () => {
-		const range = rangeAround(DATE);
-		assert.deepEqual(
-			rangeCovering(range, "2026-11-02"),
-			rangeAround("2026-11-02"),
-		);
-		assert.deepEqual(
-			rangeCovering(range, "2026-01-05"),
-			rangeAround("2026-01-05"),
-		);
+		inEveryZone(() => {
+			const range = rangeAround(DATE);
+			assert.deepEqual(
+				rangeCovering(range, "2026-11-02"),
+				rangeAround("2026-11-02"),
+			);
+			assert.deepEqual(
+				rangeCovering(range, "2026-01-05"),
+				rangeAround("2026-01-05"),
+			);
+		});
 	});
 });
 
@@ -113,41 +158,51 @@ describe("how far the run grows before it asks", () => {
 	};
 
 	it("stops a year either way, however often an end is reached", () => {
-		const range = reachEnd(reachStart());
-		assert.equal(range.from, addDays(DATE, -CAP_DAYS));
-		assert.equal(range.to, addDays(DATE, CAP_DAYS));
-		assert.equal(rangeAtFloor(range), true);
-		assert.equal(rangeAtCeiling(range), true);
+		inEveryZone(() => {
+			const range = reachEnd(reachStart());
+			assert.equal(range.from, addDays(DATE, -CAP_DAYS));
+			assert.equal(range.to, addDays(DATE, CAP_DAYS));
+			assert.equal(rangeAtFloor(range), true);
+			assert.equal(rangeAtCeiling(range), true);
+		});
 	});
 
 	it("hands back the run it was given at the cap, so nothing refetches", () => {
-		const capped = reachEnd();
-		assert.equal(extendRangeEnd(capped), capped);
-		const behind = reachStart();
-		assert.equal(extendRangeStart(behind), behind);
+		inEveryZone(() => {
+			const capped = reachEnd();
+			assert.equal(extendRangeEnd(capped), capped);
+			const behind = reachStart();
+			assert.equal(extendRangeStart(behind), behind);
+		});
 	});
 
 	it("opens the next year where the reader asked, keeping the days held", () => {
-		const capped = reachEnd();
-		const more = liftRangeCeiling(capped);
-		assert.equal(more.from, capped.from);
-		assert.equal(more.to, addDays(capped.to, PAGE));
-		assert.equal(rangeAtCeiling(more), false);
-		assert.equal(rangeAtFloor(more), false);
+		inEveryZone(() => {
+			const capped = reachEnd();
+			const more = liftRangeCeiling(capped);
+			assert.equal(more.from, capped.from);
+			assert.equal(more.to, addDays(capped.to, PAGE));
+			assert.equal(rangeAtCeiling(more), false);
+			assert.equal(rangeAtFloor(more), false);
+		});
 	});
 
 	it("does the same behind, without moving the end ahead", () => {
-		const capped = reachStart();
-		const more = liftRangeFloor(capped);
-		assert.equal(more.to, capped.to);
-		assert.equal(more.from, addDays(capped.from, -PAGE));
-		assert.equal(rangeAtFloor(more), false);
+		inEveryZone(() => {
+			const capped = reachStart();
+			const more = liftRangeFloor(capped);
+			assert.equal(more.to, capped.to);
+			assert.equal(more.from, addDays(capped.from, -PAGE));
+			assert.equal(rangeAtFloor(more), false);
+		});
 	});
 
 	it("gives a jump its own year, measured from where it landed", () => {
-		const jumped = rangeCovering(reachEnd(), "2028-03-01");
-		assert.deepEqual(jumped, rangeAround("2028-03-01"));
-		assert.equal(rangeAtCeiling(jumped), false);
+		inEveryZone(() => {
+			const jumped = rangeCovering(reachEnd(), "2028-03-01");
+			assert.deepEqual(jumped, rangeAround("2028-03-01"));
+			assert.equal(rangeAtCeiling(jumped), false);
+		});
 	});
 });
 
@@ -159,14 +214,16 @@ describe("how far the run grows before it asks", () => {
  */
 describe("the weeks a range is fetched as", () => {
 	it("is the grid's own window for each week, once each", () => {
-		const windows = weekWindowsOver(datesInRange(rangeAround(DATE)));
-		for (const window of windows) {
-			assert.deepEqual(
-				window,
-				calendarWindow("week", window.from.slice(0, 10)),
-			);
-		}
-		assert.equal(new Set(windows.map((w) => w.from)).size, windows.length);
+		inEveryZone(() => {
+			const windows = weekWindowsOver(datesInRange(rangeAround(DATE)));
+			for (const window of windows) {
+				assert.deepEqual(
+					window,
+					calendarWindow("week", window.from.slice(0, 10)),
+				);
+			}
+			assert.equal(new Set(windows.map((w) => w.from)).size, windows.length);
+		});
 	});
 
 	/**
@@ -175,49 +232,58 @@ describe("the weeks a range is fetched as", () => {
 	 * scrolled to.
 	 */
 	it("is the six weeks the opening run falls in, and no more", () => {
-		assert.equal(weekWindowsOver(datesInRange(rangeAround(DATE))).length, 6);
+		inEveryZone(() => {
+			assert.equal(weekWindowsOver(datesInRange(rangeAround(DATE))).length, 6);
+		});
 	});
 
 	it("covers every day the strip holds and nothing before or after", () => {
-		const dates = datesInRange(rangeAround(DATE));
-		const held = new Set(weekWindowsOver(dates).map((window) => window.from));
-		for (const date of dates) assert.ok(held.has(weekKeyOf(date)));
+		inEveryZone(() => {
+			const dates = datesInRange(rangeAround(DATE));
+			const held = new Set(weekWindowsOver(dates).map((window) => window.from));
+			for (const date of dates) assert.ok(held.has(weekKeyOf(date)));
+		});
 	});
 
 	it("names the week a day belongs to, Monday to Monday", () => {
-		// 2026-06-10 is a Wednesday; its week opens on the 8th.
-		assert.equal(weekKeyOf("2026-06-10"), startOfDay("2026-06-08"));
-		assert.equal(weekKeyOf("2026-06-08"), startOfDay("2026-06-08"));
-		assert.equal(weekKeyOf("2026-06-14"), startOfDay("2026-06-08"));
-		assert.equal(weekKeyOf("2026-06-15"), startOfDay("2026-06-15"));
+		inEveryZone(() => {
+			// 2026-06-10 is a Wednesday; its week opens on the 8th.
+			assert.equal(weekKeyOf("2026-06-10"), startOfDay("2026-06-08"));
+			assert.equal(weekKeyOf("2026-06-08"), startOfDay("2026-06-08"));
+			assert.equal(weekKeyOf("2026-06-14"), startOfDay("2026-06-08"));
+			assert.equal(weekKeyOf("2026-06-15"), startOfDay("2026-06-15"));
+		});
 	});
 
 	it("asks for one week however far the reader scrolls", () => {
-		// Past the server's 366-day ceiling in both directions.
-		let range = rangeAround(DATE);
-		for (let reach = 0; reach < 30; reach += 1) {
-			range = extendRangeEnd(extendRangeStart(range));
-		}
-		const dates = datesInRange(range);
-		assert.ok(dates.length > 366, "the range never grew past the ceiling");
-
-		for (const window of weekWindowsOver(dates)) {
-			const days =
-				(Date.parse(window.to) - Date.parse(window.from)) / 86_400_000;
-			assert.equal(days, 7, `a window covered ${days} days`);
-		}
+		inEveryZone(() => {
+			// Past the server's 366-day ceiling in both directions.
+			let range = rangeAround(DATE);
+			for (let reach = 0; reach < 30; reach += 1) {
+				range = extendRangeEnd(extendRangeStart(range));
+			}
+			const dates = datesInRange(range);
+			assert.ok(dates.length > 366, "the range never grew past the ceiling");
+
+			for (const window of weekWindowsOver(dates)) {
+				const days = daysBetween(window.from, window.to);
+				assert.equal(days, 7, `a window covered ${days} days`);
+			}
+		});
 	});
 
 	it("grows by adding weeks rather than by widening one", () => {
-		const opening = weekWindowsOver(datesInRange(rangeAround(DATE)));
-		const wider = weekWindowsOver(
-			datesInRange(extendRangeStart(rangeAround(DATE))),
-		);
-		const kept = new Set(wider.map((window) => window.from));
-		for (const window of opening) {
-			assert.ok(kept.has(window.from), `${window.from} was given up`);
-		}
-		assert.ok(wider.length > opening.length);
+		inEveryZone(() => {
+			const opening = weekWindowsOver(datesInRange(rangeAround(DATE)));
+			const wider = weekWindowsOver(
+				datesInRange(extendRangeStart(rangeAround(DATE))),
+			);
+			const kept = new Set(wider.map((window) => window.from));
+			for (const window of opening) {
+				assert.ok(kept.has(window.from), `${window.from} was given up`);
+			}
+			assert.ok(wider.length > opening.length);
+		});
 	});
 });
 
@@ -225,50 +291,62 @@ describe("busy time, split into the days it covers", () => {
 	const dates = ["2026-06-10", "2026-06-11", "2026-06-12"];
 
 	it("reads a span as minutes of the day it falls on", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "10:30") },
-		]);
-		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 630 }]);
-		assert.equal(byDate.get("2026-06-11"), undefined);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "10:30") },
+			]);
+			assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 630 }]);
+			assert.equal(byDate.get("2026-06-11"), undefined);
+		});
 	});
 
 	it("gives a span crossing midnight one entry per day it touches", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "02:00") },
-		]);
-		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
-		assert.deepEqual(byDate.get("2026-06-11"), [{ from: 0, to: 120 }]);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "02:00") },
+			]);
+			assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
+			assert.deepEqual(byDate.get("2026-06-11"), [{ from: 0, to: 120 }]);
+		});
 	});
 
 	it("leaves no entry on the day a span merely ends at midnight of", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "00:00") },
-		]);
-		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
-		assert.equal(byDate.get("2026-06-11"), undefined);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "00:00") },
+			]);
+			assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
+			assert.equal(byDate.get("2026-06-11"), undefined);
+		});
 	});
 
 	it("merges spans that run into each other into the hours they cover", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "12:00") },
-			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "11:30") },
-		]);
-		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 720 }]);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "12:00") },
+				{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "11:30") },
+			]);
+			assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 720 }]);
+		});
 	});
 
 	it("drops a span that is not a stretch of time at all", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "11:00") },
-			{ start: "not a date", end: at("2026-06-10", "12:00") },
-		]);
-		assert.equal(byDate.size, 0);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "11:00") },
+				{ start: "not a date", end: at("2026-06-10", "12:00") },
+			]);
+			assert.equal(byDate.size, 0);
+		});
 	});
 
 	it("ignores busy time outside the days on screen", () => {
-		const byDate = busySpansByDate(dates, [
-			{ start: at("2026-07-01", "09:00"), end: at("2026-07-01", "10:00") },
-		]);
-		assert.equal(byDate.size, 0);
+		inEveryZone(() => {
+			const byDate = busySpansByDate(dates, [
+				{ start: at("2026-07-01", "09:00"), end: at("2026-07-01", "10:00") },
+			]);
+			assert.equal(byDate.size, 0);
+		});
 	});
 });
 
@@ -276,9 +354,11 @@ describe("free time, off the spans the server merged", () => {
 	const dates = ["2026-06-10", "2026-06-11"];
 
 	it("answers every day the strip holds, including the untouched ones", () => {
-		const free = freeStretchesByDate(dates, []);
-		assert.deepEqual([...free.keys()], dates);
-		assert.equal(free.get("2026-06-11")?.[0].wholeDay, true);
+		inEveryZone(() => {
+			const free = freeStretchesByDate(dates, []);
+			assert.deepEqual([...free.keys()], dates);
+			assert.equal(free.get("2026-06-11")?.[0].wholeDay, true);
+		});
 	});
 
 	/**
@@ -287,22 +367,26 @@ describe("free time, off the spans the server merged", () => {
 	 * this view must never say.
 	 */
 	it("takes hours out of a day the strip is drawing nothing on", () => {
-		const free = freeStretchesByDate(dates, [
-			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
-			{ start: at("2026-06-10", "13:00"), end: at("2026-06-10", "16:00") },
-		]);
-		assert.deepEqual(clocks(free.get("2026-06-10") ?? []), ["16–22"]);
-		assert.equal(free.get("2026-06-10")?.[0].wholeDay, false);
+		inEveryZone(() => {
+			const free = freeStretchesByDate(dates, [
+				{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
+				{ start: at("2026-06-10", "13:00"), end: at("2026-06-10", "16:00") },
+			]);
+			assert.deepEqual(clocks(free.get("2026-06-10") ?? []), ["16–22"]);
+			assert.equal(free.get("2026-06-10")?.[0].wholeDay, false);
+		});
 	});
 
 	it("is the rule `@remit/ui` states, applied to those spans", () => {
-		const spans = [{ from: 9 * 60, to: 12 * 60 }];
-		const free = freeStretchesByDate(dates, [
-			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
-		]);
-		assert.deepEqual(
-			free.get("2026-06-10"),
-			freeStretchesFromSpans("2026-06-10", spans),
-		);
+		inEveryZone(() => {
+			const spans = [{ from: 9 * 60, to: 12 * 60 }];
+			const free = freeStretchesByDate(dates, [
+				{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
+			]);
+			assert.deepEqual(
+				free.get("2026-06-10"),
+				freeStretchesFromSpans("2026-06-10", spans),
+			);
+		});
 	});
 });

package/src/hooks/calendar/index.ts

@@ -79,6 +79,14 @@ export {
 	type CalendarFreeBusyResult,
 	useCalendarFreeBusyWeeks,
 } from "./useCalendarFreeBusy";
+export {
+	type CalendarSuggestionAnswers,
+	type CalendarSuggestionsResult,
+	type SuggestionAnswer,
+	useCalendarSuggestionAnswers,
+	useMessageCalendarSuggestions,
+	usePendingCalendarSuggestions,
+} from "./useCalendarSuggestions";
 export { type CalendarsResult, useCalendars } from "./useCalendars";
 export {
 	type CalendarWriteOutcome,