@redeemid/emdash 0.0.8 → 0.0.10

package/src/features.ts

@@ -0,0 +1,39 @@
+/**
+ * Features: named perks a member holds through their levels or their
+ * Shopify tags (an ad-free site, a supporter thank-you, early access).
+ * Like levels they come only from the mirrored tags; nothing here grants
+ * them otherwise.
+ *
+ *   features: [
+ *     { slug: "ad-free", name: "Ad-free", levels: ["gold", "premium"] },
+ *     { slug: "supporter", name: "Supporter", tags: ["supporter"] },
+ *   ]
+ */
+
+import { levelsFor, viewer, type AstroLike } from "./access.js";
+import type { FeatureConfig, LevelConfig } from "./config.js";
+import { siteConfig } from "./site-config.js";
+import type { MemberRecord } from "./storage.js";
+
+/** The feature slugs a member holds: from any of the feature's levels or tags. */
+export function featuresFor(member: Pick<MemberRecord, "tags" | "status"> | null, features: FeatureConfig[] = [], levels: LevelConfig[] = []): string[] {
+	if (!member || member.status === "disabled") return [];
+	const held = levelsFor(member.tags, levels);
+	const tags = new Set(member.tags.map((t) => t.toLowerCase()));
+	return features
+		.filter((f) => (f.levels ?? []).some((l) => held.includes(l)) || (f.tags ?? []).some((t) => tags.has(t.toLowerCase())))
+		.map((f) => f.slug);
+}
+
+/** Does the visitor hold this feature? */
+export async function hasFeature(astro: AstroLike, slug: string): Promise<boolean> {
+	return (await viewerFeatures(astro)).includes(slug);
+}
+
+/** The visitor's features. */
+export async function viewerFeatures(astro: AstroLike): Promise<string[]> {
+	const config = siteConfig((astro.locals as { emdash?: { config?: unknown } }).emdash?.config);
+	if (!config?.features?.length) return [];
+	const v = await viewer(astro);
+	return featuresFor(v.member, config.features, config.levels);
+}

package/src/files.ts

