@flamingo-stack/openframe-frontend-core 0.0.726 → 0.0.728

package/src/components/chat/assistant-ask-prompts.tsx

@@ -1,74 +1,119 @@
 'use client';
 
-import { useMemo } from 'react';
 import {
   AssistantRuntimeContext,
   useAssistantRuntime,
   type AssistantOpenRequest,
 } from '../../contexts/assistant-runtime-context';
-import { AskPrompts, type AskPromptsProps } from './ask-prompts';
-import {
-  assistantAvailable,
-  ASK_PROMPTS_DEFAULT_COUNT,
-  useAskPrompts,
-  useAssistantOpen,
-  useShownAskPrompts,
-} from './hooks/use-ask-prompts';
+import { AskCard, AskPrompts, type AskPromptsProps } from './ask-prompts';
+import { assistantAvailable, ASK_PROMPTS_DEFAULT_COUNT, useAskSurface } from './hooks/use-ask-prompts';
+
+/** The lib's own wording of the card, when neither the host nor the runtime states it. */
+const DEFAULT_ASK_CARD = {
+  title: 'Still deciding?',
+  description: '{assistant} answers from our docs and customer stories.',
+} as const;
+
+const fillAssistant = (text: string, name: string) => text.split('{assistant}').join(name);
 
 export interface AssistantAskPromptsProps extends Pick<AskPromptsProps, 'align' | 'fadeColor' | 'className'> {
-  /** What this row is about: any string the host's questions endpoint knows. Reported with every click. */
+  /**
+   * How the surface looks. `row` (default): the launcher, then the questions,
+   * for a page section. `card`: the "still deciding?" card beside a list of
+   * questions (a FAQ), with a title, a line of description and the launcher.
+   */
+  variant?: 'row' | 'card';
+  /** What this surface is about: any string the host's questions endpoint knows. Reported with every click. */
   topic?: string;
-  /** How many questions the row offers: the same number of slots on every load. */
+  /** How many questions it offers: the same number of slots on every load. Absent: three (a card: the runtime's, else three). */
   count?: number;
+  /**
+   * Ids of questions never to offer. Absent: the ones the page's other "ask"
+   * surfaces show, which this one waits for. `null`: wait.
+   */
+  exclude?: readonly string[] | null;
+  /** False: the surface does not pick yet (its host is waiting for it to be reached). Default true. */
+  enabled?: boolean;
   /** The launcher's name. Absent: the assistant's configured name, else the launcher's default. */
   label?: string;
-  /** Something else the row waits for (the host is still reading the name it will show). */
+  /** Something else the surface waits for (the host is still reading the name it will show). */
   loading?: boolean;
-  /** How the chat is opened from THIS row. Absent: the assistant runtime's opener. */
+  /** A card's wording. `{assistant}` is replaced by the assistant's name. Absent: the runtime's, else the lib's. */
+  title?: string;
+  description?: string;
+  /** How the chat is opened from THIS surface. Absent: the assistant runtime's opener. */
   onOpen?: (request: AssistantOpenRequest) => void;
 }
 
 /**
- * A row of questions for the host's assistant, wired by itself: the launcher
- * with the assistant's name and glyph, then the questions the host picked for
- * this row's `topic`, each opening the chat and asking it. Everything comes
- * from the nearest assistant runtime (`AssistantRuntimeContext`): whether a
- * chat is there, the identity, the questions endpoint and the opener. While
- * the pick is on its way the row is the SAME block (a chip skeleton in every
- * slot), so nothing moves when the questions land. The row tells the page
- * which questions it shows, so the FAQ's card never repeats one. Nothing
- * renders with no chat, or once the pick has settled empty.
+ * THE "ask the assistant" surface, wired by itself: a row of questions in a
+ * page section, or the card beside a FAQ (`variant`). Everything comes from
+ * the nearest assistant runtime (`AssistantRuntimeContext`) through ONE hook,
+ * `useAskSurface`: whether a chat is there, the identity, the questions the
+ * host picked for this surface's `topic`, the opener and the click report.
+ * Surfaces of one page pick one after another and never show a question
+ * another already shows, so two of them may share a topic. While a pick is on
+ * its way the surface is the SAME block (a chip skeleton in every slot), so
+ * nothing moves when the questions land.
+ *
+ * Nothing renders with no chat. A row also renders nothing with no questions
+ * endpoint, or once its pick has settled empty; a card needs the assistant's
+ * name for its words, and with no endpoint is the launcher alone.
  */
 export function AssistantAskPrompts({
+  variant = 'row',
   topic,
-  count = ASK_PROMPTS_DEFAULT_COUNT,
+  count,
+  exclude,
+  enabled,
   label,
   loading = false,
+  title,
+  description,
   onOpen,
   align,
   fadeColor,
   className,
 }: AssistantAskPromptsProps) {
+  const card = variant === 'card';
   const assistant = useAssistantRuntime();
-  const { prompts, isLoading, supported } = useAskPrompts({ topic, count });
-  const open = useAssistantOpen(topic, onOpen);
-  const shown = assistantAvailable(assistant) && supported;
-  // Nothing to say where the row shows nothing; `null` while its pick is on its way.
-  useShownAskPrompts(shown ? (isLoading ? null : prompts.map(prompt => prompt.id)) : undefined);
-  // The row's launcher opens the same chat as its questions, with the row's topic: it reads the runtime.
-  const scoped = useMemo(() => (assistant ? { ...assistant, open } : null), [assistant, open]);
-  if (!assistantAvailable(assistant) || !supported) return null;
+  const slots = count ?? (card ? assistant?.askCard?.count : undefined) ?? ASK_PROMPTS_DEFAULT_COUNT;
+  const ask = useAskSurface({ topic, count: slots, exclude, enabled, onOpen });
+  if (!assistantAvailable(assistant)) return null;
+
+  const shared = {
+    prompts: ask.prompts,
+    loading: ask.isLoading || loading,
+    source: assistant.source,
+    icon: assistant.icon,
+    onOpen: ask.open,
+    onAsk: ask.reportAsk,
+  };
+  if (card) {
+    const name = label ?? assistant.name;
+    if (!name) return null;
+    const words = description ?? assistant.askCard?.description ?? DEFAULT_ASK_CARD.description;
+    return (
+      <AssistantRuntimeContext.Provider value={ask.scoped}>
+        <AskCard
+          {...shared}
+          title={fillAssistant(title ?? assistant.askCard?.title ?? DEFAULT_ASK_CARD.title, name)}
+          description={words ? fillAssistant(words, name) : undefined}
+          // Fixed slots, one question per row: chip skeletons until the pick lands, the same box after.
+          count={ask.supported ? slots : 0}
+          label={name}
+          className={className}
+        />
+      </AssistantRuntimeContext.Provider>
+    );
+  }
+  if (!ask.supported) return null;
   return (
-    <AssistantRuntimeContext.Provider value={scoped}>
+    <AssistantRuntimeContext.Provider value={ask.scoped}>
       <AskPrompts
-        prompts={prompts}
-        loading={isLoading || loading}
-        count={count}
-        source={assistant.source}
+        {...shared}
+        count={slots}
         label={label ?? assistant.name ?? undefined}
-        icon={assistant.icon}
-        onOpen={open}
-        onAsk={prompt => assistant.onAsk?.({ promptId: prompt.id, topic })}
         align={align}
         fadeColor={fadeColor}
         className={className}

package/src/components/chat/hooks/index.ts

@@ -45,9 +45,10 @@ export {
   buildAskPromptsUrl,
   useAskPrompts,
   useAssistantOpen,
-  useShownAskPromptIds,
-  useShownAskPrompts,
+  useAskSurface,
   type AskPromptsResponse,
   type UseAskPromptsOptions,
   type UseAskPromptsResult,
+  type UseAskSurfaceOptions,
+  type UseAskSurfaceResult,
 } from './use-ask-prompts';

package/src/components/chat/hooks/use-ask-prompts.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useId, useLayoutEffect, useSyncExternalStore } from 'react';
+import { useCallback, useId, useLayoutEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import {
   useAssistantRuntime,
   type AssistantOpenRequest,
@@ -71,8 +71,10 @@ export function useAskPrompts({
   const assistant = useAssistantRuntime();
   const base = assistantAvailable(assistant) ? assistant.askPromptsUrl : undefined;
   const url = base && enabled ? buildAskPromptsUrl(base, { count, topic, exclude }) : null;
-  const { data, isLoading } = useSelfFetch<AskPromptsResponse>(url);
-  return { prompts: data?.prompts ?? [], isLoading: !!base && (!enabled || isLoading), supported: !!base };
+  const { data, dataUrl, error } = useSelfFetch<AskPromptsResponse>(url);
+  // Landed for THIS url (or failed): never the frame between a url appearing and its fetch starting.
+  const landed = url !== null && (dataUrl === url || error);
+  return { prompts: landed ? (data?.prompts ?? []) : [], isLoading: !!base && !landed, supported: !!base };
 }
 
 /**
@@ -99,90 +101,172 @@ export function useAssistantOpen(
   );
 }
 
-// ─── The questions the page already shows ────────────────────────────────────
-// Every surface that shows questions says which ones (`useShownAskPrompts`), so
-// a later surface (the FAQ's card) never repeats one, with no wiring by the
-// host. One list per QUESTIONS ENDPOINT (the runtime's `askPromptsUrl`): two
-// assistants on one page read different questions, and never leave out each
-// other's ids. A module store, read through React's external-store hook.
-// `null` for a surface = it is still picking.
+// ─── One pick at a time, and never a question twice ──────────────────────────
+// Every surface that offers questions (a row in a section, the FAQ's card)
+// takes a TURN before it picks, in the order the surfaces came to need one:
+// document order for the ones a page mounts together, later for one that waits
+// to be reached (the FAQ's card). A surface picks once every surface ahead of
+// it has settled, and leaves out every question the page already shows. So no
+// two surfaces of a page can show the same question, whatever their topics,
+// with no wiring by the host. One queue per QUESTIONS ENDPOINT (the runtime's
+// `askPromptsUrl`): two assistants on one page read different questions, and
+// never wait for or leave out each other's. A module store, read through
+// React's external-store hook.
 
-const NO_IDS: readonly string[] = [];
-
-/** One endpoint's list: which questions each surface shows, and who is listening. */
-interface ShownList {
-  set(surface: string, ids: readonly string[] | null): void;
-  remove(surface: string): void;
+/** One endpoint's queue: each surface's turn and the questions it settled on (`null`: not yet). */
+interface AskQueue {
+  enter(surface: string): void;
+  settle(surface: string, ids: readonly string[] | null): void;
+  leave(surface: string): void;
   subscribe(listener: () => void): () => void;
-  read(): readonly string[] | null;
+  /**
+   * What `surface` must leave out, as a comma-joined list ('' for nothing),
+   * once it may pick; `null` while it has no turn or a surface ahead of it is
+   * still picking. A string, so React can compare two readings.
+   */
+  turnOf(surface: string): string | null;
 }
 
-function createShownList(): ShownList {
-  const bySurface = new Map<string, readonly string[] | null>();
+function createAskQueue(): AskQueue {
+  const entries = new Map<string, { turn: number; ids: readonly string[] | null }>();
   const listeners = new Set<() => void>();
-  let snapshot: readonly string[] | null = NO_IDS;
+  let next = 0;
   const publish = (): void => {
-    const lists = [...bySurface.values()];
-    const next = lists.some(list => list === null) ? null : lists.flatMap(list => list ?? []);
-    const same = next === null ? snapshot === null : snapshot !== null && next.join(',') === snapshot.join(',');
-    if (same) return;
-    snapshot = next === null ? null : next.length > 0 ? next : NO_IDS;
     for (const listener of listeners) listener();
   };
   return {
-    set(surface, ids) {
-      bySurface.set(surface, ids);
+    enter(surface) {
+      if (entries.has(surface)) return;
+      entries.set(surface, { turn: next++, ids: null });
       publish();
     },
-    remove(surface) {
-      bySurface.delete(surface);
+    settle(surface, ids) {
+      const entry = entries.get(surface);
+      if (!entry || (entry.ids?.join(',') ?? null) === (ids?.join(',') ?? null)) return;
+      entry.ids = ids;
       publish();
     },
+    leave(surface) {
+      if (entries.delete(surface)) publish();
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => listeners.delete(listener);
     },
-    read: () => snapshot,
+    turnOf(surface) {
+      const own = entries.get(surface);
+      if (!own) return null;
+      const shown: string[] = [];
+      for (const [other, entry] of entries) {
+        if (other === surface) continue;
+        if (entry.ids === null) {
+          if (entry.turn < own.turn) return null;
+          continue;
+        }
+        shown.push(...entry.ids);
+      }
+      return shown.join(',');
+    },
   };
 }
 
-const shownLists = new Map<string, ShownList>();
+const askQueues = new Map<string, AskQueue>();
 
-/** The list a surface belongs to: the questions endpoint of its assistant runtime. */
-function useShownList(): ShownList {
+/** The queue a surface belongs to: the questions endpoint of its assistant runtime. */
+function useAskQueue(): AskQueue {
   const scope = useAssistantRuntime()?.askPromptsUrl ?? '';
-  let list = shownLists.get(scope);
-  if (!list) {
-    list = createShownList();
-    shownLists.set(scope, list);
+  let queue = askQueues.get(scope);
+  if (!queue) {
+    queue = createAskQueue();
+    askQueues.set(scope, queue);
   }
-  return list;
+  return queue;
+}
+
+export interface UseAskSurfaceOptions {
+  /** What the surface is about (see `UseAskPromptsOptions.topic`). */
+  topic?: string;
+  count?: number;
+  /**
+   * Ids of questions never to offer. Absent: the ones the page's other
+   * surfaces show, which this one waits for. A list: exactly those, picked at
+   * once with no wait (the surfaces after it still leave its questions out).
+   * `null`: the surface waits and never picks.
+   */
+  exclude?: readonly string[] | null;
+  /** False: the surface is not ready to pick yet (it takes its turn when it is). Default true. */
+  enabled?: boolean;
+  /** How the chat is opened from THIS surface. Absent: the assistant runtime's opener. */
+  onOpen?: (request: AssistantOpenRequest) => void;
+}
+
+export interface UseAskSurfaceResult extends UseAskPromptsResult {
+  /** The nearest assistant runtime; `null` with none mounted. */
+  assistant: AssistantRuntime | null;
+  /** The same runtime with THIS surface's opener: what the surface's launcher reads. */
+  scoped: AssistantRuntime | null;
+  /** Opens the chat (and asks, with a prompt), carrying the surface's topic. */
+  open: (request: { prompt?: string }) => void;
+  /** Reports a question that was asked (the runtime's `onAsk`, with the topic). */
+  reportAsk: (prompt: AskPrompt) => void;
 }
 
 /**
- * Say which questions this surface shows. `null`: it is still picking, so a
- * surface that must not repeat them waits. Pass `undefined` to say nothing
- * (the surface shows no questions here).
+ * THE wiring of an "ask" surface, whatever it looks like: the assistant
+ * runtime, the surface's questions (picked on its turn, never one the page
+ * already shows), the opener and the click report. `AssistantAskPrompts` is its
+ * one component; nothing else picks questions for a page.
  */
-export function useShownAskPrompts(ids: readonly string[] | null | undefined): void {
+export function useAskSurface({
+  topic,
+  count = ASK_PROMPTS_DEFAULT_COUNT,
+  exclude,
+  enabled = true,
+  onOpen,
+}: UseAskSurfaceOptions = {}): UseAskSurfaceResult {
+  const assistant = useAssistantRuntime();
   const surface = useId();
-  const list = useShownList();
-  const key = ids === undefined ? undefined : ids === null ? null : ids.join(',');
-  // A layout effect: the list holds this surface before any reader's own effects run.
+  const queue = useAskQueue();
+  const picks = assistantAvailable(assistant) && !!assistant.askPromptsUrl && enabled && exclude !== null;
+
+  // A layout effect: surfaces a page mounts together take their turns in document order.
   useLayoutEffect(() => {
-    if (key === undefined) return undefined;
-    list.set(surface, key === null ? null : key ? key.split(',') : NO_IDS);
-    return () => list.remove(surface);
-  }, [list, surface, key]);
-}
+    if (!picks) return undefined;
+    queue.enter(surface);
+    return () => queue.leave(surface);
+  }, [queue, surface, picks]);
+
+  const turn = useSyncExternalStore(
+    queue.subscribe,
+    () => queue.turnOf(surface),
+    () => null,
+  );
+  // ONE pick per mount: what the page showed when this surface's turn came is what it leaves out, for good.
+  const [shownAtTurn, setShownAtTurn] = useState<string | null>(null);
+  if (picks && turn !== null && shownAtTurn === null) setShownAtTurn(turn);
+  const leftOut = useMemo(() => exclude ?? (shownAtTurn ? shownAtTurn.split(',') : undefined), [exclude, shownAtTurn]);
+
+  const { prompts, isLoading, supported } = useAskPrompts({
+    topic,
+    count,
+    exclude: leftOut,
+    // Told exactly what to leave out, a surface needs nobody's pick: it never waits for a turn.
+    enabled: picks && (exclude !== undefined || shownAtTurn !== null),
+  });
+  const settled = picks && !isLoading ? prompts.map(prompt => prompt.id).join(',') : null;
+  useLayoutEffect(() => {
+    queue.settle(surface, settled === null ? null : settled ? settled.split(',') : []);
+  }, [queue, surface, settled]);
 
-/** The ids of the questions the page's other surfaces of the same assistant show; `null` while one is still picking. */
-export function useShownAskPromptIds(): readonly string[] | null {
-  const list = useShownList();
-  return useSyncExternalStore(list.subscribe, list.read, () => NO_IDS);
+  const open = useAssistantOpen(topic, onOpen);
+  const scoped = useMemo(() => (assistant ? { ...assistant, open } : null), [assistant, open]);
+  const onAsk = assistant?.onAsk;
+  const reportAsk = useCallback((prompt: AskPrompt) => onAsk?.({ promptId: prompt.id, topic }), [onAsk, topic]);
+  // A surface that waits (not reached, or told to) is loading wherever questions can exist.
+  return { assistant, scoped, prompts, isLoading: supported && (!picks || isLoading), supported, open, reportAsk };
 }
 
 /** Tests only: forget every surface. */
-export function resetShownAskPrompts(): void {
-  shownLists.clear();
+export function resetAskSurfaces(): void {
+  askQueues.clear();
 }

package/src/components/faq/faq-ask-card.tsx

@@ -1,21 +1,10 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import {
-  AssistantRuntimeContext,
-  useAssistantRuntime,
-  type AssistantOpenRequest,
-  type AssistantRuntime,
-} from '../../contexts/assistant-runtime-context';
+import { useState } from 'react';
+import type { AssistantOpenRequest, AssistantRuntime } from '../../contexts/assistant-runtime-context';
 import { useInView } from '../../hooks/ui/use-in-view';
-import { AskCard } from '../chat/ask-prompts';
-import {
-  assistantAvailable,
-  ASK_PROMPTS_DEFAULT_COUNT,
-  useAskPrompts,
-  useAssistantOpen,
-  useShownAskPromptIds,
-} from '../chat/hooks/use-ask-prompts';
+import { AssistantAskPrompts } from '../chat/assistant-ask-prompts';
+import { assistantAvailable } from '../chat/hooks/use-ask-prompts';
 
 /** The card beside a FAQ, as a host may shape it. Every field is optional. */
 export interface FaqAskOptions {
@@ -29,8 +18,7 @@ export interface FaqAskOptions {
   topic?: string;
   /**
    * Ids of questions never to offer. Absent: the ones the page's other "ask"
-   * surfaces show (`AssistantAskPrompts` rows say so themselves), which the
-   * card waits for. `null`: wait.
+   * surfaces show, which the card waits for. `null`: wait.
    */
   exclude?: readonly string[] | null;
   /** How many questions the card offers. Absent: the runtime's, else three. */
@@ -46,70 +34,37 @@ export interface FaqAskOptions {
   onOpen?: (request: AssistantOpenRequest) => void;
 }
 
-/** The lib's own wording, when neither the host nor the runtime states it. */
-const DEFAULT_ASK_CARD = {
-  title: 'Still deciding?',
-  description: '{assistant} answers from our docs and customer stories.',
-} as const;
-
 /** How far below the viewport the card is when it picks its questions. */
 const PICK_ROOT_MARGIN = '600px';
 
-const fillAssistant = (text: string, name: string) => text.split('{assistant}').join(name);
-
 /** True when a FAQ under this runtime shows the card: a chat to open, and a name for the card's words. */
 export function faqAskCardShown(assistant: AssistantRuntime | null): assistant is AssistantRuntime {
   return assistantAvailable(assistant) && !!assistant.name;
 }
 
 /**
- * The "ask the assistant" card of a FAQ: the assistant's identity and the
- * chat's opener from the nearest assistant runtime, its questions from the
- * host's endpoint. It picks ONCE, when the card first comes near the viewport:
- * by then the page above has said which questions it shows itself, and a
- * visitor who never reaches the FAQ costs no request. The card is the same
- * height before and after the questions arrive. A host with no questions
- * endpoint gets the launcher with no questions.
+ * The "ask the assistant" card of a FAQ: THE ask surface (`AssistantAskPrompts`)
+ * as a card, told when to pick. It picks ONCE, when the card first comes near
+ * the viewport: a visitor who never reaches the FAQ costs no request, and the
+ * card then leaves out every question the page above already shows. The card
+ * is the same height before and after the questions arrive.
  */
 export function FaqAskCard({ topic, exclude, count, title, description, onOpen }: FaqAskOptions & { topic: string }) {
-  const assistant = useAssistantRuntime();
   const { ref, inView } = useInView<HTMLDivElement>({ rootMargin: PICK_ROOT_MARGIN });
   const [reached, setReached] = useState(false);
   if (inView && !reached) setReached(true);
-
-  const shownElsewhere = useShownAskPromptIds();
-  const excluded = exclude === undefined ? shownElsewhere : exclude;
-  const slots = count ?? assistant?.askCard?.count ?? ASK_PROMPTS_DEFAULT_COUNT;
-  const { prompts, isLoading, supported } = useAskPrompts({
-    topic,
-    count: slots,
-    exclude: excluded ?? undefined,
-    enabled: reached && excluded !== null,
-  });
-  const open = useAssistantOpen(topic, onOpen);
-  // The card's launcher opens the same chat as its questions, with the card's topic: it reads the runtime.
-  const scoped = useMemo(() => (assistant ? { ...assistant, open } : null), [assistant, open]);
-
-  if (!faqAskCardShown(assistant) || !assistant.name) return null;
-  const name = assistant.name;
-  const cardDescription = description ?? assistant.askCard?.description ?? DEFAULT_ASK_CARD.description;
   return (
-    <AssistantRuntimeContext.Provider value={scoped}>
-      <div ref={ref}>
-        <AskCard
-          title={fillAssistant(title ?? assistant.askCard?.title ?? DEFAULT_ASK_CARD.title, name)}
-          description={cardDescription ? fillAssistant(cardDescription, name) : undefined}
-          prompts={prompts}
-          // Fixed slots, one question per row: chip skeletons until the pick lands, the same box after.
-          count={supported ? slots : 0}
-          loading={isLoading}
-          source={assistant.source}
-          label={name}
-          icon={assistant.icon}
-          onOpen={open}
-          onAsk={prompt => assistant.onAsk?.({ promptId: prompt.id, topic })}
-        />
-      </div>
-    </AssistantRuntimeContext.Provider>
+    <div ref={ref}>
+      <AssistantAskPrompts
+        variant="card"
+        topic={topic}
+        count={count}
+        exclude={exclude}
+        enabled={reached}
+        title={title}
+        description={description}
+        onOpen={onOpen}
+      />
+    </div>
   );
 }

package/src/components/features/auth/auth-benefits-panel.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
-import { TRIAL_LABELS } from '../../../utils/trial';
+import { trialLabels } from '../../../utils/trial';
 import { OpenFrameLogo } from '../../icons';
 import { FileOffIcon } from '../../icons-v2-generated/documents/file-off-icon';
 import { CreditCardXmarkIcon } from '../../icons-v2-generated/finance/credit-card-xmark-icon';
@@ -19,6 +19,8 @@ export interface AuthBenefitsPanelProps {
   title?: string;
   description?: string;
   benefits?: AuthBenefit[];
+  /** The free trial's length in days, as the host read it from the billing plan. Without it the length is not stated. */
+  trialDays?: number | null;
   learnMoreLabel?: string;
   learnMoreUrl?: string;
   className?: string;
@@ -29,12 +31,16 @@ const DEFAULT_TITLE = 'The All-in-One Open Platform for MSPs';
 const DEFAULT_DESCRIPTION =
   'All your core ops in one place - built for MSPs who are done duct-taping tools together. Unified stack, AI-ready, no vendor tax. Just solid software that lets you run lean and fast.';
 
-const DEFAULT_BENEFITS: AuthBenefit[] = [
-  { icon: <CreditCardXmarkIcon />, label: TRIAL_LABELS.noCard },
-  { icon: <XmarkAltIcon />, label: TRIAL_LABELS.cancel },
-  { icon: <FlaskVialIcon />, label: TRIAL_LABELS.length },
-  { icon: <FileOffIcon />, label: TRIAL_LABELS.noContract },
-];
+/** The default chips: the trial's terms, and its length when the host knows it. */
+function defaultBenefits(trialDays: number | null | undefined): AuthBenefit[] {
+  const labels = trialLabels(trialDays);
+  return [
+    { icon: <CreditCardXmarkIcon />, label: labels.noCard },
+    { icon: <XmarkAltIcon />, label: labels.cancel },
+    ...(labels.length ? [{ icon: <FlaskVialIcon />, label: labels.length }] : []),
+    { icon: <FileOffIcon />, label: labels.noContract },
+  ];
+}
 
 /**
  * Marketing panel shown alongside the auth forms — title, blurb, benefit chips
@@ -43,7 +49,8 @@ const DEFAULT_BENEFITS: AuthBenefit[] = [
 export function AuthBenefitsPanel({
   title = DEFAULT_TITLE,
   description = DEFAULT_DESCRIPTION,
-  benefits = DEFAULT_BENEFITS,
+  trialDays,
+  benefits = defaultBenefits(trialDays),
   learnMoreLabel = 'Learn More About OpenFrame',
   learnMoreUrl = 'https://www.flamingo.run/',
   className,

package/src/components/features/auth/auth-shell.tsx

@@ -12,6 +12,8 @@ export interface AuthShellProps {
   children: ReactNode;
   /** Marketing panel. Defaults to <AuthBenefitsPanel />. */
   benefits?: ReactNode;
+  /** The free trial's length in days, from the host's billing plan; the default panel states it when given. */
+  trialDays?: number | null;
   /** Pinned to the bottom-left of the form column on desktop only (e.g. "Back to Login"). */
   footer?: ReactNode;
   className?: string;
@@ -28,8 +30,8 @@ export interface AuthShellProps {
  * `of-auth-shell` on the root is a stable hook for shell/consumer CSS (the
  * native mobile shell pads it by the top safe-area inset).
  */
-export function AuthShell({ tabs, children, benefits, footer, className }: AuthShellProps) {
-  const benefitsNode = benefits ?? <AuthBenefitsPanel />;
+export function AuthShell({ tabs, children, benefits, trialDays, footer, className }: AuthShellProps) {
+  const benefitsNode = benefits ?? <AuthBenefitsPanel trialDays={trialDays} />;
 
   return (
     <div

package/src/utils/index.ts

@@ -19,7 +19,7 @@ export {
 export { formatDate, formatNumber, formatPrice, formatBytes, formatUrlForDisplay } from './format';
 export * from './ai-providers';
 export * from './model-token-rates';
-export { TRIAL_DAYS, TRIAL_LABELS } from './trial';
+export { TRIAL_TERMS, trialLabels, trialLengthLabel } from './trial';
 export {
   VENDOR_CLASSIFICATIONS,
   OPENFRAME_CLASSIFICATIONS,