@remit/web-client 0.0.294 → 0.0.295

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.294",
+  "version": "0.0.295",
   "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/CalendarUnavailable.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { CalendarsResult } from "@/hooks/calendar";
+import { NavLink } from "@/routing";
+
+/**
+ * Whether there is a calendar an answer can write to. Declining and muting
+ * write none, so only adding waits on this.
+ */
+export type CalendarWriteGate = "ready" | "loading" | "failed" | "none";
+
+export function calendarWriteGate(
+	calendars: Pick<CalendarsResult, "defaultCalendarId" | "isLoading" | "error">,
+): CalendarWriteGate {
+	if (calendars.defaultCalendarId !== "") return "ready";
+	if (calendars.error !== null) return "failed";
+	if (calendars.isLoading) return "loading";
+	return "none";
+}
+
+/**
+ * Why adding waits, with the way past it. Undefined when nothing stops it, so a
+ * host can hand the answer straight to a card's `addBlocked`.
+ */
+export function calendarUnavailable(
+	gate: CalendarWriteGate,
+	reportHref: string,
+): ReactNode | undefined {
+	if (gate === "ready") return undefined;
+	if (gate === "loading") return "Reading your calendars…";
+	if (gate === "failed")
+		return (
+			<>
+				Couldn't read your calendars, so there is nowhere to add this yet.
+				Reload to try again.{" "}
+				<a
+					href={reportHref}
+					target="_blank"
+					rel="noreferrer"
+					className="font-medium text-accent hover:underline"
+				>
+					Report an issue
+				</a>
+			</>
+		);
+	return (
+		<>
+			You have no calendar yet, so there is nowhere to add this.{" "}
+			<NavLink
+				to="/settings/calendars"
+				className="font-medium text-accent hover:underline"
+			>
+				Create a calendar
+			</NavLink>
+		</>
+	);
+}

package/src/components/calendar/CalendarWaiting.tsx