@@ -0,0 +1,191 @@
+/**
+ * Protected files: uploads in a media folder named in `files` are served only
+ * to readers the folder's rule lets in, checked on every download. EmDash
+ * serves uploads at /_emdash/api/media/file/<storage key>; the guard
+ * middleware calls fileAccess() before EmDash answers, refuses readers
+ * without access, and marks allowed downloads private so no cache keeps them.
+ *
+ *   files: [
+ *     { folder: "Gold downloads", levels: ["gold"] },
+ *     { folder: "Member downloads", levels: [] },            // any signed-in member
+ *     { folder: "Supporter extras", features: ["supporter"] },
+ *     { folder: "Story files", entries: true },              // whoever can read an entry using it
+ *   ]
+ *
+ * Staff (any EmDash role above Subscriber) can always download. Folder names
+ * match case-insensitively. Access still comes only from Shopify tags.
+ */
+
+import { readEntry, viewer, type AstroLike, type Terms } from "./access.js";
+import { PAYWALL_BLOCK, sections, splitAtPaywall } from "./blocks-names.js";
+import type { FileRule, RedeemIDConfig } from "./config.js";
+import { featuresFor } from "./features.js";
+import { text } from "./text.js";
+
+export const FILE_PATH = "/_emdash/api/media/file/";
+const SUBSCRIBER = 10;
+
+export type FileVerdict = { protected: false } | { protected: true; allowed: true } | { protected: true; allowed: false; reason: "sign_in" | "denied" };
+
+interface MediaRow {
+	id: string;
+	folder: string | null;
+}
+
+/** The media item behind a storage key, with its folder's name. */
+async function mediaByKey(db: unknown, key: string): Promise<MediaRow | null> {
+	// Kysely, typed loosely: EmDash's schema types aren't exported.
+	const k = db as {
+		selectFrom(t: string): {
+			leftJoin(t: string, a: string, b: string): { select(c: string[]): { where(c: string, op: string, v: string): { executeTakeFirst(): Promise<Record<string, unknown> | undefined> } } };
+		};
+	};
+	const row = await k
+		.selectFrom("media")
+		.leftJoin("media_folders", "media_folders.id", "media.folder_id")
+		.select(["media.id as id", "media_folders.name as folder"])
+		.where("media.storage_key", "=", key)
+		.executeTakeFirst();
+	return row ? { id: String(row.id), folder: (row.folder as string | null) ?? null } : null;
+}
+
+/** Published entries that use the media item: collection and id. */
+async function entriesUsing(db: unknown, mediaId: string): Promise<Array<{ collection: string; id: string }>> {
+	const k = db as {
+		selectFrom(t: string): {
+			innerJoin(t: string, cb: (j: { onRef(a: string, op: string, b: string): { onRef(a: string, op: string, b: string): unknown } }) => unknown): {
+				select(c: string[]): {
+					where(c: string, op: string, v: unknown): {
+						where(c: string, op: string, v: unknown): { where(c: string, op: string, v: unknown): { limit(n: number): { execute(): Promise<Array<Record<string, unknown>>> } } };
+					};
+				};
+			};
+		};
+	};
+	const rows = await k
+		.selectFrom("_emdash_media_usage_sources as s")
+		.innerJoin("_emdash_media_usage as u", (j) => j.onRef("u.source_key", "=", "s.source_key").onRef("u.generation", "=", "s.current_generation"))
+		.select(["s.collection_slug as collection", "s.content_id as id"])
+		.where("u.media_id", "=", mediaId)
+		.where("s.content_status", "=", "published")
+		.where("s.content_deleted_at", "is", null)
+		.limit(50)
+		.execute();
+	const seen = new Set<string>();
+	return rows
+		.filter((r) => typeof r.collection === "string" && typeof r.id === "string")
+		.map((r) => ({ collection: r.collection as string, id: r.id as string }))
+		.filter((e) => !seen.has(`${e.collection}:${e.id}`) && Boolean(seen.add(`${e.collection}:${e.id}`)));
+}
+
+/** The levels picked on an entry body's breaks and members-only parts: readers must hold one from each. */
+function bodyClauses(body: unknown): string[][] {
+	const blocks = Array.isArray(body) ? body : [];
+	const out: string[][] = [];
+	const split = splitAtPaywall(blocks);
+	if (split.paywall && split.levels.length) out.push(split.levels);
+	for (const s of sections(blocks)) if (s.members && s.levels.length) out.push(s.levels);
+	return out;
+}
+
+/** May this reader read the whole entry: its rule, drip, and every part with levels picked? */
+async function readsWhole(astro: AstroLike, entry: { collection: string; id: string }): Promise<boolean> {
+	const { getEmDashEntry } = await import("emdash");
+	const result = (await getEmDashEntry(entry.collection, entry.id)) as { entry?: { data?: Record<string, unknown> } | null } | null;
+	const data = result?.entry?.data;
+	if (!data) return false;
+	const terms = data.terms as Terms | undefined;
+	const verdict = await readEntry(astro, { collection: entry.collection, terms });
+	if (!verdict.allowed) return false;
+	const body = Object.values(data).find((v) => Array.isArray(v) && v.some((b) => (b as { _type?: string })?._type === PAYWALL_BLOCK || (b as { _type?: string })?._type === "redeemid-members"));
+	const clauses = bodyClauses(body);
+	return clauses.every((clause) => clause.some((l) => verdict.viewer.levels.includes(l) || (l === "signed-in" && verdict.viewer.signedIn)));
+}
+
+export function ruleFor(config: RedeemIDConfig | null, folder: string | null): FileRule | null {
+	if (!folder || !config?.files?.length) return null;
+	const name = folder.trim().toLowerCase();
+	return config.files.find((r) => r.folder.trim().toLowerCase() === name) ?? null;
+}
+
+/** 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 };
+	const locals = astro.locals as { user?: { role?: number } | null; emdash?: { db?: unknown } | null };
+	const db = locals.emdash?.db;
+	if (!db) return { protected: false };
+	const media = await mediaByKey(db, key);
+	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" };
+	const m = v.member;
+	if (!m || m.status === "disabled") return { protected: true, allowed: false, reason: "denied" };
+
+	if (rule.levels && (rule.levels.length === 0 ? true : rule.levels.some((l) => v.levels.includes(l) || l === "signed-in"))) {
+		return { protected: true, allowed: true };
+	}
+	if (rule.features?.length && featuresFor(m, config.features, config.levels).some((f) => rule.features?.includes(f))) {
+		return { protected: true, allowed: true };
+	}
+	if (rule.entries) {
+		for (const e of await entriesUsing(db, media.id)) {
+			if (await readsWhole(astro, e)) return { protected: true, allowed: true };
+		}
+	}
+	return { protected: true, allowed: false, reason: "denied" };
+}
+
+/**
+ * Every storage key a file URL path could name: the key after each layer of
+ * percent-decoding, because storage backends differ in whether they decode
+ * keys. The guard checks all of them, so an encoded key can't slip past.
+ */
+export function keysFromPath(pathname: string): string[] | null {
+	if (!pathname.startsWith(FILE_PATH)) return null;
+	let candidate = pathname.slice(FILE_PATH.length);
+	if (!candidate) return null;
+	const out: string[] = [];
+	for (let layer = 0; layer < 4; layer++) {
+		let decoded: string;
+		try {
+			decoded = decodeURIComponent(candidate);
+		} catch {
+			break;
+		}
+		out.push(decoded);
+		if (decoded === candidate) break;
+		candidate = decoded;
+	}
+	return [...new Set(out)];
+}
+
+/** Decide a download that may name several keys: the first protected one decides. */
+export async function pathAccess(astro: AstroLike, config: RedeemIDConfig | null, keys: string[]): Promise<FileVerdict> {
+	for (const key of keys) {
+		const v = await fileAccess(astro, config, key);
+		if (v.protected) return v;
+	}
+	return { protected: false };
+}
+
+function escapeHtml(s: string): string {
+	return s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+
+/** The page a refused download gets. */
+export function refusal(reason: "sign_in" | "denied", signIn: string, config: RedeemIDConfig | null = null): Response {
+	const status = reason === "sign_in" ? 401 : 403;
+	const t = (s: string) => escapeHtml(text(config, s));
+	const body =
+		reason === "sign_in"
+			? `<p>${t("Sign in to download this file.")}</p><p><a href="${escapeHtml(signIn)}">${t("Sign in")}</a></p>`
+			: `<p>${t("Your membership doesn't include this file.")}</p>`;
+	return new Response(`<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="robots" content="noindex"><title>${t("File not available")}</title></head><body><main>${body}</main></body></html>`, {
+		status,
+		headers: { "content-type": "text/html; charset=utf-8", "cache-control": "private, no-store", "x-robots-tag": "noindex" },
+	});
+}

package/src/guard.ts

@@ -10,6 +10,8 @@
 
 import { defineMiddleware } from "astro:middleware";
 
+import { signInUrl } from "./access.js";
+import { keysFromPath, pathAccess, refusal } from "./files.js";
 import { siteConfig } from "./site-config.js";
 
 const SUBSCRIBER = 10;
@@ -28,11 +30,50 @@ export function memberMayUse(path: string, extra: string[] = []): boolean {
 	return [...MEMBER_PATHS, ...extra].some((p) => path === p.replace(/\/$/, "") || path.startsWith(p));
 }
 
-export const onRequest = defineMiddleware(async ({ locals, url }, next) => {
+/**
+ * EmDash skips the session on its public file route, so resolve the signed-in
+ * user here: the access check needs it.
+ */
+async function withUser(context: { locals: unknown; session?: { get(k: string): Promise<unknown> } }) {
+	const locals = context.locals as { user?: { id: string; role?: number } | null; emdash?: { db?: unknown } | null };
+	if (locals.user || !locals.emdash?.db) return context;
+	const sessionUser = (await context.session?.get("user")) as { id?: string } | undefined;
+	if (!sessionUser?.id) return context;
+	const { createKyselyAdapter } = await import("@emdash-cms/auth/adapters/kysely");
+	const user = await createKyselyAdapter(locals.emdash.db as never).getUserById(sessionUser.id);
+	if (!user || user.disabled) return context;
+	return { ...context, locals: { ...locals, user: { id: user.id, role: user.role, disabled: user.disabled } } };
+}
+
+export const onRequest = defineMiddleware(async (context, next) => {
+	const { locals, url } = context;
 	const user = (locals as { user?: { role?: number } | null }).user;
+	const config = siteConfig((locals as { emdash?: { config?: unknown } }).emdash?.config);
+
+	// Protected files: checked for everyone, on every download.
+	const keys = config?.files?.length ? keysFromPath(url.pathname) : null;
+	if (keys) {
+		let verdict;
+		try {
+			verdict = await pathAccess(await withUser(context), config, keys);
+		} catch (e) {
+			// Fail closed: a file we can't check isn't served.
+			console.error("[redeemid] file check failed:", (e as Error).message);
+			return refusal("denied", signInUrl(url.pathname), config);
+		}
+		if (verdict.protected) {
+			if (!verdict.allowed) return refusal(verdict.reason, signInUrl(url.pathname), config);
+			const res = await next();
+			const out = new Response(res.body, res);
+			out.headers.set("cache-control", "private, no-store");
+			out.headers.set("vary", "Cookie");
+			out.headers.set("x-robots-tag", "noindex");
+			return out;
+		}
+	}
+
 	if (!user || user.role !== SUBSCRIBER) return next();
 
-	const config = siteConfig((locals as { emdash?: { config?: unknown } }).emdash?.config);
 	if (memberMayUse(url.pathname, config?.memberPaths)) return next();
 
 	if (url.pathname.startsWith("/_emdash/admin")) {

package/src/index.ts

@@ -58,6 +58,7 @@ export function redeemid(config: RedeemIDConfig): AuthProviderDescriptor {
 			{ pattern: `${BASE}/cart`, entrypoint: "@redeemid/emdash/routes/cart.ts" },
 			{ pattern: `${BASE}/cart-edit`, entrypoint: "@redeemid/emdash/routes/cart-edit.ts" },
 			{ pattern: `${BASE}/account`, entrypoint: "@redeemid/emdash/routes/account.ts" },
+			{ pattern: `${BASE}/preferences`, entrypoint: "@redeemid/emdash/routes/preferences.ts" },
 		],
 		publicRoutes: [`${BASE}/`],
 		storage: STORAGE_CONFIG,

package/src/plugin.ts

@@ -33,6 +33,9 @@ import { discover } from "./shopify.js";
 import { stores, type MemberRecord } from "./storage.js";
 import { PAGES, WIDGETS } from "./descriptor.js";
 import { VERSION } from "./version.js";
+import { adminConfigured } from "./admin-api.js";
+import { accessTest, bulkResync, BULK_BATCH, deliveriesSection, memberDetail, registerWebhooks, resyncOne, tagEdit, webhooksSection } from "./staff.js";
+import { textProblems } from "./text.js";
 
 import {
 	COLLECTION_BLOCK,
@@ -41,10 +44,11 @@ import {
 	MEMBERS_END_BLOCK,
 	PAYWALL_BLOCK,
 	PLAN_BLOCK,
+	PREFERENCES_BLOCK,
 	PRODUCT_BLOCK,
 } from "./blocks-names.js";
 
-export { COLLECTION_BLOCK, CONTRIBUTION_BLOCK, MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK, PRODUCT_BLOCK };
+export { COLLECTION_BLOCK, CONTRIBUTION_BLOCK, MEMBERS_BLOCK, MEMBERS_END_BLOCK, PAYWALL_BLOCK, PLAN_BLOCK, PREFERENCES_BLOCK, PRODUCT_BLOCK };
 
 function blocks(config: RedeemIDConfig) {
 	const levelOptions = [
@@ -138,6 +142,17 @@ function blocks(config: RedeemIDConfig) {
 				{ type: "text_input" as const, action_id: "label", label: "Button label", placeholder: "Give" },
 			],
 		},
+		{
+			type: PREFERENCES_BLOCK,
+			label: "Preferences",
+			icon: "users",
+			description: "The signed-in member's preferences, saved on their Shopify customer",
+			placeholder: "Member preferences",
+			fields: [
+				{ type: "text_input" as const, action_id: "title", label: "Title", placeholder: "Your preferences" },
+				{ type: "text_input" as const, action_id: "label", label: "Button label", placeholder: "Save preferences" },
+			],
+		},
 	];
 }
 
@@ -154,11 +169,13 @@ export function createPlugin(config: RedeemIDConfig = {}): ResolvedPlugin {
 		routes: {
 			admin: {
 				handler: async (ctx: RouteContext) => {
-					const i = (ctx.input ?? {}) as { type?: string; page?: string };
-					if (i.type !== "page_load") return { blocks: [] };
+					const i = (ctx.input ?? {}) as { type?: string; page?: string; action_id?: string; value?: unknown; values?: Record<string, unknown>; block_id?: string };
 					try {
+						if (i.type === "block_action" || i.type === "form_submit") return await action(config, ctx.request, i);
+						if (i.type !== "page_load") return { blocks: [] };
 						if (i.page === "/") return await membersPage(config);
 						if (i.page === "/status") return await statusPage(config, ctx.request);
+						if (i.page === "/test") return await accessTest(config);
 						if (i.page === "widget:status") return await statusWidget(config);
 					} catch (e) {
 						return { blocks: [{ type: "banner", variant: "error", title: "RedeemID couldn't load this page", description: (e as Error).message }] };
@@ -172,6 +189,75 @@ export function createPlugin(config: RedeemIDConfig = {}): ResolvedPlugin {
 
 export default createPlugin;
 
+// ---------------------------------------------------------------- actions
+
+const webhookUri = (request: Request) => `${new URL(request.url).origin}/_emdash/api/auth/redeemid/webhook`;
+
+async function action(
+	config: RedeemIDConfig,
+	request: Request,
+	i: { action_id?: string; value?: unknown; values?: Record<string, unknown>; block_id?: string },
+) {
+	const s = await memberStores();
+	const fail = (e: unknown) => ({ type: "error" as const, message: (e as Error).message });
+	switch (i.action_id) {
+		case "members_back":
+			return membersPage(config);
+		case "member_open": {
+			const m = await s.members.get(String(i.value ?? ""));
+			return m ? memberDetail(config, m) : { ...(await membersPage(config)), toast: { type: "error", message: "That member is gone." } };
+		}
+		case "member_resync": {
+			const id = String(i.value ?? "");
+			try {
+				const m = await resyncOne(config, s, id, "staff resync");
+				const now = m ?? (await s.members.get(id));
+				if (!now) return membersPage(config);
+				return memberDetail(config, now, m ? { type: "success", message: "Read again from Shopify." } : { type: "error", message: "Shopify no longer has this customer." });
+			} catch (e) {
+				const m = await s.members.get(id);
+				return m ? memberDetail(config, m, fail(e)) : membersPage(config);
+			}
+		}
+		case "member_tag_add":
+		case "member_tag_remove": {
+			const add = i.action_id === "member_tag_add";
+			const v = (i.value ?? {}) as { customerId?: string; tag?: string };
+			const id = add ? String(i.block_id ?? "").replace(/^tags:/, "") : String(v.customerId ?? "");
+			try {
+				const m = await tagEdit(config, s, id, add ? "add" : "remove", add ? i.values?.tags : [v.tag]);
+				const now = m ?? (await s.members.get(id));
+				return now ? memberDetail(config, now, { type: "success", message: add ? "Tags added in Shopify." : "Tag removed in Shopify." }) : membersPage(config);
+			} catch (e) {
+				const m = await s.members.get(id);
+				return m ? memberDetail(config, m, fail(e)) : membersPage(config);
+			}
+		}
+		case "members_resync": {
+			try {
+				const r = await bulkResync(config, s);
+				return {
+					...(await membersPage(config)),
+					toast: { type: "success", message: `Read ${r.done} members again (${r.changed} changed${r.missing ? `, ${r.missing} no longer in Shopify` : ""}).` },
+				};
+			} catch (e) {
+				return { ...(await membersPage(config)), toast: fail(e) };
+			}
+		}
+		case "webhooks_register": {
+			try {
+				const added = await registerWebhooks(config, webhookUri(request));
+				return { ...(await statusPage(config, request)), toast: { type: "success", message: added.length ? `Registered ${added.length} webhooks.` : "Nothing was missing." } };
+			} catch (e) {
+				return { ...(await statusPage(config, request)), toast: fail(e) };
+			}
+		}
+		case "access_test":
+			return accessTest(config, i.values);
+	}
+	return { blocks: [] };
+}
+
 // ---------------------------------------------------------------- pages
 
 async function memberStores() {
@@ -210,6 +296,25 @@ async function membersPage(config: RedeemIDConfig) {
 				type: "context",
 				text: "Shopify customers who have signed in or that Shopify has sent. Levels come only from their Shopify tags; change tags in Shopify (or with Flow) and access follows.",
 			},
+			adminConfigured()
+				? {
+						type: "actions",
+						elements: [
+							{
+								type: "button",
+								action_id: "members_resync",
+								label: `Resync ${BULK_BATCH} from Shopify`,
+								style: "secondary",
+								confirm: {
+									title: "Read members again from Shopify?",
+									text: `Reads the ${BULK_BATCH} members synced longest ago from Shopify and updates their tags. Click again for the next ${BULK_BATCH}.`,
+									confirm: "Resync",
+									deny: "Cancel",
+								},
+							},
+						],
+					}
+				: { type: "context", text: "Set the Admin API app's client ID (REDEEMID_SHOPIFY_ADMIN_APP_CLIENT_ID) to resync members and edit their tags from here." },
 			{
 				type: "stats",
 				items: [
@@ -230,6 +335,7 @@ async function membersPage(config: RedeemIDConfig) {
 							{ key: "tags", label: "Shopify tags" },
 							{ key: "status", label: "Account" },
 							{ key: "synced", label: "Last synced", format: "relative_time" },
+							{ key: "open", label: "", format: "element" },
 						],
 						rows: members
 							.sort((a, b) => b.syncedAt.localeCompare(a.syncedAt))
@@ -240,6 +346,7 @@ async function membersPage(config: RedeemIDConfig) {
 								tags: m.tags.join(", ") || "—",
 								status: m.status === "enabled" ? "On" : "Off",
 								synced: m.syncedAt,
+								open: { type: "button", action_id: "member_open", label: "Open", value: m.customerId },
 							})),
 					},
 		],
@@ -270,6 +377,13 @@ async function lastDelivery(): Promise<string | null> {
 	return d ? `${d.topic} at ${d.receivedAt}` : null;
 }
 
+function textSummary(config: RedeemIDConfig): string {
+	const all = Object.keys(config.text ?? {}).length;
+	const ignored = textProblems(config).length;
+	if (!all) return "None";
+	return ignored ? `${all - ignored} in use, ${ignored} ignored` : `${all} in use`;
+}
+
 async function statusPage(config: RedeemIDConfig, request: Request) {
 	const c = await checks(config);
 	const origin = new URL(request.url).origin;
@@ -277,6 +391,10 @@ async function statusPage(config: RedeemIDConfig, request: Request) {
 	const levels = config.levels ?? [];
 	const rules = config.rules ?? [];
 	const delivery = await lastDelivery().catch(() => null);
+	const webhooks = await webhooksSection(config, webhookUri(request));
+	const deliveries = await memberStores()
+		.then((s) => deliveriesSection(s))
+		.catch(() => [{ type: "context", text: "Couldn't read deliveries." }]);
 	return {
 		blocks: [
 			{ type: "header", text: "Status" },
@@ -290,10 +408,31 @@ async function statusPage(config: RedeemIDConfig, request: Request) {
 					{ label: "Store discovery", value: c.discovery },
 					{ label: "Customer Account API client ID", value: yes(c.clientId) },
 					{ label: "Webhook signing secret", value: yes(c.webhookSecret) },
+					{ label: "Admin API app client ID (staff tools)", value: yes(Boolean(env(ENV.adminClientId))) },
+					{ label: "Events", value: config.events?.url ? `${config.events.url}${env(ENV.eventsSecret) ? "" : " (REDEEMID_EVENTS_SECRET missing)"}` : "Off" },
 					{ label: "Storefront API access", value: c.storefront },
 					{ label: "Last webhook", value: delivery ?? "None received yet" },
+					{ label: "Replacement text", value: textSummary(config) },
 				],
 			},
+			...(textProblems(config).length
+				? [
+						{
+							type: "table",
+							page_action_id: "text_problems",
+							columns: [
+								{ key: "original", label: "Ignored replacement for" },
+								{ key: "problem", label: "Why" },
+							],
+							rows: textProblems(config),
+						},
+					]
+				: []),
+			{ type: "divider" },
+			{ type: "header", text: "Webhooks" },
+			...webhooks,
+			{ type: "header", text: "Recent deliveries" },
+			...deliveries,
 			{ type: "divider" },
 			{ type: "header", text: "Shopify settings" },
 			{