@redeemid/emdash 0.0.19 → 0.0.20

package/src/components/MemberCard.astro

@@ -1,7 +1,9 @@
 ---
 /**
  * The member's own account card, for an account page: their levels with
- * when each started, levels they held before, the meter, and links to the
+ * when each started, when the membership renews or ends and any gift
+ * membership (from the shop's membership.* customer metafields), levels
+ * they held before, the meter, and links to the
  * store account, Refresh membership and Sign out. Visitors get a sign-in link.
  *
  *   <MemberCard />
@@ -35,6 +37,11 @@ const date = (iso: string | null) => {
 	return Number.isNaN(t) ? null : new Intl.DateTimeFormat("en-US", { dateStyle: "long", timeZone: "UTC" }).format(new Date(t));
 };
 const name = [m?.firstName, m?.lastName].filter(Boolean).join(" ");
+// Dates the shop keeps in Shopify (Flow or a subscription app). Display only.
+const dates = m && !disabled ? (m.dates ?? {}) : {};
+const today = new Date().toISOString().slice(0, 10);
+const gift = dates.gift && dates.gift >= today ? dates.gift : null;
+const day = (ymd: string | null | undefined) => (ymd ? date(`${ymd}T12:00:00Z`) : null);
 const join = config?.join;
 ---
 
@@ -55,7 +62,7 @@ const join = config?.join;
 					{current.map((l) => (
 						<li data-redeemid-level={l.slug}>
 							<strong>{l.name}</strong>
-							{date(l.since) && <> {textParts(config, "since {date}", { date: <time datetime={l.since ?? undefined}>{date(l.since)}</time> })}</>}
+							{(dates.since ? day(dates.since) : date(l.since)) && <> {textParts(config, "since {date}", { date: <time datetime={dates.since ?? l.since ?? undefined}>{dates.since ? day(dates.since) : date(l.since)}</time> })}</>}
 						</li>
 					))}
 				</ul>
@@ -64,6 +71,13 @@ const join = config?.join;
 					{text(config, "You don't have a membership yet.")}{join && <> <a href={join.href}>{join.label ?? text(config, "Become a member")}</a></>}
 				</p>
 			)}
+			{current.length > 0 && (dates.renews || dates.ends || gift) && (
+				<ul class="redeemid-member__dates">
+					{dates.renews && <li data-redeemid-date="renews">{textParts(config, "Renews on {date}", { date: <time datetime={dates.renews}>{day(dates.renews)}</time> })}</li>}
+					{dates.ends && <li data-redeemid-date="ends">{textParts(config, "Ends on {date}", { date: <time datetime={dates.ends}>{day(dates.ends)}</time> })}</li>}
+					{gift && <li data-redeemid-date="gift">{textParts(config, "Gift membership until {date}", { date: <time datetime={gift}>{day(gift)}</time> })}</li>}
+				</ul>
+			)}
 			{features.length > 0 && (
 				<p class="redeemid-member__features">
 					{text(config, "Includes: {features}", { features: features.map((f) => f.name).join(", ") })}

package/src/components/Plan.astro

@@ -7,9 +7,10 @@
  *   <Plan handle="gold-membership" levels={["gold"]} />
  *
  * With `levels`, members who hold one of them see "You're on this plan"
- * in place of the button.
+ * in place of the button, and a member who held one before (Shopify removed
+ * its tag) sees "Renew" instead of "Join".
  */
-import { viewer } from "../access.js";
+import { membership, viewer } from "../access.js";
 import { siteConfig } from "../site-config.js";
 import { plan as loadPlan, type Plan } from "../storefront.js";
 import { text } from "../text.js";
@@ -23,10 +24,12 @@ interface Props {
 	/** The levels this plan gives. Members holding one see `heldLabel`, not the button. */
 	levels?: string[];
 	heldLabel?: string;
+	/** Button text for a member whose plan lapsed. */
+	renewLabel?: string;
 }
 
 const config = await siteConfig(Astro.locals);
