create-ailk 0.11.2 → 0.11.3

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

@@ -1,65 +1,50 @@
 /**
- * /[locale]/account — the signed-in respondent's own profile, results,
- * purchases, and subscription status (#4984, #6038).
+ * /[locale]/account — the base account area's Inbox (#7430, spec 7423 U4 ·
+ * D6a, D9, D12; DESIGN.md §5.4).
  *
- * RSC. The `(authed)` layout is the gate — it already resolved a session or
- * rendered `SignInGate`; this page reads the session again ONLY for the
- * profile fields (name / email / verified). Every data read goes through
- * `@working-theory/api-client` with the caller's cookie forwarded
- * (`../../../../lib/server-api`, D9): `waitlistSignups.me(key)` once per key
- * in `lib/account-config.ts` (Results), `flowCheckouts.me()` (Purchases),
- * and `subscription.me()` (the update-your-card banner, #6038). A 404 (no
- * signup / no user row for that key / commerce module off) or a 401/403
- * (session missing, email unverified — the profile row already says so) is
- * skipped, never thrown; every other error rethrows to the route error
- * boundary.
+ * RSC, rendered inside the account layout's SignedInShell. One filtered
+ * list: the D6a tabs Recents · Suggested · Scheduled · All, each with a
+ * count, Recents selected, through the shared `InboxList`
+ * (`@working-theory/templates/account`):
  *
- * Chrome: this page composes `AppShell` + `SidebarNav` directly, with this
- * page's own three in-page anchors. The page renders inside the locale
- * layout (which owns the marketing Nav/Footer) — the operator's decision;
- * there is no second MarketingShell here.
+ *   - Recents — the kinds whose section is `updates` (the base `result` and
+ *     `purchase`), newest first.
+ *   - Suggested — nothing in the base area; no contribution section maps
+ *     here yet (a module that proposes things fills it).
+ *   - Scheduled — the kinds whose section is `upcoming` (the old Upcoming);
+ *     none in the base area.
+ *   - All — every row above, newest first.
+ *
+ * What needs the person is never an Inbox row: `email-unverified`,
+ * `payment-due` and "Add your name" are For-you items (D9 as amended). From
+ * `md` up they are the layout's aside; below `md` this page shows them inline
+ * as the For you stack, between the header and the tabs — absent when empty.
+ *
+ * D12 — any read that fails (a kind or a For-you source) renders an error
+ * row with Retry above the list; the list then holds what DID load, never a
+ * silently empty Inbox.
  */
 
 import {
-  flowCheckouts,
-  subscription,
-  waitlistSignups,
-  type FlowCheckoutMeItem,
-  type SubscriptionMeResponse,
-  type WaitlistSignupMeResponse,
-} from "@working-theory/api-client";
-import { AppShell } from "@working-theory/templates/shells";
-import { localeHref } from "@working-theory/ui";
-import { DescriptionList, SubscriptionStatusBanner } from "@working-theory/ui/blocks";
-import { SidebarNav, type SidebarNavItem } from "@working-theory/ui/chrome";
-import {
-  Badge,
-  Button,
-  EmptyState,
-  Heading,
-  MoneyAmount,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Text,
-} from "@working-theory/ui/primitives";
-import { ClipboardList, Receipt, UserRound } from "lucide-react";
+  ForYouStack,
+  InboxList,
+  type InboxListRow,
+} from "@working-theory/templates/account";
+import { Heading, Text } from "@working-theory/ui/primitives";
+import { ClipboardList, Receipt, type LucideProps } from "lucide-react";
 import type { Metadata } from "next";
-import { headers } from "next/headers";
 import { getTranslations } from "next-intl/server";
-import type { ReactElement } from "react";
-
-import { auth } from "../../../../auth";
-import { accountExperimentKeys } from "../../../../lib/account-config";
-import { forwardedCookieInit, unwrapApiResult } from "../../../../lib/server-api";
-import { ForbiddenState } from "../waitlist/components/ForbiddenState";
-import { formatCount, formatDateTime } from "../waitlist/format";
+import type { ComponentType, ReactElement } from "react";
 
