@startsimpli/billing 0.4.25 → 0.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/BillingStates.review.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * Billing page states from the crochet design review (2026-10-18):
+ * - a plan ending at period end has one status, "Ends <date>", and the free
+ *   plan it falls back to reads "Starts <date>", disabled (crochet_patterns-3bzni);
+ *   a cancelled paid plan keeps Manage Billing for its invoices (-pes38)
+ * - a trial says when the first charge is and how much (-iwl0f), shows its end
+ *   date once (-rjg2e), and counts day one of a 7-day trial as 7 days (-lm7nu)
+ * - a failed payment is not dated with the period end (-lb8u3)
+ * - back from a trial checkout: "Your Pro trial has started" (-reg6a)
+ * - the clicked plan button says "Opening checkout…" while it opens (-jnkso)
+ * - a complimentary plan on a tier marks that tier's card current (-lgqp2)
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { CurrentPlanCard } from "./CurrentPlanCard";
+import { SubscriptionManager } from "./SubscriptionManager";
+import type { BillingProduct, ProductOffer, SubscriptionInfo } from "../types";
+
+const base: Omit<ProductOffer, "id" | "name" | "slug" | "unitPrice" | "isFree" | "sortOrder"> = {
+  currency: "USD",
+  pricingModel: "flat",
+  intervalUnit: "month",
+  intervalCount: 1,
+  intervalDisplay: "per month",
+  isRecurring: true,
+  features: [],
+  isActive: true,
+  isFeatured: false,
+  trialDays: 0,
+  ctaText: "",
+};
+const FREE: ProductOffer = { ...base, id: "o-free", name: "Free", slug: "crochet-free", unitPrice: "0.00", isFree: true, sortOrder: 0, tier: "free" };
+const LITE: ProductOffer = { ...base, id: "o-lite", name: "Lite", slug: "crochet-lite", unitPrice: "2.99", isFree: false, sortOrder: 1, tier: "lite", ctaText: "Get Lite" };
+const PRO: ProductOffer = { ...base, id: "o-pro", name: "Pro", slug: "crochet-pro", unitPrice: "9.00", isFree: false, sortOrder: 2, tier: "pro", trialDays: 7, isFeatured: true, ctaText: "Start Free Trial" };
+const COMP: ProductOffer = { ...base, id: "o-comp", name: "Pro (complimentary)", slug: "crochet-pro-comp", unitPrice: "0.00", isFree: true, sortOrder: 2, tier: "pro", isActive: false };
+const PRODUCT: BillingProduct = { id: "p", slug: "crochet-patterns", name: "Crochet", description: "", offers: [FREE, LITE, PRO] };
+
+const sub = (offer: ProductOffer, over: Partial<SubscriptionInfo> = {}): SubscriptionInfo => ({
+  id: "s1",
+  offer,
+  status: "active",
+  currentPeriodStart: "2026-10-17T00:00:00Z",
+  currentPeriodEnd: "2099-11-17T00:00:00Z",
+  cancelAtPeriodEnd: false,
+  trialEnd: null,
+  viewerIsOwner: true,
+  ...over,
+});
+
+function renderManager(subscription: SubscriptionInfo | null, props: Partial<React.ComponentProps<typeof SubscriptionManager>> = {}) {
+  const fetcher = vi.fn((url: string) => {
+    if (url.includes("/billing/subscription/current/")) {
+      return Promise.resolve(subscription
+        ? { ok: true, json: () => Promise.resolve(subscription) }
+        : { ok: false, status: 404, json: () => Promise.resolve({}) });
+    }
+    if (url.includes("/billing/products/")) return Promise.resolve({ ok: true, json: () => Promise.resolve(PRODUCT) });
+    if (url.includes("/billing/success-sync/")) return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+    if (url.includes("/billing/usage/")) return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+    return Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({}) });
+  }) as unknown as typeof fetch;
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test/api/v1" fetcher={fetcher}>
+      <SubscriptionManager productId="crochet-patterns" returnUrl="https://x/settings/billing" {...props} />
+    </BillingProvider>,
+  );
+}
+
+describe("CurrentPlanCard states", () => {
+  it("a plan cancelled at period end reads 'Ends <date>', not Active", () => {
+    render(<CurrentPlanCard subscription={sub(PRO, { cancelAtPeriodEnd: true, currentPeriodEnd: "2099-11-17T00:00:00Z" })} usage={{}} />);
+    expect(screen.getByTestId("plan-status").textContent).toBe("Ends Nov 17, 2099");
+  });
+
+  it("a cancelled plan reads the same as one cancelled at period end", () => {
+    render(<CurrentPlanCard subscription={sub(PRO, { status: "cancelled", currentPeriodEnd: "2099-11-17T00:00:00Z" })} usage={{}} />);
+    expect(screen.getByTestId("plan-status").textContent).toBe("Ends Nov 17, 2099");
+  });
+
+  it("a trial says the first charge and its amount, with the end date shown once", () => {
+    const trialEnd = "2099-10-24T00:00:00Z";
+    render(<CurrentPlanCard subscription={sub(PRO, { status: "trialing", trialEnd, currentPeriodEnd: trialEnd })} usage={{}} onPortalClick={() => {}} />);
+    expect(screen.getByTestId("first-charge").textContent).toBe("First charge $9 on Oct 24, 2099");
+    expect(screen.queryByText(/billing period/i)).toBeNull();
+    expect(screen.getByTestId("plan-status").textContent).toBe("Trialing");
+  });
+
+  it("day one of a 7-day trial reads 7 days", () => {
+    const trialEnd = new Date(Date.now() + 7 * 86_400_000 - 60_000).toISOString();
+    render(<CurrentPlanCard subscription={sub(PRO, { status: "trialing", trialEnd })} usage={{}} onPortalClick={() => {}} />);
+    expect(screen.getByTestId("banner-trialing").textContent).toMatch(/ends in 7 days/);
+  });
+
+  it("a failed payment is not dated with the period end", () => {
+    render(<CurrentPlanCard subscription={sub(PRO, { status: "past_due", currentPeriodEnd: "2099-11-17T00:00:00Z" })} usage={{}} onPortalClick={() => {}} />);
+    const banner = screen.getByTestId("banner-past-due");
+    expect(banner.textContent).toMatch(/your last payment failed/i);
+    expect(banner.textContent).not.toMatch(/2099/);
+  });
+
+  it("the next billing date uses the same date format as the banners", () => {
+    render(<CurrentPlanCard subscription={sub(PRO)} usage={{}} />);
+    expect(screen.getByTestId("next-billing-date").textContent).toBe("Next billing date: Nov 17, 2099");
+  });
+});
+
+describe("SubscriptionManager states", () => {
+  it("while Pro ends at period end, the Free card reads 'Starts <date>' and is disabled", async () => {
+    renderManager(sub(PRO, { cancelAtPeriodEnd: true }));
+    const btn = await screen.findByTestId("upgrade-cta-crochet-free");
+    expect(btn.textContent).toBe("Starts Nov 17, 2099");
+    expect((btn as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("a cancelled paid plan keeps Manage Billing for its invoices", async () => {
+    renderManager(sub(PRO, { status: "cancelled" }));
+    expect(await screen.findByTestId("portal-button")).toBeTruthy();
+  });
+
+  it("back from a trial checkout says the trial has started", async () => {
+    renderManager(sub(PRO, { status: "trialing", trialEnd: "2099-10-24T00:00:00Z" }), { statusMessage: "success" });
+    expect((await screen.findByTestId("status-banner-success", {}, { timeout: 4000 })).textContent).toContain("Your Pro trial has started.");
+  });
+
+  it("the clicked plan button says 'Opening checkout…' and is disabled while checkout opens", async () => {
+    const onPlanChange = vi.fn(() => new Promise(() => {}));
+    renderManager(null, { onPlanChange });
+    const lite = await screen.findByTestId("upgrade-cta-crochet-lite");
+    await userEvent.click(lite);
+    await waitFor(() => expect(lite.textContent).toBe("Opening checkout…"));
+    expect((lite as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByTestId("upgrade-cta-crochet-pro") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("a complimentary plan on the Pro tier marks the Pro card current, with no trial offered", async () => {
+    renderManager(sub(COMP, { currentPeriodEnd: null }));
+    const pro = await screen.findByTestId("upgrade-cta-crochet-pro");
+    expect(pro.textContent).toBe("Current plan");
+    expect((pro as HTMLButtonElement).disabled).toBe(true);
+    expect(screen.getByTestId("upgrade-cta-crochet-lite").textContent).toBe("Downgrade to Lite");
+    expect(screen.queryByText(/start free trial/i)).toBeNull();
+  });
+});

package/src/components/CurrentPlanCard.tsx

@@ -45,7 +45,25 @@ function featureLabel(f: OfferFeature): string | null {
   return formatFeatureLabel(f);
 }
 
-function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string | null }) {
+/**
+ * The card's one status pill. A plan that is ending (cancelled, or cancelled
+ * at period end) reads "Ends <date>": it used to say "Active" beside a
+ * "your plan is cancelled" banner (crochet_patterns-3bzni, -pes38). A trial
+ * reads "Trialing" only; its end date is in the banner (crochet_patterns-rjg2e).
+ */
+function StatusBadge({ status, endsOn }: { status: string; endsOn: string | null }) {
+  if (endsOn) {
+    return (
+      <span
+        data-testid="plan-status"
+        role="status"
+        aria-label={`Subscription status: ends ${prettyDate(endsOn)}`}
+        className="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-gray-100 text-gray-600"
+      >
+        {`Ends ${prettyDate(endsOn)}`}
+      </span>
+    );
+  }
   let cls = "inline-block text-xs font-semibold px-3 py-1 rounded-full ";
   switch (status) {
     case "active":            cls += "bg-green-50 text-green-700"; break;
@@ -75,16 +93,10 @@ function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string |
       className={cls}
     >
       {readable}
-      {status === "trialing" && trialEnd && (
-        <span className="ml-1">until {formatDate(trialEnd)}</span>
-      )}
     </span>
   );
 }
 
-function formatDate(iso: string): string {
-  return new Date(iso).toISOString().slice(0, 10);
-}
 
 function ProgressBar({ used, limit }: { used: number; limit: number }) {
   // Cap at 100% so a hard-overage display can't blow out the layout.
@@ -126,10 +138,11 @@ function FeatureRow({ feature, used }: { feature: OfferFeature; used: number | n
   );
 }
 
-/** Days until ISO date, rounded down; negative if past. */
+/** Calendar days (UTC, as the dates are shown) from today to the ISO date;
+ * negative if past. Day one of a 7-day trial is 7, not 6 (crochet_patterns-lm7nu). */
 function daysUntil(iso: string): number {
-  const ms = new Date(iso).getTime() - Date.now();
-  return Math.floor(ms / 86_400_000);
+  const day = (d: Date) => Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+  return Math.round((day(new Date(iso)) - day(new Date())) / 86_400_000);
 }
 
 /** Pretty "Jun 27, 2026" style — easier to scan than ISO yyyy-mm-dd in banners. */
@@ -179,6 +192,8 @@ function StateBanner({ testId, variant, message, action }: BannerProps) {
 export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick }: CurrentPlanCardProps) {
   const offer = subscription.offer;
   const features = offer.features ?? [];
+  const ending = subscription.status === "cancelled" || subscription.cancelAtPeriodEnd;
+  const endsOn = ending ? subscription.currentPeriodEnd : null;
 
   // State-driven banner choice — at most one banner at the top of the card.
   // Precedence: past_due > cancelled-in-period > trialing > none.
@@ -191,8 +206,8 @@ export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick
         variant="danger"
         message={
           <>
-            Payment failed{subscription.currentPeriodEnd ? ` on ${prettyDate(subscription.currentPeriodEnd)}` : ""}.
-            {" "}Update your card to keep your subscription active.
+            {/* Not dated: the period end is not when the payment failed (crochet_patterns-lb8u3). */}
+            Your last payment failed. Update your card to keep your subscription active.
           </>
         }
         action={{ label: "Update card", onClick: onPortalClick }}
@@ -260,7 +275,7 @@ export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick
       {stateBanner}
       <div className="flex items-center justify-between mb-4">
         <h2 className="text-xl font-bold text-gray-900">{offer.name}</h2>
-        <StatusBadge status={subscription.status} trialEnd={subscription.trialEnd} />
+        <StatusBadge status={subscription.status} endsOn={endsOn} />
       </div>
 
       <div className="mb-4">
@@ -280,14 +295,21 @@ export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick
       {/* Active paid subs surface "Next billing date" prominently — that's
           what users actually want to know. Free + cancelled + no-period subs
           fall back to the period range / nothing. startsim-7j4. */}
-      {subscription.currentPeriodEnd && !offer.isFree && subscription.status === "active" && !subscription.cancelAtPeriodEnd ? (
+      {/* A trial says when it first charges and how much, in place of a
+          billing period that only repeats the trial end (crochet_patterns-iwl0f).
+          One date format on the card, the banners' (crochet_patterns-rjg2e). */}
+      {subscription.status === "trialing" && subscription.trialEnd && !offer.isFree && !ending ? (
+        <p data-testid="first-charge" className="text-sm text-gray-600 mb-6">
+          {`First charge ${priceLabel(offer)} on ${prettyDate(subscription.trialEnd)}`}
+        </p>
+      ) : subscription.currentPeriodEnd && !offer.isFree && subscription.status === "active" && !subscription.cancelAtPeriodEnd ? (
         <p data-testid="next-billing-date" className="text-sm text-gray-600 mb-6">
-          Next billing date: {formatDate(subscription.currentPeriodEnd)}
+          Next billing date: {prettyDate(subscription.currentPeriodEnd)}
         </p>
-      ) : subscription.currentPeriodStart && subscription.currentPeriodEnd ? (
+      ) : subscription.currentPeriodStart && subscription.currentPeriodEnd && !ending ? (
         <p className="text-sm text-gray-500 mb-6">
-          Billing period: {formatDate(subscription.currentPeriodStart)} to{" "}
-          {formatDate(subscription.currentPeriodEnd)}
+          Billing period: {prettyDate(subscription.currentPeriodStart)} to{" "}
+          {prettyDate(subscription.currentPeriodEnd)}
         </p>
       ) : null}
 

package/src/components/IntervalToggle.tsx

@@ -37,9 +37,12 @@ export function useIntervalOffers(offers: ProductOffer[], currentOfferId: string
 export function IntervalToggle({
   interval,
   onChange,
+  disabled = false,
 }: {
   interval: BillingInterval;
   onChange: (interval: BillingInterval) => void;
+  /** A plan change or checkout is in flight. */
+  disabled?: boolean;
 }) {
   const option = (value: BillingInterval, label: string) => {
     const selected = interval === value;
@@ -48,8 +51,9 @@ export function IntervalToggle({
         type="button"
         role="radio"
         aria-checked={selected}
-        onClick={() => onChange(value)}
-        className={`px-4 py-1.5 text-sm font-semibold rounded-full transition-colors cursor-pointer ${
+        disabled={disabled}
+        onClick={() => !disabled && onChange(value)}
+        className={`px-4 py-1.5 text-sm font-semibold rounded-full transition-colors cursor-pointer disabled:cursor-wait disabled:opacity-60 ${
           selected ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-800"
         }`}
       >

package/src/components/PlanPicker.crochet.test.tsx

@@ -215,7 +215,11 @@ describe("PricingDetailPage plan picker (crochet catalogue)", () => {
       />,
     );
     await waitFor(() => expect(screen.getByTestId("pricing-detail")).toBeDefined());
-    expect((screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement).disabled).toBe(false);
+    const free = screen.getByTestId("detail-cta-crochet-free") as HTMLButtonElement;
+    expect(free.textContent).not.toMatch(/current plan/i);
+    // ...and no button works until it is known: a paying user's click on Free
+    // would otherwise schedule a cancellation (crochet_patterns-ktjto).
+    expect(free.disabled).toBe(true);
   });
 
   it("signed in on Pro Annual: opens on Annual with Pro Annual current", async () => {

package/src/components/PricingDetailPage.review.test.tsx

@@ -0,0 +1,256 @@
+/**
+ * The /pricing design review (crochets.site, 2026-10-18), against a product
+ * shaped like the live crochet-patterns catalogue: Free, Lite (+ annual),
+ * Pro (+ annual). Pro monthly is the featured offer; Pro Annual is not.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingDetailPage, type PricingDetailPageProps } from "./PricingDetailPage";
+import type { BillingProduct, OfferFeature, SubscriptionInfo } from "../types";
+
+function offer(
+  over: Partial<BillingProduct["offers"][number]> & { name: string; slug: string; features: OfferFeature[] },
+) {
+  return {
+    id: over.slug,
+    unitPrice: "0.00",
+    currency: "USD",
+    pricingModel: "flat" as const,
+    intervalUnit: "month" as const,
+    intervalCount: 1,
+    intervalDisplay: "per month",
+    isRecurring: true,
+    isFree: false,
+    isActive: true,
+    isFeatured: false,
+    trialDays: 0,
+    sortOrder: 0,
+    ctaText: "Choose",
+    ...over,
+  };
+}
+
+const LITE: OfferFeature[] = [
+  { key: "ai_designs_per_month", name: "AI designs per month", value: 3 },
+  { key: "ai_refine", name: "AI chat to refine any pattern", value: true },
+  { key: "pdf_export", name: "Print-ready PDF export", value: true },
+  { key: "save_patterns", name: "Save patterns to your library", value: true },
+  { key: "track_progress", name: "Track your progress", value: true },
+  { key: "patterns_per_month", name: "Saved patterns", value: -1 },
+];
+const PRO: OfferFeature[] = [
+  { key: "patterns_per_month", name: "Saved patterns", value: -1 },
+  { key: "ai_refine", name: "AI chat to refine any pattern", value: true },
+  { key: "pdf_export", name: "Print-ready PDF export", value: true },
+  { key: "custom_sizing", name: "Custom sizing", value: true },
+  { key: "trial_note", name: "7-day free trial with AI designs included", value: true },
+  { key: "ai_designs_per_month", name: "AI designs per month", value: 15 },
+];
+
+const product: BillingProduct = {
+  id: "prod-crochet",
+  slug: "crochet-patterns",
+  name: "Crochet Patterns",
+  description: "AI-powered crochet pattern generator",
+  offers: [
+    offer({
+      name: "Free", slug: "crochet-free", isFree: true, sortOrder: 0, ctaText: "Get Started",
+      features: [
+        { key: "ai_designs", name: "AI pattern designs", value: false },
+        { key: "save_patterns", name: "Save patterns to your library", value: true },
+        { key: "track_progress", name: "Track your progress", value: true },
+        { key: "pdf_export", name: "Print-ready PDF export", value: true },
+      ],
+    }),
+    offer({ name: "Lite", slug: "crochet-lite", tier: "lite", unitPrice: "2.99", sortOrder: 1, ctaText: "Get Lite", features: LITE }),
+    offer({
+      name: "Lite Annual", slug: "crochet-lite-annual", tier: "lite", unitPrice: "29.00", sortOrder: 1,
+      intervalUnit: "year", intervalDisplay: "per year", ctaText: "Get Lite", features: LITE,
+    }),
+    offer({
+      name: "Pro", slug: "crochet-pro", tier: "pro", unitPrice: "9.00", sortOrder: 2, trialDays: 7,
+      isFeatured: true, ctaText: "Start Free Trial", features: PRO,
+    }),
+    offer({
+      name: "Pro Annual", slug: "crochet-pro-annual", tier: "pro", unitPrice: "89.00", sortOrder: 2, trialDays: 7,
+      intervalUnit: "year", intervalDisplay: "per year", ctaText: "Start Free Trial", features: PRO,
+    }),
+  ],
+};
+
+function okFetcher(p: BillingProduct = product) {
+  return vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(p) }) as unknown as typeof fetch;
+}
+
+function renderPricing(props: Partial<PricingDetailPageProps> = {}, fetcher: typeof fetch = okFetcher()) {
+  return render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <PricingDetailPage productId="crochet-patterns" {...props} />
+    </BillingProvider>,
+  );
+}
+
+const card = (slug: string) => screen.getByTestId(`detail-card-${slug}`);
+const cta = (slug: string) => screen.getByTestId(`detail-cta-${slug}`) as HTMLButtonElement;
+const cards = () => screen.getAllByTestId(/^detail-card-/);
+const toAnnual = () => fireEvent.click(screen.getByRole("radio", { name: "Annual" }));
+
+function liteMonthly(): SubscriptionInfo {
+  return {
+    id: "sub-1",
+    status: "active",
+    offer: product.offers[1],
+  } as unknown as SubscriptionInfo;
+}
+
+describe("Pro stays the highlighted tier on Annual (crochet_patterns-ftrka)", () => {
+  it("keeps Most Popular on Pro Annual although only the monthly offer is featured", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(within(card("crochet-pro")).getByText(/most popular/i)).toBeDefined();
+
+    toAnnual();
+    expect(within(card("crochet-pro-annual")).getByText(/most popular/i)).toBeDefined();
+    expect(within(card("crochet-lite-annual")).queryByText(/most popular/i)).toBeNull();
+  });
+});
+
+describe("cards list only what a tier adds (crochet_patterns-tv7fb)", () => {
+  it("does not repeat Free's rows on Lite", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-lite")).toBeDefined());
+    const lite = within(card("crochet-lite"));
+    expect(lite.getByText(/everything in free, plus/i)).toBeDefined();
+    expect(lite.queryByText("Print-ready PDF export")).toBeNull();
+    expect(lite.queryByText("Save patterns to your library")).toBeNull();
+    expect(lite.queryByText("Track your progress")).toBeNull();
+    expect(lite.getByText(/AI chat to refine/)).toBeDefined();
+  });
+
+  it("does not repeat Lite's rows on Pro, but keeps Pro's bigger allowance", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    const pro = within(card("crochet-pro"));
+    expect(pro.queryByText(/AI chat to refine/)).toBeNull();
+    expect(pro.queryByText("Print-ready PDF export")).toBeNull();
+    expect(pro.queryByText(/saved patterns/i)).toBeNull();
+    expect(pro.getByText(/custom sizing/i)).toBeDefined();
+    expect(pro.getByText(/15 AI designs/)).toBeDefined();
+  });
+
+  it("shows the trial once, as the pill, and no 'not included' rows on Free", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(screen.getByTestId("trial-pill-crochet-pro")).toBeDefined();
+    expect(within(card("crochet-pro")).queryByText(/with AI designs included/)).toBeNull();
+    expect(within(card("crochet-free")).queryByText("AI pattern designs")).toBeNull();
+    // The comparison table still has every row.
+    expect(screen.getByTestId("comparison-row-ai_designs")).toBeDefined();
+  });
+});
+
+describe("load error offers Try again (crochet_patterns-aeuji)", () => {
+  it("refetches the offers from the button", async () => {
+    const fetcher = vi.fn()
+      .mockResolvedValueOnce({ ok: false, status: 500, json: () => Promise.resolve({}) })
+      .mockResolvedValue({ ok: true, json: () => Promise.resolve(product) }) as unknown as typeof fetch;
+    renderPricing({}, fetcher);
+    const retry = await screen.findByTestId("pricing-retry");
+    fireEvent.click(retry);
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+  });
+});
+
+describe("plan buttons wait while the viewer's plan is unknown (crochet_patterns-ktjto)", () => {
+  it("disables every button and says the plan is being checked", async () => {
+    const onSelectOffer = vi.fn();
+    renderPricing({ onSelectOffer, currentPlan: { signedIn: true, subscription: null, loading: true } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(screen.getByTestId("plan-unknown").textContent).toMatch(/checking your plan/i);
+    for (const c of cards()) {
+      const slug = c.getAttribute("data-testid")!.replace("detail-card-", "");
+      expect(cta(slug).disabled, slug).toBe(true);
+    }
+    fireEvent.click(cta("crochet-free"));
+    expect(onSelectOffer).not.toHaveBeenCalled();
+  });
+
+  it("offers a retry when the plan failed to load", async () => {
+    const retry = vi.fn();
+    renderPricing({ currentPlan: { signedIn: true, subscription: null, error: new Error("x"), retry } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(cta("crochet-free").disabled).toBe(true);
+    fireEvent.click(screen.getByTestId("plan-retry"));
+    expect(retry).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaves a signed-out viewer's buttons live", async () => {
+    renderPricing({ currentPlan: { signedIn: false, subscription: null } });
+    await waitFor(() => expect(card("crochet-free")).toBeDefined());
+    expect(screen.queryByTestId("plan-unknown")).toBeNull();
+    expect(cta("crochet-lite").disabled).toBe(false);
+  });
+});
+
+describe("one purchase at a time (crochet_patterns-j2we6)", () => {
+  it("disables every button and the toggle while the host's checkout runs", async () => {
+    renderPricing({ busy: true });
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    expect(cta("crochet-lite").disabled).toBe(true);
+    expect(cta("crochet-pro").disabled).toBe(true);
+    expect((screen.getByRole("radio", { name: "Annual" }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("spins the clicked button and holds the rest until the checkout settles", async () => {
+    let finish: (v?: unknown) => void = () => {};
+    const onSelectOffer = vi.fn(() => new Promise((r) => { finish = r; }));
+    renderPricing({ onSelectOffer });
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+
+    fireEvent.click(cta("crochet-lite"));
+    await waitFor(() => expect(cta("crochet-lite").getAttribute("aria-busy")).toBe("true"));
+    expect(cta("crochet-pro").disabled).toBe(true);
+    fireEvent.click(cta("crochet-pro"));
+    expect(onSelectOffer).toHaveBeenCalledTimes(1);
+
+    await act(async () => { finish(); });
+    await waitFor(() => expect(cta("crochet-pro").disabled).toBe(false));
+  });
+});
+
+describe("the page names itself (crochet_patterns-ln6hf)", () => {
+  it("uses the host's title and subtitle", async () => {
+    renderPricing({ title: "Pricing", subtitle: "Free to start." });
+    expect(await screen.findByRole("heading", { level: 1, name: "Pricing" })).toBeDefined();
+    expect(screen.getByText("Free to start.")).toBeDefined();
+  });
+
+  it("falls back to the product name", async () => {
+    renderPricing();
+    expect(await screen.findByRole("heading", { level: 1, name: "Crochet Patterns" })).toBeDefined();
+  });
+});
+
+describe("a Lite monthly subscriber on Annual (crochet_patterns-m1psz)", () => {
+  it("offers Switch to annual on their own tier, marked as their plan", async () => {
+    renderPricing({ currentPlan: { signedIn: true, subscription: liteMonthly() } });
+    await waitFor(() => expect(card("crochet-lite")).toBeDefined());
+    toAnnual();
+    expect(cta("crochet-lite-annual").textContent).toMatch(/switch to annual/i);
+    expect(screen.getByTestId("your-plan-note-crochet-lite-annual").textContent).toBe("Your plan · billed monthly");
+  });
+});
+
+describe("cards share row slots (crochet_patterns-h74l1)", () => {
+  it("gives every card the lead-in row and no featured card is scaled", async () => {
+    renderPricing();
+    await waitFor(() => expect(card("crochet-pro")).toBeDefined());
+    for (const slug of ["crochet-free", "crochet-lite", "crochet-pro"]) {
+      expect(screen.getByTestId(`card-lead-${slug}`)).toBeDefined();
+      expect(card(slug).className).not.toMatch(/scale-/);
+    }
+  });
+});

package/src/components/PricingDetailPage.tsx

@@ -42,8 +42,19 @@ export interface PricingDetailPageProps {
   showComparison?: boolean;
 
   /** The viewer's plan, so their card reads "Current plan" and is disabled.
-   * Omit on signed-out pages. crochet_patterns-34n7. */
+   * Omit on signed-out pages. crochet_patterns-34n7. While it loads or has
+   * failed every plan button waits (crochet_patterns-ktjto). */
   currentPlan?: CurrentPlanState | null;
+
+  /** A purchase the host started is in flight (e.g. an auto-checkout after
+   * sign-up): every plan button and the interval toggle wait. */
+  busy?: boolean;
+
+  /** Page heading; defaults to the product name. */
+  title?: React.ReactNode;
+
+  /** Line under the heading; defaults to the product description. */
+  subtitle?: React.ReactNode;
 }
 
 export function PricingDetailPage({
@@ -51,14 +62,20 @@ export function PricingDetailPage({
   onSelectOffer,
   showComparison = true,
   currentPlan,
+  busy: hostBusy = false,
+  title,
+  subtitle,
 }: PricingDetailPageProps) {
-  const { product, loading, error } = useProduct(productId);
+  const { product, loading, error, refetch } = useProduct(productId);
   const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
   const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
     product?.offers ?? [],
     currentOffer?.id ?? null,
   );
   const planChange = usePlanChange(async (offer, preview) => onSelectOffer?.(offer, preview));
+  // A purchase by a viewer with no plan (signed out) skips usePlanChange, so
+  // it is tracked here: the clicked card spins and every other button waits.
+  const [selecting, setSelecting] = React.useState<string | null>(null);
 
   if (loading) {
     return (
@@ -70,8 +87,16 @@ export function PricingDetailPage({
 
   if (error || !product) {
     return (
-      <div className="text-center py-16 text-red-600">
-        Unable to load pricing. Please try again.
+      <div role="alert" className="text-center py-16">
+        <p className="text-red-600">Unable to load pricing.</p>
+        <button
+          type="button"
+          data-testid="pricing-retry"
+          onClick={refetch}
+          className="mt-4 py-2 px-5 text-sm font-semibold rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
+        >
+          Try again
+        </button>
       </div>
     );
   }
@@ -94,13 +119,30 @@ export function PricingDetailPage({
   const onUnlistedPlan = isUnlistedOffer(product.offers, currentOffer);
   const tierKeyOf = (offerId: string) =>
     entries.find(({ tier }) => tier.monthly?.id === offerId || tier.annual?.id === offerId)?.tier.key ?? null;
+  // Signed in but the plan is not known yet (or failed to load): a click
+  // could buy what they already have or drop a paying plan to Free.
+  const planUnknown = !!currentPlan && (!!currentPlan.loading || (currentPlan.signedIn && !!currentPlan.error));
+  const busy = planChange.busy || hostBusy || selecting !== null;
   const select = (offer: ProductOffer) => {
+    if (busy || planUnknown) return;
     if (!currentOffer) {
-      onSelectOffer?.(offer);
+      setSelecting(offer.id);
+      void Promise.resolve()
+        .then(() => onSelectOffer?.(offer))
+        .then(
+          (outcome) => { if (outcome !== "navigating") setSelecting(null); },
+          () => setSelecting(null),
+        );
       return;
     }
+    setSelecting(null);
     void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
   };
+  const spinningId = busy ? selecting ?? planChange.pending?.offer.id ?? null : null;
+
+  // What each tier already has, so a card under "Everything in X, plus:"
+  // lists only what it adds (crochet_patterns-tv7fb).
+  const cumulative = cumulativeFeatureLookup(visibleOffers);
 
   // Extract all unique feature keys across all offers (preserving order)
   const allFeatureKeys: string[] = [];
@@ -118,10 +160,10 @@ export function PricingDetailPage({
     <div data-testid="pricing-detail" className="max-w-6xl mx-auto px-6 py-12">
       <div className="text-center mb-12">
         <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 mb-3">
-          {product.name}
+          {title ?? product.name}
         </h1>
         <p className="text-lg text-gray-500 max-w-xl mx-auto">
-          {product.description}
+          {subtitle ?? product.description}
         </p>
       </div>
 
@@ -144,9 +186,35 @@ export function PricingDetailPage({
         </div>
       )}
 
+      {planUnknown && (
+        <div
+          data-testid="plan-unknown"
+          role="status"
+          className="mb-8 mx-auto max-w-2xl rounded-xl border border-gray-200 bg-gray-50 p-4 text-center"
+        >
+          {currentPlan?.loading ? (
+            <p className="text-sm text-gray-700">Checking your plan…</p>
+          ) : (
+            <>
+              <p className="text-sm text-gray-700">We couldn&apos;t check your plan, so plan changes are paused.</p>
+              {currentPlan?.retry && (
+                <button
+                  type="button"
+                  data-testid="plan-retry"
+                  onClick={currentPlan.retry}
+                  className="mt-2 text-sm font-semibold text-blue-700 hover:underline cursor-pointer"
+                >
+                  Try again
+                </button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
       {hasChoice && (
         <div className="mb-10">
-          <IntervalToggle interval={interval} onChange={setInterval} />
+          <IntervalToggle interval={interval} onChange={setInterval} disabled={busy} />
         </div>
       )}
 
@@ -160,10 +228,13 @@ export function PricingDetailPage({
               entry={entry}
               onSelect={select}
               buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              inherited={below ? cumulative[below.slug] ?? null : null}
               isCurrent={direction === "current"}
+              yourPlanNote={direction === "switch" && currentOffer ? `Your plan · billed ${currentOffer.intervalUnit === "year" ? "yearly" : "monthly"}` : null}
               ctaLabel={direction ? planCtaLabel(entry.offer, direction, paying) : entry.offer.ctaText}
               showTrial={direction ? trialApplies(entry.offer, direction, paying) : entry.offer.trialDays > 0}
-              busy={planChange.busy}
+              busy={busy || planUnknown}
+              spinning={spinningId === entry.offer.id}
             />
           );
         })}
@@ -193,6 +264,12 @@ interface DetailCardProps {
   onSelect?: (offer: ProductOffer) => void;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
+  /** What the tier below already has (cumulative); rows it matches are not repeated. */
+  inherited?: Record<string, OfferFeature> | null;
+  /** "Your plan · billed monthly" on the other-interval card of the viewer's plan. */
+  yourPlanNote?: string | null;
+  /** This card's purchase is in flight: its button spins. */
+  spinning?: boolean;
   /** The viewer is on this offer: "Current plan", disabled. */
   isCurrent?: boolean;
   /** The button's words for this viewer (planCtaLabel). */
@@ -203,13 +280,27 @@ interface DetailCardProps {
   busy?: boolean;
 }
 
-function DetailCard({ entry, onSelect, buildsOn, isCurrent = false, ctaLabel, showTrial, busy = false }: DetailCardProps) {
+function sameFeature(a: OfferFeature, b: OfferFeature): boolean {
+  return a.value === b.value && (a.limit ?? null) === (b.limit ?? null);
+}
+
+function DetailCard({
+  entry, onSelect, buildsOn, inherited, yourPlanNote, isCurrent = false, ctaLabel, showTrial, busy = false, spinning = false,
+}: DetailCardProps) {
   const { offer, tier } = entry;
   const trial = showTrial ?? offer.trialDays > 0;
-  const features = trial || !(offer.trialDays > 0)
-    ? offer.features
-    : offer.features.filter((f) => f.key !== TRIAL_NOTE_FEATURE_KEY);
-  const isFeatured = offer.isFeatured;
+  // Each row once (crochet_patterns-tv7fb): no "not included" rows (the
+  // comparison table has them), no trial row (the pill says it, or the trial
+  // does not apply), and nothing the tier below already has.
+  const features = offer.features.filter((f) => {
+    if (f.value === false) return false;
+    if (f.key === TRIAL_NOTE_FEATURE_KEY) return false;
+    const below = inherited?.[f.key];
+    return !(below && sameFeature(below, f));
+  });
+  // Featured is the tier's, so Pro stays highlighted on Annual too
+  // (crochet_patterns-ftrka).
+  const isFeatured = !!(tier.monthly?.isFeatured || tier.annual?.isFeatured);
 
   return (
     <div
@@ -217,7 +308,7 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false, ctaLabel, sh
       className={`
         flex flex-col relative rounded-2xl p-8 w-full max-w-sm flex-1 min-w-[280px]
         ${isFeatured
-          ? "border-2 border-blue-600 shadow-lg scale-[1.03]"
+          ? "border-2 border-blue-600 shadow-lg"
           : "border border-gray-200 bg-white shadow-sm"
         }
       `}
@@ -230,26 +321,34 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false, ctaLabel, sh
 
       <h2 className="text-xl font-bold text-gray-900 mb-4">{tier.name}</h2>
 
+      {/* Every card reserves the same rows (price, note, pill, lead-in) so
+          matching features line up across cards (crochet_patterns-h74l1). */}
       <div className="mb-2">
         <OfferPrice
           offer={offer}
           amountClassName="text-4xl font-extrabold text-gray-900"
           intervalClassName="text-base text-gray-500"
         />
-        <AnnualNote entry={entry} className="mt-1" />
+        <div className="mt-1 min-h-4">
+          <AnnualNote entry={entry} />
+        </div>
       </div>
 
-      {trial && (
-        <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg mb-5 w-fit">
-          {offer.trialDays}-day free trial
-        </span>
-      )}
+      <div className="mb-5 min-h-8">
+        {trial ? (
+          <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
+            {offer.trialDays}-day free trial
+          </span>
+        ) : yourPlanNote ? (
+          <span data-testid={`your-plan-note-${offer.slug}`} className="inline-block bg-gray-100 text-gray-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">
+            {yourPlanNote}
+          </span>
+        ) : null}
+      </div>
 
-      {buildsOn && (
-        <p className="text-sm font-semibold text-gray-900 mb-1">
-          Everything in {buildsOn}, plus:
-        </p>
-      )}
+      <p data-testid={`card-lead-${offer.slug}`} className="text-sm font-semibold text-gray-900 mb-1 min-h-5">
+        {buildsOn ? `Everything in ${buildsOn}, plus:` : null}
+      </p>
 
       <ul className="list-none p-0 m-0 mb-7 flex-1 space-y-0">
         {features.map((feature) => (
@@ -271,16 +370,20 @@ function DetailCard({ entry, onSelect, buildsOn, isCurrent = false, ctaLabel, sh
         data-testid={`detail-cta-${offer.slug}`}
         disabled={isCurrent || busy}
         aria-disabled={isCurrent || busy || undefined}
+        aria-busy={spinning || undefined}
         className={`
           w-full py-3.5 px-6 text-base font-bold rounded-xl transition-colors
           ${isCurrent
             ? "bg-gray-100 text-gray-500 cursor-not-allowed"
             : isFeatured
-              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
+              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
+              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer disabled:opacity-70 disabled:cursor-wait"
           }
         `}
       >
+        {spinning && (
+          <span aria-hidden="true" className="inline-block align-[-2px] mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-b-transparent" />
+        )}
         {isCurrent ? "Current plan" : ctaLabel ?? offer.ctaText}
       </button>
     </div>

package/src/components/SubscriptionManager.test.tsx

@@ -290,8 +290,8 @@ describe("SubscriptionManager", () => {
     // Check trialing status
     expect(screen.getByText(/trialing/i)).toBeDefined();
 
-    // Check trial end date is displayed
-    expect(screen.getByText(/2026-01-15/)).toBeDefined();
+    // The trial end is shown in the banner's format (crochet_patterns-rjg2e).
+    expect(screen.getByTestId("first-charge").textContent).toMatch(/Jan 15, 2026/);
   });
 
   it("shows billing period dates", async () => {
@@ -319,7 +319,7 @@ describe("SubscriptionManager", () => {
     // or free states after startsim-7j4. Both dates are still in the DOM via
     // the grid card's renderings, so target the current-plan card specifically.
     const currentPlan = screen.getByTestId("current-plan");
-    expect(currentPlan.textContent).toMatch(/2026-02-01/);
+    expect(currentPlan.textContent).toMatch(/Feb 1, 2026/);
   });
 
   it("shows ALL offers in the Change Plan grid (current marked, not hidden) — startsim-1f1", async () => {
@@ -348,10 +348,12 @@ describe("SubscriptionManager", () => {
     expect(screen.getByTestId("plan-card-pro-monthly")).toBeDefined();
     expect(screen.getByTestId("plan-card-enterprise-monthly")).toBeDefined();
 
-    // The matching one (Pro) carries the badge; the others do not.
-    expect(screen.getByTestId("current-plan-badge-pro-monthly")).toBeDefined();
-    expect(screen.queryByTestId("current-plan-badge-starter-monthly")).toBeNull();
-    expect(screen.queryByTestId("current-plan-badge-enterprise-monthly")).toBeNull();
+    // The matching one (Pro) is marked current; the others are not.
+    expect(screen.getByTestId("plan-card-pro-monthly").getAttribute("data-current")).toBe("true");
+    expect(screen.getByTestId("plan-card-starter-monthly").getAttribute("data-current")).toBeNull();
+    expect(screen.getByTestId("plan-card-enterprise-monthly").getAttribute("data-current")).toBeNull();
+    // One marker: the disabled "Current plan" button, no badge beside it (crochet_patterns-n8iib).
+    expect(within(screen.getByTestId("plan-card-pro-monthly")).getAllByText(/current plan/i)).toHaveLength(1);
   });
 
   it("calls onPlanChange when upgrade option clicked", async () => {
@@ -891,11 +893,11 @@ describe("SubscriptionManager", () => {
         expect((cta as HTMLButtonElement).disabled).toBe(false);
       }
 
-      const badge = screen.queryByTestId(`current-plan-badge-${cardSlug}`);
+      const current = screen.getByTestId(`plan-card-${cardSlug}`).getAttribute("data-current");
       if (shouldShowCurrentBadge) {
-        expect(badge).not.toBeNull();
+        expect(current).toBe("true");
       } else {
-        expect(badge).toBeNull();
+        expect(current).toBeNull();
       }
 
       // Trial copy: only show on the upgrade direction for trialDays > 0 offers
@@ -932,7 +934,7 @@ describe("SubscriptionManager", () => {
 
     const nextBilling = screen.getByTestId("next-billing-date");
     expect(nextBilling.textContent).toMatch(/next billing date/i);
-    expect(nextBilling.textContent).toMatch(/2026-02-01/);
+    expect(nextBilling.textContent).toMatch(/Feb 1, 2026/);
     // The verbose "Billing period:" line is hidden on active paid subs.
     expect(screen.queryByText(/^Billing period:/i)).toBeNull();
   });

package/src/components/SubscriptionManager.tsx

@@ -304,14 +304,34 @@ export function SubscriptionManager({
   // Show every tier in the Change Plan grid (not just non-current ones) so
   // users can compare and see what they have; `entries` is one offer per tier
   // for the chosen interval. The card matching their current plan gets a
-  // "Current plan" badge + disabled CTA. startsim-1f1, crochet_patterns-34n7.
+  // a ring and a disabled "Current plan" CTA — one marker, not a badge as well
+  // (crochet_patterns-n8iib). startsim-1f1, crochet_patterns-34n7.
 
   // Direction and label per card, shared with /pricing (utils/plan):
   // startsim-21f, crochet_patterns-anw61.
   const paying = isPayingSubscription(usableSubscription);
   const onUnlistedPlan = !!product && isUnlistedOffer(product.offers, usableSubscription?.offer);
+  // A complimentary plan on a listed tier ("Pro (complimentary)", tier pro)
+  // IS that tier: its card reads "Current plan" and nothing sells the viewer a
+  // trial of what they have (crochet_patterns-lgqp2).
+  const ownTierKey = onUnlistedPlan && usableSubscription?.offer.tier ? `tier:${usableSubscription.offer.tier}` : null;
+  const ownTier = ownTierKey ? entries.find(({ tier }) => tier.key === ownTierKey) ?? null : null;
+  const rankOffer = ownTier?.offer ?? currentOffer;
   const directionFor = (cardOffer: ProductOffer): PlanDirection =>
-    planDirection(cardOffer, currentOffer, tierKeyOf);
+    ownTier && tierKeyOf(cardOffer.id) === ownTier.tier.key
+      ? "current"
+      : planDirection(cardOffer, rankOffer, tierKeyOf);
+
+  // A paid plan that is ending falls back to the free plan on its end date, so
+  // the free card says when instead of offering a second downgrade
+  // (crochet_patterns-3bzni, -pes38).
+  const endingOn =
+    usableSubscription && !usableSubscription.offer.isFree &&
+    (usableSubscription.status === "cancelled" || usableSubscription.cancelAtPeriodEnd) &&
+    usableSubscription.currentPeriodEnd &&
+    new Date(usableSubscription.currentPeriodEnd).getTime() > Date.now()
+      ? usableSubscription.currentPeriodEnd
+      : null;
 
   const handleOfferClick = (offer: ProductOffer) => {
     // Non-owner viewers can SEE the plans but can't change them — startsim-wo9.
@@ -328,8 +348,8 @@ export function SubscriptionManager({
   // only apps), so the Upgrade CTA simply doesn't render — startsim-ft2.
   const featuredPaidOffer: ProductOffer | null = (() => {
     if (!product) return null;
-    if (currentOffer) {
-      const above = product.offers.filter((o) => !o.isFree && o.sortOrder > currentOffer.sortOrder);
+    if (rankOffer) {
+      const above = product.offers.filter((o) => !o.isFree && o.sortOrder > rankOffer.sortOrder);
       return above.find((o) => o.isFeatured) ?? above[0] ?? null;
     }
     return (
@@ -355,7 +375,12 @@ export function SubscriptionManager({
           <svg className="w-5 h-5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
           </svg>
-          <p className="text-sm font-medium text-green-800">Subscription activated successfully!</p>
+          <p className="text-sm font-medium text-green-800">
+            {/* A trial is not yet a paid plan (crochet_patterns-reg6a). */}
+            {usableSubscription?.status === "trialing"
+              ? `Your ${usableSubscription.offer.name} trial has started.`
+              : "Subscription activated successfully!"}
+          </p>
         </div>
       )}
 
@@ -496,7 +521,13 @@ export function SubscriptionManager({
               const direction = directionFor(offer);
               const isCurrent = direction === "current";
               const isDowngrade = direction === "downgrade" || direction === "switch";
-              const ctaLabel = planCtaLabel(offer, direction, paying);
+              const fallsBackHere = !!endingOn && offer.isFree;
+              // Straight to checkout: say so until the page goes (crochet_patterns-jnkso).
+              const opening = planChange.busy && planChange.choosing?.id === offer.id && !planChange.pending && !offer.isFree && !paying;
+              const ctaLabel = fallsBackHere
+                ? `Starts ${new Date(endingOn).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", timeZone: "UTC" })}`
+                : opening ? "Opening checkout\u2026"
+                : planCtaLabel(offer, direction, paying);
               const showTrial = trialApplies(offer, direction, paying);
 
               // Border: current = solid ring; featured upgrade = blue; else gray.
@@ -520,16 +551,9 @@ export function SubscriptionManager({
                   key={offer.id}
                   data-testid={`plan-card-${offer.slug}`}
                   data-direction={direction}
-                  className={`relative rounded-xl p-6 transition-colors ${cardBorder}`}
+                  data-current={isCurrent || undefined}
+                  className={`relative flex flex-col rounded-xl p-6 transition-colors ${cardBorder}`}
                 >
-                  {isCurrent && (
-                    <span
-                      data-testid={`current-plan-badge-${offer.slug}`}
-                      className="absolute -top-2.5 right-4 inline-block bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full"
-                    >
-                      Current plan
-                    </span>
-                  )}
                   <h4 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h4>
                   <div className="mb-3">
                     <OfferPrice
@@ -546,12 +570,12 @@ export function SubscriptionManager({
                   <PlanFeatureList features={offer.features} showTrialNote={showTrial || !(offer.trialDays > 0)} />
                   <button
                     data-testid={`upgrade-cta-${offer.slug}`}
-                    onClick={() => !isCurrent && !isViewerNonOwner && !planChange.busy && handleOfferClick(offer)}
-                    disabled={isCurrent || isViewerNonOwner || planChange.busy}
-                    aria-disabled={isCurrent || isViewerNonOwner || planChange.busy || undefined}
-                    aria-busy={planChange.busy && planChange.pending?.offer.id === offer.id ? true : undefined}
+                    onClick={() => !isCurrent && !fallsBackHere && !isViewerNonOwner && !planChange.busy && handleOfferClick(offer)}
+                    disabled={isCurrent || fallsBackHere || isViewerNonOwner || planChange.busy}
+                    aria-disabled={isCurrent || fallsBackHere || isViewerNonOwner || planChange.busy || undefined}
+                    aria-busy={planChange.busy && planChange.choosing?.id === offer.id ? true : undefined}
                     title={isViewerNonOwner ? "Only the team owner can change the plan" : undefined}
-                    className={`w-full py-2.5 px-4 text-sm font-bold rounded-xl transition-colors ${ctaClass} ${isViewerNonOwner ? "opacity-60 cursor-not-allowed" : ""}`}
+                    className={`mt-auto w-full py-2.5 px-4 text-sm font-bold rounded-xl transition-colors ${fallsBackHere ? "bg-gray-100 text-gray-500 cursor-not-allowed" : ctaClass} ${isViewerNonOwner ? "opacity-60 cursor-not-allowed" : ""}`}
                   >
                     {ctaLabel}
                   </button>
@@ -567,7 +591,8 @@ export function SubscriptionManager({
           Free-tier users (provider='none') have no Stripe customer, so the
           portal call would 404 — they get the Upgrade CTA on the current-plan
           card instead. startsim-b1z. */}
-      {usableSubscription && usableSubscription.status !== "cancelled" && !usableSubscription.offer.isFree && usableSubscription.viewerIsOwner !== false && (
+      {/* A cancelled paid plan keeps it too: its invoices are there (crochet_patterns-pes38). */}
+      {usableSubscription && !usableSubscription.offer.isFree && usableSubscription.viewerIsOwner !== false && (
         <div className="pt-4 border-t border-gray-100">
           <button
             data-testid="portal-button"

package/src/hooks/usePlanChange.ts

@@ -48,6 +48,8 @@ export interface UsePlanChangeResult {
   /** Open when the viewer must confirm. */
   pending: PlanChangeConfirmState | null;
   busy: boolean;
+  /** The offer being chosen while `busy`, so its button can say what is happening. */
+  choosing: ProductOffer | null;
   /** The confirm step itself is running. */
   confirming: boolean;
   error: string | null;
@@ -57,7 +59,12 @@ export interface UsePlanChangeResult {
 export function usePlanChange(proceed: PlanChangeProceed): UsePlanChangeResult {
   const { client } = useBillingContext();
   const [pending, setPending] = useState<PlanChangeConfirmState | null>(null);
-  const [busy, setBusy] = useState(false);
+  const [busy, setBusyState] = useState(false);
+  const [choosing, setChoosing] = useState<ProductOffer | null>(null);
+  const setBusy = useCallback((value: boolean, offer: ProductOffer | null = null) => {
+    setBusyState(value);
+    setChoosing(value ? offer : null);
+  }, []);
   const [confirming, setConfirming] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const inFlight = useRef(false);
@@ -78,14 +85,14 @@ export function usePlanChange(proceed: PlanChangeProceed): UsePlanChangeResult {
         return false;
       }
     },
-    [proceed],
+    [proceed, setBusy],
   );
 
   const choose = useCallback(
     async (offer: ProductOffer, context: PlanChangeContext) => {
       if (inFlight.current) return;
       inFlight.current = true;
-      setBusy(true);
+      setBusy(true, offer);
       setError(null);
 
       const leavingUnlisted = !!context.leavingUnlisted;
@@ -118,7 +125,7 @@ export function usePlanChange(proceed: PlanChangeProceed): UsePlanChangeResult {
         leavingUnlisted: preview?.currentOffer ? !preview.currentOffer.isListed : leavingUnlisted,
       });
     },
-    [client, run],
+    [client, run, setBusy],
   );
 
   const confirm = useCallback(async () => {
@@ -136,9 +143,9 @@ export function usePlanChange(proceed: PlanChangeProceed): UsePlanChangeResult {
     setError(null);
     inFlight.current = false;
     setBusy(false);
-  }, [confirming]);
+  }, [confirming, setBusy]);
 
   const clearError = useCallback(() => setError(null), []);
 
-  return { choose, confirm, cancel, pending, busy, confirming, error, clearError };
+  return { choose, confirm, cancel, pending, busy, choosing, confirming, error, clearError };
 }

package/src/utils/plan.ts

@@ -213,6 +213,8 @@ export interface CurrentPlanState {
   loading?: boolean;
   /** The subscription fetch failed. */
   error?: unknown;
+  /** Fetch the subscription again (offered when it failed). */
+  retry?: () => void;
 }
 
 /**