create-ailk 0.1.0 → 0.2.0

package/templates/apps/web/app/[locale]/(authed)/waitlist/__tests__/signup.test.tsx

@@ -0,0 +1,179 @@
+/**
+ * Tests for the operator dashboard's signup drill-down view (#4665 D10, AC3).
+ *
+ * Covers:
+ *   1. Renders answers, tier, score, categoryScores, and ruleTrace (JSON)
+ *      when a WaitlistScore row exists.
+ *   2. Renders "not scored" EmptyState when score is null.
+ *   3. Calls notFound() on a 404.
+ *   4. Renders ForbiddenState on a 401/403.
+ */
+import { render, screen } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: jest.fn().mockImplementation(async () => (key: string) => `copy:${key}`),
+}));
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+}));
+
+const mockSignup = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistExperiments: { signup: (...args: unknown[]) => mockSignup(...args) },
+}));
+
+import Page from "../[experimentId]/signups/[leadId]/page";
+
+const SCORED_DETAIL = {
+  leadId: "lead_1",
+  experimentId: "wlexp_1",
+  experimentKey: "early-access",
+  waitlistKey: "main",
+  email: "a@example.com",
+  createdAt: "2026-08-15T00:00:00.000Z",
+  source: "google",
+  answers: [{ questionId: "q1", prompt: { en: "Do you use a CRM?" }, value: "yes" }],
+  score: {
+    tier: "qualified",
+    score: 87,
+    categoryScores: { fit: 40, intent: 47 },
+    ruleTrace: { matched: ["rule_1"] },
+    updatedAt: "2026-08-15T00:05:00.000Z",
+  },
+};
+
+const UNSCORED_DETAIL = { ...SCORED_DETAIL, score: null };
+
+// FEAT-074 U4a (#4715, AC-5) — a targeting-maturity signup whose ruleTrace
+// carries the SAME `RuleTraceEntry[]` shape `evaluateWaitlistScoring`
+// produces, so `decidingDefsFor` has something real to extract.
+const TARGETING_MATURITY_DETAIL = {
+  ...SCORED_DETAIL,
+  experimentKey: "targeting-maturity",
+  score: {
+    tier: "level_1",
+    score: 0,
+    categoryScores: { total: 0 },
+    ruleTrace: [
+      {
+        kind: "predicate",
+        tier: "level_1",
+        path: "allOf[0].ref(level1_only).allOf[0].ref(level1_signal).anyOf[0].ref(has_customers).eq",
+        node: {},
+        result: true,
+        detail: "has_customers = true",
+      },
+      {
+        kind: "predicate",
+        tier: "level_1",
+        path: "allOf[0].ref(level1_only).allOf[0].ref(level1_signal).anyOf[1].ref(has_confirmed_fit_cohort).eq",
+        node: {},
+        result: false,
+        detail: "has_confirmed_fit_cohort = false",
+      },
+    ],
+    updatedAt: "2026-08-15T00:05:00.000Z",
+  },
+};
+
+function baseProps() {
+  return {
+    params: Promise.resolve({ locale: "en", experimentId: "wlexp_1", leadId: "lead_1" }),
+  };
+}
+
+describe("WaitlistSignupPage — drill-down (AC3)", () => {
+  beforeEach(() => {
+    mockSignup.mockReset();
+    mockNotFound.mockClear();
+  });
+
+  it("renders answers, tier, score, categoryScores, and ruleTrace when scored", async () => {
+    mockSignup.mockResolvedValue({ ok: true, body: SCORED_DETAIL });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByText("Do you use a CRM?")).toBeInTheDocument();
+    expect(screen.getByText("yes")).toBeInTheDocument();
+    expect(screen.getByText("qualified")).toBeInTheDocument();
+    expect(screen.getByText("87")).toBeInTheDocument();
+    expect(screen.getByTestId("score-trace-category-scores")).toBeInTheDocument();
+    expect(screen.getByTestId("code-block")).toBeInTheDocument();
+    expect(screen.getByText(/"matched"/)).toBeInTheDocument();
+  });
+
+  it("locale-formats the score and category scores rather than rendering raw numbers", async () => {
+    mockSignup.mockResolvedValue({
+      ok: true,
+      body: { ...SCORED_DETAIL, score: { ...SCORED_DETAIL.score, score: 1234, categoryScores: { fit: 2500 } } },
+    });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByText("1,234")).toBeInTheDocument();
+    expect(screen.getByText("2,500")).toBeInTheDocument();
+  });
+
+  it('renders "not scored" EmptyState when score is null', async () => {
+    mockSignup.mockResolvedValue({ ok: true, body: UNSCORED_DETAIL });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("score-trace-not-scored")).toBeInTheDocument();
+    expect(screen.queryByTestId("code-block")).not.toBeInTheDocument();
+  });
+
+  it("calls notFound() on a 404", async () => {
+    mockSignup.mockResolvedValue({
+      ok: false,
+      status: 404,
+      body: { error: { code: "not_found", message: "Signup not found" } },
+    });
+    await expect(Page(baseProps())).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+
+  it("renders ForbiddenState on a 401", async () => {
+    mockSignup.mockResolvedValue({
+      ok: false,
+      status: 401,
+      body: { error: { code: "unauthorized", message: "Authentication required" } },
+    });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.getByTestId("waitlist-forbidden")).toBeInTheDocument();
+  });
+
+  it("a non-targeting experiment renders no deciding-defs section (AC-5 — byte-unchanged)", async () => {
+    mockSignup.mockResolvedValue({ ok: true, body: SCORED_DETAIL });
+    const element = await Page(baseProps());
+    render(element);
+
+    expect(screen.queryByTestId("score-trace-deciding-defs")).not.toBeInTheDocument();
+  });
+
+  it("a targeting-maturity signup lists the deciding def names extracted from its own tier's trace (AC-5)", async () => {
+    mockSignup.mockResolvedValue({ ok: true, body: TARGETING_MATURITY_DETAIL });
+    const element = await Page(baseProps());
+    render(element);
+
+    const section = screen.getByTestId("score-trace-deciding-defs");
+    expect(section).toHaveTextContent("has_customers");
+    // The false-result entry's def must NOT appear — only true-result
+    // predicates for the matched tier are "deciding".
+    expect(section).not.toHaveTextContent("has_confirmed_fit_cohort");
+  });
+});

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

