Frontend /preview/<token> route renders CMS draft snapshots

Fetches the snapshot no-store and renders it through the same
StreamRenderer and (static) layout chrome as live pages, so the editor
previews exactly what publishing will produce. Draft banner + noindex;
expired or malformed tokens get a friendly reopen-from-the-editor
message.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: nofurtherinformation

app/src/app/(static)/preview/[token]/page.tsx

@@ -0,0 +1,40 @@
+import StreamRenderer from '@/app/components/RichTextRenderer/StreamRenderer';
+import {getCMSPreview} from '@/app/utils/api/cmsContent';
+import {Box, Flex, Heading, Text} from '@radix-ui/themes';
+
+// Renders a draft snapshot minted by the Wagtail editor's Preview button.
+// Same layout chrome and StreamRenderer as the live pages, so what the
+// editor sees is what publishing will produce.
+export const dynamic = 'force-dynamic';
+
+export const metadata = {
+  title: 'Draft preview',
+  robots: {index: false, follow: false},
+};
+
+export default async function Page({params}: {params: Promise<{token: string}>}) {
+  const {token} = await params;
+  const cmsData = await getCMSPreview(token);
+
+  if (!cmsData?.content) {
+    return (
+      <Flex width="100%" justify="center" py="9">
+        <Text>This preview has expired — reopen it from the editor.</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" width="100%" py="6">
+      <Box className="bg-amber-100 border border-amber-300 rounded-md p-2 text-center mb-4">
+        <Text size="2" weight="bold">
+          Draft preview — this version is not published
+        </Text>
+      </Box>
+      <Heading as="h1" size="6" mb="4">
+        {cmsData.content.title}
+      </Heading>
+      <StreamRenderer body={cmsData.content.body} className="my-4" />
+    </Flex>
+  );
+}

app/src/app/utils/api/cmsContent.ts

@@ -148,6 +148,18 @@ export const getCMSContent = <T extends CmsContentTypes>(
     `/api/content/${type}/slug/${slug}?language=${language}`
   );
 
+/**
+ * Fetch a draft snapshot minted by the Wagtail editor's "Preview on site"
+ * button. Tokens are single-purpose uuids with a short server-side TTL;
+ * no-store keeps drafts out of every cache.
+ */
+export const getCMSPreview = (token: string): Promise<CMSContentResponseWithLanguages | null> =>
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(token)
+    ? cmsFetch<CMSContentResponseWithLanguages>(`/api/content/preview/${token}`, {
+        cache: 'no-store',
+      })
+    : Promise.resolve(null);
+
 export const listCMSContent = async (
   type: CmsContentTypes,
   params: {language?: string} = {}