create-ailk 0.17.0 → 0.19.0

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

@@ -10,12 +10,31 @@
  * out ends the session, then navigates home and refreshes so every RSC under
  * the `(authed)` gate re-reads the (now absent) session.
  *
+ * #8231 D1, as amended by #8334 — the rail reads Inbox, a Library group
+ * holding Artifacts, and the footer's ?. Settings is not a rail row: it lives
+ * in the avatar menu, as on the Admin (the operator's 2026-10-11 Phase 6
+ * read), so no row is selected on a Settings page. A row is selected on its
+ * own path and the paths under it; the Inbox also on an item's page
+ * (/account/inbox/…).
+ *
  * #7469 (DESIGN.md §2b as amended 2026-10-01, matching the Admin's §5.15) —
  * below `md` the bar reads avatar · Inbox · For you · Help, with no count
  * on any tab. For you is a page of the Inbox route (`?tab=for-you`): the
  * frame reads the URL and hands the tab to the page (`PhoneTabProvider`),
  * which shows one panel per tab. At `md`+ nothing changes — For you stays
  * the aside.
+ *
+ * #8233 D4 — on the Inbox route itself the phone top bar's trailing cell is
+ * an empty node handed to the page (`NewMenuSlotProvider`), which portals
+ * its compact New into it; every other path has no trailing cell.
+ *
+ * #8337 D4 — the `data-ailk-shell="account"` marker on a `display: contents`
+ * wrapper around `SignedInShell`: the layout's `shell-vars` reset
+ * (`:root:has([data-ailk-shell])`) matches only while this frame is in the
+ * document, so the Admin's colour tokens reach the shell and everything it
+ * portals to `document.body` (the avatar/help menus, For-you, New, the phone
+ * sheets) without the wrapper adding a box — `contents` keeps the shell's own
+ * layout (`min-h-screen`) unchanged.
  */
 
 import {
@@ -33,11 +52,12 @@ import {
 import { localeHref } from "@working-theory/ui";
 import { Link } from "@working-theory/ui/primitives";
 import { createAuthClient } from "better-auth/react";
-import { Inbox, Settings, Sparkles } from "lucide-react";
+import { Inbox, Layers, Settings, Sparkles } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import type { ReactElement, ReactNode } from "react";
+import { useState, type ReactElement, type ReactNode } from "react";
 
 import { ACCOUNT_PERSIST_KEY } from "./for-you-labels";
+import { NewMenuSlotProvider } from "./new-menu";
 
 const authClient = createAuthClient();
 
@@ -51,6 +71,9 @@ export interface AccountFrameLabels extends SignedInShellLabels {
   /** The phone's For you tab label (#7469). */
   forYou: string;
   settings: string;
+  /** The rail's Library group heading (#8231 D1). */
+  library: string;
+  artifacts: string;
 }
 
 export interface AccountFrameProps {
@@ -77,14 +100,21 @@ export function AccountFrame({
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [dismissed] = useForYouDismissed(ACCOUNT_PERSIST_KEY);
+  const [topBarActions, setTopBarActions] = useState<HTMLElement | null>(null);
 
   const homeHref = localeHref(locale, "/");
   const inboxHref = localeHref(locale, "/account");
+  const artifactsHref = localeHref(locale, "/account/artifacts");
+  const settingsHref = localeHref(locale, "/account/general");
+  const within = (href: string): boolean => pathname === href || pathname.startsWith(`${href}/`);
   // The Inbox row stays selected on an item's own page (/account/inbox/…).
   const onInbox = pathname === inboxHref || pathname.startsWith(`${inboxHref}/inbox/`);
+  const activePath = onInbox ? inboxHref : within(artifactsHref) ? artifactsHref : undefined;
   // #7469 — the phone tab: For you only on the Inbox route itself.
   const phoneTab =
     pathname === inboxHref && searchParams?.get("tab") === FOR_YOU_TAB ? FOR_YOU_TAB : "inbox";
+  // #8233 D4 — the Inbox route's New lives in the top bar; nowhere else.
+  const onInboxRoute = pathname === inboxHref;
 
   const onSignOut = (): void => {
     void (async () => {
@@ -99,7 +129,15 @@ export function AccountFrame({
     })();
   };
 
-  const { home, inbox, forYou: forYouLabel, settings, ...shellLabels } = labels;
+  const {
+    home,
+    inbox,
+    forYou: forYouLabel,
+    settings,
+    library,
+    artifacts,
+    ...shellLabels
+  } = labels;
 
   // D13 — the logo only: no box, no name, no popover; it links home. The
   // same link is the phone top bar's leading cell.
@@ -118,52 +156,78 @@ export function AccountFrame({
   const forYouLeft = forYou.items.filter((item) => !dismissed.has(item.id));
 
   return (
-    <SignedInShell
-      persistKey={ACCOUNT_PERSIST_KEY}
-      locale={locale}
-      navItems={[{ labelKey: "inbox", label: inbox, path: "/account", icon: Inbox }]}
-      tabItems={[
-        { key: "inbox", label: inbox, href: inboxHref, icon: Inbox, isActive: onInbox && phoneTab === "inbox" },
-        {
-          key: FOR_YOU_TAB,
-          label: forYouLabel,
-          href: `${inboxHref}?tab=${FOR_YOU_TAB}`,
-          icon: Sparkles,
-          isActive: phoneTab === FOR_YOU_TAB,
-        },
-      ]}
-      {...(onInbox ? { activePath: inboxHref } : {})}
-      user={user}
-      userMenuItems={[
-        {
-          id: "settings",
-          label: settings,
-          icon: Settings,
-          href: localeHref(locale, "/account/settings"),
-        },
-      ]}
-      onSignOut={onSignOut}
-      userDisplay="avatar"
-      accountMenuLayout="card"
-      helpItems={helpItems}
-      railHeader={logoLink}
-      topBarStart={logoLink}
-      {...(forYouLeft.length > 0
-        ? {
-            aside: (
-              <ForYouPanel
-                items={forYouLeft}
-                persistKey={ACCOUNT_PERSIST_KEY}
-                labels={forYou.labels}
-                locale={locale}
-                now={forYou.now}
-              />
-            ),
-          }
-        : {})}
-      labels={shellLabels}
-    >
-      <PhoneTabProvider tab={phoneTab}>{children}</PhoneTabProvider>
-    </SignedInShell>
+    <div className="contents" data-ailk-shell="account" data-testid="account-shell">
+      <SignedInShell
+        persistKey={ACCOUNT_PERSIST_KEY}
+        locale={locale}
+        navItems={[{ labelKey: "inbox", label: inbox, path: "/account", icon: Inbox }]}
+        railGroups={[
+          {
+            key: "library",
+            heading: library,
+            items: [
+              { labelKey: "artifacts", label: artifacts, path: "/account/artifacts", icon: Layers },
+            ],
+          },
+        ]}
+        tabItems={[
+          { key: "inbox", label: inbox, href: inboxHref, icon: Inbox, isActive: onInbox && phoneTab === "inbox" },
+          {
+            key: FOR_YOU_TAB,
+            label: forYouLabel,
+            href: `${inboxHref}?tab=${FOR_YOU_TAB}`,
+            icon: Sparkles,
+            isActive: phoneTab === FOR_YOU_TAB,
+          },
+        ]}
+        {...(activePath ? { activePath } : {})}
+        user={user}
+        userMenuItems={[
+          {
+            id: "settings",
+            label: settings,
+            icon: Settings,
+            href: settingsHref,
+          },
+        ]}
+        onSignOut={onSignOut}
+        userDisplay="avatar"
+        accountMenuLayout="card"
+        helpItems={helpItems}
+        railHeader={logoLink}
+        topBarStart={logoLink}
+        {...(onInboxRoute
+          ? {
+              topBarEnd: (
+                <span
+                  ref={setTopBarActions}
+                  className="flex items-center"
+                  data-testid="account-top-bar-actions"
+                />
+              ),
+            }
+          : {})}
+        {...(forYouLeft.length > 0
+          ? {
+              aside: (
+                <ForYouPanel
+                  items={forYouLeft}
+                  persistKey={ACCOUNT_PERSIST_KEY}
+                  labels={forYou.labels}
+                  locale={locale}
+                  now={forYou.now}
+                />
+              ),
+            }
+          : {})}
+        labels={shellLabels}
+      >
+        <PhoneTabProvider tab={phoneTab}>
+          <NewMenuSlotProvider node={onInboxRoute ? topBarActions : null}>
+            {children}
+          </NewMenuSlotProvider>
+        </PhoneTabProvider>
+      </SignedInShell>
+    </div>
   );
 }

package/templates/apps/web/app/[locale]/(authed)/account/actions.ts

@@ -13,48 +13,41 @@
  * navigation telemetry for a Server Action, which is inherent to any hosted-
  * portal handoff, not something this design avoids).
  *
- * CSRF is already handled: `forwardedCookieInit()` forwards the incoming
- * request's real `Origin` alongside the cookie, and `apps/api`'s
- * `authPreHandler` requires a matching `Origin` on this cookie-authenticated
- * mutating request (D3.1/D5).
+ * Where the portal comes from is `billing-source.ts`'s `billingPortalUrl()`
+ * (#8217, spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
+ * D10, D11), the account tree's billing seam — this file tests no topology:
  *
- * `redirect()` throws `NEXT_REDIRECT` by design — called OUTSIDE the
- * try/catch (mirrors `checkout.actions.ts`'s idiom) so the catch never
+ * - A single site: the hub's `POST /v1/subscription/portal-session`, with
+ *   the caller's cookie and real `Origin` forwarded, which `apps/api`'s
+ *   `authPreHandler` checks against its trusted origins on this
+ *   cookie-authenticated mutating request; the route accepts only a cookie
+ *   session, never a bearer (D3.1/D5).
+ * - A spoke that signs in through its hub and carries commerce: the spoke's
+ *   own Stripe key, for the customer its hub vouches for — read server-side
+ *   by the rendered billing action, never from this action's input.
+ * - A spoke without that action: no portal, so nothing to redirect to.
+ *
+ * It takes no argument, so nothing a browser sends can name a customer.
+ * Next's Server Action origin check applies as before.
+ *
+ * `redirect()` throws `NEXT_REDIRECT` by design — called OUTSIDE any
+ * try/catch (mirrors `checkout.actions.ts`'s idiom) so a catch never
  * swallows the navigation this action exists to perform.
  */
 
-import { subscription } from "@working-theory/api-client";
 import { redirect } from "next/navigation";
 
-import { forwardedCookieInit } from "../../../../lib/server-api";
-
-/** PII-safe error identity for logs (the `checkout.actions.ts` idiom: `err.name` only). */
-function errorName(err: unknown): string {
-  return err instanceof Error ? err.name : "unknown";
-}
+import { billingPortalUrl } from "./billing-source";
 
 /**
  * Opens the caller's own Stripe billing-portal session and redirects there.
- * Never returns on success. On a non-2xx or thrown error, logs a PII-safe
- * status/name and redirects back to `/account` unchanged (the banner's
- * action-unavailable posture — there is no error UI slot on this button).
+ * Never returns on success. With no portal (a failed mint, logged PII-safe by
+ * `billingPortalUrl`, or none to open), it returns and the page stays as it
+ * is — there is no error UI slot on this button.
  */
 export async function openBillingPortal(): Promise<void> {
-  const init = await forwardedCookieInit();
-
-  let url: string;
-  try {
-    const res = await subscription.portalSession(init);
-    if (!res.ok) {
-      console.error(`[openBillingPortal] status=${res.status}`);
-      return;
-    }
-    url = res.body.url;
-  } catch (err) {
-    console.error(`[openBillingPortal] errName=${errorName(err)}`);
-    return;
-  }
-
-  // Outside the try/catch on purpose — see the file header.
+  const url = await billingPortalUrl();
+  if (url === null) return;
+  // Outside any try/catch on purpose — see the file header.
   redirect(url);
 }

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

@@ -0,0 +1,253 @@
+/**
+ * /[locale]/account/artifacts/[pieceId] — one artifact (#8234, spec
+ * docs/specs/8234-member-artifacts-account-artifacts-and-spec.md D4).
+ *
+ * RSC, inside the account layout's SignedInShell, through the shared
+ * `InboxItemFrame`: back to Artifacts, the title, the review state, and —
+ * once approved — "Approved <date>". The body lists every served version in
+ * the read's order, newest first: its number, its delivery date, its note,
+ * the member's own review when there is one, and one action — Download for a
+ * file (re-served by `versions/[version]/file/route.ts`, never shown inline
+ * on this origin) or View for an https link, opened in a new tab. A link
+ * that is not https renders no action. The read serves no deliverer (8169
+ * D6), so none is shown.
+ *
+ * Inside the latest version only: the review form while it is reviewable
+ * (not approved, no review yet — `isReviewable`), else the waiting line once
+ * the member asked for changes; nothing once approved. Nothing limits how
+ * often: every new latest version is reviewable again (#8140 disposition 3).
+ *
+ * The artifact is found the way the Inbox item page finds its item: the
+ * artifacts read runs (deduped per request) and `[pieceId]` is matched raw or
+ * decoded. No session, no match or a 404 read is a not-found; any other
+ * failed read renders the error row with Retry (spec 7423 D12). Titles,
+ * notes and comments render as text only.
+ */
+
+import { InboxItemFrame } from "@working-theory/templates/account";
+import { localeHref } from "@working-theory/ui";
+import { Button, Heading, Link, Text } from "@working-theory/ui/primitives";
+import {
+  isHttpsLink,
+  type MemberArtifact,
+  type MemberPieceVersion,
+} 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 { accountSession, logReadFailure } from "../../account-data";
+import { ErrorRow } from "../../error-row";
+import {
+  artifactState,
+  isReviewable,
+  loadArtifacts,
+  STATE_KEYS,
+  versionFileHref,
+} from "../artifact-data";
+
+import { ReviewForm, type ReviewFormLabels } from "./review-form";
+
+interface Props {
+  params: Promise<{ locale: string; pieceId: string }>;
+}
+
+/**
+ * A segment, percent-decoded when it decodes — matched in both forms, so an
+ * id is found whether or not the framework already decoded it.
+ */
+function decodeSegment(segment: string): string {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("artifacts.title") };
+}
+
+export default async function AccountArtifactPage({
+  params,
+}: Props): Promise<ReactElement> {
+  const { locale, pieceId: segment } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+  if (!session) notFound();
+
+  let artifacts: MemberArtifact[];
+  try {
+    artifacts = await loadArtifacts(session.ctx);
+  } catch (err) {
+    logReadFailure("artifacts", err);
+    return (
+      <div className="max-w-3xl py-8" data-testid="artifact">
+        <ErrorRow
+          message={t("artifacts.itemError")}
+          retryLabel={t("artifacts.retry")}
+        />
+      </div>
+    );
+  }
+
+  const artifact = artifacts.find(
+    (candidate) =>
+      candidate.id === segment || candidate.id === decodeSegment(segment),
+  );
+  if (!artifact) notFound();
+
+  const date = (iso: string): string =>
+    new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+      timeZone: "UTC",
+    }).format(new Date(iso));
+  const state = artifactState(artifact);
+  const reviewable = isReviewable(artifact);
+  const latest = artifact.versions[0]!.version;
+  const labels: ReviewFormLabels = {
+    heading: t("artifacts.review.heading", { version: latest }),
+    comment: t("artifacts.review.comment"),
+    commentHint: t("artifacts.review.commentHint"),
+    approve: t("artifacts.review.approve"),
+    requestChanges: t("artifacts.review.requestChanges"),
+    submitting: t("artifacts.review.submitting"),
+    sent: t("artifacts.review.sent"),
+    errors: {
+      comment_required: t("artifacts.review.errors.commentRequired"),
+      closed: t("artifacts.review.errors.closed"),
+      not_latest: t("artifacts.review.errors.notLatest"),
+      rate_limited: t("artifacts.review.errors.rateLimited"),
+      failed: t("artifacts.review.errors.failed"),
+    },
+  };
+
+  // The one action of a version: Download a file, View an https link, else none.
+  const versionAction = (v: MemberPieceVersion): ReactElement | null => {
+    if (v.file !== null) {
+      return (
+        <Button asChild variant="outline" className="max-md:min-h-11">
+          <Link
+            href={versionFileHref(locale, artifact.id, v.version)}
+            variant="bare"
+            data-testid={`artifact-version-${v.version}-download`}
+          >
+            {t("artifacts.download", { filename: v.file.filename })}
+          </Link>
+        </Button>
+      );
+    }
+    if (isHttpsLink(v.link)) {
+      return (
+        <Button asChild variant="outline" className="max-md:min-h-11">
+          <Link
+            href={v.link}
+            external
+            variant="bare"
+            data-testid={`artifact-version-${v.version}-view`}
+          >
+            {t("artifacts.view")}
+          </Link>
+        </Button>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <InboxItemFrame
+      back={{
+        href: localeHref(locale, "/account/artifacts"),
+        label: t("artifacts.back"),
+      }}
+      caption={t("artifacts.caption")}
+      title={artifact.title}
+      status={t(STATE_KEYS[state])}
+      lead={
+        artifact.approvedAt !== null
+          ? t("artifacts.approvedOn", { date: date(artifact.approvedAt) })
+          : null
+      }
+      testIdPrefix="artifact"
+    >
+      <section className="mt-block-loose">
+        <Heading level={2} visual={4} className="!text-body font-semibold">
+          {t("artifacts.versions")}
+        </Heading>
+        <div className="mt-block-tight flex flex-col gap-4">
+          {artifact.versions.map((v) => {
+            const action = versionAction(v);
+            return (
+              <div
+                key={v.version}
+                className="rounded-md border-hairline border-(--color-border) p-card"
+                data-testid={`artifact-version-${v.version}`}
+              >
+                <Text as="p" variant="body" className="font-semibold">
+                  {t("artifacts.version", { version: v.version })}
+                </Text>
+                <Text as="p" variant="body-sm" tone="muted">
+                  {t("artifacts.deliveredOn", { date: date(v.deliveredAt) })}
+                </Text>
+                {v.note !== null ? (
+                  <Text
+                    as="p"
+                    variant="body-sm"
+                    className="mt-2 whitespace-pre-line"
+                  >
+                    {v.note}
+                  </Text>
+                ) : null}
+                {v.review !== null && v.reviewedAt !== null ? (
+                  <div className="mt-2">
+                    <Text as="p" variant="body-sm" tone="muted">
+                      {v.review === "approved"
+                        ? t("artifacts.reviewApproved", {
+                            date: date(v.reviewedAt),
+                          })
+                        : t("artifacts.reviewChangesRequested", {
+                            date: date(v.reviewedAt),
+                          })}
+                    </Text>
+                    {v.reviewComment !== null ? (
+                      <Text
+                        as="p"
+                        variant="body-sm"
+                        className="whitespace-pre-line"
+                      >
+                        {v.reviewComment}
+                      </Text>
+                    ) : null}
+                  </div>
+                ) : null}
+                {action !== null ? (
+                  <div className="mt-block-tight">{action}</div>
+                ) : null}
+                {v.version === latest && reviewable ? (
+                  <ReviewForm
+                    pieceId={artifact.id}
+                    version={v.version}
+                    labels={labels}
+                  />
+                ) : null}
+                {v.version === latest && state === "changes-requested" ? (
+                  <div
+                    className="mt-block-tight"
+                    data-testid="artifact-review-waiting"
+                  >
+                    <Text as="p" variant="body-sm">
+                      {t("artifacts.review.waiting")}
+                    </Text>
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </InboxItemFrame>
+  );
+}