-import { openBillingPortal } from "./actions";
-import { SignOutButton } from "./sign-out-button";
+import {
+  accountSession,
+  inboxItemHref,
+  loadForYou,
+  loadInboxItems,
+  type LoadedInboxItem,
+} from "./account-data";
+import { ErrorRow } from "./error-row";
+import { ACCOUNT_PERSIST_KEY, forYouLabels } from "./for-you-labels";
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -68,257 +53,95 @@ interface Props {
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
-  return { title: t("title"), description: t("description") };
-}
-
-/**
- * Statuses that mean "nothing to show for this caller" rather than "the read
- * failed": 404 (no signup for that experiment / no user row), 401/403 (no
- * session or email unverified — the profile section already renders the
- * unverified badge, so no second error surface is needed).
- */
-const SKIPPED_STATUSES = new Set([401, 403, 404]);
-
-type CookieInit = Awaited<ReturnType<typeof forwardedCookieInit>>;
-
-/** One `waitlistSignups.me` per configured key; skipped keys drop out. */
-async function readSignups(init: CookieInit): Promise<WaitlistSignupMeResponse[]> {
-  const results = await Promise.all(
-    accountExperimentKeys.map(async (key) => {
-      const res = await waitlistSignups.me(key, init);
-      if (!res.ok && SKIPPED_STATUSES.has(res.status)) return null;
-      return unwrapApiResult(Promise.resolve(res));
-    }),
-  );
-  return results.filter((r): r is WaitlistSignupMeResponse => r !== null);
+  return { title: t("inbox.title"), description: t("description") };
 }
 
-async function readCheckouts(init: CookieInit): Promise<FlowCheckoutMeItem[]> {
-  const res = await flowCheckouts.me(init);
-  if (!res.ok && SKIPPED_STATUSES.has(res.status)) return [];
-  return unwrapApiResult(Promise.resolve(res));
-}
-
-/**
- * The update-your-card banner's read (#6038). `null` covers both "nothing
- * to show" (401/403/404 — the commerce-disabled-build 404 included, D8) and
- * "no row" (a healthy subscriber, `actionRequired: false`) — the page's
- * render condition below is `sub?.actionRequired`, so both collapse to no
- * banner without a separate branch.
- */
-async function readSubscription(init: CookieInit): Promise<SubscriptionMeResponse | null> {
-  const res = await subscription.me(init);
-  if (!res.ok && SKIPPED_STATUSES.has(res.status)) return null; // AC-4, the existing constant
-  return unwrapApiResult(Promise.resolve(res));
-}
+/** The base kinds' row glyphs — a bare icon, never an icon square (§5.4). */
+const KIND_ICON: Record<string, ComponentType<LucideProps>> = {
+  result: ClipboardList,
+  purchase: Receipt,
+};
 
