create-ailk 0.1.0

package/templates/apps/web/app/[locale]/contact/ContactForm.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+/**
+ * ContactForm — client component that wires the contact form to
+ * captureLeadAction via useFormState.
+ *
+ * Validation errors render inline next to each field.
+ * Success shows a confirmation message.
+ * Server errors show a generic fallback message.
+ *
+ * Honeypot + rate-limit enforcement lives in apps/api; no duplication here.
+ */
+
+import { useTranslations } from "next-intl";
+import { useFormState, useFormStatus } from "react-dom";
+
+import { captureLeadAction } from "./contact.actions";
+
+function SubmitButton() {
+  const t = useTranslations("contact");
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending} data-testid="contact-submit">
+      {pending ? t("sending") : t("sendMessage")}
+    </button>
+  );
+}
+
+export function ContactForm() {
+  const t = useTranslations("contact");
+  const [state, formAction] = useFormState(captureLeadAction, null);
+
+  if (state?.kind === "success") {
+    return (
+      <p data-testid="contact-success">
+        {t("successMessage")}
+      </p>
+    );
+  }
+
+  const fieldErrors = state?.kind === "error" ? (state.fieldErrors ?? {}) : {};
+  const formError =
+    state?.kind === "error" && !state.fieldErrors ? state.message : undefined;
+
+  return (
+    <form action={formAction} noValidate>
+      {formError && (
+        <p role="alert" data-testid="contact-form-error">
+          {formError}
+        </p>
+      )}
+
+      {/* Honeypot — hidden from users; bots fill it; API rejects non-empty */}
+      <input
+        type="text"
+        name="website"
+        tabIndex={-1}
+        aria-hidden="true"
+        style={{ display: "none" }}
+      />
+
+      <div>
+        <label htmlFor="contact-name">{t("nameLabel")}</label>
+        <input
+          id="contact-name"
+          name="name"
+          type="text"
+          autoComplete="name"
+          required
+          aria-describedby={fieldErrors.name ? "contact-name-error" : undefined}
+        />
+        {fieldErrors.name && (
+          <span
+            id="contact-name-error"
+            role="alert"
+            data-testid="contact-name-error"
+          >
+            {fieldErrors.name}
+          </span>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="contact-email">{t("emailLabel")}</label>
+        <input
+          id="contact-email"
+          name="email"
+          type="email"
+          autoComplete="email"
+          required
+          aria-describedby={
+            fieldErrors.email ? "contact-email-error" : undefined
+          }
+        />
+        {fieldErrors.email && (
+          <span
+            id="contact-email-error"
+            role="alert"
+            data-testid="contact-email-error"
+          >
+            {fieldErrors.email}
+          </span>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="contact-message">{t("messageLabel")}</label>
+        <textarea
+          id="contact-message"
+          name="message"
+          rows={5}
+          aria-describedby={
+            fieldErrors.message ? "contact-message-error" : undefined
+          }
+        />
+        {fieldErrors.message && (
+          <span
+            id="contact-message-error"
+            role="alert"
+            data-testid="contact-message-error"
+          >
+            {fieldErrors.message}
+          </span>
+        )}
+      </div>
+
+      <SubmitButton />
+    </form>
+  );
+}

package/templates/apps/web/app/[locale]/contact/__tests__/contact.actions.test.ts

@@ -0,0 +1,152 @@
+/**
+ * Tests for captureLeadAction Server Action.
+ *
+ * Acceptance criteria verified here:
+ * - captureLeadAction(prevState, validFormData) calls api-client leads.submit
+ *   and returns success state
+ * - captureLeadAction(prevState, invalidFormData) returns Zod validation errors
+ *   without calling api-client
+ * - captureLeadAction returns generic error on API failure
+ * - Parity: captureLeadAction is paired with ailkCaptureLead per ADR 0013
+ */
+
+import { captureLeadAction } from "../contact.actions.js";
+
+// Mock @working-theory/api-client
+jest.mock("@working-theory/api-client", () => ({
+  leads: {
+    submit: jest.fn(),
+  },
+}));
+
+import { leads } from "@working-theory/api-client";
+const mockSubmit = leads.submit as jest.Mock;
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+function makeFormData(fields: Record<string, string>): FormData {
+  const fd = new FormData();
+  for (const [key, value] of Object.entries(fields)) {
+    fd.append(key, value);
+  }
+  return fd;
+}
+
+const VALID_FIELDS = {
+  name: "Jane Smith",
+  email: "jane@example.com",
+  message: "I am interested in your services.",
+};
+
+const INITIAL_STATE = null;
+
+describe("captureLeadAction — valid input", () => {
+  it("returns success state when api-client responds ok", async () => {
+    mockSubmit.mockResolvedValueOnce({
+      ok: true,
+      body: { id: "lead_abc123", persisted: "db" },
+    });
+
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData(VALID_FIELDS),
+    );
+
+    expect(result).toMatchObject({ kind: "success" });
+  });
+
+  it("calls leads.submit with mapped payload from formData", async () => {
+    mockSubmit.mockResolvedValueOnce({
+      ok: true,
+      body: { id: "lead_abc123", persisted: "db" },
+    });
+
+    await captureLeadAction(INITIAL_STATE, makeFormData(VALID_FIELDS));
+
+    expect(mockSubmit).toHaveBeenCalledTimes(1);
+    const body = mockSubmit.mock.calls[0][0] as {
+      email: string;
+      payload: { name: string; message?: string };
+    };
+    expect(body.email).toBe("jane@example.com");
+    expect(body.payload.name).toBe("Jane Smith");
+    expect(body.payload.message).toBe("I am interested in your services.");
+  });
+});
+
+describe("captureLeadAction — invalid input (Zod errors)", () => {
+  it("returns field errors when email is invalid without calling api-client", async () => {
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData({ name: "Jane", email: "not-an-email" }),
+    );
+
+    expect(result).toMatchObject({
+      kind: "error",
+      fieldErrors: expect.any(Object),
+    });
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it("returns field errors when name is missing", async () => {
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData({ name: "", email: "jane@example.com" }),
+    );
+
+    expect(result).toMatchObject({
+      kind: "error",
+      fieldErrors: expect.any(Object),
+    });
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it("returns field errors when email is missing", async () => {
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData({ name: "Jane", email: "" }),
+    );
+
+    expect(result).toMatchObject({
+      kind: "error",
+      fieldErrors: expect.any(Object),
+    });
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+});
+
+describe("captureLeadAction — API error", () => {
+  it("returns generic error when api-client responds not ok", async () => {
+    mockSubmit.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      body: { error: "internal_error" },
+    });
+
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData(VALID_FIELDS),
+    );
+
+    expect(result).toMatchObject({
+      kind: "error",
+      message: expect.any(String),
+    });
+  });
+
+  it("returns generic error when api-client throws", async () => {
+    mockSubmit.mockRejectedValueOnce(new Error("Network error"));
+
+    const result = await captureLeadAction(
+      INITIAL_STATE,
+      makeFormData(VALID_FIELDS),
+    );
+
+    expect(result).toMatchObject({
+      kind: "error",
+      message: expect.any(String),
+    });
+  });
+});

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

@@ -0,0 +1,92 @@
+/**
+ * HTML snapshot regression tests for contact/page.tsx → @working-theory/page-renderer migration.
+ *
+ * Contact uses sections mode (not bodyMode: "mdx-body") with a ContactForm wrapper:
+ *   <>{renderPage output}<ContactForm /></>
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration route (RED-passing).
+ *   Commit 2: route migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Two states tested:
+ *   - empty: getMdxSource returns null → renderPage empty-state + ContactForm present
+ *   - populated: getMdxSource returns populated source → renderPage sections + ContactForm present
+ *
+ * Note on ContactForm in tests: ContactForm is a "use client" component that uses
+ * useFormState/useFormStatus hooks. jsdom does not support these hooks. The component
+ * renders as an opaque stub via the next-intl and react-dom mocks below. The snapshot
+ * asserts the ContactForm component is present in the output (non-null).
+ *
+ * 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),
+    }),
+}));
+
+// ── ContactForm mock ──────────────────────────────────────────────────────────
+// ContactForm is "use client" and uses useFormState/useFormStatus. Mock it as a
+// deterministic stub so the snapshot is stable.
+// eslint-disable-next-line no-restricted-syntax -- test-seam mock required; ContactForm uses useFormState/useFormStatus which crash in jsdom; internal-module mock is the narrowest possible scope; tracked in #507
+jest.mock("../ContactForm", () => ({
+  ContactForm: () =>
+    React.createElement("div", { "data-testid": "contact-form-stub" }),
+}));
+
+import ContactPage from "../page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+const getPageSectionsEmpty = jest.fn().mockResolvedValue([]);
+
+describe("ContactPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML (renderPage empty-state + ContactForm present)", async () => {
+    const element = await ContactPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+      getPageSections: getPageSectionsEmpty,
+    });
+    const { container } = render(element);
+    // ContactForm must be present even in empty-state
+    expect(
+      container.querySelector('[data-testid="contact-form-stub"]'),
+    ).not.toBeNull();
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Contact</h1><p data-testid="section-empty-state">Contact page content coming soon.</p></main><div data-testid="contact-form-stub"></div>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML (renderPage sections + ContactForm present)", async () => {
+    const source = {
+      frontmatter: {
+        type: "ContactPage" as const,
+        slug: "contact",
+        title: "Contact Us",
+        description: "Get in touch.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const getPageSectionsPopulated = jest.fn().mockResolvedValue([]);
+
+    const element = await ContactPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+      getPageSections: getPageSectionsPopulated,
+    });
+    const { container } = render(element);
+    // ContactForm must be present in populated state too
+    expect(
+      container.querySelector('[data-testid="contact-form-stub"]'),
+    ).not.toBeNull();
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"ContactPage","inLanguage":"en","name":"Contact Us","description":"Get in touch.","mainEntity":{"@type":"ContactPoint","contactType":"customer support"}}</script><main><h1>Contact Us</h1><p data-testid="contact-description">Get in touch.</p><div data-testid="section-renderer" data-section-count="0"></div></main><div data-testid="contact-form-stub"></div>"`,
+    );
+  });
+});

package/templates/apps/web/app/[locale]/contact/contact.actions.ts

@@ -0,0 +1,79 @@
+"use server";
+
+/**
+ * captureLeadAction — Server Action paired with ailkCaptureLead MCP tool.
+ *
+ * Validates contact-form input with submitLeadInputSchema (shared schema per
+ * ADR 0013), calls POST /api/leads/submit via @working-theory/api-client, and returns
+ * a discriminated ActionResult suitable for useFormState.
+ *
+ * Canonical filename: contact.actions.ts (*.actions.ts per ADR 0013 / U0 spec
+ * parity-test regex `ACTION_FILE_RE = /\.actions\.ts$/`).
+ *
+ * Honeypot + rate-limit enforcement lives in apps/api; no duplication here.
+ */
+
+import { leads } from "@working-theory/api-client";
+import { submitLeadInputSchema } from "@working-theory/validation";
+
+export type ActionResult =
+  | { kind: "success" }
+  | {
+      kind: "error";
+      message?: string;
+      fieldErrors?: Record<string, string>;
+    }
+  | null;
+
+export async function captureLeadAction(
+  _prevState: ActionResult,
+  formData: FormData,
+): Promise<ActionResult> {
+  const raw = {
+    name: formData.get("name"),
+    email: formData.get("email"),
+    message: formData.get("message") ?? undefined,
+    phone: formData.get("phone") ?? undefined,
+  };
+
+  const parsed = submitLeadInputSchema.safeParse(raw);
+  if (!parsed.success) {
+    const fieldErrors: Record<string, string> = {};
+    for (const issue of parsed.error.issues) {
+      const field = String(issue.path[0] ?? "form");
+      if (!fieldErrors[field]) {
+        fieldErrors[field] = issue.message;
+      }
+    }
+    return { kind: "error", fieldErrors };
+  }
+
+  const { name, email, message, phone } = parsed.data;
+  const siteId = process.env.AILK_SITE_ID ?? "default";
+  const body = {
+    siteId,
+    source: "web",
+    email,
+    payload: {
+      name,
+      ...(message !== undefined && { message }),
+      ...(phone !== undefined && { phone }),
+    },
+  };
+
+  try {
+    const res = await leads.submit(body);
+    if (!res.ok) {
+      return {
+        kind: "error",
+        message: "Something went wrong, please try again.",
+      };
+    }
+    return { kind: "success" };
+  } catch {
+    return {
+      kind: "error",
+      message: "Something went wrong, please try again.",
+    };
+  }
+}

package/templates/apps/web/app/[locale]/contact/error.tsx

@@ -0,0 +1,24 @@
+"use client";
+// Per-segment error boundary for the /contact (lead-capture) route.
+import type { ReactElement } from "react";
+
+import { ErrorFallback } from "../../error-fallback";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function ContactError({
+  error,
+  reset,
+}: ErrorProps): ReactElement {
+  return (
+    <ErrorFallback
+      error={error}
+      reset={reset}
+      heading="Your message didn't go through"
+      body="We weren't able to send your message. Please try again — your input has been preserved."
+    />
+  );
+}

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

@@ -0,0 +1,38 @@
+// Contact page. Renders sections via renderPage (sections mode) then appends
+// ContactForm as a wrapper. JSON-LD and translations handled by renderPage.
+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";
+
+import { ContactForm } from "./ContactForm";
+
+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;
+  const rendered = await renderPage({
+    type: "ContactPage",
+    slug: "contact",
+    locale,
+    translationsNamespace: "contact",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+  return (
+    <>
+      {rendered}
+      <ContactForm />
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+// Course detail page. Reads the Course 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("Course", 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: "Course",
+    slug,
+    locale,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "course-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,119 @@
+/**
+ * HTML snapshot regression tests for courses 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:
+ *   - courses/page (empty: no CoursesList MDX)
+ *   - courses/page (populated: CoursesList MDX present)
+ *   - courses/[slug] (populated: populated state)
+ *   - courses/[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 CoursesPage from "../page";
+import CourseSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+describe("courses/page — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    const element = await CoursesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Courses</h1><p data-testid="section-empty-state">Courses listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "CoursesList" as const,
+        slug: "courses",
+        title: "Courses",
+        description: "Structured learning paths for teams adopting AILK.",
+      },
+      body: "## Courses\n\nBody content.",
+    });
+
+    const element = await CoursesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource,
+    });
+    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":"Courses","description":"Structured learning paths for teams adopting AILK.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Course"}]}}</script><main><h1>Courses</h1><p data-testid="courses-description">Structured learning paths for teams adopting AILK.</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">## Courses
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+});
+
+describe("courses/[slug] — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "Course" as const,
+        slug: "aeo-fundamentals",
+        title: "AEO Fundamentals",
+        description: "A practical course covering Layer 1 AEO rules.",
+      },
+      body: "## AEO Fundamentals\n\nBody content.",
+    });
+
+    const element = await CourseSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "aeo-fundamentals" }),
+      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":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules.","mainEntity":{"@context":"https://schema.org","@type":"Course","name":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules."}},{"@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":"Courses","item":"http://localhost:3000/en/courses"},{"@type":"ListItem","position":3,"name":"AEO Fundamentals","item":"http://localhost:3000/en/courses/aeo-fundamentals"}]}]}</script><main><h1>AEO Fundamentals</h1><p data-testid="course-description">A practical course covering Layer 1 AEO rules.</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">## AEO Fundamentals
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+
+  it("unknown slug triggers notFound()", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      CourseSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});