create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/(authed)/waitlist/components/SignupsTable.tsx

@@ -0,0 +1,139 @@
+/**
+ * SignupsTable — the comparison view's paginated signups table (#4665 D10).
+ *
+ * App-local composition: `Table` primitive + a "next page" link.
+ *
+ * Deviation from the spec's descriptive composition note ("Pagination (link
+ * form, `?cursor=`)"): the `Pagination` primitive
+ * (`packages/ui/src/primitives/Pagination.tsx`) is built around a
+ * `currentPage`/`totalPages` numeric model — the signups list is
+ * cursor-paginated (`nextCursor: string | null`, D6/D7) with no total-page
+ * count and no `prevCursor` from the server, so `Pagination`'s numeric API
+ * cannot express this list's actual pagination shape. Rather than force-fit
+ * it, this renders a single "next" `Link` (RSC-safe, no client boundary)
+ * when `nextCursor` is present — the honest shape of a forward-only cursor
+ * list. Documented in the PR body.
+ */
+
+import {
+  Link,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@working-theory/ui/primitives";
+import type { WaitlistSignupRow } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+export interface SignupsTableLabels {
+  caption: string;
+  columnEmail: string;
+  columnWaitlist: string;
+  columnSource: string;
+  columnCreated: string;
+  columnTier: string;
+  columnScore: string;
+  unavailable: string;
+  next: string;
+}
+
+export interface SignupsTableProps {
+  locale: string;
+  experimentId: string;
+  waitlist?: string;
+  /**
+   * `created`, `score`, and `tierDisplay` are pre-formatted by the caller
+   * (Rule 10 — this component never formats a value itself); `score: null`
+   * means "not scored" and renders `labels.unavailable`, matching the
+   * caller's own `format.ts` sentinel handling elsewhere on this surface.
+   * `tierDisplay` is `signup.tier` unchanged for every experiment except
+   * `targeting-maturity`, where the caller maps it to its Level label
+   * (`format.ts#targetingMaturityLevel`, D5, AC-5) — `null` renders
+   * `labels.unavailable`, exactly as a raw `signup.tier` of `null` already did.
+   */
+  rows: Array<{
+    signup: WaitlistSignupRow;
+    created: string;
+    score: string | null;
+    tierDisplay: string | null;
+  }>;
+  nextCursor: string | null;
+  labels: SignupsTableLabels;
+}
+
+function buildNextHref(
+  locale: string,
+  experimentId: string,
+  waitlist: string | undefined,
+  nextCursor: string,
+): string {
+  const params = new URLSearchParams();
+  if (waitlist) params.set("waitlist", waitlist);
+  params.set("cursor", nextCursor);
+  return `/${locale}/waitlist/${experimentId}?${params.toString()}`;
+}
+
+export function SignupsTable({
+  locale,
+  experimentId,
+  waitlist,
+  rows,
+  nextCursor,
+  labels,
+}: SignupsTableProps): ReactElement {
+  return (
+    <div data-testid="signups-table-wrapper">
+      <Table data-testid="signups-table">
+        <TableCaption>{labels.caption}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead scope="col">{labels.columnEmail}</TableHead>
+            <TableHead scope="col">{labels.columnWaitlist}</TableHead>
+            <TableHead scope="col">{labels.columnSource}</TableHead>
+            <TableHead scope="col">{labels.columnCreated}</TableHead>
+            <TableHead scope="col">{labels.columnTier}</TableHead>
+            <TableHead scope="col">{labels.columnScore}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map(({ signup, created, score, tierDisplay }) => (
+            <TableRow
+              key={signup.leadId}
+              data-testid={`signups-table-row-${signup.leadId}`}
+            >
+              <TableCell>
+                <Link
+                  href={`/${locale}/waitlist/${experimentId}/signups/${signup.leadId}`}
+                >
+                  {signup.email}
+                </Link>
+              </TableCell>
+              <TableCell>{signup.waitlistKey}</TableCell>
+              <TableCell>{signup.source}</TableCell>
+              <TableCell>{created}</TableCell>
+              <TableCell>{tierDisplay ?? labels.unavailable}</TableCell>
+              <TableCell>{score ?? labels.unavailable}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {nextCursor !== null ? (
+        <div className="mt-3 flex justify-end">
+          <Link
+            href={buildNextHref(locale, experimentId, waitlist, nextCursor)}
+            data-testid="signups-table-next"
+            // 24px hit-area floor (Rule 14) — a bare inline link's
+            // line-height box falls short on its own (#4665, caught on the
+            // worker's own re-inspection of the render evidence).
+            className="inline-flex min-h-6 items-center px-2"
+          >
+            {labels.next}
+          </Link>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/waitlist/components/WaitlistComparisonTabs.tsx

@@ -0,0 +1,85 @@
+/**
+ * WaitlistComparisonTabs — the comparison view's per-waitlist tab strip
+ * (#4665 D10): one tab per waitlist, each showing a by-source
+ * MetricComparisonTable + one DistributionList per question.
+ *
+ * Composes the Tabs primitive (a client boundary — `packages/ui/src/
+ * primitives/Tabs.tsx` carries its own "use client") with server-rendered
+ * children; this file itself holds no hooks and stays a plain RSC-composable
+ * component.
+ */
+
+import {
+  DistributionList,
+  MetricComparisonTable,
+} from "@working-theory/ui/blocks";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@working-theory/ui/primitives";
+import type { ReactElement } from "react";
+
+export interface WaitlistTab {
+  key: string;
+  label: string;
+  bySourceCaption: string;
+  /** Header label for the leading (source-name) row-header column. */
+  bySourceRowHeaderLabel: string;
+  bySourceColumns: Array<{ key: string; label: string }>;
+  bySourceRows: Array<{
+    key: string;
+    label: string;
+    cells: Record<string, { display: string; value: number | null }>;
+  }>;
+  distributions: Array<{
+    questionId: string;
+    title: string;
+    answered: number;
+    answeredLabel: string;
+    emptyLabel: string;
+    items: Array<{ label: string; count: number; share: number; display: string }>;
+  }>;
+}
+
+export interface WaitlistComparisonTabsProps {
+  tabs: WaitlistTab[];
+}
+
+export function WaitlistComparisonTabs({
+  tabs,
+}: WaitlistComparisonTabsProps): ReactElement | null {
+  if (tabs.length === 0) return null;
+
+  return (
+    <Tabs defaultValue={tabs[0]!.key} data-testid="waitlist-comparison-tabs">
+      <TabsList>
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.key} value={tab.key}>
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.key} value={tab.key}>
+          <div className="flex flex-col gap-6">
+            <MetricComparisonTable
+              caption={tab.bySourceCaption}
+              columns={tab.bySourceColumns}
+              rows={tab.bySourceRows}
+              rowHeaderLabel={tab.bySourceRowHeaderLabel}
+            />
+            <div className="flex flex-col gap-4">
+              {tab.distributions.map((distribution) => (
+                <DistributionList
+                  key={distribution.questionId}
+                  title={distribution.title}
+                  answered={distribution.answered}
+                  answeredLabel={distribution.answeredLabel}
+                  items={distribution.items}
+                  emptyLabel={distribution.emptyLabel}
+                />
+              ))}
+            </div>
+          </div>
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/waitlist/components/status-badges.tsx

@@ -0,0 +1,67 @@
+/**
+ * Shared status/mode chip mapping for the waitlist operator dashboard
+ * (#4665 D10) — used by ExperimentsTable's list rows and the comparison
+ * view's DetailHeader typeBadge.
+ *
+ * Composes the Badge primitive (visible text + a semantic variant), not the
+ * icon-only StatusBadge primitive — StatusBadge renders a decorative glyph
+ * with an `aria-label` and carries no visible text
+ * (`packages/ui/src/primitives/StatusBadge.tsx`), so it cannot satisfy AC1's
+ * "status visible" requirement on its own. This mirrors the established
+ * `PaymentStatusBadge` block precedent (`packages/ui/src/blocks/
+ * PaymentStatusBadge.tsx`): a labeled status chip is a `Badge` with a status
+ * → variant map, not `StatusBadge`.
+ */
+
+import { Badge, type BadgeProps } from "@working-theory/ui/primitives";
+import type { WaitlistMode, WaitlistStatus } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const STATUS_VARIANT: Record<WaitlistStatus, BadgeProps["variant"]> = {
+  live: "success",
+  closed: "muted",
+  draft: "outline",
+};
+
+const MODE_VARIANT: Record<WaitlistMode, BadgeProps["variant"]> = {
+  "lead-capture": "secondary",
+  qualifying: "info",
+  paid: "featured",
+  // #4767 — the register's fourth mode; the engine/UI that reads it are
+  // sibling children of Epic #4758 (out of scope here). A placeholder
+  // variant only, so `Record<WaitlistMode, …>` stays exhaustive.
+  recommending: "success",
+};
+
+export function ExperimentStatusBadge({
+  status,
+  label,
+}: {
+  status: WaitlistStatus;
+  label: string;
+}): ReactElement {
+  return (
+    <Badge
+      variant={STATUS_VARIANT[status]}
+      size="sm"
+      role="status"
+      data-testid="experiment-status-badge"
+    >
+      {label}
+    </Badge>
+  );
+}
+
+export function ExperimentModeBadge({
+  mode,
+  label,
+}: {
+  mode: WaitlistMode;
+  label: string;
+}): ReactElement {
+  return (
+    <Badge variant={MODE_VARIANT[mode]} size="sm" data-testid="experiment-mode-badge">
+      {label}
+    </Badge>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/waitlist/format.ts

@@ -0,0 +1,111 @@
+/**
+ * Display formatting for the waitlist operator dashboard (#4665 D4/D10, UI).
+ *
+ * The ONE place a number, rate, or date becomes a string for this surface
+ * (Rule 10 — formatting happens in `apps/web`, never inside a
+ * `packages/ui/src/blocks/*` component). Every formatter here is
+ * locale-aware; the caller supplies the active `[locale]` route segment.
+ *
+ * `null` is D4's "unavailable" sentinel (an unscored / non-qualifying
+ * experiment) — rendered as an em dash, never `0` or an empty string, so an
+ * unscored row is never misread as a zero row.
+ */
+
+import { formatNumber, formatPercent } from "@working-theory/web-i18n";
+
+/** D4/D9's "no value" rendering — never `0`, never blank. */
+export const UNAVAILABLE = "—";
+
+/** Format a raw count (signups, tier counts, question `answered`). */
+export function formatCount(value: number, locale: string): string {
+  return formatNumber(value, locale);
+}
+
+/**
+ * Format a rate/share (0–1) as a percentage, or the unavailable sentinel when
+ * `null` (D4 — `qualified`/`qualificationRate` are `null` for a
+ * `lead-capture` experiment; a distribution `share` is always a number).
+ */
+export function formatRate(value: number | null, locale: string): string {
+  if (value === null) return UNAVAILABLE;
+  return formatPercent(value, locale);
+}
+
+/** Format an ISO-8601 datetime for display (list/comparison/drill-down). */
+export function formatDateTime(iso: string, locale: string): string {
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(iso));
+}
+
+// ─── FEAT-074 U4a (#4715) — the targeting-maturity Level display ────────────
+//
+// Presentation-only mapping (spec D5): `level_3` -> the integer `3`,
+// `level_0` -> `0` (the Gate). Scoped to the ONE experiment this Level
+// vocabulary applies to — every other experiment's tier renders unchanged
+// (AC-5's "a non-targeting experiment renders exactly as before"). Pure
+// parsing only, no i18n — the CALLER (the page, which already owns every
+// `getTranslations` call on this surface) turns the returned number into
+// the "Level N" / Gate string via its own `t()`.
+
+/** The one experiment this Level vocabulary applies to. */
+export const TARGETING_MATURITY_EXPERIMENT_KEY = "targeting-maturity";
+
+const LEVEL_TIER_RE = /^level_(\d+)$/;
+
+/**
+ * The Level number for a `targeting-maturity` `level_N` tier — `0` for the
+ * Gate, `N` otherwise. `null` for any other experiment, a `null` tier, or an
+ * unrecognized tier shape — the caller falls back to the raw tier /
+ * `labels.unavailable` unchanged (D5).
+ */
+export function targetingMaturityLevel(
+  tier: string | null,
+  experimentKey: string,
+): number | null {
+  if (experimentKey !== TARGETING_MATURITY_EXPERIMENT_KEY || tier === null) return null;
+  const match = LEVEL_TIER_RE.exec(tier);
+  return match ? Number(match[1]) : null;
+}
+
+/**
+ * The `ref(<name>)` def names that DECIDED the matched tier, for the
+ * ScoreTrace drill-down's "deciding factors" section (AC-5) — every
+ * `kind: "predicate"` entry in a `RuleTraceEntry[]`-shaped `ruleTrace`
+ * whose `tier` equals the signup's own tier AND whose `result` is `true`,
+ * with every `ref(...)` segment in its `path` extracted (there is no
+ * separate `def` field — `evaluatePredicateNode`'s own path-building embeds
+ * each traversed def as `ref(<name>)`). Duck-typed against `unknown`
+ * (`ruleTrace` is `z.unknown()` at this boundary — `waitlist-dashboard.ts`'s
+ * schema comment), mirroring the identical extraction the backend's
+ * `playbook-compile.ts` uses for its Level-1 loop-back framing — this is
+ * the read-side counterpart, not a fork of it (no shared module: the two
+ * sides are in different apps, which may not cross-import — `architecture.yaml`).
+ * `[]` for any other experiment (AC-5's non-targeting byte-unchanged floor).
+ */
+export function decidingDefsFor(
+  tier: string | null,
+  ruleTrace: unknown,
+  experimentKey: string,
+): string[] {
+  if (experimentKey !== TARGETING_MATURITY_EXPERIMENT_KEY || tier === null) return [];
+  if (!Array.isArray(ruleTrace)) return [];
+  const seen = new Set<string>();
+  const names: string[] = [];
+  for (const entry of ruleTrace) {
+    if (typeof entry !== "object" || entry === null) continue;
+    const e = entry as Record<string, unknown>;
+    if (e["kind"] !== "predicate" || e["tier"] !== tier || e["result"] !== true) continue;
+    const path = e["path"];
+    if (typeof path !== "string") continue;
+    for (const m of path.matchAll(/ref\(([^)]+)\)/g)) {
+      const name = m[1]!;
+      if (!seen.has(name)) {
+        seen.add(name);
+        names.push(name);
+      }
+    }
+  }
+  return names;
+}

package/templates/apps/web/app/[locale]/(authed)/waitlist/page.tsx

@@ -0,0 +1,179 @@
+/**
+ * /[locale]/waitlist — the operator dashboard's list + rollup view
+ * (#4665 D10, AC1).
+ *
+ * RSC: reads `GET /v1/waitlist-experiments` through
+ * `@working-theory/api-client`'s `waitlistExperiments.list`, forwarding the
+ * caller's cookie session (`../../../../lib/server-api.js`, D9). A 401/403
+ * renders `ForbiddenState` (no leak of why — §2.2 Security); every other
+ * error rethrows to the route's error boundary.
+ */
+
+import { waitlistExperiments } from "@working-theory/api-client";
+import { PageHeader } from "@working-theory/ui/blocks";
+import { Container, Heading, Text } from "@working-theory/ui/primitives";
+import type { WaitlistMode, WaitlistStatus } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { ApiError, forwardedCookieInit, unwrapApiResult } from "../../../../lib/server-api";
+
+import { ExperimentsTable } from "./components/ExperimentsTable";
+import { ForbiddenState } from "./components/ForbiddenState";
+import { OfferFunnelTable } from "./components/OfferFunnelTable";
+import { RollupTicker } from "./components/RollupTicker";
+import { formatCount, formatDateTime, formatRate } from "./format";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard.list" });
+  return { title: t("title"), description: t("description") };
+}
+
+export default async function WaitlistListPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard" });
+
+  let data;
+  try {
+    data = await unwrapApiResult(waitlistExperiments.list(await forwardedCookieInit()));
+  } catch (err) {
+    if (err instanceof ApiError && (err.status === 401 || err.status === 403)) {
+      return (
+        <ForbiddenState
+          headline={t("common.forbiddenHeadline")}
+          description={t("common.forbiddenDescription")}
+        />
+      );
+    }
+    throw err;
+  }
+
+  const statusLabels: Record<WaitlistStatus, string> = {
+    live: t("status.live"),
+    closed: t("status.closed"),
+    draft: t("status.draft"),
+  };
+  const modeLabels: Record<WaitlistMode, string> = {
+    "lead-capture": t("mode.lead-capture"),
+    qualifying: t("mode.qualifying"),
+    paid: t("mode.paid"),
+    // #4767 — the register's fourth mode; the engine/UI that reads it are
+    // sibling children of Epic #4758 (out of scope here). A placeholder
+    // label only, so `Record<WaitlistMode, …>` stays exhaustive.
+    recommending: t("mode.recommending"),
+  };
+
+  const rows = data.experiments.map((experiment) => ({
+    experiment,
+    raw: formatCount(experiment.counts.raw, locale),
+    qualified:
+      experiment.counts.qualified === null
+        ? t("common.unavailable")
+        : formatCount(experiment.counts.qualified, locale),
+    rate: formatRate(experiment.counts.qualificationRate, locale),
+    updated: formatDateTime(experiment.updatedAt, locale),
+  }));
+
+  // #4839 — one per-offer funnel per recommending experiment (the register's
+  // `offers[]` order), rendered under the experiments table.
+  const offerFunnels = data.experiments.flatMap((experiment) =>
+    experiment.counts.offers
+      ? [
+          {
+            experimentId: experiment.id,
+            experimentKey: experiment.key,
+            rows: experiment.counts.offers.map((offer) => ({
+              offerKey: offer.offerKey,
+              recommended: formatCount(offer.recommended, locale),
+              saved: formatCount(offer.saved, locale),
+              checkedOut: formatCount(offer.checkedOut, locale),
+            })),
+          },
+        ]
+      : [],
+  );
+  const offerLabels = {
+    captionPrefix: t("list.offers.captionPrefix"),
+    columnOffer: t("list.offers.columnOffer"),
+    columnRecommended: t("list.offers.columnRecommended"),
+    columnSaved: t("list.offers.columnSaved"),
+    columnCheckedOut: t("list.offers.columnCheckedOut"),
+  };
+
+  return (
+    <main className="min-h-screen bg-surface text-fg" data-testid="waitlist-list-page">
+      <PageHeader />
+      <Container className="flex flex-col gap-6 py-section">
+        <div>
+          <Heading level={1}>{t("list.title")}</Heading>
+          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
+            {t("list.description")}
+          </Text>
+        </div>
+
+        <RollupTicker
+          ariaLabel={t("list.rollupAriaLabel")}
+          labels={{
+            live: t("list.rollup.live"),
+            closed: t("list.rollup.closed"),
+            draft: t("list.rollup.draft"),
+            raw: t("list.rollup.raw"),
+            qualified: t("list.rollup.qualified"),
+            rate: t("list.rollup.rate"),
+            sites: t("list.rollup.sites"),
+          }}
+          values={{
+            live: formatCount(data.rollup.experiments.live, locale),
+            closed: formatCount(data.rollup.experiments.closed, locale),
+            draft: formatCount(data.rollup.experiments.draft, locale),
+            raw: formatCount(data.rollup.raw, locale),
+            qualified:
+              data.rollup.qualified === null
+                ? t("common.unavailable")
+                : formatCount(data.rollup.qualified, locale),
+            rate: formatRate(data.rollup.qualificationRate, locale),
+            ...(data.scope === "all"
+              ? { sites: formatCount(data.rollup.sites, locale) }
+              : {}),
+          }}
+        />
+
+        <ExperimentsTable
+          locale={locale}
+          rows={rows}
+          labels={{
+            caption: t("list.table.caption"),
+            columnKey: t("list.table.columnKey"),
+            columnMode: t("list.table.columnMode"),
+            columnStatus: t("list.table.columnStatus"),
+            columnWaitlists: t("list.table.columnWaitlists"),
+            columnRaw: t("list.table.columnRaw"),
+            columnQualified: t("list.table.columnQualified"),
+            columnRate: t("list.table.columnRate"),
+            columnUpdated: t("list.table.columnUpdated"),
+            emptyHeadline: t("list.table.emptyHeadline"),
+            emptyDescription: t("list.table.emptyDescription"),
+            statusLabel: (status) => statusLabels[status as WaitlistStatus],
+            modeLabel: (mode) => modeLabels[mode as WaitlistMode],
+          }}
+        />
+
+        {offerFunnels.map((funnel) => (
+          <OfferFunnelTable
+            key={funnel.experimentId}
+            experimentId={funnel.experimentId}
+            experimentKey={funnel.experimentKey}
+            rows={funnel.rows}
+            labels={offerLabels}
+          />
+        ))}
+      </Container>
+    </main>
+  );
+}

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

@@ -4,8 +4,10 @@ import type {
   getMdxSource as defaultGetMdxSource,
   getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
 import {
-  renderPage
+  renderPage,
+  renderPageMetadata
 } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
 interface Props {
@@ -14,6 +16,13 @@ interface Props {
   getPageSections?: typeof defaultGetPageSections;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({ type: "AboutPage", slug: "about", locale });
+}
+
 export default async function Page({
   params,
   getMdxSource,

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

@@ -6,7 +6,7 @@
  * `docsPageJsonLd` builder is exported from `@working-theory/fumadocs-schema`.
  */
 import { blogListJsonLd, blogPostingJsonLd } from "@working-theory/fumadocs-schema";
-import { JsonLdScript } from "@working-theory/page-renderer";
+import { JsonLdScript, emptyStateVisible } from "@working-theory/page-renderer";
 import { BlogList, BlogPost } from "@working-theory/ui";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -144,6 +144,11 @@ export default async function BlogRoute(
   });
 
   if (pages.length === 0) {
+    // #4154: uniform with every other contentless surface — the empty-blog
+    // placeholder is an authoring affordance, so it renders outside production
+    // and 404s inside it rather than serving a stock page to a visitor.
+    if (!emptyStateVisible()) notFound();
+
     return (
       <>
         <JsonLdScript data={indexJsonLd} />

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

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