-export default async function AccountPage({ params }: Props): Promise<ReactElement> {
+export default async function AccountInboxPage({ params }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
-  const session = await auth.api.getSession({ headers: await headers() });
-
-  if (!session) {
-    // Unreachable behind the (authed) layout's gate; rendered rather than
-    // thrown so a race (session expired between layout and page) degrades
-    // to the dashboard's shared 401/403 shape instead of an error boundary.
-    const tCommon = await getTranslations({ locale, namespace: "waitlistDashboard.common" });
-    return (
-      <ForbiddenState
-        headline={tCommon("forbiddenHeadline")}
-        description={tCommon("forbiddenDescription")}
-      />
-    );
-  }
-
-  const init = await forwardedCookieInit();
-  const [signups, checkouts, sub] = await Promise.all([
-    readSignups(init),
-    readCheckouts(init),
-    readSubscription(init),
-  ]);
-
-  const { name, email, emailVerified } = session.user;
-  const displayName = name || email;
-  const siteName = process.env.NEXT_PUBLIC_SITE_NAME ?? "AI Launch Kit";
-  const unavailable = t("results.unavailable");
-
-  const navItems: SidebarNavItem[] = [
-    { labelKey: "profile", label: t("nav.profile"), path: "/account#profile", icon: UserRound },
-    { labelKey: "results", label: t("nav.results"), path: "/account#results", icon: ClipboardList },
-    { labelKey: "purchases", label: t("nav.purchases"), path: "/account#purchases", icon: Receipt },
-  ];
-
-  const sidebar = (
-    <SidebarNav
-      locale={locale}
-      navItems={navItems}
-      activePath={localeHref(locale, "/account")}
-      logo={
-        <Text as="span" variant="body-sm" className="font-semibold">
-          {siteName}
-        </Text>
-      }
-      user={{ name: displayName }}
-    />
-  );
+  const session = await accountSession(locale);
+
+  // The contract's translator, for keys that are data (a kind's `label`).
+  const translate = session?.ctx.t ?? ((key: string): string => key);
+  const [inbox, forYou] = session
+    ? await Promise.all([loadInboxItems(session.ctx), loadForYou(locale)])
+    : [{ items: [], failed: false }, { items: [], failed: false, now: "" }];
+
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+  const toRow = ({ kind, item }: LoadedInboxItem): InboxListRow => {
+    const label = translate(kind.label);
+    const icon = KIND_ICON[kind.kind];
+    return {
+      id: `${kind.kind}:${item.id}`,
+      ...(icon ? { icon } : {}),
+      caption: item.at ? `${label} · ${dateFormat.format(new Date(item.at))}` : label,
+      title: item.title,
+      href: inboxItemHref(locale, kind.kind, item.id),
+    };
+  };
+
+  const recents = inbox.items.filter(({ kind }) => kind.section === "updates").map(toRow);
+  const scheduled = inbox.items.filter(({ kind }) => kind.section === "upcoming").map(toRow);
+  const all = inbox.items.map(toRow);
+  const failed = inbox.failed || forYou.failed;
 
   return (
-    <AppShell sidebar={sidebar} title={siteName}>
-      <div className="flex flex-col gap-10" data-testid="account-page">
-        <div>
-          <Heading level={1}>{t("title")}</Heading>
-          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
-            {t("description")}
-          </Text>
-        </div>
-
-        {sub?.actionRequired ? (
-          <SubscriptionStatusBanner
-            headline={t("subscription.headline")}
-            description={
-              sub.status === "canceled" && sub.accessRevokesAt
-                ? t("subscription.descriptionCanceled", {
-                    date: formatDateTime(sub.accessRevokesAt, locale),
-                  })
-                : t("subscription.descriptionPastDue")
-            }
-            tone={sub.status === "canceled" ? "error" : "warning"}
-            action={
-              sub.portalAvailable ? (
-                <form action={openBillingPortal}>
-                  {/* variant="unstyled" + text-current/border-current, not variant="secondary" —
-                      a per-mode-fixed color fails contrast against the banner's warning/error
-                      fill in dark mode (design-review F4); size="big" for the 44px touch-target
-                      floor this is a mobile CTA under (design-review F5, Rule 14). */}
-                  <Button
-                    type="submit"
-                    variant="unstyled"
-                    size="big"
-                    className="rounded-control border-thin border-current bg-transparent px-control-x text-current hover:opacity-90 active:opacity-80"
-                  >
-                    {t("subscription.action")}
-                  </Button>
-                </form>
-              ) : undefined
-            }
-          />
-        ) : null}
-
-        <section id="profile" className="flex flex-col gap-4" data-testid="account-profile">
-          <Heading level={2}>{t("profile.heading")}</Heading>
-          <DescriptionList
-            items={[
-              {
-                label: t("profile.name"),
-                value: name || t("profile.unavailable"),
-                "data-testid": "account-profile-name",
-              },
-              {
-                label: t("profile.email"),
-                value: (
-                  <div className="inline-flex flex-wrap items-center gap-2">
-                    <div data-testid="account-profile-email">
-                      <Text as="span" variant="body-sm">
-                        {email}
-                      </Text>
-                    </div>
-                    <Badge
-                      variant={emailVerified ? "success" : "warning"}
-                      size="sm"
-                      role="status"
-                      data-testid="account-email-status"
-                    >
-                      {emailVerified ? t("profile.verified") : t("profile.unverified")}
-                    </Badge>
-                  </div>
-                ),
-              },
-            ]}
+    <div className="max-w-3xl py-8" data-testid="account-inbox">
+      <Heading level={1} visual={2}>
+        {t("inbox.title")}
+      </Heading>
+      <Text as="p" variant="body-sm" tone="muted" className="mt-block-tight">
+        {t("inbox.lead")}
+      </Text>
+
+      {/* D6a — below `md` the For you stack sits between the header and the
+          list; absent when empty. From `md` up the same items are the
+          layout's aside (SignedInShell's breakpoint is "md"). */}
+      {forYou.items.length > 0 ? (
+        <div className="mt-block-loose md:hidden" data-testid="inbox-for-you">
+          <ForYouStack
+            items={forYou.items}
+            persistKey={ACCOUNT_PERSIST_KEY}
+            labels={forYouLabels(translate)}
+            locale={locale}
+            now={forYou.now}
           />
-          <div>
-            <SignOutButton label={t("profile.signOut")} homeHref={localeHref(locale, "/")} />
-          </div>
-        </section>
-
-        <section id="results" className="flex flex-col gap-4" data-testid="account-results">
-          <Heading level={2}>{t("results.heading")}</Heading>
-          {signups.length === 0 ? (
-            <EmptyState
-              headline={t("results.emptyHeadline")}
-              description={t("results.emptyDescription")}
-            />
-          ) : (
-            <Table data-testid="account-results-table">
-              <TableHeader>
-                <TableRow>
-                  <TableHead scope="col">{t("results.experiment")}</TableHead>
-                  <TableHead scope="col">{t("results.waitlist")}</TableHead>
-                  <TableHead scope="col">{t("results.tier")}</TableHead>
-                  <TableHead scope="col">{t("results.score")}</TableHead>
-                  <TableHead scope="col">{t("results.completedAt")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {signups.map((signup) => (
-                  <TableRow
-                    key={signup.experimentKey}
-                    data-testid={`account-result-${signup.experimentKey}`}
-                  >
-                    <TableCell>{signup.experimentKey}</TableCell>
-                    <TableCell>{signup.waitlistKey}</TableCell>
-                    <TableCell>{signup.tier ?? unavailable}</TableCell>
-                    <TableCell>
-                      {signup.score === null ? unavailable : formatCount(signup.score, locale)}
-                    </TableCell>
-                    <TableCell>{formatDateTime(signup.completedAt, locale)}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </section>
-
-        <section id="purchases" className="flex flex-col gap-4" data-testid="account-purchases">
-          <Heading level={2}>{t("purchases.heading")}</Heading>
-          {checkouts.length === 0 ? (
-            <EmptyState
-              headline={t("purchases.emptyHeadline")}
-              description={t("purchases.emptyDescription")}
-            />
-          ) : (
-            <Table data-testid="account-purchases-table">
-              <TableHeader>
-                <TableRow>
-                  <TableHead scope="col">{t("purchases.offer")}</TableHead>
-                  <TableHead scope="col">{t("purchases.status")}</TableHead>
-                  <TableHead scope="col">{t("purchases.amount")}</TableHead>
-                  <TableHead scope="col">{t("purchases.period")}</TableHead>
-                  <TableHead scope="col">{t("purchases.date")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {checkouts.map((checkout) => (
-                  <TableRow key={checkout.id} data-testid={`account-purchase-${checkout.id}`}>
-                    <TableCell>{checkout.offerKey}</TableCell>
-                    <TableCell>{checkout.status}</TableCell>
-                    <TableCell>
-                      <MoneyAmount
-                        amountMinor={checkout.amountMinor}
-                        currency={checkout.currency}
-                        locale={locale}
-                      />
-                    </TableCell>
-                    <TableCell>{checkout.period}</TableCell>
-                    <TableCell>
-                      {formatDateTime(checkout.completedAt ?? checkout.createdAt, locale)}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </section>
-      </div>
-    </AppShell>
+        </div>
+      ) : null}
+
+      {failed ? (
+        <ErrorRow
+          message={t("inbox.error")}
+          retryLabel={t("inbox.retry")}
+          className="mt-block-loose"
+        />
+      ) : null}
+
+      <InboxList
+        tabs={[
+          { id: "recents", label: t("inbox.tabs.recents"), count: recents.length, rows: recents },
+          { id: "suggested", label: t("inbox.tabs.suggested"), count: 0, rows: [] },
+          {
+            id: "scheduled",
+            label: t("inbox.tabs.scheduled"),
+            count: scheduled.length,
+            rows: scheduled,
+          },
+          { id: "all", label: t("inbox.tabs.all"), count: all.length, rows: all },
+        ]}
+        defaultTab="recents"
+        {...(failed ? {} : { emptyLine: t("inbox.empty") })}
+      />
+    </div>
   );
 }

package/templates/apps/web/app/[locale]/(authed)/account/retry-button.tsx

@@ -0,0 +1,27 @@
+"use client"; // Retry re-runs the page's server reads through the router
+
+/**
+ * RetryButton — the Inbox error row's Retry control (#7430, spec 7423 D12).
+ *
+ * `router.refresh()` re-renders the route's Server Components, so every
+ * account read runs again without a full page load.
+ */
+
+import { Button } from "@working-theory/ui/primitives";
+import { useRouter } from "next/navigation";
+import type { ReactElement } from "react";
+
+export function RetryButton({ label }: { label: string }): ReactElement {
+  const router = useRouter();
+  return (
+    <Button
+      variant="secondary"
+      // 44px on a phone (a touch-first context), the 36px default from md up.
+      className="max-md:min-h-11"
+      onClick={() => router.refresh()}
+      data-testid="inbox-retry"
+    >
+      {label}
+    </Button>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/settings/color-mode.tsx

@@ -0,0 +1,68 @@
+"use client"; // reads and writes the theme cookie and the root's data-theme
+
+/**
+ * ColorModeSetting — User settings › General's color mode (#7430, spec 7423
+ * D4; DESIGN.md §5.12a): Light · Auto · Dark as a `SegmentedControl` of
+ * three equal cells. The settings page renders it only when the site's
+ * theme defines more than one mode (operator fold-in 2026-10-01).
+ *
+ * The same cookie and the same `data-theme` contract the locale layout's
+ * flash-prevention script reads: `light` / `dark` pass through; `system`
+ * (Auto) follows `prefers-color-scheme`.
+ */
+
+import { SegmentedControl } from "@working-theory/ui/primitives";
+import { useEffect, useState, type ReactElement } from "react";
+
+type Mode = "light" | "system" | "dark";
+
+const COOKIE_NAME = process.env.NEXT_PUBLIC_THEME_COOKIE_NAME ?? "ailk-theme";
+const ONE_YEAR = 60 * 60 * 24 * 365;
+
+function readMode(): Mode {
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${COOKIE_NAME}=([^;]+)`));
+  const value = match?.[1];
+  return value === "light" || value === "dark" ? value : "system";
+}
+
+function applyMode(mode: Mode): void {
+  document.cookie = `${COOKIE_NAME}=${mode}; path=/; max-age=${ONE_YEAR}; SameSite=Lax`;
+  const dark =
+    mode === "dark" ||
+    (mode === "system" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+}
+
+export function ColorModeSetting({
+  labels,
+}: {
+  labels: { title: string; light: string; auto: string; dark: string };
+}): ReactElement {
+  // Auto until mounted — the server cannot read the cookie's effect, and the
+  // first client render must match it.
+  const [mode, setMode] = useState<Mode>("system");
+  useEffect(() => {
+    setMode(readMode());
+  }, []);
+
+  return (
+    <SegmentedControl
+      aria-label={labels.title}
+      options={[
+        { value: "light", label: labels.light },
+        { value: "system", label: labels.auto },
+        { value: "dark", label: labels.dark },
+      ]}
+      value={mode}
+      onValueChange={(value) => {
+        const next = value as Mode;
+        setMode(next);
+        applyMode(next);
+      }}
+      touchTargetFloor
+      data-testid="account-color-mode"
+    />
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/settings/deletion-request.tsx

@@ -0,0 +1,55 @@
+"use client"; // submits through the account's Server Action and shows its outcome
+
+/**
+ * DeletionRequest — User settings › Privacy's "Request account deletion"
+ * (#7430, spec 7423 D10). Files a Support request of kind `deletion`; an
+ * operator completes it (deletion needs an operator step today, so nothing
+ * is deleted on click).
+ */
+
+import { Button, InlineMessage } from "@working-theory/ui/primitives";
+import { useActionState, type ReactElement } from "react";
+
+import { submitSupportRequest, type SupportRequestState } from "../support-actions";
+
+export interface DeletionRequestLabels {
+  action: string;
+  subject: string;
+  message: string;
+  sent: string;
+  error: string;
+}
+
+export function DeletionRequest({ labels }: { labels: DeletionRequestLabels }): ReactElement {
+  const [state, formAction, pending] = useActionState<SupportRequestState, FormData>(
+    submitSupportRequest,
+    { kind: "idle" },
+  );
+
+  if (state.kind === "success") {
+    return (
+      <InlineMessage variant="success" role="status" className="text-body-sm">
+        {labels.sent}
+      </InlineMessage>
+    );
+  }
+
+  return (
+    <form action={formAction} className="flex flex-col items-start gap-2">
+      <input type="hidden" name="kind" value="deletion" />
+      <input type="hidden" name="subject" value={labels.subject} />
+      <input type="hidden" name="message" value={labels.message} />
+      <Button
+        type="submit"
+        variant="secondary"
+        disabled={pending}
+        data-testid="account-deletion-request"
+      >
+        {labels.action}
+      </Button>
+      {state.kind === "error" ? (
+        <InlineMessage variant="error">{labels.error}</InlineMessage>
+      ) : null}
+    </form>
+  );
+}