@remit/web-client 0.0.154 → 0.0.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.154",
+  "version": "0.0.155",
   "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/compose/ComposeForm.tsx

@@ -49,6 +49,7 @@ import {
 import type { AddressEntry } from "./AddressField";
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
+import { composeSpellcheck } from "./compose-spellcheck.js";
 
 const LazyComposeBody = lazy(() =>
 	import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })),
@@ -533,6 +534,11 @@ export const ComposeForm = ({
 		[configured],
 	);
 
+	// The editor reopens the checker whenever the composer's language changes,
+	// so the tag the chip and detection settle on is the only one it is ever
+	// asked for.
+	const spellcheck = useMemo(() => composeSpellcheck(pushError), [pushError]);
+
 	// The action bar refuses a second press while one is in flight, but the
 	// editor's own Cmd+Enter goes straight to `attemptSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
@@ -805,6 +811,7 @@ export const ComposeForm = ({
 					languages={accountLanguages}
 					initialLanguage={draftLanguage}
 					onLanguageChange={setComposeLanguage}
+					spellcheck={spellcheck}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/compose-spellcheck.test.ts

@@ -0,0 +1,122 @@
+/**
+ * What the composer hands the editor (#707): a worker opened for the language
+ * the message is being written in, and a failure nobody has to guess at.
+ *
+ * The two ways checking stops look identical on screen — no squiggles — and
+ * mean opposite things. A language with no dictionary is expected, and the
+ * browser carries on checking. A checker that was supposed to start and did not
+ * is a fault, and it is named on screen with a way to report it.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { PushErrorInput } from "../ui/error-banners.js";
+import { composeSpellcheck, spellcheckFailure } from "./compose-spellcheck.js";
+
+interface WorkerMessage {
+	readonly type: string;
+	readonly language?: string;
+}
+
+const opened: { url: string; messages: WorkerMessage[] }[] = [];
+
+class FakeWorker {
+	readonly messages: WorkerMessage[] = [];
+	constructor(url: URL) {
+		opened.push({ url: url.href, messages: this.messages });
+	}
+	postMessage(message: WorkerMessage): void {
+		this.messages.push(message);
+	}
+	addEventListener(): void {}
+	terminate(): void {}
+}
+
+const withWorker = <T>(run: () => Promise<T>): Promise<T> => {
+	Object.defineProperty(globalThis, "Worker", {
+		value: FakeWorker,
+		configurable: true,
+	});
+	return run();
+};
+
+afterEach(() => {
+	opened.length = 0;
+});
+
+describe("the checker the composer opens", () => {
+	it("asks the worker for the language the message is in", async () => {
+		const provider = await withWorker(() =>
+			composeSpellcheck(() => undefined).provider("en"),
+		);
+
+		assert.equal(provider?.language, "en");
+		assert.equal(opened.length, 1);
+		assert.match(opened[0].url, /rich-text-spellcheck-worker/);
+		assert.deepEqual(opened[0].messages, [{ type: "open", language: "en" }]);
+		provider?.close();
+	});
+
+	it("starts no worker for a language the build carries no words for", async () => {
+		const provider = await withWorker(() =>
+			composeSpellcheck(() => undefined).provider("nl"),
+		);
+
+		assert.equal(provider, null);
+		assert.deepEqual(opened, []);
+	});
+
+	it("reports nothing while the checker is coming up or running", () => {
+		const reported: PushErrorInput[] = [];
+		const { onStatus } = composeSpellcheck((input) => reported.push(input));
+
+		onStatus?.({ state: "opening", language: "en" });
+		onStatus?.({ state: "ready", language: "en" });
+		onStatus?.({ state: "unavailable", language: "nl" });
+
+		assert.deepEqual(reported, []);
+	});
+
+	it("says what stopped, and offers the report prefilled", () => {
+		const reported: PushErrorInput[] = [];
+		const { onStatus } = composeSpellcheck((input) => reported.push(input));
+
+		onStatus?.({
+			state: "failed",
+			language: "en",
+			reason: "worker",
+			detail: "Worker is not defined",
+		});
+
+		assert.equal(reported.length, 1);
+		const banner = reported[0];
+		assert.match(banner.detail ?? "", /Spellcheck for en is off/);
+		assert.match(banner.detail ?? "", /browser is checking this message/);
+		assert.match(banner.detail ?? "", /Worker is not defined/);
+		const report = new URL(banner.action?.href ?? "https://example.invalid");
+		assert.match(report.href, /github\.com\/.+\/issues\/new\?/);
+		assert.match(
+			report.searchParams.get("body") ?? "",
+			/Worker is not defined/,
+		);
+		assert.match(report.searchParams.get("title") ?? "", /Spellcheck stopped/);
+	});
+
+	it("names the download and the engine apart from the worker", () => {
+		const download = spellcheckFailure({
+			state: "failed",
+			language: "en",
+			reason: "download",
+			detail: "404",
+		});
+		const engine = spellcheckFailure({
+			state: "failed",
+			language: "en",
+			reason: "engine",
+			detail: "bad wasm",
+		});
+
+		assert.match(download.detail ?? "", /dictionary could not be downloaded/);
+		assert.match(engine.detail ?? "", /checker could not start/);
+	});
+});

package/src/components/compose/compose-spellcheck.ts

@@ -0,0 +1,56 @@
+/**
+ * The checker the composer writes against. The engine runs in a worker, opened
+ * once per language and taken down with the surface, and the module holding it
+ * is loaded on demand so the worker chunk stays out of every other screen.
+ *
+ * A language with no dictionary is not a failure: the provider answers null,
+ * the editor leaves the browser's own checking switched on, and the writer
+ * still gets underlines. A checker that was supposed to come up and did not is
+ * a failure, and it says so — an editor that has quietly stopped marking
+ * anything reads exactly like text with nothing wrong in it.
+ */
+
+import type { ProviderStatus, SpellcheckOptions } from "@remit/ui/rich-text";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import type { PushErrorInput } from "../ui/error-banners.js";
+
+const WHAT_FAILED: Record<"download" | "engine" | "worker", string> = {
+	download: "its dictionary could not be downloaded",
+	engine: "the checker could not start",
+	worker: "the checker stopped running",
+};
+
+export const spellcheckFailure = (
+	status: Extract<ProviderStatus, { state: "failed" }>,
+): PushErrorInput => {
+	const summary = `Spellcheck for ${status.language} is off: ${WHAT_FAILED[status.reason]}.`;
+	return {
+		severity: "warning",
+		title: "Spellcheck stopped",
+		detail: `${summary} Your browser is checking this message instead. ${status.detail}`,
+		action: {
+			label: "Report this",
+			href: buildGitHubIssueUrl(
+				buildBugReportContext({
+					title: `Spellcheck stopped: ${status.reason} (${status.language})`,
+					errorMessage: `${summary} ${status.detail}`,
+				}),
+			),
+		},
+	};
+};
+
+export const composeSpellcheck = (
+	report: (input: PushErrorInput) => void,
+): SpellcheckOptions => ({
+	provider: async (language) => {
+		const { openSpellcheckWorker } = await import(
+			"@remit/ui/spellcheck-worker"
+		);
+		return openSpellcheckWorker(language);
+	},
+	onStatus: (status) => {
+		if (status.state !== "failed") return;
+		report(spellcheckFailure(status));
+	},
+});

package/src/components/ui/ErrorBanner.tsx

@@ -1,12 +1,16 @@
 import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import type { ErrorBannerSeverity } from "./error-banners.js";
+import type {
+	ErrorBannerAction,
+	ErrorBannerSeverity,
+} from "./error-banners.js";
 
 interface ErrorBannerProps {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	onDismiss: (id: string) => void;
 }
 
@@ -51,6 +55,7 @@ export const ErrorBanner = ({
 	severity,
 	title,
 	detail,
+	action,
 	onDismiss,
 }: ErrorBannerProps) => {
 	const styles = SEVERITY_STYLES[severity];
@@ -77,6 +82,16 @@ export const ErrorBanner = ({
 				{detail && (
 					<p className="mt-0.5 text-xs text-fg-muted break-words">{detail}</p>
 				)}
+				{action && (
+					<a
+						href={action.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="mt-1 inline-block text-xs font-medium text-accent-2 underline underline-offset-2"
+					>
+						{action.label}
+					</a>
+				)}
 			</div>
 			<button
 				type="button"

package/src/components/ui/ErrorBannerStack.tsx

@@ -25,6 +25,7 @@ export const ErrorBannerStack = ({
 						severity={entry.severity}
 						title={entry.title}
 						detail={entry.detail}
+						action={entry.action}
 						onDismiss={onDismiss}
 					/>
 				))}

package/src/components/ui/error-banners.ts

@@ -1,10 +1,20 @@
 export type ErrorBannerSeverity = "error" | "warning" | "info";
 
+/**
+ * A way out of the banner. A failure the user cannot act on is still theirs to
+ * report, and a link they have to assemble themselves is one nobody follows.
+ */
+export interface ErrorBannerAction {
+	label: string;
+	href: string;
+}
+
 export interface ErrorBannerEntry {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	createdAt: number;
 }
 
@@ -12,6 +22,7 @@ export interface PushErrorInput {
 	severity?: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	/**
 	 * The error being reported, when there is one. Pass it: a banner is a soft
 	 * surface, and `pushError` uses this to refuse errors that are not soft —
@@ -116,5 +127,6 @@ export const buildEntry = (
 	severity: input.severity ?? "error",
 	title: input.title,
 	detail: input.detail,
+	action: input.action,
 	createdAt: now,
 });