@@ -0,0 +1,99 @@
+import {
+	CalendarFailureNote,
+	CalendarSuggestionDeck,
+	type CalendarSuggestionIntel,
+	EventSuggestionCard,
+	settleZone,
+	ZONE_UNSETTLED_REASON,
+} from "@remit/ui";
+import { Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+
+/**
+ * What the mail is still asking about time, beside the calendar it would land
+ * on. One reading at a time, as a deck: each is a decision, and the reader
+ * makes it with the week in view rather than from a list of them.
+ *
+ * Presentational. The readings, the answer on its way and the refusal all come
+ * in from the host, which reads them off the server.
+ */
+export interface CalendarWaitingProps {
+	suggestions: CalendarSuggestionIntel[];
+	/** An answer to the top reading is on its way. */
+	busy: boolean;
+	/** Why the last answer did not land. Empty when it did. */
+	failure: string;
+	/** A prefilled issue report for the failure above. */
+	reportHref?: string;
+	/** Why nothing can be added yet, with the way past it; holds Add. */
+	addBlocked?: ReactNode;
+	onAdd: (suggestionId: string) => void;
+	onDismiss: (suggestionId: string) => void;
+}
+
+export function CalendarWaiting({
+	suggestions,
+	busy,
+	failure,
+	reportHref,
+	addBlocked,
+	onAdd,
+	onDismiss,
+}: CalendarWaitingProps) {
+	const top = suggestions[0];
+	const settlement = top ? settleZone(top.suggestion, "") : undefined;
+
+	return (
+		<aside
+			aria-label="Waiting for you"
+			className="hidden w-72 shrink-0 flex-col gap-2 overflow-y-auto border-r border-line bg-surface-sunken py-3 lg:flex"
+		>
+			<h3 className="flex items-center gap-1.5 px-row-inset text-2xs font-semibold uppercase tracking-wider text-fg-subtle">
+				<Sparkles className="size-3" aria-hidden />
+				Waiting for you
+			</h3>
+			{failure !== "" && (
+				<CalendarFailureNote
+					text={failure}
+					reportHref={reportHref}
+					className="mx-row-inset"
+				/>
+			)}
+			{addBlocked !== undefined && (
+				<div className="mx-row-inset rounded-md border border-warning/40 bg-warning-soft p-2 text-xs text-fg">
+					{addBlocked}
+				</div>
+			)}
+			<CalendarSuggestionDeck
+				className="px-row-inset"
+				hasCard={top !== undefined}
+				remaining={suggestions.length}
+				blocked={settlement !== undefined && !settlement.settled}
+				blockedReason={ZONE_UNSETTLED_REASON}
+				onConfirm={() => {
+					if (top && !busy && addBlocked === undefined)
+						onAdd(top.suggestion.id);
+				}}
+				onReject={() => {
+					if (top && !busy) onDismiss(top.suggestion.id);
+				}}
+			>
+				{top && (
+					<EventSuggestionCard
+						suggestion={top.suggestion}
+						whenText={top.whenText}
+						onAdd={() => onAdd(top.suggestion.id)}
+						onDismiss={() => onDismiss(top.suggestion.id)}
+						addLabel="Add to calendar"
+						busy={busy}
+						addBlocked={addBlocked !== undefined}
+					/>
+				)}
+			</CalendarSuggestionDeck>
+			<p className="px-row-inset text-2xs text-fg-subtle">
+				None of this is on your calendar until you add it. Adding sends the
+				organiser nothing.
+			</p>
+		</aside>
+	);
+}

package/src/components/calendar/CalendarWorkspace.stories.tsx

@@ -1,12 +1,14 @@
 import {
 	type CalendarColorId,
 	type CalendarEventData,
+	type CalendarSuggestionIntel,
 	type CalendarViewId,
 	type Density,
 	NavSidebar,
 } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { CalendarWaiting } from "./CalendarWaiting";
 import { CalendarWorkspace } from "./CalendarWorkspace";
 
 /**
@@ -105,6 +107,88 @@ const week: CalendarEventData[] = [
 	at("climbing", "Climbing", "13", "10:00", "12:00", { calendarId: HOME }),
 ];
 
+const reading = (
+	id: string,
+	title: string,
+	day: string,
+	from: string,
+	to: string,
+	sender: string,
+): CalendarSuggestionIntel => ({
+	suggestion: {
+		id,
+		title,
+		start: `2026-06-${day}T${from}:00+02:00`,
+		end: `2026-06-${day}T${to}:00+02:00`,
+		allDay: false,
+		location: "",
+		threadId: "",
+		threadSubject: "",
+		sender,
+		senderAddress: sender,
+		confidence: 1,
+		ambiguity: "",
+		suggestedCalendarId: WORK,
+		timeZone: "",
+		zoneCertainty: "explicit",
+	},
+	whenText: `Thu ${Number(day)} June, ${from} – ${to}`,
+});
+
+const mailWaiting: CalendarSuggestionIntel[] = [
+	reading(
+		"sug-kickoff",
+		"Billing migration kickoff",
+		"11",
+		"14:00",
+		"15:00",
+		"priya@example.invalid",
+	),
+	reading(
+		"sug-review",
+		"Quarterly review",
+		"12",
+		"10:00",
+		"11:00",
+		"finance@example.invalid",
+	),
+];
+
+/**
+ * The column `PendingSuggestions` mounts beside the grid, with the answers a
+ * story can give: adding or dropping takes the reading off, and a refusal is
+ * stated the way the server's would be.
+ */
+function Waiting({ refuse }: { refuse: boolean }) {
+	const [left, setLeft] = useState(mailWaiting);
+	const [failure, setFailure] = useState("");
+	const answer = (suggestionId: string) => {
+		if (refuse) {
+			setFailure(
+				"Couldn't add this to your calendar: This suggestion was already declined, so it can't be accepted.",
+			);
+			return;
+		}
+		setLeft((prev) =>
+			prev.filter((entry) => entry.suggestion.id !== suggestionId),
+		);
+	};
+	if (left.length === 0) return null;
+	return (
+		<CalendarWaiting
+			suggestions={left}
+			busy={false}
+			failure={failure}
+			onAdd={answer}
+			onDismiss={(suggestionId) =>
+				setLeft((prev) =>
+					prev.filter((entry) => entry.suggestion.id !== suggestionId),
+				)
+			}
+		/>
+	);
+}
+
 /** The shell drives view and date through the router; a story drives its own. */
 function Workspace({
 	initialView,
@@ -112,12 +196,14 @@ function Workspace({
 	isLoading,
 	error,
 	touch,
+	waiting,
 }: {
 	initialView: CalendarViewId;
 	events: CalendarEventData[];
 	isLoading?: boolean;
 	error?: unknown;
 	touch?: boolean;
+	waiting?: "none" | "some" | "refused";
 }) {
 	const [view, setView] = useState<CalendarViewId>(initialView);
 	const [density, setDensity] = useState<Density>("comfortable");
@@ -135,6 +221,11 @@ function Workspace({
 					The strip, which App/Calendar/Agenda has to itself.
 				</div>
 			}
+			waiting={
+				waiting === undefined || waiting === "none" ? undefined : (
+					<Waiting refuse={waiting === "refused"} />
+				)
+			}
 			isLoading={isLoading}
 			error={error}
 			onRetry={() => undefined}
@@ -204,6 +295,15 @@ export const YearNotBuiltYet: Story = { args: { initialView: "year" } };
 
 export const MonthNotBuiltYet: Story = { args: { initialView: "month" } };
 
+/**
+ * Invitations the mail is still asking about, beside the week they would land
+ * in. One at a time, as a deck; nothing here is on the calendar until added.
+ */
+export const MailWaiting: Story = { args: { waiting: "some" } };
+
+/** An answer the server refused, stated in the column rather than swallowed. */
+export const MailWaitingRefused: Story = { args: { waiting: "refused" } };
+
 /** The zoom that mounts the strip instead of the grid. */
 export const Agenda: Story = { args: { initialView: "agenda" } };
 

package/src/components/calendar/CalendarWorkspace.tsx

@@ -50,6 +50,11 @@ export interface CalendarWorkspaceProps {
 	 * pane holds no events and knows no router.
 	 */
 	agenda: ReactNode;
+	/**
+	 * What the mail is still asking about time, beside whichever zoom is drawn.
+	 * A slot for the reason the strip is one: it reads its own data.
+	 */
+	waiting?: ReactNode;
 	/** The first read of this window is still out; the grid has nothing yet. */
 	isLoading?: boolean;
 	/**
@@ -118,6 +123,7 @@ export function CalendarWorkspace({
 	events,
 	colorByCalendarId,
 	agenda,
+	waiting,
 	isLoading = false,
 	error,
 	onRetry,
@@ -197,47 +203,50 @@ export function CalendarWorkspace({
 			    week this pane read is not what it is drawing, and gating it on that
 			    read would blank a strip that has everything it needs. It also
 			    scrolls itself, so it gets a column to fill rather than a box. */}
-			{calendarViewMountsAgenda(view) ? (
-				<div className="flex min-h-0 flex-1 flex-col">{agenda}</div>
-			) : (
-				<div className="min-h-0 flex-1">
-					{error !== undefined && error !== null ? (
-						<div className="flex h-full items-center justify-center">
-							<ErrorState
-								title="Couldn't load this week"
-								error={error}
-								onRetry={onRetry}
+			<div className="flex min-h-0 flex-1">
+				{waiting}
+				{calendarViewMountsAgenda(view) ? (
+					<div className="flex min-h-0 min-w-0 flex-1 flex-col">{agenda}</div>
+				) : (
+					<div className="min-h-0 min-w-0 flex-1">
+						{error !== undefined && error !== null ? (
+							<div className="flex h-full items-center justify-center">
+								<ErrorState
+									title="Couldn't load this week"
+									error={error}
+									onRetry={onRetry}
+								/>
+							</div>
+						) : isLoading ? (
+							<div
+								role="status"
+								aria-label="Loading the calendar"
+								className="flex h-full items-center justify-center bg-surface"
+							>
+								<Loader2 className="size-6 animate-spin text-fg-subtle" />
+							</div>
+						) : calendarViewMountsGrid(view) ? (
+							<CalendarGrid
+								view={view}
+								date={date}
+								events={events}
+								colorByCalendarId={colorByCalendarId}
+								density={density}
+								selectedEventId={selectedEventId}
+								timeZone={timeZone}
+								now={now}
+								onSelectEvent={onSelectEvent}
+								onPickSlot={onPickSlot}
+								onRangeChange={(measuredTitle) =>
+									setMeasured({ key: addressKey, title: measuredTitle })
+								}
 							/>
-						</div>
-					) : isLoading ? (
-						<div
-							role="status"
-							aria-label="Loading the calendar"
-							className="flex h-full items-center justify-center bg-surface"
-						>
-							<Loader2 className="size-6 animate-spin text-fg-subtle" />
-						</div>
-					) : calendarViewMountsGrid(view) ? (
-						<CalendarGrid
-							view={view}
-							date={date}
-							events={events}
-							colorByCalendarId={colorByCalendarId}
-							density={density}
-							selectedEventId={selectedEventId}
-							timeZone={timeZone}
-							now={now}
-							onSelectEvent={onSelectEvent}
-							onPickSlot={onPickSlot}
-							onRangeChange={(measuredTitle) =>
-								setMeasured({ key: addressKey, title: measuredTitle })
-							}
-						/>
-					) : (
-						<CalendarViewPlaceholder view={view} />
-					)}
-				</div>
-			)}
+						) : (
+							<CalendarViewPlaceholder view={view} />
+						)}
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }

package/src/components/calendar/PendingSuggestions.tsx

@@ -0,0 +1,70 @@
+import type { CalendarSuggestionIntel } from "@remit/ui";
+import { useState } from "react";
+import {
+	type SuggestionAnswer,
+	useCalendarSuggestionAnswers,
+	useCalendars,
+	usePendingCalendarSuggestions,
+} from "@/hooks/calendar";
+import { calendarReportHref } from "@/lib/calendar-report";
+import { suggestionWhen, toEventSuggestion } from "@/lib/calendar-suggestion";
+import { calendarUnavailable, calendarWriteGate } from "./CalendarUnavailable";
+import { CalendarWaiting } from "./CalendarWaiting";
+
+const refusal = (what: string, answer: SuggestionAnswer): string =>
+	answer.kind === "refused" ? `Couldn't ${what}: ${answer.message}` : "";
+
+/**
+ * Every reading still waiting on the reader, read off the server and answered
+ * through it. Nothing is drawn when nothing is waiting: an empty column beside
+ * the grid is width the week could have had.
+ */
+export function PendingSuggestions() {
+	const { suggestions, error } = usePendingCalendarSuggestions();
+	const calendars = useCalendars();
+	const { defaultCalendarId } = calendars;
+	const answers = useCalendarSuggestionAnswers();
+	const [failure, setFailure] = useState("");
+
+	const deck: CalendarSuggestionIntel[] = suggestions.map((suggestion) => ({
+		suggestion: toEventSuggestion(suggestion, {
+			threadId: "",
+			threadSubject: "",
+			calendarId: defaultCalendarId,
+			sender:
+				suggestion.organizer === "" ? "From your mail" : suggestion.organizer,
+		}),
+		whenText: suggestionWhen(suggestion),
+	}));
+
+	const readFailure =
+		error === null ? "" : "Couldn't read what your mail is waiting on.";
+	if (deck.length === 0 && readFailure === "" && failure === "") return null;
+
+	const reportHref = calendarReportHref(
+		readFailure || failure || "pending invitations could not be answered",
+	);
+
+	const answer = (what: string, request: () => Promise<SuggestionAnswer>) => {
+		setFailure("");
+		void request().then((result) => setFailure(refusal(what, result)));
+	};
+
+	return (
+		<CalendarWaiting
+			suggestions={deck}
+			busy={answers.isAnswering}
+			failure={readFailure || failure}
+			reportHref={reportHref}
+			addBlocked={calendarUnavailable(calendarWriteGate(calendars), reportHref)}
+			onAdd={(suggestionId) =>
+				answer("add this to your calendar", () =>
+					answers.accept(suggestionId, defaultCalendarId),
+				)
+			}
+			onDismiss={(suggestionId) =>
+				answer("dismiss this", () => answers.dismiss(suggestionId, false))
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,132 @@
+/**
+ * What the mail is still waiting on, beside the calendar (#1277).
+ *
+ * The column reads `GET /calendar-suggestions?state=Pending` and answers through
+ * the same endpoints the card beside a message does, so an answer given here
+ * and one given there cannot disagree about what is on the calendar.
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarResponse,
+	RemitImapCalendarSuggestionResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "@/test-support/http";
+import { PendingSuggestions } from "./PendingSuggestions";
+
+const CALENDAR = "11111111-1111-4111-8111-111111111111";
+const SUGGESTION = "22222222-2222-4222-8222-222222222222";
+
+const calendars = [
+	{
+		calendarId: CALENDAR,
+		accountConfigId: "cfg-1",
+		urlSegment: "default",
+		displayName: "Personal",
+		color: "Cal2",
+		componentSet: "VeventOnly",
+		source: "Default",
+		timezone: "Europe/Amsterdam",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	},
+] satisfies RemitImapCalendarResponse[];
+
+const pending: RemitImapCalendarSuggestionResponse = {
+	suggestionId: SUGGESTION,
+	accountConfigId: "cfg-1",
+	messageId: "msg-1",
+	bodyPartId: "part-1",
+	icalUid: "uid-1",
+	sequence: 0,
+	method: "Request",
+	source: "IcalendarPart",
+	state: "Pending",
+	summary: "Quarterly review",
+	dtStart: "2026-09-01T08:00:00+00:00",
+	dtEnd: "2026-09-01T09:00:00+00:00",
+	allDay: false,
+	location: "",
+	organizer: "organizer@example.test",
+	zoneCertainty: "Explicit",
+	acceptedCalendarObjectId: "",
+	createdAt: 0,
+	updatedAt: 0,
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const server = (accept: () => Response | undefined) => {
+	let waiting = [pending];
+	return (call: HttpCall): unknown => {
+		if (call.path.endsWith("/calendars")) return { items: calendars };
+		if (call.path.endsWith("/calendar-suggestions")) return { items: waiting };
+		if (call.path.endsWith("/accept")) {
+			const refusal = accept();
+			if (refusal) return refusal;
+			waiting = [];
+			return { ...pending, state: "Accepted" };
+		}
+		return { items: [] };
+	};
+};
+
+const mount = async (respond: (call: HttpCall) => unknown) => {
+	http = mockFetch(respond);
+	harness = createDomHarness();
+	harness.renderApp(createElement(PendingSuggestions));
+	await harness.waitFor(
+		() => harness?.text().includes("Quarterly review") === true,
+		"the waiting reading to be drawn",
+	);
+};
+
+describe("what the mail is waiting on, beside the calendar", () => {
+	it("asks only for the pending ones", async () => {
+		await mount(server(() => undefined));
+		const listing = http?.to("/calendar-suggestions") ?? [];
+		assert.ok(listing.length > 0);
+		assert.match(listing[0].url, /state=Pending/);
+	});
+
+	it("adds the top reading to the default calendar and leaves once it is on it", async () => {
+		await mount(server(() => undefined));
+		harness?.click(harness.byText("button", "Add"));
+
+		await harness?.waitFor(
+			() => harness?.text().includes("Quarterly review") === false,
+			"the column to leave once nothing waits",
+		);
+		const accepted =
+			http?.to(`/calendar-suggestions/${SUGGESTION}/accept`) ?? [];
+		assert.deepEqual(accepted[0]?.body, { calendarId: CALENDAR });
+	});
+
+	it("states a refusal instead of leaving a card that did nothing", async () => {
+		await mount(server(() => httpError(400, "Already declined.")));
+		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.match(harness?.text() ?? "", /Quarterly review/);
+	});
+});

package/src/components/mail/DailyBrief.tsx

@@ -16,7 +16,8 @@
  * here loads a mailbox.
  *
  * Sections are the unsearched brief only. A search is one request and one flat
- * list, newest first across every category: sectioning the matches would order
+ * list in the server's order — sender matches first, then mentions, each newest
+ * first across every category: sectioning the matches would order
  * them by category first and recency second, putting last spring's newsletter
  * above a mail that arrived this morning.
  *

package/src/components/mail/IntelligencePane.tsx

@@ -12,6 +12,7 @@ import {
 } from "@remit/ui";
 import { Sparkles } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
+import { useIntelligenceCalendar } from "@/hooks/useIntelligenceCalendar";
 import { useIntelligenceData } from "@/hooks/useIntelligenceData";
 import { useReportSpam } from "@/hooks/useReportSpam";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
@@ -272,6 +273,7 @@ function WiredPanel({
 		similarErrorIsFatal,
 		semanticEnabled,
 	} = useIntelligenceData(thread, mailboxId);
+	const calendar = useIntelligenceCalendar(thread);
 	const [reclassifyOpen, setReclassifyOpen] = useState(false);
 	const senderEmail = thread.fromEmail ?? undefined;
 
@@ -391,6 +393,9 @@ function WiredPanel({
 		<>
 			<IntelligencePanel
 				data={data}
+				calendar={calendar.surface}
+				tab={calendar.tab}
+				onTabChange={calendar.onTabChange}
 				onClose={onClose}
 				hideCloseButton={hideCloseButton}
 				onShowSimilar={handleShowSimilar}

package/src/components/mail/authenticity-warning.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { Drawer } from "@/components/layout/Drawer";
 import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
+import { quietCalendar } from "./intelligence-story-calendar";
 
 /**
  * The authenticity warning over the reading pane, and where its "Why?" goes.
@@ -113,7 +114,11 @@ const TwoPaneReading = () => {
 				ariaLabel="Message details"
 				side="right"
 			>
-				<IntelligencePanel data={intelligence} hideCloseButton />
+				<IntelligencePanel
+					data={intelligence}
+					calendar={quietCalendar}
+					hideCloseButton
+				/>
 			</Drawer>
 		</div>
 	);