@tribe-nest/forge 3.52.0 → 3.54.0

package/src/ui/payment/ForgePaymentProvider.tsx

@@ -1,3 +1,4 @@
+import type { DeferredChargeStrategy, PaymentSettlement } from "../../types/models";
 import { createContext, useContext, type ReactNode } from "react";
 import { ForgeStripePayment } from "./ForgeStripePayment";
 
@@ -16,6 +17,20 @@ export interface PaymentRenderProps {
   mode?: "redirect" | "manual";
   onSucceeded?: () => void;
   onFailed?: (message?: string) => void;
+  /**
+   * `"deferred"` when the charge is committed now and taken only if the
+   * organiser approves (a ticket request). The built-in renderer then labels
+   * the button "Authorize {amount}" and says under it that the card is charged
+   * only on approval. Absent on every ordinary sale, so a custom renderer that
+   * ignores it keeps working exactly as before.
+   */
+  settlement?: PaymentSettlement;
+  /**
+   * How the provider defers: `"authorization"` shows a temporary hold on the
+   * fan's statement and the renderer says so; `"saved_instrument"` takes
+   * nothing until approval. Only sent with `settlement: "deferred"`.
+   */
+  deferredStrategy?: DeferredChargeStrategy | null;
 }
 
 export type PaymentRenderer = (props: PaymentRenderProps) => ReactNode;

package/src/ui/payment/ForgeStripePayment.tsx

@@ -5,7 +5,9 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useFormatCurrency } from "../format/useFormatCurrency";
 import { useSiteConfig } from "../../data/queries/useWebsite";
+import { useForgeT } from "../../i18n";
 import type { PaymentRenderProps } from "./ForgePaymentProvider";
