create-ailk 0.2.0 → 0.4.0

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

@@ -1,116 +0,0 @@
-/**
- * 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/OfferFunnelTable.tsx

@@ -1,66 +0,0 @@
-/**
- * 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

@@ -1,61 +0,0 @@
-/**
- * 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

@@ -1,114 +0,0 @@
-/**
- * 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>
-  );
-}

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

@@ -1,139 +0,0 @@
-/**
- * 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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,67 +0,0 @@
-/**
- * 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>
-  );
-}