create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/flows/[slug]/results/[payload]/__tests__/page.test.tsx

@@ -0,0 +1,396 @@
+/**
+ * Tests for the `/[locale]/flows/[slug]/results/[payload]` cold-load route
+ * (#4770).
+ *
+ * AC3 — a payload encoding a known answer set renders exactly the offer
+ *       names and matched reasons `recommend()` returns for those same
+ *       answers — asserted against the SAME fixture (`FIXTURE_CONFIG` +
+ *       `KNOWN_ANSWERS`) `recommend()` itself would score.
+ * AC4 — four cases `redirect()` to `/[locale]/flows/[slug]` and render no
+ *       results markup: invalid payload, stale-version payload, a
+ *       flowSlug-mismatched payload, and a non-recommending flow.
+ *
+ * `next/navigation`'s `redirect` is mocked to throw (mirrors the sibling
+ * `thanks/[slug]` route's `notFound` test pattern) so a redirect is
+ * observable via `.rejects.toThrow` without a real Next.js router. `next-intl`
+ * is mocked to an identity translator — `ResultsClient`'s only string comes
+ * from the `flow` namespace's `whyThis` key, which this test does not assert
+ * on by literal text.
+ */
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import {
+  encodePermalink,
+  PERMALINK_VERSION,
+  recommend,
+  resolveLocalizedString,
+} from "@working-theory/validation";
+
+const mockGet = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  flows: { get: (...args: unknown[]) => mockGet(...args) },
+}));
+
+const mockRedirect = jest.fn((url: string) => {
+  throw new Error(`NEXT_REDIRECT:${url}`);
+});
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  redirect: (url: string) => mockRedirect(url),
+}));
+
+jest.mock("next-intl", () => ({
+  __esModule: true,
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+import Page, { generateMetadata } from "../page";
+
+const SLUG = "ailk-recommender";
+
+const KNOWN_ANSWERS = { team_size: "solo", wants_seo: "yes" };
+
+function fixtureConfig(overrides: Partial<FlowConfig> = {}): FlowConfig {
+  return {
+    slug: SLUG,
+    defaultLocale: "en",
+    mode: "recommending",
+    steps: [
+      {
+        key: "team",
+        type: "segmentation",
+        copy: { title: { en: "Tell us about your team" } },
+        questions: [
+          {
+            name: "team_size",
+            options: [
+              { value: "solo", label: { en: "Solo" } },
+              { value: "agency", label: { en: "Agency" } },
+            ],
+          },
+          {
+            name: "wants_seo",
+            options: [
+              { value: "yes", label: { en: "Yes" } },
+              { value: "no", label: { en: "No" } },
+            ],
+          },
+        ],
+      },
+    ],
+    offers: [
+      {
+        key: "free_oss",
+        copy: {
+          name: { en: "Free" },
+          description: { en: "Self-serve, open source." },
+        },
+        price: { kind: "label", label: { en: "Free" } },
+        rules: [
+          {
+            when: { answer: "team_size", eq: "solo" },
+            reason: { en: "You're a solo builder." },
+          },
+        ],
+      },
+      {
+        key: "seo_addon",
+        copy: {
+          name: { en: "SEO Add-on" },
+          description: { en: "AEO + SEO tuning." },
+        },
+        price: { kind: "label", label: { en: "Add-on" } },
+        rules: [
+          {
+            when: { answer: "wants_seo", eq: "yes" },
+            reason: { en: "You want more organic reach." },
+          },
+        ],
+      },
+    ],
+    recommendation: {
+      key: "recommendation",
+      copy: { title: { en: "Your recommendation" } },
+    },
+    ...overrides,
+  } as FlowConfig;
+}
+
+beforeEach(() => {
+  mockGet.mockReset();
+  mockRedirect.mockClear();
+});
+
+async function expectRedirectTo(
+  payload: string,
+  expectedUrl: string,
+): Promise<void> {
+  await expect(
+    Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    }),
+  ).rejects.toThrow(`NEXT_REDIRECT:${expectedUrl}`);
+  expect(mockRedirect).toHaveBeenCalledWith(expectedUrl);
+}
+
+describe("AC4 — invalid / stale-version / mismatched / non-recommending all redirect to step 1", () => {
+  it("redirects on an invalid payload", async () => {
+    await expectRedirectTo("not-a-valid-payload!!!", `/en/flows/${SLUG}`);
+    // Never fetched the flow config for an undecodable payload.
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects on a stale-version payload", async () => {
+    const stalePayload = encodePermalink({
+      version: PERMALINK_VERSION - 1,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    await expectRedirectTo(stalePayload, `/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects when the payload's own flowSlug differs from the route's [slug]", async () => {
+    const mismatchedPayload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: "a-different-flow",
+      answers: KNOWN_ANSWERS,
+    });
+    await expectRedirectTo(mismatchedPayload, `/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+
+  it("redirects when the served flow is not a recommending flow (no offers)", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    const {
+      offers: _offers,
+      mode: _mode,
+      ...nonRecommending
+    } = fixtureConfig();
+    mockGet.mockResolvedValueOnce({ ok: true, body: nonRecommending });
+
+    await expectRedirectTo(payload, `/en/flows/${SLUG}`);
+  });
+
+  it("redirects when the served flow declares mode !== 'recommending'", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({
+      ok: true,
+      body: fixtureConfig({ mode: "qualifying" }),
+    });
+
+    await expectRedirectTo(payload, `/en/flows/${SLUG}`);
+  });
+
+  it("no results markup renders on any redirect path (renders nothing before throwing)", async () => {
+    await expect(
+      Page({
+        params: Promise.resolve({
+          locale: "en",
+          slug: SLUG,
+          payload: "garbage",
+        }),
+      }),
+    ).rejects.toThrow();
+    expect(screen.queryByTestId("flow-results")).not.toBeInTheDocument();
+  });
+});
+
+describe("AC3 — a valid payload against a recommending flow renders exactly recommend()'s fits", () => {
+  it("renders exactly the offer names and matched reasons recommend() itself returns for the same answers", async () => {
+    const user = userEvent.setup();
+    const config = fixtureConfig();
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({ ok: true, body: config });
+
+    // The SAME fixture (`config` + `KNOWN_ANSWERS`) drives BOTH the mocked
+    // server response AND this expectation — `recommend()` is the one
+    // source of truth for "which fits, in what order, with which reason,"
+    // never a second hand-typed list that could silently drift from it.
+    const expected = recommend(
+      {
+        key: SLUG,
+        offers: config.offers,
+        pairings: config.pairings,
+        rateTable: config.rateTable,
+        scoring: config.scoring,
+      },
+      KNOWN_ANSWERS,
+    );
+    expect(expected.fits.length).toBeGreaterThan(0);
+
+    const element = await Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    });
+    render(element);
+
+    expect(mockRedirect).not.toHaveBeenCalled();
+    expect(screen.getByTestId("flow-results")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", {
+        name: resolveLocalizedString(
+          config.recommendation!.copy.title,
+          "en",
+          config.defaultLocale,
+        ),
+      }),
+    ).toBeInTheDocument();
+
+    for (const fit of expected.fits) {
+      const offer = config.offers!.find((o) => o.key === fit.offerKey)!;
+      const name = resolveLocalizedString(
+        offer.copy.name,
+        "en",
+        config.defaultLocale,
+      );
+      // #4842 FR1 — the top fit's name is ALSO the safe-default side panel's
+      // `offerName`, so the FIRST fit renders exactly twice (panel + card)
+      // and every other fit exactly once.
+      expect(screen.getAllByText(name)).toHaveLength(
+        fit.offerKey === expected.fits[0]!.offerKey ? 2 : 1,
+      );
+      if (offer.copy.description) {
+        expect(
+          screen.getByText(
+            resolveLocalizedString(
+              offer.copy.description,
+              "en",
+              config.defaultLocale,
+            ),
+          ),
+        ).toBeInTheDocument();
+      }
+
+      // The matched reason renders inside the "Why this?" Popover
+      // disclosure — reveal it (mirrors packages/ui/src/blocks/__tests__/
+      // RecommendationCard.test.tsx's own click-to-reveal pattern).
+      await user.click(
+        screen.getByTestId(`recommendation-card-${fit.offerKey}-why-trigger`),
+      );
+      expect(
+        await screen.findByText(
+          resolveLocalizedString(fit.reason, "en", config.defaultLocale),
+        ),
+      ).toBeInTheDocument();
+    }
+  });
+});
+
+describe("generateMetadata", () => {
+  it("resolves the page title from the compiled recommendation marker", async () => {
+    const payload = encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+    mockGet.mockResolvedValueOnce({ ok: true, body: fixtureConfig() });
+
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload }),
+    });
+    expect(metadata.title).toBe("Your recommendation");
+  });
+
+  it("returns an empty metadata object for an invalid payload", async () => {
+    const metadata = await generateMetadata({
+      params: Promise.resolve({
+        locale: "en",
+        slug: SLUG,
+        payload: "garbage",
+      }),
+    });
+    expect(metadata).toEqual({});
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+});
+
+// ─── #4842 AC-5 — the `?checkout=` return states (additive; the cases above
+// are the regression floor and stay as they were) ───────────────────────────
+
+describe("AC-5 (#4842) — ?checkout= return states render over the same recommendation", () => {
+  function validPayload(): string {
+    return encodePermalink({
+      version: PERMALINK_VERSION,
+      flowSlug: SLUG,
+      answers: KNOWN_ANSWERS,
+    });
+  }
+
+  async function renderWithSearch(
+    checkout: string | undefined,
+  ): Promise<ReturnType<typeof recommend>> {
+    const config = fixtureConfig();
+    mockGet.mockResolvedValueOnce({ ok: true, body: config });
+    const expected = recommend(
+      {
+        key: SLUG,
+        offers: config.offers,
+        pairings: config.pairings,
+        rateTable: config.rateTable,
+        scoring: config.scoring,
+      },
+      KNOWN_ANSWERS,
+    );
+    const element = await Page({
+      params: Promise.resolve({ locale: "en", slug: SLUG, payload: validPayload() }),
+      searchParams: Promise.resolve(checkout === undefined ? {} : { checkout }),
+    });
+    render(element);
+    expect(mockRedirect).not.toHaveBeenCalled();
+    return expected;
+  }
+
+  function expectIdenticalFits(expected: ReturnType<typeof recommend>): void {
+    expect(expected.fits.length).toBeGreaterThan(0);
+    for (const fit of expected.fits) {
+      expect(screen.getByTestId(`recommendation-card-${fit.offerKey}`)).toBeInTheDocument();
+    }
+    expect(screen.getAllByTestId(/^recommendation-card-[a-z_]+$/)).toHaveLength(
+      expected.fits.length,
+    );
+  }
+
+  it("?checkout=success renders the success status line AND the identical fit cards", async () => {
+    const expected = await renderWithSearch("success");
+    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutSuccess");
+    expect(screen.getByRole("status")).toBeInTheDocument();
+    expectIdenticalFits(expected);
+  });
+
+  it("?checkout=cancelled renders the cancelled status line AND the identical fit cards", async () => {
+    const expected = await renderWithSearch("cancelled");
+    expect(screen.getByTestId("flow-results-return-state")).toHaveTextContent("checkoutCancelled");
+    expectIdenticalFits(expected);
+  });
+
+  it("an unrecognised value renders no status line; the fits are unchanged", async () => {
+    const expected = await renderWithSearch("bogus");
+    expect(screen.queryByTestId("flow-results-return-state")).not.toBeInTheDocument();
+    expectIdenticalFits(expected);
+  });
+
+  it("a return param never changes which redirect guard fires (invalid payload still redirects to step 1)", async () => {
+    await expect(
+      Page({
+        params: Promise.resolve({ locale: "en", slug: SLUG, payload: "not-a-valid-payload!!!" }),
+        searchParams: Promise.resolve({ checkout: "success" }),
+      }),
+    ).rejects.toThrow(`NEXT_REDIRECT:/en/flows/${SLUG}`);
+    expect(mockGet).not.toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/flows/[slug]/results/[payload]/page.tsx

@@ -0,0 +1,114 @@
+/**
+ * /[locale]/flows/[slug]/results/[payload] — the cold-load results route
+ * (#4770).
+ *
+ * Server-fetches the flow config exactly as `flows/[slug]/page.tsx` does
+ * (`flows.get(slug)`, always dynamically rendered — the config is DB-backed
+ * live data).
+ * Decodes the versioned, answers-only permalink (`decodePermalink`,
+ * `@working-theory/validation`) and `redirect()`s to `/[locale]/flows/[slug]`
+ * — step 1, never an error page — on ANY of: an invalid payload (FR6), a
+ * stale-version payload (FR6), a payload whose own `flowSlug` does not match
+ * this route's `[slug]` (D2/FR6), or a served flow that is not a
+ * recommending register (D8 — `mode !== "recommending" || !offers`, checked
+ * against the field `recommend()` is about to be handed rather than
+ * inferring the compiler's five-keys-travel-together guarantee).
+ *
+ * On a valid payload against a recommending flow, renders `ResultsClient`,
+ * which runs the already-shipped pure `recommend()` in the browser and
+ * renders the returned fits through the existing `RecommendationCard`
+ * (D10 — a minimal render; Epic #4759 recomposes it against the LOCKED
+ * DESIGN.md).
+ *
+ * `?checkout=success|cancelled` (#4842 FR7/D6) is read only after every
+ * guard above and rendered by `ResultsClient` as a one-line status over the
+ * identical recommendation.
+ */
+import { flows } from "@working-theory/api-client";
+import {
+  decodePermalink,
+  resolveLocalizedString,
+} from "@working-theory/validation";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import type { ReactElement } from "react";
+
+import type { ResultsReturnState } from "./ResultsClient";
+import { ResultsClient } from "./ResultsClient";
+
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string; payload: string }>;
+  /** FR7 (#4842) — `?checkout=success|cancelled` after Stripe's hosted page. */
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}
+
+/**
+ * D6 (#4842) — the return micro-state, validated against the two literals;
+ * anything else (absent, an array, an unknown value) renders no status line.
+ */
+function resolveReturnState(
+  value: string | string[] | undefined,
+): ResultsReturnState | undefined {
+  return value === "success" || value === "cancelled" ? value : undefined;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, slug, payload } = await params;
+
+  const decoded = decodePermalink(payload);
+  if (!decoded.ok || decoded.value.flowSlug !== slug) return {};
+
+  const res = await flows.get(slug);
+  if (!res.ok) return {};
+
+  const { recommendation } = res.body;
+  if (!recommendation) return {};
+
+  return {
+    title: resolveLocalizedString(
+      recommendation.copy.title,
+      locale,
+      res.body.defaultLocale,
+    ),
+  };
+}
+
+export default async function Page({
+  params,
+  searchParams,
+}: Props): Promise<ReactElement> {
+  const { locale, slug, payload } = await params;
+
+  const decoded = decodePermalink(payload);
+  if (!decoded.ok) {
+    redirect(`/${locale}/flows/${slug}`);
+  }
+  if (decoded.value.flowSlug !== slug) {
+    redirect(`/${locale}/flows/${slug}`);
+  }
+
+  const res = await flows.get(slug);
+  if (!res.ok) {
+    redirect(`/${locale}/flows/${slug}`);
+  }
+  if (res.body.mode !== "recommending" || res.body.offers === undefined) {
+    redirect(`/${locale}/flows/${slug}`);
+  }
+
+  // FR7 — read AFTER every redirect guard above, so a return param never
+  // changes which guard fires or where it sends the visitor.
+  const returnState = resolveReturnState((await searchParams)?.checkout);
+
+  return (
+    <ResultsClient
+      config={res.body}
+      locale={locale}
+      answers={decoded.value.answers}
+      slug={slug}
+      payload={payload}
+      {...(returnState !== undefined ? { returnState } : {})}
+    />
+  );
+}

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

@@ -0,0 +1,52 @@
+/**
+ * /[locale]/flows/[slug]/start — the flow half of the two-route tool
+ * (#5053 D3/D5). Moved here from `../page.tsx`, which is now the indexed
+ * landing; the fetch, the 404-on-`!res.ok` and the dynamic rendering are
+ * unchanged from #3957 D8.
+ *
+ * `flowRouteMetadata` (`@working-theory/metadata`) supplies `noindex,
+ * follow` — the whole point of D4 is that this route does NOT write the
+ * robots value, it gets it from what it mounts. `follow`, not `nofollow`:
+ * the links out of a flow still carry.
+ */
+import { flows } from "@working-theory/api-client";
+import { flowRouteMetadata } from "@working-theory/metadata";
+import { resolveLocalizedString } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import type { ReactElement } from "react";
+
+import { FlowStepperClient } from "../FlowStepperClient";
+
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const res = await flows.get(slug);
+  if (!res.ok) return flowRouteMetadata();
+
+  const firstStep = res.body.steps[0];
+  if (!firstStep) return flowRouteMetadata();
+
+  return flowRouteMetadata({
+    title: resolveLocalizedString(
+      firstStep.copy.title,
+      locale,
+      res.body.defaultLocale,
+    ),
+  });
+}
+
+export default async function Page({ params }: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const res = await flows.get(slug);
+  if (!res.ok) {
+    notFound();
+  }
+
+  return <FlowStepperClient config={res.body} locale={locale} slug={slug} />;
+}

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

@@ -1,7 +1,12 @@
 // 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 {
+  getMdxSlugs,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
 interface Props {
@@ -9,6 +14,13 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "HowTo", slug, locale });
+}
+
 export async function generateStaticParams({
   params,
 }: {

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

@@ -58,7 +58,7 @@ describe("how-to/[slug] — snapshot regression", () => {
     });
     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
+     "<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":{"@context":"https://schema.org","@type":"HowTo","name":"Deploy AILK to Vercel","description":"Step-by-step guide to deploying AI Launch Kit on 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) min-h-(--control-height-big) 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) min-h-(--control-height-big) 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>"
     `);

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

@@ -2,9 +2,11 @@
 // via next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs trigger 404.
 import {
   renderPage,
+  renderPageMetadata,
   getMdxSource as defaultGetMdxSource,
   getMdxSlugs,
 } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import type { ReactElement } from "react";
 
@@ -13,6 +15,13 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "Integration", slug, locale });
+}
+
 export async function generateStaticParams({
   params,
 }: {