-const { handle, label = text(config, "Join"), title, levels = [], heldLabel = text(config, "You're on this plan.") } = Astro.props;
+const { handle, label = text(config, "Join"), title, levels = [], heldLabel = text(config, "You're on this plan."), renewLabel = text(config, "Renew") } = Astro.props;
 let p: Plan | null = null;
 if (config) {
 	try {
@@ -39,11 +42,14 @@ const price = p?.price
 	? new Intl.NumberFormat("en-US", { style: "currency", currency: p.price.currencyCode }).format(Number(p.price.amount))
 	: null;
 const here = Astro.url.pathname + Astro.url.search;
-const held = levels.length > 0 && (await viewer(Astro)).levels.some((l) => levels.includes(l));
+const v = levels.length > 0 ? await viewer(Astro) : null;
+const held = Boolean(v?.levels.some((l) => levels.includes(l)));
+// Lapsed: held one of these levels before. Offered their plan back, not "Join" as if new.
+const lapsed = Boolean(!held && v?.member && v.member.status !== "disabled" && membership(v.member, config?.levels).past.some((p) => levels.includes(p.slug)));
 ---
 
 {p ? (
-	<div class:list={["redeemid-plan", { "is-held": held }]} data-redeemid-plan={p.handle}>
+	<div class:list={["redeemid-plan", { "is-held": held, "is-lapsed": lapsed }]} data-redeemid-plan={p.handle} data-redeemid-state={held ? "held" : lapsed ? "renew" : "join"}>
 		<h2 class="redeemid-plan__title">{title ?? p.title}</h2>
 		{price && <p class="redeemid-plan__price">{price}</p>}
 		{p.description && <p class="redeemid-plan__description">{p.description}</p>}
@@ -53,7 +59,7 @@ const held = levels.length > 0 && (await viewer(Astro)).levels.some((l) => level
 			<form method="post" action="/_emdash/api/auth/redeemid/buy">
 				<input type="hidden" name="plan" value={p.handle} />
 				<input type="hidden" name="return" value={here} />
-				<button type="submit">{label}</button>
+				<button type="submit">{lapsed ? renewLabel : label}</button>
 			</form>
 		) : (
 			<p class="redeemid-plan__unavailable">{text(config, "Not available right now.")}</p>

package/src/config.ts

@@ -187,6 +187,12 @@ export interface RedeemIDConfig {
 	 * in the editor's Access panel rather than here.
 	 */
 	entries?: Record<string, EntryRule>;
+	/**
+	 * Set by RedeemID, never in astro.config.mjs: the settings saved in the
+	 * admin couldn't be read and none were read before, so every entry is
+	 * locked until they can be (see lockdown in settings.ts).
+	 */
+	unavailable?: boolean;
 	/**
 	 * Only for local tests: lets `shop` be a full http:// origin of a fake store.
 	 * Never set this on a live site.

package/src/descriptor.ts

@@ -15,6 +15,7 @@ export const PAGES = [
 	{ path: "/events", label: "App events", icon: "list" },
 	{ path: "/reports", label: "Reports", icon: "chart" },
 	{ path: "/status", label: "Status", icon: "pulse" },
+	{ path: "/setup", label: "Setup", icon: "settings" },
 	{ path: "/test", label: "Access test", icon: "search" },
 	{ path: "/privacy", label: "Privacy", icon: "lock" },
 ];

package/src/events.ts

@@ -8,7 +8,10 @@
  * X-RedeemID-Signature: sha256=<hex HMAC of the raw body>. Events:
  * member.signed_in, member.levels_changed, meter.used, meter.exhausted,
  * preferences.saved.
- * Sending never blocks or breaks the page: failures are logged and dropped.
+ * Sending never blocks or breaks the page: events go out after the response
+ * (waitUntil on Workers), are tried three times, and one that fails every
+ * try is kept under App events → Failed events, where staff can send it
+ * again or clear it.
  * No event carries an email address or a name; match people by `customerId`.
  */
 
@@ -19,6 +22,8 @@ import { record } from "./log.js";
 export type EventName = "member.signed_in" | "member.levels_changed" | "meter.used" | "meter.exhausted" | "preferences.saved" | "member.erased";
 
 const TIMEOUT_MS = 3000;
+/** Waits before the second and third tries. */
+export const RETRY_DELAYS_MS = [1000, 5000];
 
 export async function signBody(body: string, secret: string): Promise<string> {
 	const key = await crypto.subtle.importKey("raw", new TextEncoder().encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
@@ -26,14 +31,20 @@ export async function signBody(body: string, secret: string): Promise<string> {
 	return [...mac].map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 
-/** Send one event. Returns whether the receiver answered 2xx; never throws. */
-export async function emit(config: RedeemIDConfig | null, name: EventName, data: Record<string, unknown>, fetcher: typeof fetch = fetch): Promise<boolean> {
-	const url = config?.events?.url;
-	const secret = env(ENV.eventsSecret);
-	if (!url || !secret) return false;
-	if (config.events?.only && !config.events.only.includes(name)) return false;
-	const id = crypto.randomUUID();
-	const body = JSON.stringify({ id, event: name, at: new Date().toISOString(), data });
+/** An event that failed every try, kept so staff can send it again or clear it (App events). */
+export interface FailedEvent {
+	/** The delivery id, also the record id: a resend keeps it, so receivers can drop duplicates. */
+	id: string;
+	event: EventName;
+	/** The JSON body as first sent (ids and levels, never an email or a name). */
+	body: string;
+	at: string;
+	attempts: number;
+	error: string;
+}
+
+/** One POST. Resolves to null when the receiver answered 2xx, else what went wrong. */
+async function post(url: string, name: string, id: string, body: string, secret: string, fetcher: typeof fetch): Promise<string | null> {
 	try {
 		const res = await fetcher(url, {
 			method: "POST",
@@ -47,22 +58,117 @@ export async function emit(config: RedeemIDConfig | null, name: EventName, data:
 			body,
 			signal: AbortSignal.timeout(TIMEOUT_MS),
 		});
-		if (!res.ok) await record({ event: "events.failed", label: name, status: `HTTP ${res.status}`, level: "warn", origin: "site" });
-		return res.ok;
+		return res.ok ? null : `HTTP ${res.status}`;
 	} catch (e) {
-		console.error("[redeemid] event not sent:", name, (e as Error).message);
-		await record({ event: "events.failed", label: name, status: "error", level: "error", origin: "site", note: String((e as Error).message).slice(0, 200) });
-		return false;
+		return String((e as Error).message || "error").slice(0, 200);
 	}
 }
 
+type Sleep = (ms: number) => Promise<void>;
+const sleep: Sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+/**
+ * Try a delivery up to three times (now, after 1 s, after 5 s). One that
+ * fails every try goes to the failed list (App events) for staff. True when
+ * the receiver took it.
+ */
+export async function deliver(
+	url: string,
+	secret: string,
+	name: EventName,
+	id: string,
+	body: string,
+	opts: { fetcher?: typeof fetch; wait?: Sleep; failed?: (f: FailedEvent) => Promise<void> } = {},
+): Promise<boolean> {
+	const fetcher = opts.fetcher ?? fetch;
+	let error: string | null = null;
+	let attempts = 0;
+	for (const delay of [0, ...RETRY_DELAYS_MS]) {
+		if (delay) await (opts.wait ?? sleep)(delay);
+		attempts++;
+		error = await post(url, name, id, body, secret, fetcher);
+		if (error === null) return true;
+	}
+	console.error("[redeemid] event not sent:", name, error);
+	const failed: FailedEvent = { id, event: name, body, at: new Date().toISOString(), attempts, error: error ?? "error" };
+	await record({ event: "events.failed", label: name, status: error ?? "error", level: "error", origin: "site", note: `${attempts} tries` });
+	await (opts.failed ?? keepFailed)(failed).catch(() => undefined);
+	return false;
+}
+
+async function keepFailed(f: FailedEvent): Promise<void> {
+	const { getDb } = await import("emdash/runtime");
+	const { stores } = await import("./storage.js");
+	await stores(await getDb()).failedEvents.put(f.id, f);
+}
+
+/** Deliveries started and not finished yet: tests and the CLI can wait for them. */
+const pending = new Set<Promise<boolean>>();
+
+/** Wait until every event started so far has been delivered or given up on. */
+export async function flushEvents(): Promise<void> {
+	while (pending.size) await Promise.allSettled([...pending]);
+}
+
+/** EmDash's after(), loaded once; null outside an EmDash site. */
+let afterFn: Promise<((fn: () => Promise<void>) => void) | null> | null = null;
+
+/** Keep the work alive after the response (waitUntil on Workers); plain Node needs nothing. Never waits. */
+function keepAlive(work: Promise<unknown>): void {
+	afterFn ??= import("emdash").then(
+		(m) => m.after,
+		() => null,
+	);
+	void afterFn.then((after) =>
+		after?.(async () => {
+			await work;
+		}),
+	);
+}
+
+/**
+ * Send one event, after the response: the page, sign-in or webhook never
+ * waits for the receiver. Returns at once; false when events are off.
+ */
+export async function emit(
+	config: RedeemIDConfig | null,
+	name: EventName,
+	data: Record<string, unknown>,
+	opts: { fetcher?: typeof fetch; wait?: Sleep; failed?: (f: FailedEvent) => Promise<void> } = {},
+): Promise<boolean> {
+	const url = config?.events?.url;
+	const secret = env(ENV.eventsSecret);
+	if (!url || !secret) return false;
+	if (config.events?.only && !config.events.only.includes(name)) return false;
+	const id = crypto.randomUUID();
+	const body = JSON.stringify({ id, event: name, at: new Date().toISOString(), data });
+	const work = deliver(url, secret, name, id, body, opts).catch(() => false);
+	pending.add(work);
+	void work.finally(() => pending.delete(work));
+	keepAlive(work);
+	return true;
+}
+
+/** Send a failed event again (staff). On success it leaves the failed list. */
+export async function resend(config: RedeemIDConfig, s: { failedEvents: { get(id: string): Promise<FailedEvent | null>; delete(id: string): Promise<boolean> } }, id: string, fetcher: typeof fetch = fetch): Promise<boolean> {
+	const f = await s.failedEvents.get(id);
+	const url = config.events?.url;
+	const secret = env(ENV.eventsSecret);
+	if (!f || !url || !secret) return false;
+	const error = await post(url, f.event, f.id, f.body, secret, fetcher);
+	await record({ event: "events.resent", label: f.event, status: error ?? "ok", level: error ? "warn" : "ok", origin: "staff" });
+	if (error) return false;
+	await s.failedEvents.delete(id);
+	return true;
+}
+
 /** Send member.levels_changed when a mirror write changed the member's levels. */
 export async function levelChange(
 	config: RedeemIDConfig | null,
 	beforeTags: string[] | null,
 	after: { customerId: string; tags: string[]; status: string },
 	source: string,
-	fetcher: typeof fetch = fetch,
+	fetcher?: typeof fetch,
 ): Promise<void> {
 	if (!config?.events?.url) return;
 	const { levelsFor } = await import("./access.js");
@@ -73,6 +179,6 @@ export async function levelChange(
 		config,
 		"member.levels_changed",
 		{ customerId: after.customerId, levels: now, added: now.filter((l) => !was.includes(l)), removed: was.filter((l) => !now.includes(l)), source },
-		fetcher,
+		fetcher ? { fetcher } : {},
 	);
 }

package/src/files.ts

@@ -115,16 +115,22 @@ export function ruleFor(config: RedeemIDConfig | null, folder: string | null): F
 
 /** Decide one download. `key` is the storage key from the file URL. */
 export async function fileAccess(astro: AstroLike, config: RedeemIDConfig | null, key: string): Promise<FileVerdict> {
-	if (!config?.files?.length) return { protected: false };
+	if (!config?.files?.length && !config?.unavailable) return { protected: false };
 	const locals = astro.locals as { user?: { role?: number } | null; emdash?: { db?: unknown } | null };
 	const db = locals.emdash?.db;
 	// No database to look the file up in: the caller fails closed.
 	if (!db) throw new Error("no database for the file check");
 	const media = await mediaByKey(db, key);
+	const role = locals.user?.role ?? 0;
+	// Saved settings can't be read: any file in a folder might be protected.
+	if (config.unavailable) {
+		if (!media?.folder) return { protected: false };
+		if (role > SUBSCRIBER) return { protected: true, allowed: true };
+		return { protected: true, allowed: false, reason: (await viewer(astro)).signedIn ? "denied" : "sign_in" };
+	}
 	const rule = ruleFor(config, media?.folder ?? null);
 	if (!media || !rule) return { protected: false };
 
-	const role = locals.user?.role ?? 0;
 	if (role > SUBSCRIBER) return { protected: true, allowed: true };
 	const v = await viewer(astro);
 	if (!v.signedIn) return { protected: true, allowed: false, reason: "sign_in" };

package/src/guard.ts

@@ -87,7 +87,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
 	const config = await siteConfig(locals);
 
 	// Protected files: checked for everyone, on every download.
-	const keys = config?.files?.length ? keysFromUrl(url) : null;
+	const keys = config?.files?.length || config?.unavailable ? keysFromUrl(url) : null;
 	if (keys) {
 		let verdict;
 		try {

package/src/index.ts

@@ -28,11 +28,16 @@
  * (the client secret of the Shopify app whose webhooks the site receives).
  */
 
+import { readdirSync, readFileSync, type Dirent } from "node:fs";
+import { join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+
 import type { AstroIntegration } from "astro";
 import type { AuthProviderDescriptor } from "emdash";
 
 import { PROVIDER_ID, type RedeemIDConfig } from "./config.js";
 import { STORAGE_CONFIG } from "./storage.js";
+import { scanTemplate, type TemplateFinding } from "./template-scan.js";
 
 export type { LevelConfig, RedeemIDConfig, RuleConfig } from "./config.js";
 export type { MemberRecord } from "./storage.js";
@@ -77,7 +82,11 @@ export function redeemidGuard(options: { rateLimit?: boolean } = {}): AstroInteg
 	return {
 		name: "@redeemid/emdash/guard",
 		hooks: {
-			"astro:config:setup": ({ addMiddleware }) => {
+			"astro:config:setup": ({ addMiddleware, updateConfig, config }) => {
+				// Finds templates that render a body with EmDash's <PortableText>
+				// instead of <Content>, for the Status page.
+				updateConfig({ vite: { plugins: [templateScan(config.root, config.srcDir)] } });
+				addMiddleware({ entrypoint: "@redeemid/emdash/templates.ts", order: "pre" });
 				// Cloudflare Workers only: limits Sign in, Buy and cart changes per
 				// visitor with the REDEEMID_RATE_LIMIT Rate Limiting binding.
 				if (options.rateLimit) addMiddleware({ entrypoint: "@redeemid/emdash/rate-limit-cloudflare.ts", order: "pre" });
@@ -87,4 +96,41 @@ export function redeemidGuard(options: { rateLimit?: boolean } = {}): AstroInteg
 	};
 }
 
+const TEMPLATES_MARK = "const FINDINGS: TemplateFinding[] | null = null; // redeemid:templates";
+
+/** Vite plugin: fills templates.ts with the scan of the site's .astro files. */
+function templateScan(root: URL, srcDir: URL) {
+	return {
+		name: "redeemid:templates",
+		// Before TypeScript is stripped, so the marker line is still there.
+		enforce: "pre" as const,
+		transform(code: string, id: string) {
+			if (!id.split("?")[0]!.endsWith("/templates.ts") || !code.includes(TEMPLATES_MARK)) return undefined;
+			const base = fileURLToPath(root);
+			const out: TemplateFinding[] = [];
+			// Static node: imports only: astro.config's module runner is closed by
+			// the time this runs, so a dynamic import() here fails.
+			const walk = (dir: string): void => {
+				let items: Dirent[] = [];
+				try {
+					items = readdirSync(dir, { withFileTypes: true });
+				} catch {
+					return;
+				}
+				for (const d of items) {
+					const path = join(dir, d.name);
+					if (d.isDirectory() && d.name !== "node_modules") walk(path);
+					else if (d.isFile() && d.name.endsWith(".astro")) {
+						const found = scanTemplate(relative(base, path).split("\\").join("/"), readFileSync(path, "utf8"));
+						if (found) out.push(found);
+					}
+				}
+			};
+			walk(fileURLToPath(srcDir));
+			out.sort((a, b) => a.file.localeCompare(b.file));
+			return { code: code.replace(TEMPLATES_MARK, `const FINDINGS = ${JSON.stringify(out)};`), map: null };
+		},
+	};
+}
+
 export default redeemid;

package/src/log.ts

@@ -45,6 +45,7 @@ export const LOG_EVENTS: Record<string, string> = {
 	"staff.webhooks": "Webhook registration",
 	"settings.saved": "Settings saved",
 	"events.failed": "Outbound event failed",
+	"events.resent": "Outbound event sent again",
 	"health.check": "Health check",
 	"meter.used": "Metered read",
 	"meter.exhausted": "Metered read, meter used up",
@@ -88,13 +89,15 @@ export async function timed<T>(event: string, label: string, run: () => Promise<
 	}
 }
 
+type Where<T> = NonNullable<NonNullable<Parameters<StorageCollection<T>["query"]>[0]>["where"]>;
+
 /** Delete entries (and other dated records) older than `days`, a page at a time. */
-export async function prune<T>(store: StorageCollection<T>, field: string, days = LOG_DAYS): Promise<number> {
+export async function prune<T>(store: StorageCollection<T>, field: string, days = LOG_DAYS, where: Record<string, string | number | boolean> = {}): Promise<number> {
 	const before = new Date(Date.now() - days * 86_400_000).toISOString();
 	let gone = 0;
 	// A few pages a run: enough to keep up with a busy site, few enough queries for one request.
 	for (let page = 0; page < PRUNE_PAGES; page++) {
-		const { items } = await store.query({ where: { [field]: { lt: before } }, limit: 100 });
+		const { items } = await store.query({ where: { ...where, [field]: { lt: before } } as Where<T>, limit: 100 });
 		if (items.length === 0) break;
 		gone += await store.deleteMany(items.map((i) => i.id));
 		if (items.length < 100) break;

package/src/monitor.ts

@@ -16,6 +16,7 @@ import { levelsFor, membership } from "./access.js";
 import { adminConfigured, registerWebhooks } from "./admin-api.js";
 import { env, ENV, type RedeemIDConfig } from "./config.js";
 import { LOG_DAYS, LOG_EVENTS, prune, record, type LogEntry } from "./log.js";
+import { RETRY_DELAYS_MS, type FailedEvent } from "./events.js";
 import type { DeliveryRecord, MemberRecord, Stores } from "./storage.js";
 import { webhooksSection } from "./staff.js";
 
@@ -181,10 +182,15 @@ async function alert(env_: MonitorEnv, settings: MonitorSettings, result: Health
 	}
 }
 
-/** Drop app events and delivery records older than LOG_DAYS, a page of each. */
+/** Finished privacy requests are kept this long, as the record that they were answered. Open ones stay until staff close them. */
+export const REQUEST_DAYS = 365;
+
+/** Drop app events and delivery records older than LOG_DAYS, and finished privacy requests older than REQUEST_DAYS. */
 export async function tidy(s: Stores): Promise<void> {
 	await prune(s.log, "at").catch(() => 0);
 	await prune(s.deliveries, "receivedAt").catch(() => 0);
+	await prune(s.failedEvents, "at").catch(() => 0);
+	await prune(s.requests, "at", REQUEST_DAYS, { status: "done" }).catch(() => 0);
 }
 
 /** WEBHOOK_TOPICS name → the topic Shopify shows: CUSTOMER_TAGS_ADDED → customer.tags_added. */
@@ -379,6 +385,7 @@ export async function eventsPage(s: Stores, filter: EventFilter = {}, cursor?: s
 	if (filter.event && filter.event in LOG_EVENTS) where.event = filter.event;
 	if (filter.problems) where.level = { in: ["warn", "error"] };
 	const page = await s.log.query({ where: where as never, orderBy: { at: "desc" }, limit: 50, ...(cursor ? { cursor } : {}) });
+	const failed = cursor ? null : await s.failedEvents.query({ orderBy: { at: "desc" }, limit: 50 }).catch(() => null);
 	return {
 		blocks: [
 			{ type: "header", text: "App events" },
@@ -386,6 +393,7 @@ export async function eventsPage(s: Stores, filter: EventFilter = {}, cursor?: s
 				type: "context",
 				text: `What RedeemID did and what came of it: webhooks, sign-ins, calls to Shopify, staff actions, settings saves and outbound events. Kept ${LOG_DAYS} days. Never bodies, tokens or emails.`,
 			},
+			...(failed?.items.length ? failedBlocks(failed.items.map((r) => r.data)) : []),
 			{
 				type: "form",
 				block_id: "events_filter",
@@ -424,6 +432,60 @@ export async function eventsPage(s: Stores, filter: EventFilter = {}, cursor?: s
 	};
 }
 
+/** Outbound events that failed every try: send again or clear. */
+function failedBlocks(list: FailedEvent[]): unknown[] {
+	return [
+		{ type: "header", text: "Failed events" },
+		{
+			type: "context",
+			text: `Outbound events your receiver didn't take after ${RETRY_DELAYS_MS.length + 1} tries. Send again keeps each one's delivery id, so a receiver that got it after all can drop the copy. Cleared after ${LOG_DAYS} days.`,
+		},
+		{
+			type: "table",
+			page_action_id: "failed_page",
+			columns: [
+				{ key: "event", label: "Event" },
+				{ key: "customer", label: "Customer" },
+				{ key: "error", label: "Last error" },
+				{ key: "tries", label: "Tries" },
+				{ key: "at", label: "When", format: "relative_time" },
+				{ key: "resend", label: "", format: "element" },
+				{ key: "clear", label: "", format: "element" },
+			],
+			rows: list.map((f) => ({
+				event: f.event,
+				customer: customerOfBody(f.body),
+				error: f.error,
+				tries: String(f.attempts),
+				at: f.at,
+				resend: { type: "button", action_id: "failed_resend", label: "Send again", style: "primary", value: f.id },
+				clear: { type: "button", action_id: "failed_clear", label: "Clear", style: "secondary", value: f.id },
+			})),
+		},
+		{
+			type: "actions",
+			elements: [
+				{
+					type: "button",
+					action_id: "failed_clear_all",
+					label: "Clear all",
+					style: "danger",
+					confirm: { title: "Clear every failed event?", text: "They won't be sent. App events keeps the record that they failed.", confirm: "Clear all", deny: "Cancel", style: "danger" },
+				},
+			],
+		},
+	];
+}
+
+function customerOfBody(body: string): string {
+	try {
+		const id = (JSON.parse(body) as { data?: { customerId?: unknown } }).data?.customerId;
+		return typeof id === "string" ? id : "";
+	} catch {
+		return "";
+	}
+}
+
 function eventRow(e: LogEntry) {
 	const status = e.status === "ok" ? "OK" : cap(e.status);
 	return {