create-ailk 0.1.0

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

@@ -0,0 +1,25 @@
+// Products list page. Reads ProductsList 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: "ProductsList",
+    slug: "products",
+    locale,
+    translationsNamespace: "products",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,39 @@
+// Project detail page. Reads Project MDX for the given slug, renders sections
+// via SectionRenderer, and emits a JSON-LD <script>. Unknown slugs 404 via notFound().
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
+} from "@working-theory/page-renderer";
+import { getContentAdapter, renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const adapter = getContentAdapter();
+  const pages = await adapter.listDetail("Project", params.locale);
+  return pages.map((page) => ({ slug: page.slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "Project",
+    slug,
+    locale,
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+}

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

@@ -0,0 +1,138 @@
+/**
+ * HTML snapshot regression tests for the projects 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 across environments.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes (RED-passing).
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Routes under test:
+ *   - projects/page.tsx (index — empty-state + populated; sections mode)
+ *   - projects/[slug]/page.tsx (detail — populated + null→notFound; sections mode)
+ *
+ * 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";
+
+// ── @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),
+    }),
+}));
+
+// ── next/navigation mock ───────────────────────────────────────────────────────
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import { notFound } from "next/navigation";
+import ProjectsPage from "../page";
+import ProjectSlugPage from "../[slug]/page";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+// ── Shared stub helpers ────────────────────────────────────────────────────────
+
+function makeProjectsListSource() {
+  return {
+    frontmatter: {
+      type: "ProjectsList" as const,
+      slug: "projects",
+      title: "Projects",
+      description: "Open-source projects built with AI Launch Kit.",
+    },
+    body: "# Projects\n\nBody.",
+  };
+}
+
+function makeProjectSource(slug: string) {
+  return {
+    frontmatter: {
+      type: "Project" as const,
+      slug,
+      title: "AI Launch Kit",
+      description: "The AX-first OSS template.",
+    },
+    body: "# AI Launch Kit\n\nBody.",
+  };
+}
+
+// ── projects/page.tsx — index ──────────────────────────────────────────────────
+
+describe("ProjectsPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("empty state renders deterministic HTML", async () => {
+    const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+    const element = await ProjectsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Projects</h1><p data-testid="section-empty-state">Projects listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = makeProjectsListSource();
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const getPageSectionsStub = jest.fn().mockResolvedValue([]);
+    const element = await ProjectsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+      getPageSections: getPageSectionsStub,
+    });
+    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":"Projects","description":"Open-source projects built with AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"CreativeWork"}]}}</script><main><h1>Projects</h1><p data-testid="projects-description">Open-source projects built with AI Launch Kit.</p><div data-testid="section-renderer" data-section-count="0"></div></main>"`,
+    );
+  });
+});
+
+// ── projects/[slug]/page.tsx — detail ─────────────────────────────────────────
+
+describe("ProjectSlugPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const slug = "ailk";
+    const source = makeProjectSource(slug);
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const getPageSectionsStub = jest.fn().mockResolvedValue([]);
+    const element = await ProjectSlugPage({
+      params: Promise.resolve({ locale: "en", slug }),
+      getMdxSource: getMdxSourcePopulated,
+      getPageSections: getPageSectionsStub,
+    });
+    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":"AI Launch Kit","description":"The AX-first OSS template.","mainEntity":{"@context":"https://schema.org","@type":"CreativeWork","name":"AI Launch Kit","description":"The AX-first OSS template."}},{"@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":"Projects","item":"http://localhost:3000/en/projects"},{"@type":"ListItem","position":3,"name":"AI Launch Kit","item":"http://localhost:3000/en/projects/ailk"}]}]}</script><main><h1>AI Launch Kit</h1><p data-testid="ailk-description">The AX-first OSS template.</p><div data-testid="section-renderer" data-section-count="0"></div></main>"`,
+    );
+  });
+
+  it("null source triggers notFound()", async () => {
+    const getMdxSourceNull = jest.fn().mockResolvedValue(null);
+    await expect(
+      ProjectSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource: getMdxSourceNull,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,30 @@
+// Projects listing page. Reads the ProjectsList MDX from the content backend,
+// 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: "ProjectsList",
+    slug: "projects",
+    locale,
+    translationsNamespace: "projects",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+}

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

@@ -0,0 +1,51 @@
+// Resource detail page. Reads the ResourceDetail MDX for the given slug, renders
+// via renderPage (mdx-body mode), and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import type {
+  getMdxSource as defaultGetMdxSource,
+} from "@working-theory/page-renderer";
+import {
+  getMdxSlugs,
+  getMdxSource as defaultGetMdxSourceImpl,
+  renderPage,
+} 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("ResourceDetail", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSourceImpl,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+
+  // Pre-check: verify slug exists; call notFound() on null (not empty-state JSX).
+  const source = await getMdxSource("ResourceDetail", slug, locale);
+  if (!source) {
+    notFound();
+  }
+
+  // translationsNamespace is required by RenderPageInput but unreachable here:
+  // notFound() above ensures renderPage's empty-state branch never executes.
+  return renderPage({
+    type: "ResourceDetail",
+    slug,
+    locale,
+    translationsNamespace: slug,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "resource-description",
+    getMdxSource,
+  });
+}

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

@@ -0,0 +1,117 @@
+/**
+ * HTML snapshot regression tests for resources/page.tsx and resources/[slug]/page.tsx
+ * → @working-theory/page-renderer migration.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes (RED-passing).
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Four states tested:
+ *   - resources hub empty: getMdxSource returns null → empty-state branch
+ *   - resources hub populated: getMdxSource returns a minimal MdxPageSource → full render
+ *   - resource detail populated: getMdxSource returns populated source → full render
+ *   - resource detail notFound: getMdxSource returns null → notFound() called
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── @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),
+    }),
+}));
+
+// ── next/navigation mock ──────────────────────────────────────────────────────
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+jest.mock("next/navigation", () => ({
+  notFound: () => mockNotFound(),
+}));
+
+import ResourcesPage from "../page";
+import ResourceDetailPage from "../[slug]/page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+// ── Resources Hub ─────────────────────────────────────────────────────────────
+
+describe("ResourcesPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await ResourcesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Resources</h1><p data-testid="section-empty-state">Resources listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "ResourcesHub" as const,
+        slug: "resources",
+        title: "Resources",
+        description: "Guides, templates, and tools.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await ResourcesPage({
+      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":"Resources","description":"Guides, templates, and tools.","mainEntity":{"@type":"ItemList"}}</script><main><h1>Resources</h1><p data-testid="resources-description">Guides, templates, and tools.</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=""></div></article></div></div></main>"`,
+    );
+  });
+});
+
+// ── Resource Detail ───────────────────────────────────────────────────────────
+
+describe("ResourceDetailPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "ResourceDetail" as const,
+        slug: "getting-started",
+        title: "Getting Started",
+        description: "A guide for new users.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await ResourceDetailPage({
+      params: Promise.resolve({ locale: "en", slug: "getting-started" }),
+      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":"Getting Started","description":"A guide for new users.","mainEntity":{"@type":"Article","headline":"Getting Started"}},{"@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":"Resources","item":"http://localhost:3000/en/resources"},{"@type":"ListItem","position":3,"name":"Getting Started","item":"http://localhost:3000/en/resources/getting-started"}]}]}</script><main><h1>Getting Started</h1><p data-testid="resource-description">A guide for new users.</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=""></div></article></div></div></main>"`,
+    );
+  });
+
+  it("notFound state calls notFound() when source is null", async () => {
+    await expect(
+      ResourceDetailPage({
+        params: Promise.resolve({ locale: "en", slug: "missing" }),
+        getMdxSource: getMdxSourceEmpty,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,27 @@
+// Resources hub page. Reads ResourcesHub 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: "ResourcesHub",
+    slug: "resources",
+    locale,
+    translationsNamespace: "resources",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,43 @@
+// Service detail page. Reads the Service 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("Service", 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("Service", slug, locale);
+  if (!source) {
+    notFound();
+  }
+  return renderPage({
+    type: "Service",
+    slug,
+    locale,
+    translationsNamespace: "services",
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "service-description",
+    getMdxSource: async () => source,
+  });
+}

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

@@ -0,0 +1,129 @@
+/**
+ * HTML snapshot regression tests for the services 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:
+ *   - services/page.tsx (index — empty-state + populated)
+ *   - services/[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 ServicesPage from "../page";
+import ServiceSlugPage from "../[slug]/page";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+// ── Shared stub helpers ────────────────────────────────────────────────────────
+
+function makeServicesListSource() {
+  return {
+    frontmatter: {
+      type: "ServicesList" as const,
+      slug: "services",
+      title: "Services",
+      description: "All services.",
+    },
+    body: "# Services\n\nBody.",
+  };
+}
+
+function makeServiceSource(slug: string) {
+  return {
+    frontmatter: {
+      type: "Service" as const,
+      slug,
+      title: "Implementation consulting",
+      description: "Help adapting AI Launch Kit.",
+    },
+    body: "# Implementation consulting\n\nBody.",
+  };
+}
+
+// ── services/page.tsx — index ──────────────────────────────────────────────────
+
+describe("ServicesPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("empty state renders deterministic HTML", async () => {
+    const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+    const element = await ServicesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Services</h1><p data-testid="section-empty-state">Services listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = makeServicesListSource();
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await ServicesPage({
+      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":"Services","description":"All services.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Service"}]}}</script><main><h1>Services</h1><p data-testid="services-description">All services.</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="# Services
+
+     Body."></div></article></div></div></main>"
+    `);
+  });
+});
+
+// ── services/[slug]/page.tsx — detail ─────────────────────────────────────────
+
+describe("ServiceSlugPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const slug = "consulting";
+    const source = makeServiceSource(slug);
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await ServiceSlugPage({
+      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":"Implementation consulting","description":"Help adapting AI Launch Kit.","mainEntity":{"@context":"https://schema.org","@type":"Service","name":"Implementation consulting","description":"Help adapting AI Launch Kit."}},{"@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":"Services","item":"http://localhost:3000/en/services"},{"@type":"ListItem","position":3,"name":"Implementation consulting","item":"http://localhost:3000/en/services/consulting"}]}]}</script><main><h1>Implementation consulting</h1><p data-testid="service-description">Help adapting 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="# Implementation consulting
+
+     Body."></div></article></div></div></main>"
+    `);
+  });
+
+  it("null source calls notFound()", async () => {
+    const getMdxSourceNull = jest.fn().mockResolvedValue(null);
+    await expect(
+      ServiceSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource: getMdxSourceNull,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,25 @@
+// Services list page. Reads ServicesList 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: "ServicesList",
+    slug: "services",
+    locale,
+    translationsNamespace: "services",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}