+import { deferredChargeNotice, isDeferredSettlement, isManualConfirmSuccess } from "./stripeConfirmOutcome";
 
 function alpha(hex: number) {
   return Math.round(hex * 255)
@@ -30,6 +32,8 @@ export function ForgeStripePayment({
   mode = "redirect",
   onSucceeded,
   onFailed,
+  settlement,
+  deferredStrategy,
 }: PaymentRenderProps) {
   const theme = useForgeTheme();
   const { data: siteConfig } = useSiteConfig();
@@ -91,7 +95,16 @@ export function ForgeStripePayment({
 
   return (
     <Elements options={{ clientSecret, appearance, loader: "auto" }} stripe={stripePromise}>
-      <Inner returnUrl={returnUrl} amount={amount} currency={currency} mode={mode} onSucceeded={onSucceeded} onFailed={onFailed} />
+      <Inner
+        returnUrl={returnUrl}
+        amount={amount}
+        currency={currency}
+        mode={mode}
+        onSucceeded={onSucceeded}
+        onFailed={onFailed}
+        settlement={settlement}
+        deferredStrategy={deferredStrategy}
+      />
     </Elements>
   );
 }
@@ -103,15 +116,26 @@ function Inner({
   mode = "redirect",
   onSucceeded,
   onFailed,
+  settlement,
+  deferredStrategy,
 }: Omit<PaymentRenderProps, "clientSecret">) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { formatCurrency } = useFormatCurrency();
   const stripe = useStripe();
   const elements = useElements();
   const [message, setMessage] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
-  const buttonText = `Pay ${formatCurrency(amount, currency || undefined)} Now`;
+  // A deferred charge is not a payment yet: the button says what actually
+  // happens when it is pressed, and the line under it says when the money
+  // moves. That line is content, not help: a fan reading "Authorize" without
+  // it has been told their card was committed and nothing about why.
+  const deferred = isDeferredSettlement(settlement);
+  const formattedAmount = formatCurrency(amount, currency || undefined);
+  const buttonText = deferred
+    ? t("forge.forge_stripe_payment.authorize", { amount: formattedAmount })
+    : `Pay ${formattedAmount} Now`;
 
   const handleSubmit = useCallback(async () => {
     if (!stripe || !elements) return;
@@ -131,7 +155,9 @@ function Inner({
         onFailed?.(msg);
         return;
       }
-      if (paymentIntent?.status === "succeeded" || paymentIntent?.status === "processing") {
+      // `requires_capture` is a deferred charge that went through: the card is
+      // authorised and the platform captures it on approval. See the helper.
+      if (isManualConfirmSuccess(paymentIntent?.status)) {
         setIsLoading(false);
         onSucceeded?.();
         return;
@@ -166,6 +192,14 @@ function Inner({
       >
         {isLoading ? "Processing…" : buttonText}
       </button>
+      {deferred && (
+        <p data-testid="deferred-charge-notice" style={{ margin: 0, fontSize: 13, opacity: 0.8, lineHeight: 1.5 }}>
+          {t("forge.forge_stripe_payment.deferred_charged_on_approval")}
+          {deferredChargeNotice(deferredStrategy) === "authorization" && (
+            <> {t("forge.forge_stripe_payment.deferred_hold_on_statement")}</>
+          )}
+        </p>
+      )}
     </form>
   );
 }

package/src/ui/payment/_tests/stripeConfirmOutcome.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest";
+import {
+  deferredChargeNotice,
+  isDeferredSettlement,
+  isManualConfirmSuccess,
+  MANUAL_CONFIRM_SUCCESS_STATUSES,
+} from "../stripeConfirmOutcome";
+
+/**
+ * The one-line fix from the curated-access design (section 6.2, step 2): a
+ * deferred charge leaves the PaymentIntent at `requires_capture`, and the
+ * manual-mode branch of `ForgeStripePayment` used to read anything that was
+ * not `succeeded`/`processing` as "Payment did not complete". The decision is
+ * a pure function now, so the renderer cannot drift back.
+ */
+describe("isManualConfirmSuccess", () => {
+  it("REGRESSION: counts an authorised, uncaptured intent as the fan being done", () => {
+    expect(isManualConfirmSuccess("requires_capture")).toBe(true);
+  });
+
+  it("keeps the two statuses it always accepted", () => {
+    expect(isManualConfirmSuccess("succeeded")).toBe(true);
+    expect(isManualConfirmSuccess("processing")).toBe(true);
+  });
+
+  it("still refuses every status that means the fan is not done", () => {
+    for (const status of ["requires_payment_method", "requires_confirmation", "requires_action", "canceled"]) {
+      expect(isManualConfirmSuccess(status)).toBe(false);
+    }
+    expect(isManualConfirmSuccess(undefined)).toBe(false);
+    expect(isManualConfirmSuccess(null)).toBe(false);
+    expect(isManualConfirmSuccess("")).toBe(false);
+  });
+
+  it("exposes the same set the renderer reads, so a custom renderer can share it", () => {
+    expect([...MANUAL_CONFIRM_SUCCESS_STATUSES].sort()).toEqual(["processing", "requires_capture", "succeeded"]);
+  });
+});
+
+describe("isDeferredSettlement", () => {
+  it("is true only for an explicit deferred charge", () => {
+    expect(isDeferredSettlement("deferred")).toBe(true);
+    expect(isDeferredSettlement("immediate")).toBe(false);
+    // An older API build sends nothing, and nothing must render as a sale.
+    expect(isDeferredSettlement(undefined)).toBe(false);
+    expect(isDeferredSettlement(null)).toBe(false);
+  });
+});
+
+describe("deferredChargeNotice", () => {
+  it("promises a visible hold only when the provider actually places one", () => {
+    expect(deferredChargeNotice("authorization")).toBe("authorization");
+    expect(deferredChargeNotice("saved_instrument")).toBe("saved_instrument");
+  });
+
+  it("falls back to the quieter line for an unknown strategy", () => {
+    // Promising a hold that never appears is the larger lie of the two.
+    expect(deferredChargeNotice(undefined)).toBe("saved_instrument");
+    expect(deferredChargeNotice(null)).toBe("saved_instrument");
+  });
+});

package/src/ui/payment/stripeConfirmOutcome.ts

@@ -0,0 +1,50 @@
+import type { DeferredChargeStrategy, PaymentSettlement } from "../../types/models";
+
+/**
+ * The PaymentIntent statuses `confirmPayment` can leave behind that mean "the
+ * fan's part is done", in the manual (confirm-in-place) branch of
+ * `ForgeStripePayment`.
+ *
+ *   succeeded         charged
+ *   processing        a delayed-notification method (bank debit); charged later
+ *   requires_capture  AUTHORISED, not captured: a deferred charge. The platform
+ *                     captures it when the organiser approves a ticket request
+ *                     (curated access, feature 3) and cancels it otherwise.
+ *
+ * Before `requires_capture` was here a request checkout confirmed the card,
+ * Stripe answered exactly what a manual-capture intent answers, and the
+ * renderer told the fan "Payment did not complete" while the order was already
+ * on its way to `pending_approval`. Anything else (`requires_payment_method`,
+ * `requires_action` that did not resolve, `canceled`) is not done.
+ */
+export const MANUAL_CONFIRM_SUCCESS_STATUSES: ReadonlySet<string> = new Set([
+  "succeeded",
+  "processing",
+  "requires_capture",
+]);
+
+/** Does this post-confirm PaymentIntent status count as the fan having finished? */
+export function isManualConfirmSuccess(status: string | null | undefined): boolean {
+  return !!status && MANUAL_CONFIRM_SUCCESS_STATUSES.has(status);
+}
+
+/** A deferred charge: the card is committed now and taken only on approval. */
+export function isDeferredSettlement(settlement: PaymentSettlement | null | undefined): boolean {
+  return settlement === "deferred";
+}
+
+/**
+ * Which explanation goes under the pay button on a deferred charge.
+ *
+ * `authorization` places a hold the fan will SEE on their statement, so the
+ * line has to say so or the first thing they notice is a pending charge they
+ * were promised would not happen. `saved_instrument` (a provider that stores
+ * the card and charges it later) takes nothing, and the line says only that.
+ * An unknown strategy is treated as the quieter of the two: promising a hold
+ * that never appears is the lesser lie.
+ */
+export function deferredChargeNotice(
+  strategy: DeferredChargeStrategy | null | undefined,
+): "authorization" | "saved_instrument" {
+  return strategy === "authorization" ? "authorization" : "saved_instrument";
+}

package/src/ui/shell/TribeNestApp.tsx

@@ -16,6 +16,12 @@ import { previewDiagnosticsEnabled, resolvePreviewDiagnostics } from "./diagnost
 import type { ForgeSsrDiagnostics } from "../../types/diagnostics";
 import { captureAttributionRefFromUrl, readAttributionRef } from "../../utils/attribution";
 import { captureLandingFromUrl, postLandingBeacon } from "../../utils/landing";
+import { registerHostRuntime } from "../../runtime/hostRuntime";
+
+// Module scope, not a hook. The hosted `/i/*` bundle can be imported by the
+// very first page a visitor lands on, so the runtime it reads has to be
+// published before any component renders, not during one.
+registerHostRuntime();
 
 // Captures both attribution signals on first paint: the tracked-link `?tn_ref`
 // (stripped afterwards) and the first-touch landing snapshot (all utm/click-id

package/src/ui/styled/AccountDashboard.tsx

@@ -4,6 +4,8 @@ import {
   useUserOrders,
   useMyTickets,
   useCancelMyTicket,
+  isMyTicketRequestOpenOrEnded,
+  myTicketRequestState,
   myTicketHeldPassIds,
   myTicketPasses,
   type MyTicket,
@@ -18,7 +20,9 @@ import {
   useSavedPosts,
   useNotificationPreferences,
   useUpdateNotificationPreference,
+  useMyCourses,
   useMyFilmRentals,
+  type MyCourse,
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
@@ -62,6 +66,11 @@ export const ACCOUNT_TABS = [
   // Drawn only when the fan actually holds a rental (see `visibleTabs`), so the
   // tab does not appear on the account page of every site that never sells one.
   "rentals",
+  // Courses this fan has bought. Beside the other purchase surfaces because it
+  // answers the same question they do, and it was the ONE purchase with no
+  // answer on this page: a creator's most expensive product, invisible once
+  // bought. Drawn only when they hold one (see `visibleTabs`).
+  "courses",
   "saved",
   "account",
   "notifications",
@@ -79,6 +88,7 @@ const TAB_LABEL_KEYS: Record<AccountTabKey, string> = {
   waitlist: "forge.account_dashboard.tab_waitlist",
   bookings: "forge.account_dashboard.tab_bookings",
   rentals: "forge.account_dashboard.tab_rentals",
+  courses: "forge.account_dashboard.tab_courses",
   saved: "forge.account_dashboard.tab_saved",
   account: "forge.account_dashboard.tab_account",
   notifications: "forge.account_dashboard.tab_notifications",
@@ -116,6 +126,17 @@ export interface AccountDashboardProps {
    * full-page visit, which works on any site and is merely slower.
    */
   onNavigateFilm?: (href: string) => void;
+  /**
+   * Open a course the fan owns.
+   *
+   * It must go to the CLASSROOM, keyed by `accessId`, never to the course's
+   * sales page. The sales page is where someone decides whether to buy, which
+   * is a dead end for a person who already owns it and came here to carry on.
+   *
+   * Left out, a course row is inert - so a host that draws the tab and omits
+   * this gives the fan something that looks clickable and does nothing.
+   */
+  onNavigateCourse?: (course: MyCourse) => void;
   /**
    * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
    * (which honors the visitor's selected currency + tenant exchange rates), so the
@@ -183,6 +204,15 @@ interface TabContext {
   onNavigateMembership?: () => void;
   onNavigateCommunity?: () => void;
   onNavigateFilm?: (href: string) => void;
+  /**
+   * Open a course the fan owns. Host-supplied, like every other navigation
+   * target here, because the route shape belongs to the site not to Forge.
+   *
+   * It must go to the CLASSROOM (`accessId`), never to the course's sales page
+   * (`courseId`). The sales page is where someone decides whether to buy, which
+   * is a dead end for someone who already owns it and came here to carry on.
+   */
+  onNavigateCourse?: (course: MyCourse) => void;
 }
 
 // ---- page -------------------------------------------------------------------
@@ -198,6 +228,7 @@ export function AccountDashboard({
   onNavigateMembership,
   onNavigateCommunity,
   onNavigateFilm,
+  onNavigateCourse,
   formatAmount,
   formatDate,
   currency,
@@ -219,6 +250,13 @@ export function AccountDashboard({
    * react-query serves both from one request rather than two.
    */
   const { data: rentals } = useMyFilmRentals(user?.id);
+  /**
+   * Resolved by account OR verified email on the server, so a buyer who never
+   * clicked the claim link still sees the course they paid for. Before that,
+   * this tab would have been empty for exactly the people who ask where their
+   * course went.
+   */
+  const { data: courses } = useMyCourses({ accountId: user?.id });
 
   const fmtAmount = useAmountFormatter(formatAmount);
   const fmtDate = formatDate ?? defaultFormatDate;
@@ -232,6 +270,7 @@ export function AccountDashboard({
     onNavigateMembership,
     onNavigateCommunity,
     onNavigateFilm,
+    onNavigateCourse,
   };
 
   /**
@@ -241,7 +280,12 @@ export function AccountDashboard({
    * panel underneath it.
    */
   const hasRentals = (rentals?.total ?? 0) > 0;
-  const visibleTabs = ACCOUNT_TABS.filter((key) => key !== "rentals" || hasRentals || tab === "rentals");
+  const hasCourses = (courses?.length ?? 0) > 0;
+  const visibleTabs = ACCOUNT_TABS.filter(
+    (key) =>
+      (key !== "rentals" || hasRentals || tab === "rentals") &&
+      (key !== "courses" || hasCourses || tab === "courses"),
+  );
 
   if (!user) return <Loading fullPage />;
 
@@ -289,6 +333,7 @@ export function AccountDashboard({
       {tab === "waitlist" && <WaitlistTab ctx={ctx} />}
       {tab === "bookings" && <BookingsTab ctx={ctx} />}
       {tab === "rentals" && <RentalsTab ctx={ctx} />}
+      {tab === "courses" && <CoursesTab ctx={ctx} courses={courses ?? []} />}
       {tab === "saved" && <SavedTab />}
       {tab === "account" && <AccountTab ctx={ctx} />}
       {tab === "notifications" && <NotificationsTab />}
@@ -556,17 +601,47 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
             const cancelled = !!ticket.selfCancelledAt;
             // Absent on an older API build, where every row WAS a purchase.
             const gifted = ticket.role === "holder";
+            /**
+             * A ticket REQUEST (curated access, feature 3). While it is pending,
+             * or once it ended without a sale, the row is a request and not a
+             * purchase: no passes exist, so nothing to cancel, transfer or add
+             * to a wallet, and the state line is the whole story. The "Decide
+             * by" date is the same one the fan's email carries, so somebody who
+             * lost the email still knows where they stand.
+             */
+            const requestState = myTicketRequestState(ticket);
+            const isRequestRow = isMyTicketRequestOpenOrEnded(ticket);
+            const requestEnded = isRequestRow && requestState !== "pending";
             return (
               <div
                 key={ticket.id}
-                style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16, opacity: cancelled ? 0.6 : 1 }}
+                data-testid={requestState ? `my-ticket-request-${requestState}` : undefined}
+                style={{
+                  border: `1px solid ${t.primary}20`,
+                  borderRadius: t.cornerRadius,
+                  padding: 16,
+                  opacity: cancelled || requestEnded ? 0.6 : 1,
+                }}
               >
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, gap: 12 }}>
                   <div>
                     <div style={{ fontWeight: 600 }}>{ticket.eventTitle}</div>
                     <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
                   </div>
-                  {cancelled && (
+                  {requestState && (
+                    <span style={{ fontSize: 13, color: t.primary, textAlign: "right" }}>
+                      {requestState === "pending"
+                        ? tr("forge.account_dashboard.request_pending")
+                        : requestState === "approved"
+                          ? tr("forge.account_dashboard.request_approved")
+                          : requestState === "declined"
+                            ? tr("forge.account_dashboard.request_declined")
+                            : requestState === "expired"
+                              ? tr("forge.account_dashboard.request_expired")
+                              : tr("forge.account_dashboard.request_payment_failed")}
+                    </span>
+                  )}
+                  {cancelled && !requestState && (
                     <span style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</span>
                   )}
                   {/* Says WHY this is in the list at all. Without it a
@@ -598,23 +673,57 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
                 {!gifted && (
                   <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                    <span>{tr("forge.account_dashboard.total")}</span>
+                    {/* Nothing has been taken on a pending request, and never
+                        will be on one that ended: the label says which. */}
+                    <span>
+                      {requestState === "pending"
+                        ? tr("forge.account_dashboard.total_on_approval")
+                        : tr("forge.account_dashboard.total")}
+                    </span>
                     <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
                   </div>
                 )}
 
+                {/* State the fan must act on (or wait on) stays visible: the
+                    deadline while pending, the organiser's note when declined,
+                    and where to go when the seat was released. */}
+                {requestState === "pending" && ticket.request?.expiresAt && (
+                  <div data-testid="my-ticket-decide-by" style={{ fontSize: 13, marginTop: 12, fontWeight: 600 }}>
+                    {tr("forge.account_dashboard.request_decide_by", { date: formatDate(ticket.request.expiresAt) })}
+                  </div>
+                )}
+                {requestState === "pending" && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
+                    {tr("forge.account_dashboard.request_nothing_charged")}
+                  </div>
+                )}
+                {requestState === "declined" && ticket.request?.decisionNote && (
+                  <div data-testid="my-ticket-decision-note" style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>
+                    {tr("forge.account_dashboard.request_note", { note: ticket.request.decisionNote })}
+                  </div>
+                )}
+                {(requestState === "expired" || requestState === "payment_failed") && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>
+                    {tr("forge.account_dashboard.request_seat_released")}
+                  </div>
+                )}
+
                 {/* Diarise it — including the Apple option, which needs the
                     platform's own `.ics` and so could not exist before. Null
                     for a called-off show, and the component draws nothing. */}
-                <AddToCalendar
-                  variant="compact"
-                  title={ticket.eventTitle}
-                  start={ticket.eventDateTime}
-                  end={ticket.eventEndDateTime}
-                  icsUrl={ticket.calendarUrl}
-                  webcalUrl={ticket.calendarWebcalUrl}
-                  style={{ marginTop: 12 }}
-                />
+                {/* Not offered on a request: the fan has not been admitted to
+                    anything yet, and a calendar entry says they have. */}
+                {!isRequestRow && (
+                  <AddToCalendar
+                    variant="compact"
+                    title={ticket.eventTitle}
+                    start={ticket.eventDateTime}
+                    end={ticket.eventEndDateTime}
+                    icsUrl={ticket.calendarUrl}
+                    webcalUrl={ticket.calendarWebcalUrl}
+                    style={{ marginTop: 12 }}
+                  />
+                )}
 
                 {/*
                   Wallet passes (2.3). Renders NOTHING unless the API offers a
@@ -662,7 +771,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{ticket.cancellation.terms}</div>
                 )}
 
-                {!cancelled && ticket.cancellation.canCancel && (
+                {!cancelled && !isRequestRow && ticket.cancellation.canCancel && (
                   <button
                     onClick={() => void onCancel(ticket)}
                     disabled={pendingId === ticket.id}
@@ -1357,6 +1466,64 @@ function RentalsTab({ ctx }: { ctx: TabContext }) {
   );
 }
 
+// ---- Courses tab ------------------------------------------------------------
+
+/**
+ * What this fan has bought and can open, with a way in.
+ *
+ * `claimed: false` means they never used the claim link. The course is theirs
+ * either way - the server resolves the grant by verified email - so the row says
+ * so plainly rather than staying silent, because "did my purchase register?" is
+ * the question this whole tab exists to stop someone asking.
+ */
+function CoursesTab({ ctx, courses }: { ctx: TabContext; courses: MyCourse[] }) {
+  const { t, card } = useCardStyles();
+  const tr = useForgeT();
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.courses_title")}
+      </h2>
+
+      {courses.length === 0 ? (
+        <p style={{ color: t.muted }}>{tr("forge.account_dashboard.courses_empty")}</p>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          {courses.map((course) => (
+            <button
+              key={course.accessId}
+              type="button"
+              onClick={() => ctx.onNavigateCourse?.(course)}
+              style={{
+                textAlign: "left",
+                background: t.surface,
+                border: `1px solid ${t.border}`,
+                borderRadius: t.cornerRadius,
+                padding: 16,
+                cursor: ctx.onNavigateCourse ? "pointer" : "default",
+                color: t.text,
+              }}
+            >
+              <div style={{ fontWeight: 600 }}>{course.title}</div>
+              {/* No description. It is rich text: as a string it shows its own
+                  markup, as HTML it drags a sales page's formatting into a list
+                  row. The row carries the title and the state instead. */}
+              <div style={{ color: t.muted, fontSize: 12, marginTop: 8 }}>
+                {course.completedAt
+                  ? tr("forge.account_dashboard.courses_completed")
+                  : course.currentLessonId
+                    ? tr("forge.account_dashboard.courses_continue")
+                    : tr("forge.account_dashboard.courses_start")}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ---- Orders tab -------------------------------------------------------------
 
 function OrdersTab({ ctx }: { ctx: TabContext }) {

package/src/ui/styled/AiAgentWidget.tsx

@@ -21,8 +21,9 @@ export interface AiAgentWidgetProps {
  * own config for the site's profile, renders a fixed-position bubble + panel,
  * and streams answers grounded in the artist's content + knowledge base. Render
  * it once (e.g. in __root); it renders nothing when the agent is disabled for
- * the profile. Appearance-only props let authors restyle it without touching
- * behavior. For custom UI, use the `useAiAgent()` hook instead.
+ * the profile, or when the visitor is on a page the artist excluded.
+ * Appearance-only props let authors restyle it without touching behavior. For
+ * custom UI, use the `useAiAgent()` hook instead.
  */
 export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
   const t = useForgeT();