create-ailk 0.1.0

package/templates/apps/web/app/[locale]/events/__tests__/page-renderer-migration.test.tsx

@@ -0,0 +1,130 @@
+/**
+ * HTML snapshot regression tests for the events routes →
+ * @working-theory/page-renderer renderPage({ bodyMode: "mdx-body" }) migration.
+ *
+ * Two-commit strategy:
+ *   Commit 1: snapshots captured against pre-migration routes (baseline).
+ *   Commit 2: routes migrated; same snapshots verify diff=0.
+ *
+ * Routes covered:
+ *   - events/page.tsx     (empty + populated — 2 snapshots)
+ *   - events/[slug]/page.tsx  (populated + notFound — 2 snapshots)
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── next-mdx-remote/rsc mock ──────────────────────────────────────────────────
+jest.mock("next-mdx-remote/rsc", () => ({
+  MDXRemote: ({ source }: { source: string }): React.ReactElement =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+// ── next/navigation mock ──────────────────────────────────────────────────────
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+// ── @working-theory/ui mock ─────────────────────────────────────────────────────────────
+jest.mock("@working-theory/ui", () => ({
+  SectionRenderer: ({ sections }: { sections: unknown[] }) =>
+    React.createElement("div", {
+      "data-testid": "section-renderer",
+      "data-section-count": String(sections.length),
+    }),
+}));
+
+import EventsPage from "../page";
+import EventSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+// ── EventsPage ─────────────────────────────────────────────────────────────────
+
+describe("EventsPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await EventsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Events</h1><p data-testid="section-empty-state">Events listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "EventsList",
+        slug: "events",
+        title: "Events",
+        description: "Upcoming and past events.",
+      },
+      body: "# Events\n\nBody.",
+    });
+
+    const element = await EventsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Events","description":"Upcoming and past events.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Event"}]}}</script><main><h1>Events</h1><p data-testid="events-description">Upcoming and past events.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered"># Events
+
+     Body.</div></article></div></div></main>"
+    `);
+  });
+});
+
+// ── EventSlugPage ──────────────────────────────────────────────────────────────
+
+describe("EventSlugPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "Event",
+        slug: "annual-summit",
+        title: "Annual Summit",
+        description: "Our annual developer summit.",
+      },
+      body: "# Annual Summit\n\nBody.",
+    });
+
+    const element = await EventSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "annual-summit" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    const { container } = render(element);
+    // After migration: renderPage defaults populatedDescriptionTestId to
+    // "${slug}-description" where slug is the runtime params.slug value.
+    // This replaces the pre-migration hardcoded "event-description" testid
+    // with the slug-derived "annual-summit-description". Intentional per spec.
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Annual Summit","description":"Our annual developer summit.","mainEntity":{"@context":"https://schema.org","@type":"Event","name":"Annual Summit","description":"Our annual developer summit."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Events","item":"http://localhost:3000/en/events"},{"@type":"ListItem","position":3,"name":"Annual Summit","item":"http://localhost:3000/en/events/annual-summit"}]}]}</script><main><h1>Annual Summit</h1><p data-testid="annual-summit-description">Our annual developer summit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered"># Annual Summit
+
+     Body.</div></article></div></div></main>"
+    `);
+  });
+
+  it("null source calls notFound()", async () => {
+    await expect(
+      EventSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-event" }),
+        getMdxSource: getMdxSourceEmpty,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/events/page.tsx

@@ -0,0 +1,25 @@
+// Events list page. Reads EventsList MDX via renderPage and emits
+// a JSON-LD CollectionPage via the dispatcher.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "EventsList",
+    slug: "events",
+    locale,
+    translationsNamespace: "events",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

package/templates/apps/web/app/[locale]/faq/page.tsx

@@ -0,0 +1,36 @@
+// FAQ page. Reads the FAQPage MDX frontmatter, renders sections via
+// SectionRenderer, and emits a JSON-LD <script> with mainEntity from
+// the schema: override field (populated from MDX frontmatter).
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
+import {
+  renderPage
+} from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "FAQPage",
+    slug: "faq",
+    locale,
+    translationsNamespace: "faq",
+    emptyStateScaffoldJsonLd: {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+    },
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+}

package/templates/apps/web/app/[locale]/how-to/[slug]/page.tsx

@@ -0,0 +1,34 @@
+// HowTo detail page. Reads the HowTo MDX for the given slug, renders via
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { getMdxSlugs, renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("HowTo", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "HowTo",
+    slug,
+    locale,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "how-to-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

package/templates/apps/web/app/[locale]/how-to/__tests__/page-renderer-migration.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * HTML snapshot regression tests for how-to routes — @working-theory/page-renderer migration.
+ *
+ * Node version: captured against Node 22.x (same as CI).
+ * MDX seed content: DI-injected stub — no fs reads, deterministic.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0.
+ *
+ * Routes covered:
+ *   - how-to/[slug] (populated: populated state)
+ *   - how-to/[slug] (notFound: unknown slug triggers notFound())
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }): React.ReactElement =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import HowToSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+describe("how-to/[slug] — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "HowTo" as const,
+        slug: "deploy-ailk-vercel",
+        title: "Deploy AILK to Vercel",
+        description: "Step-by-step guide to deploying AI Launch Kit on Vercel.",
+      },
+      body: "## Steps\n\nBody content.",
+    });
+
+    const element = await HowToSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "deploy-ailk-vercel" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Deploy AILK to Vercel","description":"Step-by-step guide to deploying AI Launch Kit on Vercel.","mainEntity":{"@type":"HowTo","name":"Deploy AILK to Vercel"}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"How-To Guides","item":"http://localhost:3000/en/how-to"},{"@type":"ListItem","position":3,"name":"Deploy AILK to Vercel","item":"http://localhost:3000/en/how-to/deploy-ailk-vercel"}]}]}</script><main><h1>Deploy AILK to Vercel</h1><p data-testid="how-to-description">Step-by-step guide to deploying AI Launch Kit on Vercel.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">## Steps
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+
+  it("unknown slug triggers notFound()", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      HowToSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/how-to/page.tsx

@@ -0,0 +1,40 @@
+// How-To list page. Enumerates HowTo slugs via the content adapter and renders
+// a directory listing. No dedicated list MDX type exists for HowTo; the list
+// page is generated from the detail type's slug enumeration.
+import { getMdxSlugs as defaultGetMdxSlugs } from "@working-theory/page-renderer";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
+}
+
+export default async function Page({
+  params,
+  getMdxSlugs = defaultGetMdxSlugs,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations("how-to");
+  const slugs = await getMdxSlugs("HowTo", locale);
+
+  return (
+    <main>
+      <h1>{t("heading")}</h1>
+      <p data-testid="how-to-description">
+        {t("description")}
+      </p>
+      {slugs.length === 0 ? (
+        <p data-testid="section-empty-state">{t("emptyState")}</p>
+      ) : (
+        <ul data-testid="how-to-list">
+          {slugs.map((slug) => (
+            <li key={slug}>
+              <a href={`/${locale}/how-to/${slug}`}>{slug}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

package/templates/apps/web/app/[locale]/integrations/[slug]/page.tsx

@@ -0,0 +1,43 @@
+// Integration detail page. Reads the Integration MDX for the given slug, renders
+// via next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import {
+  renderPage,
+  getMdxSource as defaultGetMdxSource,
+  getMdxSlugs,
+} from "@working-theory/page-renderer";
+import { notFound } from "next/navigation";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("Integration", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const source = await getMdxSource("Integration", slug, locale);
+  if (!source) {
+    notFound();
+  }
+  return renderPage({
+    type: "Integration",
+    slug,
+    locale,
+    translationsNamespace: "integrations",
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "integration-description",
+    getMdxSource: async () => source,
+  });
+}

package/templates/apps/web/app/[locale]/integrations/__tests__/page-renderer-migration.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * HTML snapshot regression tests for the integrations catalog routes
+ * apps/web → @working-theory/page-renderer migration (Spec 1.5.1).
+ *
+ * Node version: captured against Node 22.x (same as CI).
+ * MDX seed content: DI-injected stub — no fs reads, deterministic across environments.
+ *
+ * Two-commit strategy (per spec §6):
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Routes under test:
+ *   - integrations/page.tsx (index — empty-state + populated)
+ *   - integrations/[slug]/page.tsx (detail — populated + null→notFound)
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import { notFound } from "next/navigation";
+import IntegrationsPage from "../page";
+import IntegrationSlugPage from "../[slug]/page";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+// ── Shared stub helpers ────────────────────────────────────────────────────────
+
+function makeIntegrationsListSource() {
+  return {
+    frontmatter: {
+      type: "IntegrationsList" as const,
+      slug: "integrations",
+      title: "Integrations",
+      description: "First-party integrations for AI Launch Kit.",
+    },
+    body: "# Integrations\n\nBody.",
+  };
+}
+
+function makeIntegrationSource(slug: string) {
+  return {
+    frontmatter: {
+      type: "Integration" as const,
+      slug,
+      title: "OpenAI API",
+      description: "Connect AILK to OpenAI.",
+    },
+    body: "# OpenAI API\n\nBody.",
+  };
+}
+
+// ── integrations/page.tsx — index ─────────────────────────────────────────────
+
+describe("IntegrationsPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("empty state renders deterministic HTML", async () => {
+    const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+    const element = await IntegrationsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Integrations</h1><p data-testid="section-empty-state">Integrations listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = makeIntegrationsListSource();
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await IntegrationsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Integrations","description":"First-party integrations for AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"SoftwareApplication"}]}}</script><main><h1>Integrations</h1><p data-testid="integrations-description">First-party integrations for AI Launch Kit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source="# Integrations
+
+     Body."></div></article></div></div></main>"
+    `);
+  });
+});
+
+// ── integrations/[slug]/page.tsx — detail ─────────────────────────────────────
+
+describe("IntegrationSlugPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const slug = "openai-api";
+    const source = makeIntegrationSource(slug);
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await IntegrationSlugPage({
+      params: Promise.resolve({ locale: "en", slug }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"OpenAI API","description":"Connect AILK to OpenAI.","mainEntity":{"@type":"SoftwareApplication","name":"OpenAI API"}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Integrations","item":"http://localhost:3000/en/integrations"},{"@type":"ListItem","position":3,"name":"OpenAI API","item":"http://localhost:3000/en/integrations/openai-api"}]}]}</script><main><h1>OpenAI API</h1><p data-testid="integration-description">Connect AILK to OpenAI.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source="# OpenAI API
+
+     Body."></div></article></div></div></main>"
+    `);
+  });
+
+  it("null source calls notFound()", async () => {
+    const getMdxSourceNull = jest.fn().mockResolvedValue(null);
+    await expect(
+      IntegrationSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource: getMdxSourceNull,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/integrations/page.tsx

@@ -0,0 +1,25 @@
+// Integrations list page. Reads IntegrationsList MDX via the content adapter and
+// emits a JSON-LD CollectionPage via the dispatcher.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "IntegrationsList",
+    slug: "integrations",
+    locale,
+    translationsNamespace: "integrations",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

package/templates/apps/web/app/[locale]/launch-service/page.tsx

@@ -0,0 +1,31 @@
+// Launch Service page. Reads the Service/launch-service MDX frontmatter,
+// renders sections via SectionRenderer, and emits a JSON-LD <script>.
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
+import {
+  renderPage
+} from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "Service",
+    slug: "launch-service",
+    locale,
+    translationsNamespace: "launch-service",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+}