@remit/ui 0.0.112 → 0.0.114

package/src/components/event-quick-entry.tsx

@@ -0,0 +1,159 @@
+import { AlertTriangle, Info, Wand2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import type { PhraseParse } from "../lib/event-phrase.js";
+
+export interface EventQuickEntryProps {
+	value: string;
+	onChange: (value: string) => void;
+	/** The reading of `value`, recomputed by the caller on every keystroke. */
+	parse: PhraseParse;
+	/** Commits the reading to the form. */
+	onCommit: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+interface ReadingProps {
+	label: string;
+	value: string;
+	source: string;
+}
+
+function Reading({ label, value, source }: ReadingProps) {
+	return (
+		<div className="flex min-w-0 items-baseline gap-1.5">
+			<span className="shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+				{label}
+			</span>
+			<span className="truncate text-xs font-medium text-fg">{value}</span>
+			{source !== "" && (
+				<span className="shrink-0 rounded-xs bg-accent-2-soft px-1 text-2xs text-accent-2">
+					{source}
+				</span>
+			)}
+		</div>
+	);
+}
+
+/**
+ * Typing is the fastest way to make an event, so the field takes a sentence.
+ * What it does with the sentence is on screen while you type: every reading is
+ * shown next to the words it was taken from, and anything the reader filled in
+ * or could not settle is said out loud. Correcting the machine happens before
+ * the event exists, not after it is on the grid.
+ */
+export function EventQuickEntry({
+	value,
+	onChange,
+	parse,
+	onCommit,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: EventQuickEntryProps) {
+	const hasReading = value.trim() !== "";
+	const endTime =
+		parse.startTime === ""
+			? ""
+			: ` – ${clockAfter(parse.startTime, parse.durationMinutes)}`;
+
+	return (
+		<div className={cn("flex flex-col gap-2", className)}>
+			<div
+				className={cn(
+					"flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30",
+					touch ? "min-h-11" : "h-9",
+				)}
+			>
+				<Wand2 className="size-4 shrink-0 text-fg-subtle" aria-hidden />
+				<input
+					value={value}
+					aria-label="Describe the event"
+					placeholder={placeholder}
+					onChange={(e) => onChange(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") onCommit();
+					}}
+					className="min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle"
+				/>
+			</div>
+
+			{hasReading && (
+				<div className="flex flex-col gap-1 rounded-md border border-line bg-surface px-2.5 py-2">
+					<Reading
+						label="What"
+						value={parse.title === "" ? "—" : parse.title}
+						source=""
+					/>
+					<Reading
+						label="When"
+						value={`${formatDay(parse.date)}${
+							parse.startTime === "" ? "" : ` ${parse.startTime}${endTime}`
+						}`}
+						source={[parse.dateText, parse.startTimeText]
+							.filter((part) => part !== "")
+							.join(" ")}
+					/>
+					{parse.durationText !== "" && (
+						<Reading
+							label="Long"
+							value={formatDuration(parse.durationMinutes)}
+							source={parse.durationText}
+						/>
+					)}
+					{parse.attendees.length > 0 && (
+						<Reading
+							label="Who"
+							value={parse.attendees.join(", ")}
+							source={parse.attendeesText}
+						/>
+					)}
+					{parse.assumptions.map((note) => (
+						<p
+							key={note}
+							className="flex items-center gap-1.5 text-2xs text-fg-subtle"
+						>
+							<Info className="size-3 shrink-0" aria-hidden />
+							{note}
+						</p>
+					))}
+					{parse.unresolved.map((note) => (
+						<p
+							key={note}
+							className="flex items-center gap-1.5 text-2xs text-warning"
+						>
+							<AlertTriangle className="size-3 shrink-0" aria-hidden />
+							{note}
+						</p>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
+
+function clockAfter(clock: string, minutes: number): string {
+	const [hours, mins] = clock.split(":").map(Number);
+	const total = (hours * 60 + mins + minutes) % 1440;
+	return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(
+		total % 60,
+	).padStart(2, "0")}`;
+}
+
+function formatDay(iso: string): string {
+	if (iso === "") return "—";
+	const [year, month, day] = iso.split("-").map(Number);
+	return new Date(year, month - 1, day).toLocaleDateString("en-GB", {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+	});
+}
+
+function formatDuration(minutes: number): string {
+	if (minutes === 0) return "—";
+	if (minutes % 60 === 0) return `${minutes / 60}h`;
+	if (minutes < 60) return `${minutes}m`;
+	return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}

package/src/components/event-suggestion-card.render.test.ts

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import type { EventSuggestion } from "./calendar-types.js";
+import { EventSuggestionCard } from "./event-suggestion-card.js";
+
+const suggestion: EventSuggestion = {
+	id: "s1",
+	title: "Stay in Lisbon",
+	start: "2026-06-19",
+	end: "2026-06-23",
+	allDay: true,
+	location: "Alfama, Lisbon",
+	threadId: "thr_airbnb",
+	threadSubject: "Your reservation in Lisbon is confirmed",
+	sender: "Airbnb",
+	confidence: 0.94,
+	ambiguity: "",
+	suggestedCalendarId: "c5",
+	timeZone: "Europe/Lisbon",
+	zoneCertainty: "explicit",
+};
+
+const render = (overrides: Partial<EventSuggestion>) =>
+	renderToString(
+		createElement(EventSuggestionCard, {
+			suggestion: { ...suggestion, ...overrides },
+			whenText: "Friday 19 June – Monday 22 June",
+			onAdd: () => undefined,
+			onReview: () => undefined,
+			onDismiss: () => undefined,
+			onOpenThread: () => undefined,
+		}),
+	);
+
+describe("EventSuggestionCard", () => {
+	it("says it is a suggestion and not an event", () => {
+		const html = render({});
+		assert.match(html, /Suggested from mail/);
+		assert.match(html, /border-dashed/);
+	});
+
+	it("puts the reading into words rather than a percentage", () => {
+		assert.match(render({}), /Read cleanly/);
+		assert.match(render({ confidence: 0.7 }), /Read with gaps/);
+		assert.match(render({ confidence: 0.2 }), /Barely read/);
+	});
+
+	it("names what it could not settle", () => {
+		assert.match(
+			render({ ambiguity: "Two Tuesdays fit." }),
+			/Two Tuesdays fit\./,
+		);
+	});
+
+	it("credits the mail it was read out of", () => {
+		assert.match(render({}), /Airbnb/);
+		assert.match(render({}), /Your reservation in Lisbon is confirmed/);
+	});
+
+	it("needs a person to press Add", () => {
+		assert.match(render({}), />Add</);
+	});
+});

package/src/components/event-suggestion-card.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { EventSuggestion } from "./calendar-types.js";
+import { EventSuggestionCard } from "./event-suggestion-card.js";
+
+/**
+ * What the reader found in a mail, waiting for a person. It sits on a dashed
+ * card off the grid: a suggestion is never a provisional event that someone has
+ * to notice and take back off the calendar.
+ */
+const meta: Meta<typeof EventSuggestionCard> = {
+	title: "Calendar/Suggestion card",
+	component: EventSuggestionCard,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="max-w-sm">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof EventSuggestionCard>;
+
+const base: EventSuggestion = {
+	id: "s1",
+	title: "Stay in Lisbon",
+	start: "2026-06-19",
+	end: "2026-06-23",
+	allDay: true,
+	location: "Alfama, Lisbon",
+	threadId: "thr_airbnb",
+	threadSubject: "Your reservation in Lisbon is confirmed",
+	sender: "Airbnb",
+	confidence: 0.94,
+	ambiguity: "",
+	suggestedCalendarId: "c5",
+	timeZone: "Europe/Lisbon",
+	zoneCertainty: "explicit",
+};
+
+const handlers = {
+	onAdd: () => {},
+	onReview: () => {},
+	onDismiss: () => {},
+	onOpenThread: () => {},
+};
+
+/** A booking mail that gave every field it needed to. */
+export const ReadCleanly: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={base}
+			whenText="Friday 19 June – Monday 22 June"
+			{...handlers}
+		/>
+	),
+};
+
+/** What it could not settle is named, not smoothed over. */
+export const WithAmbiguity: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={{
+				...base,
+				id: "s2",
+				title: "Analytics pilot — first call",
+				allDay: false,
+				location: "",
+				threadSubject: "Following up: analytics pilot proposal",
+				sender: "Erik Wahlberg",
+				confidence: 0.38,
+				ambiguity:
+					'Asked for "some time Tuesday" and named no hour. Two Tuesdays fit.',
+			}}
+			whenText="Tuesday 16 June · 09:00 – 10:00"
+			{...handlers}
+		/>
+	),
+};
+
+/** The same card sized for a phone sheet. */
+export const Touch: Story = {
+	render: () => (
+		<EventSuggestionCard
+			suggestion={base}
+			whenText="Friday 19 June – Monday 22 June"
+			touch
+			{...handlers}
+		/>
+	),
+};

package/src/components/event-suggestion-card.tsx

@@ -0,0 +1,116 @@
+import { AlertTriangle, Mail, Plus, SlidersHorizontal, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import type { EventSuggestion } from "./calendar-types.js";
+
+export interface EventSuggestionCardProps {
+	suggestion: EventSuggestion;
+	/** Already formatted by the caller. */
+	whenText: string;
+	onAdd: () => void;
+	onReview: () => void;
+	onDismiss: () => void;
+	onOpenThread: () => void;
+	touch?: boolean;
+	className?: string;
+}
+
+/** Words for a number, so the card never shows a false 87%. */
+function confidenceText(confidence: number): string {
+	if (confidence >= 0.85) return "Read cleanly";
+	if (confidence >= 0.6) return "Read with gaps";
+	return "Barely read";
+}
+
+/**
+ * A candidate, and unmistakably not an event. It lives off the grid, on a
+ * dashed card, and only a person pressing Add puts anything on the calendar —
+ * a machine reading of a mail never becomes a provisional block that someone
+ * has to notice and remove.
+ */
+export function EventSuggestionCard({
+	suggestion,
+	whenText,
+	onAdd,
+	onReview,
+	onDismiss,
+	onOpenThread,
+	touch,
+	className,
+}: EventSuggestionCardProps) {
+	return (
+		<div
+			className={cn(
+				"flex flex-col gap-2 rounded-lg border border-dashed border-line-strong bg-surface-sunken p-3",
+				className,
+			)}
+		>
+			<div className="flex items-start gap-2">
+				<span className="min-w-0 flex-1">
+					<span className="block text-2xs uppercase tracking-wider text-fg-subtle">
+						Suggested from mail · {confidenceText(suggestion.confidence)}
+					</span>
+					<span className="block truncate text-sm font-medium text-fg">
+						{suggestion.title}
+					</span>
+					<span className="block text-xs text-fg-muted">{whenText}</span>
+					{suggestion.location !== "" && (
+						<span className="block truncate text-xs text-fg-muted">
+							{suggestion.location}
+						</span>
+					)}
+				</span>
+				<button
+					type="button"
+					aria-label="Dismiss suggestion"
+					onClick={onDismiss}
+					className={cn(
+						"flex shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none hover:bg-surface hover:text-fg focus-visible:ring-2 focus-visible:ring-ring",
+						touch ? "size-11" : "size-7",
+					)}
+				>
+					<X className="size-4" />
+				</button>
+			</div>
+
+			{suggestion.ambiguity !== "" && (
+				<p className="flex items-start gap-1.5 text-2xs text-warning">
+					<AlertTriangle className="mt-0.5 size-3 shrink-0" aria-hidden />
+					{suggestion.ambiguity}
+				</p>
+			)}
+
+			<button
+				type="button"
+				onClick={onOpenThread}
+				className="flex w-full min-w-0 items-center gap-1.5 rounded-sm text-left text-2xs text-accent-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+			>
+				<Mail className="size-3 shrink-0" />
+				<span className="truncate">
+					{suggestion.sender} — {suggestion.threadSubject}
+				</span>
+			</button>
+
+			<div className="flex items-center gap-2">
+				<Button
+					variant="primary"
+					size={touch ? "md" : "sm"}
+					icon={<Plus className="size-3.5" />}
+					onClick={onAdd}
+					className={touch ? "min-h-11 flex-1" : ""}
+				>
+					Add
+				</Button>
+				<Button
+					variant="secondary"
+					size={touch ? "md" : "sm"}
+					icon={<SlidersHorizontal className="size-3.5" />}
+					onClick={onReview}
+					className={touch ? "min-h-11" : ""}
+				>
+					Change first
+				</Button>
+			</div>
+		</div>
+	);
+}

package/src/components/flow-screen.tsx

@@ -0,0 +1,169 @@
+/**
+ * The full-screen flow chrome: a fixed header carrying back and cancel, one
+ * scrolling body, and a fixed footer in the thumb zone. Every multi-decision
+ * surface on a phone is this shape, so there is one implementation of it.
+ */
+
+import { ArrowLeft, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface FlowStepRailProps {
+	/** How many steps the flow walks. */
+	count: number;
+	/** Zero-based index of the step on screen. */
+	activeStep: number;
+}
+
+export function FlowStepRail({ count, activeStep }: FlowStepRailProps) {
+	return (
+		<ol className="flex items-center gap-1.5" aria-label="Progress">
+			{Array.from({ length: count }, (_, i) => (
+				<li
+					// biome-ignore lint/suspicious/noArrayIndexKey: a rail segment is its position
+					key={i}
+					className="flex flex-1 items-center gap-1.5"
+				>
+					<span
+						className={cn(
+							"h-1 flex-1 rounded-full transition-colors",
+							i <= activeStep ? "bg-accent" : "bg-surface-sunken",
+						)}
+						aria-current={i === activeStep ? "step" : undefined}
+					/>
+				</li>
+			))}
+		</ol>
+	);
+}
+
+export interface FlowScreenProps {
+	title: string;
+	subtitle?: string;
+	/** The step labels in order. One label means one page and no rail. */
+	steps: readonly string[];
+	activeStep: number;
+	onBack: () => void;
+	onExit: () => void;
+	/** Omitted where the screen is read rather than answered. */
+	footer?: ReactNode;
+	children: ReactNode;
+	/**
+	 * `scroll` pads the body and scrolls it. `fill` hands the whole region to a
+	 * child that carries its own header and scrolling.
+	 */
+	bodyFit?: "scroll" | "fill";
+	/**
+	 * `viewport` covers the window and becomes a centred modal from 768px up.
+	 * `container` fills the nearest positioned ancestor and stays full-bleed,
+	 * for a surface that is already sized to a phone.
+	 */
+	anchor?: "viewport" | "container";
+}
+
+/**
+ * The body is the only scrolling region, so back and the footer's controls
+ * never leave the screen. The screen covers what opened it, which is why it
+ * takes the accessibility tree with it.
+ */
+export function FlowScreen({
+	title,
+	subtitle,
+	steps,
+	activeStep,
+	onBack,
+	onExit,
+	footer,
+	children,
+	anchor = "viewport",
+	bodyFit = "scroll",
+}: FlowScreenProps) {
+	const contained = anchor === "container";
+	return (
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			className={cn(
+				"z-50 flex flex-col font-sans text-fg",
+				contained
+					? "absolute inset-0"
+					: "fixed inset-0 md:items-center md:justify-center md:bg-black/40 md:p-6",
+			)}
+		>
+			<div
+				className={cn(
+					"flex min-h-0 w-full flex-1 flex-col bg-canvas",
+					!contained &&
+						"md:h-[45rem] md:max-h-[calc(100dvh-3rem)] md:w-[35rem] md:max-w-[calc(100vw-3rem)] md:flex-none md:overflow-hidden md:rounded-xl md:border md:border-line md:shadow-lg",
+				)}
+			>
+				<header
+					className={cn(
+						"shrink-0 border-b border-line px-3 pb-2",
+						contained
+							? "pt-3"
+							: "pt-[calc(0.75rem+env(safe-area-inset-top,0px))] md:pt-3",
+					)}
+				>
+					<div className="flex items-center gap-1">
+						<button
+							type="button"
+							onClick={onBack}
+							aria-label="Back"
+							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
+						>
+							<ArrowLeft className="size-5" />
+						</button>
+						<div className="min-w-0 flex-1 text-center">
+							<h1 className="truncate text-sm font-semibold">{title}</h1>
+							{subtitle && (
+								<p className="truncate text-2xs text-fg-muted">{subtitle}</p>
+							)}
+						</div>
+						<button
+							type="button"
+							onClick={onExit}
+							aria-label="Cancel"
+							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
+						>
+							<X className="size-5" />
+						</button>
+					</div>
+					{steps.length > 1 && (
+						<div className="space-y-1 px-1 pt-2">
+							<FlowStepRail count={steps.length} activeStep={activeStep} />
+							<p className="text-2xs text-fg-subtle">
+								Step {activeStep + 1} of {steps.length} · {steps[activeStep]}
+							</p>
+						</div>
+					)}
+				</header>
+
+				<div
+					className={cn(
+						"min-h-0 flex-1",
+						bodyFit === "fill"
+							? "overflow-hidden"
+							: "overflow-y-auto px-4 py-4",
+					)}
+				>
+					{children}
+				</div>
+
+				{footer && (
+					<footer
+						className={cn(
+							"shrink-0 border-t border-line px-4 py-3",
+							contained
+								? ""
+								: "pb-[max(0.75rem,env(safe-area-inset-bottom))] md:pb-3",
+						)}
+					>
+						{footer}
+					</footer>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/intelligence-panel.render.test.ts

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { categoryTone, isThreadCategory } from "./app-shell-types.js";
+import type { IntelligenceData } from "./intelligence-panel.js";
+import { IntelligencePanel } from "./intelligence-panel.js";
+
+const vipWithFailingAuthenticity: IntelligenceData = {
+	sender: {
+		name: "Sabrina Basten",
+		email: "sabrina@sabrinabasten.example",
+		trust: "vip",
+		firstSeenLabel: "Mar 2023",
+		inboundCount: 214,
+		replyCount: 188,
+	},
+	authenticity: {
+		verdict: "mismatch",
+		fromDomain: "sabrinabasten.example",
+		dkimDomain: "custmx.one.example",
+		summary: "Signed by custmx.one.example instead.",
+	},
+	category: { value: "personal" },
+	flags: { vip: true },
+	similar: [],
+};
+
+/** The rendered chip in the Category section. */
+function categoryChip(data: IntelligenceData): string {
+	const html = renderToString(createElement(IntelligencePanel, { data }));
+	const marker = `>${data.category.value}</span>`;
+	const end = html.indexOf(marker);
+	assert.notEqual(end, -1, `expected a chip reading '${data.category.value}'`);
+	const start = html.lastIndexOf("<span", end);
+	return html.slice(start, end + marker.length);
+}
+
+describe("IntelligencePanel category chip", () => {
+	it("takes its colour from the category, not the authenticity verdict", () => {
+		const chip = categoryChip(vipWithFailingAuthenticity);
+		assert.doesNotMatch(chip, /danger/);
+		assert.match(chip, /text-accent-2/);
+	});
+
+	it("renders the same chip for a category whatever the verdict said", () => {
+		const failing = categoryChip(vipWithFailingAuthenticity);
+		const aligned = categoryChip({
+			...vipWithFailingAuthenticity,
+			authenticity: {
+				verdict: "aligned",
+				fromDomain: "sabrinabasten.example",
+				summary: "Nothing looks unusual about this sender.",
+			},
+		});
+		assert.equal(failing, aligned);
+	});
+
+	it("gives each category its own tone", () => {
+		const receipt = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "transactional" },
+		});
+		assert.match(receipt, /text-positive/);
+		const newsletter = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "newsletter" },
+		});
+		assert.match(newsletter, /text-fg-muted/);
+	});
+
+	it("renders a readable chip for a message the classifier placed nowhere", () => {
+		const chip = categoryChip({
+			...vipWithFailingAuthenticity,
+			category: { value: "uncategorized" },
+		});
+		assert.match(chip, /text-fg-muted/);
+		assert.doesNotMatch(chip, /danger/);
+	});
+});
+
+describe("isThreadCategory", () => {
+	it("accepts every category the tone map covers", () => {
+		for (const category of Object.keys(categoryTone)) {
+			assert.equal(isThreadCategory(category), true, category);
+		}
+	});
+
+	it("rejects a category this build has no tone for", () => {
+		assert.equal(isThreadCategory("invoice"), false);
+		assert.equal(isThreadCategory("Personal"), false);
+		assert.equal(isThreadCategory("toString"), false);
+	});
+});