@@ -0,0 +1,116 @@
+/**
+ * ExperimentsTable — the list + rollup view's experiments table (#4665 D10).
+ *
+ * App-local composition from the catalog (the `apps-paid/workspace/components/`
+ * idiom): `Table` primitive (key → `Link`, mode `Badge`, status `Badge` with
+ * `role="status"`), `EmptyState` when there are no rows. Every string is
+ * caller-supplied (translatable); numbers are pre-formatted by the page via
+ * `../format.js`.
+ */
+
+import {
+  EmptyState,
+  Link,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@working-theory/ui/primitives";
+import type { WaitlistExperimentSummary } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+import { ExperimentModeBadge, ExperimentStatusBadge } from "./status-badges";
+
+export interface ExperimentsTableLabels {
+  caption: string;
+  columnKey: string;
+  columnMode: string;
+  columnStatus: string;
+  columnWaitlists: string;
+  columnRaw: string;
+  columnQualified: string;
+  columnRate: string;
+  columnUpdated: string;
+  emptyHeadline: string;
+  emptyDescription: string;
+  statusLabel: (status: string) => string;
+  modeLabel: (mode: string) => string;
+}
+
+export interface ExperimentsTableProps {
+  locale: string;
+  rows: Array<{
+    experiment: WaitlistExperimentSummary;
+    raw: string;
+    qualified: string;
+    rate: string;
+    updated: string;
+  }>;
+  labels: ExperimentsTableLabels;
+}
+
+export function ExperimentsTable({
+  locale,
+  rows,
+  labels,
+}: ExperimentsTableProps): ReactElement {
+  if (rows.length === 0) {
+    return (
+      <div data-testid="experiments-table-empty">
+        <EmptyState headline={labels.emptyHeadline} description={labels.emptyDescription} />
+      </div>
+    );
+  }
+
+  return (
+    <Table data-testid="experiments-table">
+      <TableCaption>{labels.caption}</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">{labels.columnKey}</TableHead>
+          <TableHead scope="col">{labels.columnMode}</TableHead>
+          <TableHead scope="col">{labels.columnStatus}</TableHead>
+          <TableHead scope="col">{labels.columnWaitlists}</TableHead>
+          <TableHead scope="col">{labels.columnRaw}</TableHead>
+          <TableHead scope="col">{labels.columnQualified}</TableHead>
+          <TableHead scope="col">{labels.columnRate}</TableHead>
+          <TableHead scope="col">{labels.columnUpdated}</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rows.map(({ experiment, raw, qualified, rate, updated }) => (
+          <TableRow
+            key={experiment.id}
+            data-testid={`experiments-table-row-${experiment.id}`}
+          >
+            <TableCell>
+              <Link href={`/${locale}/waitlist/${experiment.id}`}>
+                {experiment.key}
+              </Link>
+            </TableCell>
+            <TableCell>
+              <ExperimentModeBadge
+                mode={experiment.mode}
+                label={labels.modeLabel(experiment.mode)}
+              />
+            </TableCell>
+            <TableCell>
+              <ExperimentStatusBadge
+                status={experiment.status}
+                label={labels.statusLabel(experiment.status)}
+              />
+            </TableCell>
+            <TableCell>{experiment.waitlists.length}</TableCell>
+            <TableCell>{raw}</TableCell>
+            <TableCell>{qualified}</TableCell>
+            <TableCell>{rate}</TableCell>
+            <TableCell>{updated}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,24 @@
+/**
+ * ForbiddenState — the dashboard's shared 401/403 rendering (#4665 D9, §2.2
+ * Security: "a 401/403 renders an EmptyState (no leak of why)").
+ */
+
+import { EmptyState } from "@working-theory/ui/primitives";
+import type { ReactElement } from "react";
+
+export function ForbiddenState({
+  headline,
+  description,
+}: {
+  headline: string;
+  description: string;
+}): ReactElement {
+  return (
+    <div
+      className="flex min-h-[50vh] items-center justify-center py-section"
+      data-testid="waitlist-forbidden"
+    >
+      <EmptyState headline={headline} description={description} />
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+/**
+ * OfferFunnelTable — one recommending experiment's per-offer funnel on the
+ * list view (#4839 D4/FR7): Offer · Recommended · Saved · Checked out, one
+ * row per register offer in register order.
+ *
+ * App-local composition from the catalog (the `ExperimentsTable` idiom):
+ * `Table` primitive only. Every string is caller-supplied (translatable);
+ * numbers are pre-formatted by the page via `../format.js`. Zero shipped copy.
+ */
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@working-theory/ui/primitives";
+import type { ReactElement } from "react";
+
+export interface OfferFunnelTableLabels {
+  captionPrefix: string;
+  columnOffer: string;
+  columnRecommended: string;
+  columnSaved: string;
+  columnCheckedOut: string;
+}
+
+export interface OfferFunnelTableProps {
+  experimentId: string;
+  experimentKey: string;
+  rows: Array<{ offerKey: string; recommended: string; saved: string; checkedOut: string }>;
+  labels: OfferFunnelTableLabels;
+}
+
+export function OfferFunnelTable({
+  experimentId,
+  experimentKey,
+  rows,
+  labels,
+}: OfferFunnelTableProps): ReactElement {
+  return (
+    <Table data-testid={`experiments-offer-funnel-${experimentId}`}>
+      <TableCaption>{`${labels.captionPrefix} ${experimentKey}`}</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">{labels.columnOffer}</TableHead>
+          <TableHead scope="col">{labels.columnRecommended}</TableHead>
+          <TableHead scope="col">{labels.columnSaved}</TableHead>
+          <TableHead scope="col">{labels.columnCheckedOut}</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rows.map(({ offerKey, recommended, saved, checkedOut }) => (
+          <TableRow key={offerKey} data-testid={`experiments-offer-funnel-${experimentId}-${offerKey}`}>
+            <TableCell>{offerKey}</TableCell>
+            <TableCell>{recommended}</TableCell>
+            <TableCell>{saved}</TableCell>
+            <TableCell>{checkedOut}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

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

@@ -0,0 +1,61 @@
+/**
+ * RollupTicker — the list + rollup view's cross-experiment rollup strip
+ * (#4665 D10). App-local composition over the `StatTicker` block; every
+ * value is pre-formatted by the page (`../format.js`).
+ */
+
+import { StatTicker } from "@working-theory/ui/blocks";
+import type { ReactElement } from "react";
+
+export interface RollupTickerLabels {
+  live: string;
+  closed: string;
+  draft: string;
+  raw: string;
+  qualified: string;
+  rate: string;
+  sites: string;
+}
+
+export interface RollupTickerValues {
+  live: string;
+  closed: string;
+  draft: string;
+  raw: string;
+  qualified: string;
+  rate: string;
+  /** Present only for the platform-operator (`scope: "all"`) — D6/§2.1. */
+  sites?: string;
+}
+
+export interface RollupTickerProps {
+  labels: RollupTickerLabels;
+  values: RollupTickerValues;
+  ariaLabel: string;
+}
+
+export function RollupTicker({
+  labels,
+  values,
+  ariaLabel,
+}: RollupTickerProps): ReactElement {
+  const items = [
+    { id: "live", value: values.live, label: labels.live },
+    { id: "closed", value: values.closed, label: labels.closed },
+    { id: "draft", value: values.draft, label: labels.draft },
+    { id: "raw", value: values.raw, label: labels.raw },
+    { id: "qualified", value: values.qualified, label: labels.qualified },
+    { id: "rate", value: values.rate, label: labels.rate },
+    ...(values.sites !== undefined
+      ? [{ id: "sites", value: values.sites, label: labels.sites }]
+      : []),
+  ];
+
+  return (
+    <StatTicker
+      items={items}
+      label={ariaLabel}
+      data-testid="rollup-ticker"
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+/**
+ * ScoreTrace — the drill-down view's score panel (#4665 D10).
+ *
+ * App-local composition: `tier` `Badge`, `categoryScores` `DescriptionList`,
+ * `ruleTrace` `CodeBlock` (formatted JSON — `ruleTrace` is `unknown`, A2's to
+ * shape; this renders it as-is). "Not scored" `EmptyState` when the signup
+ * carries no `WaitlistScore` row.
+ *
+ * `scoreDisplay` / `categoryScores[].display` are pre-formatted by the
+ * caller (Rule 10 — locale-aware number formatting stays in `apps/web`'s
+ * `format.ts`, matching every other number on this surface; this component
+ * never calls a formatter itself).
+ *
+ * `decidingDefs` (FEAT-074 U4a, #4715, AC-5) is the targeting-maturity
+ * signup's deciding def names, pre-extracted by the caller
+ * (`format.ts#decidingDefsFor`, which scopes it to that ONE experiment) —
+ * absent or empty renders no section, byte-unchanged from before this unit.
+ */
+
+import { CodeBlock, DescriptionList } from "@working-theory/ui/blocks";
+import { Badge, EmptyState } from "@working-theory/ui/primitives";
+import type { WaitlistSignupDetail } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+export interface ScoreTraceLabels {
+  tier: string;
+  score: string;
+  categoryScoresTitle: string;
+  decidingDefsTitle: string;
+  ruleTraceTitle: string;
+  notScoredHeadline: string;
+  notScoredDescription: string;
+}
+
+export interface ScoreTraceProps {
+  score: WaitlistSignupDetail["score"];
+  /** Pre-formatted `score.score` (Rule 10) — required whenever `score` is non-null. */
+  scoreDisplay?: string;
+  /** Pre-formatted per-category values, in `score.categoryScores` order. */
+  categoryScores?: Array<{ label: string; display: string }>;
+  /** The deciding def names (`format.ts#decidingDefsFor`) — absent or `[]` renders no section. */
+  decidingDefs?: string[];
+  labels: ScoreTraceLabels;
+}
+
+export function ScoreTrace({
+  score,
+  scoreDisplay,
+  categoryScores,
+  decidingDefs,
+  labels,
+}: ScoreTraceProps): ReactElement {
+  if (score === null) {
+    return (
+      <div data-testid="score-trace-not-scored">
+        <EmptyState
+          headline={labels.notScoredHeadline}
+          description={labels.notScoredDescription}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="score-trace" className="flex flex-col gap-4">
+      <DescriptionList
+        data-testid="score-trace-summary"
+        items={[
+          {
+            label: labels.tier,
+            value: <Badge variant="default">{score.tier}</Badge>,
+          },
+          { label: labels.score, value: scoreDisplay ?? String(score.score) },
+        ]}
+      />
+      <div>
+        <p className="mb-2 text-body-sm font-semibold text-(--color-fg)">
+          {labels.categoryScoresTitle}
+        </p>
+        <DescriptionList
+          data-testid="score-trace-category-scores"
+          items={(
+            categoryScores ??
+            Object.entries(score.categoryScores).map(([category, value]) => ({
+              label: category,
+              display: String(value),
+            }))
+          ).map(({ label, display }) => ({ label, value: display }))}
+        />
+      </div>
+      {decidingDefs && decidingDefs.length > 0 ? (
+        <div data-testid="score-trace-deciding-defs">
+          <p className="mb-2 text-body-sm font-semibold text-(--color-fg)">
+            {labels.decidingDefsTitle}
+          </p>
+          <ul className="list-disc pl-5">
+            {decidingDefs.map((name) => (
+              <li key={name}>{name}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      <div>
+        <p className="mb-2 text-body-sm font-semibold text-(--color-fg)">
+          {labels.ruleTraceTitle}
+        </p>
+        <CodeBlock
+          language="JSON"
+          code={JSON.stringify(score.ruleTrace, null, 2)}
+        />
+      </div>
+    </div>
+  );
+}