create-ailk 0.1.0 → 0.2.0

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

@@ -0,0 +1,96 @@
+"use client"; // social sign-in requires a client-side Better Auth call
+
+/**
+ * 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
+ * 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.
+ *
+ * Zero active providers → an `EmptyState` naming the missing configuration
+ * (the `AuthPanel` UI-contract forbids fabricating a session — spec
+ * Clarifications), still followed by the sign-in link. `callbackURL` is the
+ * current pathname (via `usePathname()`) so a successful social sign-in
+ * lands back on the exact dashboard page the visitor requested.
+ */
+
+import { EmptyState, Link } from "@working-theory/ui/primitives";
+import { AuthPanel, type AuthPanelProvider } from "@working-theory/ui/sections";
+import { createAuthClient } from "better-auth/react";
+import { usePathname } from "next/navigation";
+import type { ReactElement } from "react";
+
+import { getActiveProviderIds } from "../../../lib/auth-env";
+
+const authClient = createAuthClient();
+
+const SUPPORTED_PROVIDERS: readonly AuthPanelProvider[] = ["google", "github"];
+
+export interface SignInGateLabels {
+  emptyHeadline: string;
+  emptyDescription: string;
+  /** Visible text of the link to the full sign-in page (#4984). */
+  signInLinkLabel: string;
+}
+
+export interface SignInGateProps {
+  labels: SignInGateLabels;
+  /** Locale-prefixed sign-in page path — `localeHref(locale, "/sign-in")`. */
+  signInPath: string;
+}
+
+export function SignInGate({ labels, signInPath }: SignInGateProps): ReactElement {
+  const pathname = usePathname();
+  const providers = getActiveProviderIds().filter(
+    (id): id is AuthPanelProvider =>
+      (SUPPORTED_PROVIDERS as readonly string[]).includes(id),
+  );
+
+  const signInLink = (
+    <Link
+      href={`${signInPath}?next=${encodeURIComponent(pathname)}`}
+      data-testid="sign-in-gate-link"
+      // 24px hit-area floor (Rule 14) — a bare inline link's line-height box
+      // falls short on its own.
+      className="inline-flex min-h-6 items-center px-2"
+    >
+      {labels.signInLinkLabel}
+    </Link>
+  );
+
+  if (providers.length === 0) {
+    return (
+      <div
+        className="flex min-h-screen flex-col items-center justify-center gap-4"
+        data-testid="sign-in-gate-empty"
+      >
+        <EmptyState
+          headline={labels.emptyHeadline}
+          description={labels.emptyDescription}
+        />
+        {signInLink}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex min-h-screen flex-col items-center justify-center gap-4 py-section"
+      data-testid="sign-in-gate"
+    >
+      <AuthPanel
+        sectionName="auth-panel"
+        data={{ mode: "signin", providers }}
+        onProviderClick={(provider) => {
+          void authClient.signIn.social({
+            provider,
+            callbackURL: pathname,
+          });
+        }}
+      />
+      {signInLink}
+    </div>
+  );
+}

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

@@ -0,0 +1,309 @@
+/**
+ * /[locale]/waitlist/[experimentId] — the operator dashboard's comparison
+ * view + paginated signups (#4665 D10, AC2/AC4).
+ *
+ * RSC: reads `GET /v1/waitlist-experiments/:experimentId` (comparison) and
+ * `GET …/signups` (paginated) through `@working-theory/api-client`'s
+ * `waitlistExperiments` namespace, forwarding the caller's cookie session.
+ * A 404 calls `notFound()`; a 401/403 renders `ForbiddenState`.
+ */
+
+import { waitlistExperiments } from "@working-theory/api-client";
+import {
+  DescriptionList,
+  DetailHeader,
+  MetricComparisonTable,
+} from "@working-theory/ui/blocks";
+import { Container } from "@working-theory/ui/primitives";
+import type {
+  WaitlistExperimentComparison,
+  WaitlistMetricRow,
+} from "@working-theory/validation";
+import { resolveLocalizedString } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { isValidElement } from "react";
+import type { ReactElement } from "react";
+
+import { ApiError, forwardedCookieInit, unwrapApiResult } from "../../../../../lib/server-api";
+import { ForbiddenState } from "../components/ForbiddenState";
+import { SignupsTable } from "../components/SignupsTable";
+import { ExperimentModeBadge, ExperimentStatusBadge } from "../components/status-badges";
+import type { WaitlistTab } from "../components/WaitlistComparisonTabs";
+import { WaitlistComparisonTabs } from "../components/WaitlistComparisonTabs";
+import { formatCount, formatDateTime, formatRate, targetingMaturityLevel } from "../format";
+
+const DEFAULT_LOCALE = "en";
+
+interface Props {
+  params: Promise<{ locale: string; experimentId: string }>;
+  searchParams: Promise<{ waitlist?: string; cursor?: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, experimentId } = await params;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard.comparison" });
+
+  try {
+    const comparison = await unwrapApiResult(
+      waitlistExperiments.comparison(experimentId, await forwardedCookieInit()),
+    );
+    return { title: comparison.experiment.key };
+  } catch (err) {
+    // A genuine 404 gets the "not found" title; any other failure (a
+    // network error, a 401/403, a 500) gets a neutral fallback rather than
+    // misreporting a real backend error as "this doesn't exist" (#4665
+    // code-review finding).
+    if (err instanceof ApiError && err.status === 404) {
+      return { title: t("notFoundHeadline") };
+    }
+    return { title: t("genericTitle") };
+  }
+}
+
+function metricCell(
+  row: WaitlistMetricRow,
+  kind: "raw" | "qualified" | "rate" | { tier: string },
+  locale: string,
+  unavailable: string,
+): { display: string; value: number | null } {
+  if (kind === "raw") return { display: formatCount(row.raw, locale), value: row.raw };
+  if (kind === "qualified") {
+    return row.qualified === null
+      ? { display: unavailable, value: null }
+      : { display: formatCount(row.qualified, locale), value: row.qualified };
+  }
+  if (kind === "rate") {
+    return { display: formatRate(row.qualificationRate, locale), value: row.qualificationRate };
+  }
+  const found = row.byTier.find((t) => t.tier === kind.tier);
+  const count = found?.count ?? 0;
+  return { display: formatCount(count, locale), value: count };
+}
+
+export default async function WaitlistComparisonPage({
+  params,
+  searchParams,
+}: Props): Promise<ReactElement> {
+  const { locale, experimentId } = await params;
+  const { waitlist: waitlistFilter, cursor } = await searchParams;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard" });
+  const unavailable = t("common.unavailable");
+
+  const init = await forwardedCookieInit();
+
+  // Shared error mapping for every read on this page — the comparison AND the
+  // signups reads must both degrade the same way (404 -> notFound(), 401/403
+  // -> ForbiddenState) rather than only the first read being guarded (#4665
+  // code-review finding: an unguarded second fetch throws straight to the
+  // route's generic error boundary instead of matching the first read's
+  // handling).
+  async function readOrRespond<T>(
+    result: Promise<T>,
+  ): Promise<T | ReactElement> {
+    try {
+      return await result;
+    } catch (err) {
+      if (err instanceof ApiError) {
+        if (err.status === 404) notFound();
+        if (err.status === 401 || err.status === 403) {
+          return (
+            <ForbiddenState
+              headline={t("common.forbiddenHeadline")}
+              description={t("common.forbiddenDescription")}
+            />
+          );
+        }
+      }
+      throw err;
+    }
+  }
+
+  const comparisonOrResponse = await readOrRespond(
+    unwrapApiResult(waitlistExperiments.comparison(experimentId, init)),
+  );
+  if (isValidElement(comparisonOrResponse)) return comparisonOrResponse;
+  const comparison: WaitlistExperimentComparison = comparisonOrResponse;
+
+  const signupsOrResponse = await readOrRespond(
+    unwrapApiResult(
+      waitlistExperiments.signups(
+        experimentId,
+        {
+          ...(waitlistFilter ? { waitlist: waitlistFilter } : {}),
+          ...(cursor ? { cursor } : {}),
+        },
+        init,
+      ),
+    ),
+  );
+  if (isValidElement(signupsOrResponse)) return signupsOrResponse;
+  const signupsResult = signupsOrResponse;
+
+  // ── Top comparison table (columns = waitlists + total) ────────────────────
+  const columns = [
+    ...comparison.waitlists.map((w) => ({ key: w.key, label: w.key })),
+    { key: "total", label: t("comparison.columnTotal") },
+  ];
+  const allMetricRows = [...comparison.waitlists, comparison.total];
+  const tierKeys = Array.from(
+    new Set(allMetricRows.flatMap((row) => row.byTier.map((tier) => tier.tier))),
+  );
+
+  const cellsFor = (kind: "raw" | "qualified" | "rate" | { tier: string }) => {
+    const cells: Record<string, { display: string; value: number | null }> = {};
+    for (const w of comparison.waitlists) cells[w.key] = metricCell(w, kind, locale, unavailable);
+    cells.total = metricCell(comparison.total, kind, locale, unavailable);
+    return cells;
+  };
+
+  const topRows = [
+    { key: "raw", label: t("comparison.rowRaw"), cells: cellsFor("raw") },
+    { key: "qualified", label: t("comparison.rowQualified"), cells: cellsFor("qualified") },
+    { key: "rate", label: t("comparison.rowRate"), cells: cellsFor("rate") },
+    // AC-5 — the Level distribution: for targeting-maturity, each row's
+    // label is its Level ("Level N" / the Gate label), never the raw
+    // `level_N` tier string; every other experiment renders exactly as
+    // before (targetingMaturityLevel returns null — D5, byte-unchanged floor).
+    ...tierKeys.map((tier) => {
+      const level = targetingMaturityLevel(tier, comparison.experiment.key);
+      const label =
+        level === null
+          ? `${t("comparison.tierRowPrefix")}: ${tier}`
+          : level === 0
+            ? t("level.gate")
+            : t("level.label", { n: level });
+      return { key: `tier-${tier}`, label, cells: cellsFor({ tier }) };
+    }),
+  ];
+
+  // ── Per-waitlist tabs (by-source table + per-question distributions) ──────
+  const tabs: WaitlistTab[] = comparison.waitlists.map((row) => ({
+    key: row.key,
+    label: row.key,
+    bySourceCaption: t("comparison.bySourceCaption"),
+    bySourceRowHeaderLabel: t("comparison.bySourceColumnSource"),
+    bySourceColumns: [
+      { key: "raw", label: t("comparison.bySourceColumnRaw") },
+      { key: "qualified", label: t("comparison.bySourceColumnQualified") },
+      { key: "rate", label: t("comparison.bySourceColumnRate") },
+    ],
+    bySourceRows: row.bySource.map((source) => ({
+      key: source.source,
+      label: source.source,
+      cells: {
+        raw: { display: formatCount(source.raw, locale), value: source.raw },
+        qualified:
+          source.qualified === null
+            ? { display: unavailable, value: null }
+            : { display: formatCount(source.qualified, locale), value: source.qualified },
+        rate: { display: formatRate(source.qualificationRate, locale), value: source.qualificationRate },
+      },
+    })),
+    distributions: row.distributions.map((distribution) => {
+      const question = comparison.questions.find((q) => q.id === distribution.questionId);
+      const prompt = question
+        ? resolveLocalizedString(question.prompt, locale, DEFAULT_LOCALE)
+        : distribution.questionId;
+      return {
+        questionId: distribution.questionId,
+        title: prompt,
+        answered: distribution.answered,
+        answeredLabel: t("comparison.distributionAnswered", { count: distribution.answered }),
+        emptyLabel: t("comparison.distributionNoAnswers"),
+        items: distribution.options.map((option) => {
+          const declared = question?.options?.find((o) => o.value === option.value);
+          const label = declared
+            ? resolveLocalizedString(declared.label, locale, DEFAULT_LOCALE)
+            : option.value;
+          return {
+            label,
+            count: option.count,
+            share: option.share,
+            display: formatRate(option.share, locale),
+          };
+        }),
+      };
+    }),
+  }));
+
+  const signupRows = signupsResult.items.map((signup) => {
+    const level = targetingMaturityLevel(signup.tier, comparison.experiment.key);
+    const tierDisplay =
+      level === null ? signup.tier : level === 0 ? t("level.gate") : t("level.label", { n: level });
+    return {
+      signup,
+      created: formatDateTime(signup.createdAt, locale),
+      score: signup.score === null ? null : formatCount(signup.score, locale),
+      tierDisplay,
+    };
+  });
+
+  return (
+    <main className="min-h-screen bg-surface text-fg" data-testid="waitlist-comparison-page">
+      <DetailHeader
+        breadcrumb={[
+          { label: t("comparison.breadcrumbExperiments"), href: `/${locale}/waitlist` },
+          { label: comparison.experiment.key },
+        ]}
+        title={comparison.experiment.key}
+        typeBadge={
+          <div className="flex gap-2">
+            <ExperimentModeBadge
+              mode={comparison.experiment.mode}
+              label={t(`mode.${comparison.experiment.mode}`)}
+            />
+            <ExperimentStatusBadge
+              status={comparison.experiment.status}
+              label={t(`status.${comparison.experiment.status}`)}
+            />
+          </div>
+        }
+      />
+      <Container className="flex flex-col gap-8 py-section">
+        <DescriptionList
+          items={[
+            { label: t("comparison.site"), value: comparison.experiment.siteId },
+            {
+              label: t("comparison.created"),
+              value: formatDateTime(comparison.experiment.createdAt, locale),
+            },
+            {
+              label: t("comparison.waitlistsCount"),
+              value: String(comparison.experiment.waitlists.length),
+            },
+          ]}
+        />
+
+        <MetricComparisonTable
+          caption={t("comparison.tableCaption")}
+          columns={columns}
+          rows={topRows}
+          emphasisColumnKey="total"
+        />
+
+        <WaitlistComparisonTabs tabs={tabs} />
+
+        <SignupsTable
+          locale={locale}
+          experimentId={experimentId}
+          {...(waitlistFilter ? { waitlist: waitlistFilter } : {})}
+          rows={signupRows}
+          nextCursor={signupsResult.nextCursor}
+          labels={{
+            caption: t("comparison.signupsCaption"),
+            columnEmail: t("comparison.signupsColumnEmail"),
+            columnWaitlist: t("comparison.signupsColumnWaitlist"),
+            columnSource: t("comparison.signupsColumnSource"),
+            columnCreated: t("comparison.signupsColumnCreated"),
+            columnTier: t("comparison.signupsColumnTier"),
+            columnScore: t("comparison.signupsColumnScore"),
+            unavailable,
+            next: t("comparison.signupsNext"),
+          }}
+        />
+      </Container>
+    </main>
+  );
+}

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

@@ -0,0 +1,149 @@
+/**
+ * /[locale]/waitlist/[experimentId]/signups/[leadId] — the operator
+ * dashboard's signup drill-down view (#4665 D10, AC3).
+ *
+ * RSC: reads `GET …/signups/:leadId` through
+ * `@working-theory/api-client`'s `waitlistExperiments.signup`, forwarding
+ * the caller's cookie session. A 404 calls `notFound()`; a 401/403 renders
+ * `ForbiddenState`.
+ */
+
+import { waitlistExperiments } from "@working-theory/api-client";
+import { DescriptionList, DetailHeader } from "@working-theory/ui/blocks";
+import { Container } from "@working-theory/ui/primitives";
+import { resolveLocalizedString } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { ApiError, forwardedCookieInit, unwrapApiResult } from "../../../../../../../lib/server-api";
+import { ForbiddenState } from "../../../components/ForbiddenState";
+import { ScoreTrace } from "../../../components/ScoreTrace";
+import { decidingDefsFor, formatCount, formatDateTime } from "../../../format";
+
+const DEFAULT_LOCALE = "en";
+
+interface Props {
+  params: Promise<{ locale: string; experimentId: string; leadId: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, experimentId, leadId } = await params;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard.signup" });
+
+  try {
+    const signup = await unwrapApiResult(
+      waitlistExperiments.signup(experimentId, leadId, await forwardedCookieInit()),
+    );
+    return { title: signup.email };
+  } catch (err) {
+    // A genuine 404 gets the "not found" title; any other failure gets a
+    // neutral fallback rather than misreporting a real backend error as
+    // "this doesn't exist" (#4665 code-review finding).
+    if (err instanceof ApiError && err.status === 404) {
+      return { title: t("notFoundHeadline") };
+    }
+    return { title: t("genericTitle") };
+  }
+}
+
+export default async function WaitlistSignupPage({ params }: Props): Promise<ReactElement> {
+  const { locale, experimentId, leadId } = await params;
+  const t = await getTranslations({ locale, namespace: "waitlistDashboard" });
+
+  let signup;
+  try {
+    signup = await unwrapApiResult(
+      waitlistExperiments.signup(experimentId, leadId, await forwardedCookieInit()),
+    );
+  } catch (err) {
+    if (err instanceof ApiError) {
+      if (err.status === 404) notFound();
+      if (err.status === 401 || err.status === 403) {
+        return (
+          <ForbiddenState
+            headline={t("common.forbiddenHeadline")}
+            description={t("common.forbiddenDescription")}
+          />
+        );
+      }
+    }
+    throw err;
+  }
+
+  return (
+    <main className="min-h-screen bg-surface text-fg" data-testid="waitlist-signup-page">
+      <DetailHeader
+        breadcrumb={[
+          { label: t("comparison.breadcrumbExperiments"), href: `/${locale}/waitlist` },
+          {
+            label: t("signup.breadcrumbComparison"),
+            href: `/${locale}/waitlist/${experimentId}`,
+          },
+          { label: signup.email },
+        ]}
+        title={signup.email}
+      />
+      <Container className="flex flex-col gap-8 py-section">
+        <DescriptionList
+          items={[
+            { label: t("signup.email"), value: signup.email },
+            { label: t("signup.waitlist"), value: signup.waitlistKey },
+            { label: t("signup.source"), value: signup.source },
+            { label: t("signup.captured"), value: formatDateTime(signup.createdAt, locale) },
+          ]}
+        />
+
+        <div>
+          <p className="mb-2 text-body-sm font-semibold text-(--color-fg)">
+            {t("signup.answersTitle")}
+          </p>
+          <DescriptionList
+            items={signup.answers.map((answer) => ({
+              label: resolveLocalizedString(answer.prompt, locale, DEFAULT_LOCALE),
+              value:
+                answer.value === null
+                  ? t("common.unavailable")
+                  : Array.isArray(answer.value)
+                    ? answer.value.join(", ")
+                    : answer.value,
+            }))}
+          />
+        </div>
+
+        <ScoreTrace
+          score={signup.score}
+          {...(signup.score !== null
+            ? {
+                scoreDisplay: formatCount(signup.score.score, locale),
+                categoryScores: Object.entries(signup.score.categoryScores).map(
+                  ([category, value]) => ({
+                    label: category,
+                    display: formatCount(value, locale),
+                  }),
+                ),
+                // AC-5 — targeting-maturity only (decidingDefsFor scopes
+                // internally); [] for every other experiment renders no
+                // section, byte-unchanged from before this unit.
+                decidingDefs: decidingDefsFor(
+                  signup.score.tier,
+                  signup.score.ruleTrace,
+                  signup.experimentKey,
+                ),
+              }
+            : {})}
+          labels={{
+            tier: t("signup.tier"),
+            score: t("signup.score"),
+            categoryScoresTitle: t("signup.categoryScoresTitle"),
+            decidingDefsTitle: t("signup.decidingDefsTitle"),
+            ruleTraceTitle: t("signup.ruleTraceTitle"),
+            notScoredHeadline: t("signup.notScoredHeadline"),
+            notScoredDescription: t("signup.notScoredDescription"),
+          }}
+        />
+      </Container>
+    </main>
+  );
+}