create-ailk 0.3.0 → 0.5.0

package/templates/apps/web/app/[locale]/(authed)/leads/components/LeadsTable.tsx

@@ -0,0 +1,137 @@
+/**
+ * LeadsTable — the lead inbox's paginated table (#5678 Deliverable 2).
+ *
+ * App-local composition: `Table` primitive + `EmptyState` when there are no
+ * rows + a single forward-only "next page" link. Every string is
+ * caller-supplied (translatable) and every value arrives pre-formatted — this
+ * component formats nothing itself (Rule 10: formatting happens in the page,
+ * via `../../waitlist/format.js`).
+ *
+ * Deliberately NOT an import of the structurally identical
+ * `../../waitlist/components/SignupsTable.tsx`, despite sharing its shape:
+ * that file is an `ownedFiles` entry of a PAID module slice
+ * (`packages/create-ailk/src/module-architecture.ts` — the
+ * `apps/web/app/[locale]/(authed)/waitlist/**` block, which belongs to the
+ * `multi-tenant` slice, not `signal-collectors` as the card's brief had it;
+ * verified at HEAD, the `SignupsTable.tsx` entry is on line 1035 inside
+ * `MODULE_SLICES["multi-tenant"].ownedFiles`). A scaffold built without that
+ * module has no such file. Lead capture — and therefore this inbox — ships at
+ * every level including Free, so importing it would make a base-tier page
+ * depend on a file the strip removes. The pattern is reused; the file is not.
+ *
+ * `EmptyState`-when-empty follows `ExperimentsTable`'s idiom rather than
+ * `SignupsTable`'s (which always renders a table): a headerless table is not
+ * an acceptable empty state for a page whose whole body is this one table.
+ *
+ * `ForbiddenState` and `format.ts`, by contrast, are safe to import: both are
+ * deliberately EXCLUDED from that same `ownedFiles` list (see the module
+ * file's own ESCALATION comment above the list — they are shared with the
+ * Free `(authed)/account` page, which already imports both), so both survive
+ * in a build without the paid slice.
+ */
+
+import type { LeadInboxRow } from "@working-theory/api-client";
+import {
+  EmptyState,
+  Link,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@working-theory/ui/primitives";
+import type { ReactElement } from "react";
+
+export interface LeadsTableLabels {
+  caption: string;
+  columnName: string;
+  columnEmail: string;
+  columnSource: string;
+  columnCreated: string;
+  unavailable: string;
+  next: string;
+  emptyHeadline: string;
+  emptyDescription: string;
+}
+
+export interface LeadsTableProps {
+  locale: string;
+  /**
+   * `created` is pre-formatted by the caller (Rule 10 — this component never
+   * formats a value itself). `lead.name` is `null` when the capture form took
+   * no name; it renders `labels.unavailable`, the same sentinel handling the
+   * caller's own `format.ts` uses elsewhere on the authed surface.
+   *
+   * There is no page/URL column: the `Lead` record persists no page or
+   * referrer field, so `source` is the only capture-origin signal.
+   */
+  rows: Array<{
+    lead: LeadInboxRow;
+    created: string;
+  }>;
+  nextCursor: string | null;
+  labels: LeadsTableLabels;
+}
+
+function buildNextHref(locale: string, nextCursor: string): string {
+  const params = new URLSearchParams();
+  params.set("cursor", nextCursor);
+  return `/${locale}/leads?${params.toString()}`;
+}
+
+export function LeadsTable({
+  locale,
+  rows,
+  nextCursor,
+  labels,
+}: LeadsTableProps): ReactElement {
+  if (rows.length === 0) {
+    return (
+      <div data-testid="leads-table-empty">
+        <EmptyState headline={labels.emptyHeadline} description={labels.emptyDescription} />
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="leads-table-wrapper">
+      <Table data-testid="leads-table">
+        <TableCaption>{labels.caption}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead scope="col">{labels.columnName}</TableHead>
+            <TableHead scope="col">{labels.columnEmail}</TableHead>
+            <TableHead scope="col">{labels.columnSource}</TableHead>
+            <TableHead scope="col">{labels.columnCreated}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map(({ lead, created }) => (
+            <TableRow key={lead.id} data-testid={`leads-table-row-${lead.id}`}>
+              <TableCell>{lead.name ?? labels.unavailable}</TableCell>
+              <TableCell>{lead.email}</TableCell>
+              <TableCell>{lead.source}</TableCell>
+              <TableCell>{created}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {nextCursor !== null ? (
+        <div className="mt-3 flex justify-end">
+          <Link
+            href={buildNextHref(locale, nextCursor)}
+            data-testid="leads-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)/leads/page.tsx

@@ -0,0 +1,111 @@
+/**
+ * /[locale]/leads — the signed-in site owner's lead inbox (#5678).
+ *
+ * RSC: reads `GET /v1/leads` through `@working-theory/api-client`'s `leads`
+ * namespace, forwarding the caller's cookie session
+ * (`../../../../lib/server-api`, #4665 D9) — never a hand-rolled `fetch`
+ * (`architecture.yaml`: `apps/web` may not reach `apps/api` directly). The
+ * route is owner-scoped server-side, so this page passes no site or workspace
+ * argument; the only query it owns is the forward-only `?cursor=`.
+ *
+ * A 401/403 renders `ForbiddenState` (no leak of why — the same shape the
+ * waitlist comparison page uses); every other error (a 400 on a malformed
+ * cursor, a 500) rethrows to the route's error boundary rather than being
+ * swallowed.
+ */
+
+import { leads, type LeadInboxPage } from "@working-theory/api-client";
+import { PageHeader } from "@working-theory/ui/blocks";
+import { Container, Heading, Text } from "@working-theory/ui/primitives";
+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 { ForbiddenState } from "../waitlist/components/ForbiddenState";
+import { formatDateTime } from "../waitlist/format";
+
+import { LeadsTable } from "./components/LeadsTable";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ cursor?: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "leadsInbox" });
+  return { title: t("title"), description: t("description") };
+}
+
+export default async function LeadsInboxPage({
+  params,
+  searchParams,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const { cursor } = await searchParams;
+  const t = await getTranslations({ locale, namespace: "leadsInbox" });
+
+  const init = await forwardedCookieInit();
+
+  let page: LeadInboxPage;
+  try {
+    page = await unwrapApiResult(leads.list(cursor ? { cursor } : {}, init));
+  } catch (err) {
+    if (err instanceof ApiError && (err.status === 401 || err.status === 403)) {
+      return (
+        <ForbiddenState
+          headline={t("forbiddenHeadline")}
+          description={t("forbiddenDescription")}
+        />
+      );
+    }
+    // A 400 means the `?cursor=` in the URL did not resolve — it was typed,
+    // or it is a stale next-page link whose row has since gone. That is a bad
+    // address, not a broken page, so fall back to the first page rather than
+    // letting it reach the route's error boundary (PR #5705 security review,
+    // finding 3). A 400 from the FIRST-page read has no cursor to blame and
+    // would be a genuine contract break, so it is rethrown.
+    if (err instanceof ApiError && err.status === 400 && cursor) {
+      page = await unwrapApiResult(leads.list({}, init));
+    } else {
+      throw err;
+    }
+  }
+
+  const rows = page.items.map((lead) => ({
+    lead,
+    created: formatDateTime(lead.createdAt, locale),
+  }));
+
+  return (
+    <main className="min-h-screen bg-surface text-fg" data-testid="leads-inbox-page">
+      <PageHeader />
+      <Container className="flex flex-col gap-6 py-section">
+        <div>
+          <Heading level={1}>{t("title")}</Heading>
+          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
+            {t("description")}
+          </Text>
+        </div>
+
+        <LeadsTable
+          locale={locale}
+          rows={rows}
+          nextCursor={page.nextCursor}
+          labels={{
+            caption: t("table.caption"),
+            columnName: t("table.columnName"),
+            columnEmail: t("table.columnEmail"),
+            columnSource: t("table.columnSource"),
+            columnCreated: t("table.columnCreated"),
+            unavailable: t("table.unavailable"),
+            next: t("table.next"),
+            emptyHeadline: t("table.emptyHeadline"),
+            emptyDescription: t("table.emptyDescription"),
+          }}
+        />
+      </Container>
+    </main>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/sign-in-gate.tsx

@@ -4,7 +4,7 @@
  * SignInGate — the `(authed)` group's own front door (#4665 D9).
  *
  * This gate composes the shipped `AuthPanel` section directly (so the
- * dashboard is reachable in place, unlike `apps-paid/workspace`, which redirects
+ * dashboard is reachable in place, unlike `apps-paid/admin`, which redirects
  * to "/" on no session) and ALSO links to `apps/web`'s own `/sign-in` page
  * (#4984) carrying `?next=<pathname>`, so a visitor who prefers the full
  * sign-in surface lands back on the exact page they requested.

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

@@ -0,0 +1,111 @@
+/**
+ * Tests for the generic `[slug]` content route (#5469 D2).
+ *
+ * - Populated: getMdxSource returns a LandingPage source → renderPage
+ *   sections mode composes the page (JSON-LD + SectionRenderer), no
+ *   notFound() call, and the frontmatter `schema` override reaches the
+ *   emitted JSON-LD (the escape hatch, proven with a `HowTo` fixture).
+ * - Unknown slug: getMdxSource returns null → renderPage's own detail-route
+ *   branch (no translationsNamespace passed) calls notFound().
+ * - Resolution: the route asks the adapter for exactly `LandingPage` — the
+ *   one content type it serves.
+ */
+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");
+  }),
+}));
+
+jest.mock("@working-theory/ui", () => ({
+  Heading: ({
+    children,
+    level,
+  }: {
+    children: React.ReactNode;
+    level: number;
+  }): React.ReactElement =>
+    React.createElement(`h${level}`, null, children),
+  SectionRenderer: ({ sections }: { sections: unknown[] }) =>
+    React.createElement("div", {
+      "data-testid": "section-renderer",
+      "data-section-count": String(sections.length),
+    }),
+}));
+
+import { notFound } from "next/navigation";
+import SlugPage from "../page";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+function makeSource(slug: string, schema?: Record<string, unknown>) {
+  return {
+    frontmatter: {
+      type: "LandingPage" as const,
+      slug,
+      title: `Title for ${slug}`,
+      description: `Description for ${slug}`,
+      ...(schema !== undefined && { schema }),
+      sections: [
+        {
+          id: "hero",
+          type: "hero" as const,
+          data: { headline: `Title for ${slug}` },
+        },
+      ],
+    },
+    body: "",
+  };
+}
+
+describe("[slug] — the generic LandingPage content route", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("resolves the slug against LandingPage and renders through renderPage sections mode", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(makeSource("how-it-works"));
+
+    const element = await SlugPage({
+      params: Promise.resolve({ locale: "en", slug: "how-it-works" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+
+    expect(getMdxSource).toHaveBeenCalledWith("LandingPage", "how-it-works", "en");
+    expect(container.querySelector("[data-testid='section-renderer']")).not.toBeNull();
+    expect(container.querySelector("script[type='application/ld+json']")).not.toBeNull();
+    expect(mockNotFound).not.toHaveBeenCalled();
+  });
+
+  it("emits the frontmatter `schema` override in the JSON-LD (the HowTo escape hatch)", async () => {
+    const getMdxSource = jest
+      .fn()
+      .mockResolvedValue(makeSource("how-it-works", { "@type": "HowTo" }));
+
+    const element = await SlugPage({
+      params: Promise.resolve({ locale: "en", slug: "how-it-works" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+
+    const script = container.querySelector("script[type='application/ld+json']");
+    expect(script).not.toBeNull();
+    expect(script?.textContent ?? "").toContain('"HowTo"');
+  });
+
+  it("calls notFound() for a slug with no LandingPage source", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      SlugPage({
+        params: Promise.resolve({ locale: "en", slug: "not-a-page" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,65 @@
+// The one generic content route (#5469 D2). Serves the Free marketing-site
+// template's /how-it-works, /features and /blog teaser — and any other
+// `content/<locale>/LandingPage/<slug>.mdx` a site adds — through exactly the
+// render path the static routes use (`renderPage`, sections mode, JSON-LD
+// from frontmatter — a page's `schema:` override rides the escape hatch,
+// though the structured-data gate only accepts a `WebPage` primary block
+// for a LandingPage, so the Free template's pages set none).
+//
+// Precedence, not gating: Next.js resolves a static segment before a dynamic
+// one, so this route never shadows a scaffolded route directory. That is what
+// lets /blog degrade — keyless there is no `blog/` directory and the teaser
+// renders here; with the docs-blog module its `blog/[[...slug]]` directory
+// wins and the teaser file is inert (#5469 D3).
+//
+// One content type, not two: `WebPage` is a schema.org @type the registry
+// emits, not a `SchemaOrgType` content key the adapter accepts, so the three
+// pages are `LandingPage` files (the coined slug-keyed landing surface whose
+// builder emits a `WebPage` envelope) — the lesson recorded with #5469
+// (site-template content composition) has the proving lines.
+//
+// Unknown slug → `notFound()` (renderPage's own detail-route branch: no
+// `translationsNamespace` is passed, so a null source 404s rather than
+// rendering an empty-state placeholder).
+//
+// Deliberately NO `generateStaticParams`: the locale layout reads cookies()
+// and headers() (theme, session), so every route under it renders on
+// request. A static-params export would make Next try to prerender this
+// segment and fail any slug outside the build-time list with
+// DYNAMIC_SERVER_USAGE (a 500, not the 404 an unknown slug must get).
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import type { ReactElement } from "react";
+
+// The content type is written as a literal in both renderPage calls below
+// (not a shared constant): `lib/__tests__/structured-data.test.tsx` and
+// tools/lint-check-content-renders.ts read `renderPage({ type: "…" })` off
+// the source to know which content this route emits JSON-LD for.
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  /** Test-only DI override for getMdxSource. Production callers leave undefined. */
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "LandingPage", slug, locale });
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "LandingPage",
+    slug,
+    locale,
+    populatedDescriptionTestId: `${slug}-description`,
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -54,7 +54,7 @@ import {
   type FlowStepperMessages,
   type FlowStepSubmitPayload,
   type FlowStepSubmitResult,
-} from "@working-theory/ui/slices/signal-collectors";
+} from "@working-theory/ui-signal-collectors";
 import type { AeoScoreResult, FlowConfig, FlowState } from "@working-theory/validation";
 import {
   deriveFlags,

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.permalink.test.tsx

@@ -65,7 +65,7 @@ interface MockFlowStepperProps {
 
 let captured: MockFlowStepperProps | undefined;
 
-jest.mock("@working-theory/ui/slices/signal-collectors", () => ({
+jest.mock("@working-theory/ui-signal-collectors", () => ({
   FlowStepper: (props: MockFlowStepperProps) => {
     captured = props;
     return require("react").createElement("div", {

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.test.tsx

@@ -14,10 +14,11 @@
  *       navigates (no `onCompleted` reaches FlowStepper at all); no
  *       `segment` on a `thankYou`-bearing flow resolves to `default`.
  *
- * `@working-theory/ui`'s FlowStepper is mocked as a minimal stub that calls
- * the real `onSubmitStep`/`onCompleted` props it receives — FlowStepper's
- * OWN submission/onCompleted-firing behavior is already covered by its own
- * package test (packages/ui/src/sections/__tests__/FlowStepper.test.tsx);
+ * `@working-theory/ui-signal-collectors`'s FlowStepper is mocked as a minimal
+ * stub that calls the real `onSubmitStep`/`onCompleted` props it receives —
+ * FlowStepper's OWN submission/onCompleted-firing behavior is already covered
+ * by its own package test
+ * (packages-paid/ui-signal-collectors/src/sections/__tests__/FlowStepper.test.tsx);
  * this file is scoped to FlowStepperClient's own responsibility — the
  * Server Action binding and the onCompleted → router.push wiring.
  */
@@ -69,7 +70,7 @@ const PII_PAYLOAD = {
 
 let capturedOnCompleted: MockFlowStepperProps["onCompleted"];
 
-jest.mock("@working-theory/ui/slices/signal-collectors", () => ({
+jest.mock("@working-theory/ui-signal-collectors", () => ({
   FlowStepper: (props: MockFlowStepperProps) => {
     capturedOnCompleted = props.onCompleted;
     async function handleSubmit(): Promise<void> {

package/templates/apps/web/app/[locale]/flows/[slug]/flow.actions.ts

@@ -30,7 +30,7 @@
  */
 
 import { flows } from "@working-theory/api-client";
-import type { FlowStepSubmitResult } from "@working-theory/ui/slices/signal-collectors";
+import type { FlowStepSubmitResult } from "@working-theory/ui-signal-collectors";
 import {
   flowSlugSchema,
   submitFlowStepInputSchema,