@remit/web-client 0.0.23 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "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": {
@@ -103,6 +103,7 @@
     "@remit/drizzle-service": "*",
     "@remit/electrodb-entities": "*",
     "@remit/secrets-service": "*",
+    "@storybook/react-vite": "^9",
     "@tailwindcss/vite": "^4",
     "@tanstack/router-generator": "^1",
     "@tanstack/router-plugin": "^1",

package/src/components/mail/MessageList.tsx

@@ -802,7 +802,11 @@ export const MessageList = ({
 				onDelete={handleDelete}
 				onMarkRead={onMarkAsRead ? handleMarkAsRead : undefined}
 				isBusy={isDeleting || isMoving}
-				moveDisabledHint={moveDisabledHint}
+				notice={
+					moveDisabledHint
+						? { tone: "warning", text: moveDisabledHint }
+						: undefined
+				}
 				moveSlot={
 					onMoveMessages && accountId && mailboxId ? (
 						<>

package/src/components/ui/ConfirmDialog.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+const meta: Meta<typeof ConfirmDialog> = {
+	title: "Screens/WebClient/ConfirmDialog",
+	component: ConfirmDialog,
+	parameters: { layout: "centered" },
+	args: {
+		isOpen: true,
+		title: "Move 3,412 messages to Trash?",
+		description: "You can restore them from Trash later.",
+		confirmLabel: "Move to Trash",
+		destructive: true,
+		onConfirm: () => undefined,
+		onCancel: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof ConfirmDialog>;
+
+/**
+ * A single corner tap on the bar's delete icon used to fall straight through
+ * to a delete with nothing in between — this is what now sits in the way.
+ * Wording says "Move … to Trash", not "Delete": the operation is reversible
+ * (IMAP delete moves to Trash), and the confirmation copy says so rather than
+ * reading as final.
+ */
+export const Default: Story = {};
+
+export const OneMessage: Story = {
+	args: {
+		title: "Move 1 message to Trash?",
+	},
+};
+
+/** The mutation is in flight: the confirm button disables rather than
+ *  allowing a second concurrent delete request. */
+export const Busy: Story = {
+	args: {
+		isBusy: true,
+	},
+};
+
+/** A non-destructive confirmation (no `destructive`) uses the accent
+ *  affirmative styling instead of danger. */
+export const NonDestructive: Story = {
+	args: {
+		title: "Archive 12 messages?",
+		description: undefined,
+		confirmLabel: "Archive",
+		destructive: false,
+	},
+};

package/src/lib/bug-report.test.ts

@@ -1,5 +1,12 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import {
+	QUARANTINE_REPORT_DISCLAIMER,
+	type QuarantineEntry,
+	quarantineDemoEntries,
+	quarantineIssueTitle,
+	quarantineReportSections,
+} from "@remit/ui";
 import type { BugReportContext } from "./bug-report";
 import { buildBugReportDetails, buildGitHubIssueUrl } from "./bug-report";
 
@@ -211,3 +218,88 @@ describe("buildGitHubIssueUrl — truncation to fit the URL budget", () => {
 		);
 	});
 });
+
+describe("quarantine reports", () => {
+	// A flat multipart/mixed of 200 parts — the shape that first broke the
+	// fence. A message with a pathological part count is precisely the message
+	// that fails to parse, so a long report is the common case, not the tail.
+	const entry: QuarantineEntry = {
+		...quarantineDemoEntries[0],
+		structure: {
+			contentType: "multipart/mixed",
+			parts: Array.from({ length: 200 }, () => ({
+				contentType: "application/octet-stream",
+			})),
+		},
+	};
+
+	const ctx = (over?: Partial<BugReportContext>): BugReportContext => ({
+		...baseCtx,
+		title: quarantineIssueTitle(entry),
+		quarantine: quarantineReportSections(entry),
+		...over,
+	});
+
+	const fenceCount = (body: string): number =>
+		(body.match(/^```/gm) ?? []).length;
+
+	it("carries the diagnostics section and the supplied title", () => {
+		const decoded = decode(
+			buildGitHubIssueUrl(
+				ctx({ quarantine: quarantineReportSections(quarantineDemoEntries[0]) }),
+			),
+		);
+		assert.ok(decoded.includes("UnterminatedMultipartBoundary"));
+		assert.ok(decoded.includes("Message quarantined:"));
+	});
+
+	it("truncates a long report without cutting inside the code fence", () => {
+		const url = buildGitHubIssueUrl(ctx());
+		const body = decode(url);
+		assert.ok(
+			url.length <= 8000,
+			`Expected a URL under 8000 chars, got ${url.length}`,
+		);
+		assert.ok(body.includes("truncated"), "Expected a truncation marker");
+		assert.equal(
+			fenceCount(body) % 2,
+			0,
+			`Unbalanced code fence in truncated body:\n${body.slice(-400)}`,
+		);
+	});
+
+	it("keeps the redaction disclaimer on a truncated report", () => {
+		const body = decode(buildGitHubIssueUrl(ctx()));
+		assert.ok(
+			body.includes(QUARANTINE_REPORT_DISCLAIMER),
+			"A truncated report must still state what was withheld",
+		);
+	});
+
+	it("keeps the reproduction template outside the code block", () => {
+		const body = decode(buildGitHubIssueUrl(ctx()));
+		const afterLastFence = body.slice(body.lastIndexOf("```") + 3);
+		assert.ok(afterLastFence.includes("## Steps to reproduce"));
+	});
+
+	it("truncates the longer section when a stack is present too", () => {
+		const url = buildGitHubIssueUrl(
+			ctx({ stack: "at foo\n".repeat(2000), errorMessage: "boom" }),
+		);
+		assert.ok(
+			url.length <= 8000,
+			`Expected a URL under 8000 chars, got ${url.length}`,
+		);
+	});
+
+	it("Copy full details keeps every part the URL had to drop", () => {
+		const parts = (text: string): number =>
+			(text.match(/- application\/octet-stream/g) ?? []).length;
+		const details = buildBugReportDetails(ctx());
+		assert.equal(parts(details), 200);
+		assert.ok(
+			parts(decode(buildGitHubIssueUrl(ctx()))) < 200,
+			"Expected the URL body to have dropped parts",
+		);
+	});
+});

package/src/lib/bug-report.ts

@@ -1,3 +1,4 @@
+import type { QuarantineReportSections } from "@remit/ui";
 import {
 	APP_BUILD_TIME,
 	APP_SHA,
@@ -15,7 +16,7 @@ import { getRecentErrors } from "./console-errors";
 const MAX_ISSUE_URL_LENGTH = 7500;
 
 const TRUNCATION_MARKER =
-	"\n… (truncated — use “Copy full details” for the full stacktrace)";
+	"\n… (truncated — the copy action on this screen has the full report)";
 
 export interface BugReportContext {
 	appSha: string;
@@ -33,6 +34,14 @@ export interface BugReportContext {
 	stack?: string;
 	/** React component stack from the error boundary, when available. */
 	componentStack?: string;
+	/**
+	 * A quarantined message's diagnostics, when the report is filed from the
+	 * quarantine surface. Split into sections by `quarantineReportSections` in
+	 * @remit/ui so the MIME tree is fenced after truncation, never before.
+	 */
+	quarantine?: QuarantineReportSections;
+	/** Overrides the derived title, e.g. for a quarantine report. */
+	title?: string;
 }
 
 /** Fields callers can seed from a caught error. */
@@ -40,6 +49,9 @@ export interface BugReportSeed {
 	errorMessage?: string;
 	stack?: string;
 	componentStack?: string;
+	quarantine?: QuarantineReportSections;
+	/** Overrides the derived title, e.g. for a quarantine report. */
+	title?: string;
 }
 
 export function buildBugReportContext(seed?: BugReportSeed): BugReportContext {
@@ -56,6 +68,8 @@ export function buildBugReportContext(seed?: BugReportSeed): BugReportContext {
 		errorMessage: seed?.errorMessage,
 		stack: seed?.stack,
 		componentStack: seed?.componentStack,
+		quarantine: seed?.quarantine,
+		title: seed?.title,
 	};
 }
 
@@ -63,7 +77,16 @@ function fencedBlock(content: string): string {
 	return ["```", content, "```"].join("\n");
 }
 
-function buildIssueBody(ctx: BugReportContext, stack?: string): string {
+interface BodyOverrides {
+	stack?: string;
+	/** Replaces the MIME-tree section only; it is fenced after this is applied. */
+	quarantineStructure?: string;
+}
+
+function buildIssueBody(
+	ctx: BugReportContext,
+	overrides?: BodyOverrides,
+): string {
 	const errorSection =
 		ctx.recentErrors.length > 0
 			? ctx.recentErrors.map((e) => `  - ${e}`).join("\n")
@@ -85,7 +108,20 @@ function buildIssueBody(ctx: BugReportContext, stack?: string): string {
 		lines.push("## Error", ctx.errorMessage, "");
 	}
 
-	const resolvedStack = stack ?? ctx.stack;
+	if (ctx.quarantine) {
+		const structure =
+			overrides?.quarantineStructure ?? ctx.quarantine.structure;
+		lines.push(
+			ctx.quarantine.head,
+			"",
+			fencedBlock(structure),
+			"",
+			ctx.quarantine.disclaimer,
+			"",
+		);
+	}
+
+	const resolvedStack = overrides?.stack ?? ctx.stack;
 	if (resolvedStack) {
 		lines.push("## Stacktrace", fencedBlock(resolvedStack), "");
 	}
@@ -111,6 +147,7 @@ function buildIssueBody(ctx: BugReportContext, stack?: string): string {
 }
 
 function buildIssueTitle(ctx: BugReportContext): string {
+	if (ctx.title) return ctx.title;
 	if (!ctx.errorMessage) return "Bug: ";
 	const firstLine = ctx.errorMessage.split("\n")[0].trim();
 	const clipped =
@@ -118,10 +155,10 @@ function buildIssueTitle(ctx: BugReportContext): string {
 	return `Bug: ${clipped}`;
 }
 
-function issueUrl(ctx: BugReportContext, stack?: string): string {
+function issueUrl(ctx: BugReportContext, overrides?: BodyOverrides): string {
 	const params = new URLSearchParams({
 		title: buildIssueTitle(ctx),
-		body: buildIssueBody(ctx, stack),
+		body: buildIssueBody(ctx, overrides),
 	});
 	return `${GITHUB_NEW_ISSUE_URL}?${params.toString()}`;
 }
@@ -137,40 +174,63 @@ export function buildBugReportDetails(ctx: BugReportContext): string {
 
 /**
  * Build a prefilled GitHub new-issue URL. When the full body would exceed the
- * URL budget, the stacktrace is truncated (binary-searched to the longest
- * prefix that fits) and marked; everything else is preserved. The component
- * stack is dropped from the URL when truncation kicks in — it survives in the
- * "Copy full details" report.
+ * URL budget, the longest truncatable section — a stacktrace, or a quarantine
+ * report's MIME tree — is binary-searched to the longest prefix that fits and
+ * marked; everything else is preserved. The component stack is dropped from
+ * the URL when truncation kicks in — it survives in the copy-details report.
+ *
+ * The quarantine MIME tree is handed over unfenced and fenced by
+ * `buildIssueBody` afterwards, so a cut can never land inside a code fence.
+ * The disclaimer is appended by the builder rather than carried in the
+ * truncated text, so a truncated report still states what was withheld.
  */
 export function buildGitHubIssueUrl(ctx: BugReportContext): string {
 	const full = issueUrl(ctx);
 	if (full.length <= MAX_ISSUE_URL_LENGTH) return full;
 
-	const stack = ctx.stack ?? "";
 	const withoutComponentStack: BugReportContext = {
 		...ctx,
 		componentStack: undefined,
 	};
 
-	let lo = 0;
-	let hi = stack.length;
-	let best = 0;
-	while (lo <= hi) {
-		const mid = (lo + hi) >> 1;
-		const candidate = issueUrl(
-			withoutComponentStack,
-			stack.slice(0, mid) + TRUNCATION_MARKER,
-		);
-		if (candidate.length <= MAX_ISSUE_URL_LENGTH) {
-			best = mid;
-			lo = mid + 1;
-		} else {
-			hi = mid - 1;
+	// Both sections can be present — a seed is not discriminated — and cutting
+	// one to nothing does not necessarily fit the other. Truncate the longest
+	// first and keep going while the budget is still exceeded.
+	const sections: Array<[keyof BodyOverrides, string]> = [];
+	if (ctx.stack) sections.push(["stack", ctx.stack]);
+	if (ctx.quarantine?.structure) {
+		sections.push(["quarantineStructure", ctx.quarantine.structure]);
+	}
+	sections.sort((a, b) => b[1].length - a[1].length);
+
+	let overrides: BodyOverrides = {};
+	for (const [field, text] of sections) {
+		if (
+			issueUrl(withoutComponentStack, overrides).length <= MAX_ISSUE_URL_LENGTH
+		) {
+			break;
 		}
+		let lo = 0;
+		let hi = text.length;
+		let best = 0;
+		while (lo <= hi) {
+			const mid = (lo + hi) >> 1;
+			const candidate = issueUrl(withoutComponentStack, {
+				...overrides,
+				[field]: text.slice(0, mid) + TRUNCATION_MARKER,
+			});
+			if (candidate.length <= MAX_ISSUE_URL_LENGTH) {
+				best = mid;
+				lo = mid + 1;
+			} else {
+				hi = mid - 1;
+			}
+		}
+		overrides = {
+			...overrides,
+			[field]: text.slice(0, best) + TRUNCATION_MARKER,
+		};
 	}
 
-	return issueUrl(
-		withoutComponentStack,
-		stack.slice(0, best) + TRUNCATION_MARKER,
-	);
+	return issueUrl(withoutComponentStack, overrides);
 }