@flamingo-stack/openframe-frontend-core 0.0.722 → 0.0.724

package/src/components/help-center-pages/trust-center-page.tsx

@@ -5,7 +5,7 @@
  *
  * ONE page, not tabs (2026 trust-center practice: buyers skim and Ctrl-F, and a
  * questionnaire needs a deep link per section): hero with the monitoring status
- * and the two actions, then anchored sections in reading order
+ * (with the page's PDF as a quiet link at its end) and the Request access action, then anchored sections in reading order
  * (`TRUST_CENTER_SECTIONS`: AI & data use → compliance → controls → documents →
  * subprocessors → FAQ → questions) with a sticky section rail on desktop
  * (`StickySectionNav` + `useScrollSpy`, the vendor-page / DocViewer pattern).
@@ -34,11 +34,12 @@ import { useSelfFetch } from '../../hooks/use-self-fetch';
 import {
   TRUST_CENTER_API_PATH,
   TRUST_CENTER_CACHE_SECONDS,
-  TRUST_CENTER_SECTIONS,
   TRUST_CENTER_TAGLINE,
   TRUST_CENTER_TITLE,
-  isTrustCenterMonitored,
+  trustCenterMonitoringStatus,
   trustCenterDocumentUrl,
+  trustCenterPdfUrl,
+  visibleTrustCenterSections,
   type TrustCenterControlsPage,
   type TrustCenterPublic,
   type TrustCenterSectionId,
@@ -50,6 +51,7 @@ import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
 import { DataAttribution } from '../ui/data-attribution';
+import { DownloadButton } from '../ui/download-button';
 import { EntityImage } from '../ui/entity-image';
 import { LoadError } from '../ui/error-state';
 import { StatusIndicator } from '../ui/status-indicator';
@@ -85,6 +87,13 @@ export interface TrustCenterPageProps {
   subtitle?: string;
   /** The FAQ section's "ask the assistant" card (`FaqSection`'s `ask`): the host states its topic. Absent: no card. */
   ask?: FaqSectionProps['ask'];
+  /**
+   * Host content shown after the trust sections and BEFORE the FAQ (the hub's
+   * own "why we build in the open" sections). The FAQ is the last thing on a
+   * page, so with this the page draws: trust sections, this content at the
+   * page's full width, then the FAQ. Absent: the FAQ closes the sections column.
+   */
+  beforeFaq?: ReactNode;
 }
 
 /** One section's page content. Its `h2` is the `TRUST_CENTER_SECTIONS` label — never a literal here. */
@@ -93,20 +102,6 @@ interface TrustSectionView {
   render: (data: TrustCenterPublic) => ReactNode;
 }
 
-/** Sections that have content, in page order. */
-function visibleSections(data: TrustCenterPublic): Array<(typeof TRUST_CENTER_SECTIONS)[number]> {
-  const hasContent: Record<TrustCenterSectionId, boolean> = {
-    ai: data.aiPractices.length > 0,
-    compliance: data.frameworks.length > 0,
-    controls: data.controlDomains.length > 0,
-    documents: data.documents.length > 0,
-    subprocessors: data.subprocessors.length > 0,
-    faq: data.faqs.length > 0,
-    contact: true,
-  };
-  return TRUST_CENTER_SECTIONS.filter(section => hasContent[section.id]);
-}
-
 /**
  * The Controls section's first answer, from the page's own server data: the
  * first category's controls with no query — exactly what the controls endpoint
@@ -136,12 +131,9 @@ function monitoringStatus(
   hydrated: boolean,
   nowMs: number,
 ): { status: 'success' | 'pending' | 'missing'; label: string } {
-  if (!data.connected) return { status: 'missing', label: 'Live control monitoring is not enabled yet' };
   // Before mount the clock is the server's, so the text claims nothing either way.
-  if (!hydrated) return { status: 'missing', label: 'Checking monitoring status' };
-  return isTrustCenterMonitored(data, nowMs)
-    ? { status: 'success', label: 'Controls continuously monitored' }
-    : { status: 'pending', label: 'Monitoring paused' };
+  if (data.connected && !hydrated) return { status: 'missing', label: 'Checking monitoring status' };
+  return trustCenterMonitoringStatus(data, nowMs);
 }
 
 export function TrustCenterPage({
@@ -152,6 +144,7 @@ export function TrustCenterPage({
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
   ask,
+  beforeFaq,
 }: TrustCenterPageProps) {
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
@@ -180,7 +173,7 @@ export function TrustCenterPage({
     documentTitle: null,
   });
 
-  const sections = useMemo(() => (data ? visibleSections(data) : []), [data]);
+  const sections = useMemo(() => (data ? visibleTrustCenterSections(data) : []), [data]);
   // Anchors. The scroll spy lights the rail from whatever scrolls the sections
   // (the window, or a host shell's `<main overflow-y-auto>` — OpenFrame's
   // `AppLayout`) and keeps the URL's hash on the section in view (`syncHash`;
@@ -205,9 +198,15 @@ export function TrustCenterPage({
   const actions = hasGatedDocuments
     ? [{ label: 'Request access', variant: 'accent' as const, onClick: () => openRequest(null) }]
     : undefined;
+  // The page as a file (the hub's `pdf` route beside `endpoint`). An occasional
+  // utility on a read-only page, so it is NOT a header action (a button there,
+  // and a fixed bar on a phone, are for the page's task: Request access). It is
+  // the shared small `DownloadButton` at the end of the status line under the
+  // title, at every width.
+  const download = <DownloadButton label="Download PDF" href={trustCenterPdfUrl(endpoint)} />;
 
   // Section id → its content. Titles come from `TRUST_CENTER_SECTIONS`; which
-  // sections show comes from `visibleSections` — this map only says what each renders.
+  // sections show comes from `visibleTrustCenterSections` — this map only says what each renders.
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
       lead: TRUST_SECTION_LEADS.ai,
@@ -239,6 +238,11 @@ export function TrustCenterPage({
     contact: { render: () => <ContactSection onContact={() => openRequest(null)} /> },
   };
 
+  // With host content before it, the FAQ leaves the sections column and closes the page (below).
+  const faqSection = sections.find(section => section.id === 'faq');
+  const faqLast = Boolean(beforeFaq) && Boolean(faqSection);
+  const columnSections = faqLast ? sections.filter(section => section.id !== 'faq') : sections;
+
   let body: ReactNode;
   if (error && !data) {
     body = <LoadError message="Could not load the trust center" onRetry={reload} />;
@@ -264,13 +268,16 @@ export function TrustCenterPage({
               }
               source={data.dataSource.name}
               lastUpdated={data.syncedAt}
+              action={download}
             />
-          ) : null}
+          ) : (
+            download
+          )}
         </div>
 
         <div className={TRUST_BODY_GRID_CLASS}>
           <div className={TRUST_SECTIONS_COLUMN_CLASS}>
-            {sections.map(section => {
+            {columnSections.map(section => {
               const view = views[section.id];
               return (
                 <TrustSection key={section.id} id={section.id} title={section.label} lead={view.lead}>
@@ -302,9 +309,23 @@ export function TrustCenterPage({
   }
 
   return (
-    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
-      {body}
-    </TrustCenterChrome>
+    <>
+      <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
+        {body}
+      </TrustCenterChrome>
+      {beforeFaq}
+      {faqLast && faqSection && data ? (
+        // The page's own content box at its FULL width (no section-rail column): a closing FAQ takes the
+        // same space the FAQ block takes at the foot of every other page.
+        <div className={shell ? 'bg-ods-bg' : undefined}>
+          <div className={shell ? 'page-shell-content mx-auto max-w-[1920px]' : 'page-shell-content'}>
+            <TrustSection id={faqSection.id} title={faqSection.label} lead={views.faq.lead}>
+              {views.faq.render(data)}
+            </TrustSection>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 }
 

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -72,7 +72,7 @@ const BODY_TEXT = 'text-h6 text-ods-text-secondary';
  * beside the section rail.
  */
 export const TRUST_STATUS_ROW_CLASS =
-  'flex flex-col gap-[var(--spacing-system-xs)] content-md:flex-row content-md:items-center content-md:justify-between';
+  'flex flex-col gap-[var(--spacing-system-xsf)] content-md:flex-row content-md:items-center content-md:justify-between';
 export const TRUST_BODY_GRID_CLASS =
   'grid grid-cols-1 gap-[var(--spacing-system-xl)] content-lg:grid-cols-[minmax(0,1fr)_12rem]';
 export const TRUST_SECTIONS_COLUMN_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]';
@@ -675,7 +675,7 @@ export function TrustCenterSkeleton() {
           <TextSkeleton.Body className="w-44" />
         </div>
         {/* `DataAttribution`'s own layout: two lines below `sm`, one row above it. */}
-        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
+        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
           <div className="flex items-center gap-[var(--spacing-system-xsf)]">
             <UnifiedSkeleton className="size-4 rounded" />
             <TextSkeleton.Body className="w-36" />

package/src/components/ui/data-attribution.tsx

@@ -8,6 +8,20 @@ export interface DataAttributionProps {
   source: string;
   /** ISO instant of the last successful sync, or null when it never ran. */
   lastUpdated: string | null;
+  /** One control at the end of the line: a way to take this data away (a `DownloadButton` for a file of it). */
+  action?: ReactNode;
+}
+
+const LINE_CLASS =
+  'flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]';
+const ITEM_CLASS = 'flex items-center gap-[var(--spacing-system-xsf)]';
+
+function Separator() {
+  return (
+    <span className="hidden text-ods-text-secondary content-sm:inline" aria-hidden="true">
+      &middot;
+    </span>
+  );
 }
 
 /**
@@ -16,17 +30,16 @@ export interface DataAttributionProps {
  * UTC (`formatDate`), so a server-rendered page and its hydrated copy print the
  * same text.
  */
-export function DataAttribution({ icon, source, lastUpdated }: DataAttributionProps) {
+export function DataAttribution({ icon, source, lastUpdated, action }: DataAttributionProps) {
   return (
-    <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
-      <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+    <div className={LINE_CLASS}>
+      <div className={ITEM_CLASS}>
         {icon}
         <span>Data synced from {source}</span>
       </div>
-      <span className="hidden text-ods-text-secondary content-sm:inline" aria-hidden="true">
-        &middot;
-      </span>
+      <Separator />
       <span className="text-ods-text-secondary">Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
+      {action ? <div className="flex content-sm:pl-[var(--spacing-system-xs)]">{action}</div> : null}
     </div>
   );
 }

package/src/components/ui/download-button.tsx

@@ -0,0 +1,34 @@
+import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
+import { Button, type ButtonProps } from './button/button';
+
+export type DownloadButtonProps = Omit<ButtonProps, 'leftIcon' | 'children'> & {
+  /** What is downloaded, as the button says it ("Download PDF"). */
+  label: string;
+};
+
+/**
+ * THE download button: a regular small `Button` in the quiet `link` variant
+ * (no surface, secondary text like the facts it sits beside, the accent on
+ * hover) with the download glyph, wherever a surface hands the reader a file of
+ * what it shows (the Trust Center's PDF, the margin report's PDF). One look and
+ * one size, so a download reads the same on every page and never louder than
+ * the page's own action.
+ *
+ * With `href` it is a link that opens in a new tab (an attachment downloads
+ * there without leaving the page). With `onClick` the host fetches the file
+ * itself and passes `loading` while it does.
+ */
+export function DownloadButton({ label, variant = 'link', size = 'small', href, ...props }: DownloadButtonProps) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      leftIcon={<Download01Icon aria-hidden="true" />}
+      href={href}
+      {...(href ? { openInNewTab: true, prefetch: false } : {})}
+      {...props}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/ui/index.ts

@@ -108,6 +108,7 @@ export * from './device-card';
 export * from './device-card-compact';
 export * from './entity-image';
 export * from './data-attribution';
+export * from './download-button';
 export * from './compliance-badge';
 export * from './feature-card';
 export * from './feature-list';

package/src/types/trust-center.ts

@@ -188,6 +188,21 @@ export function isTrustCenterMonitored(
   return Number.isFinite(synced) && nowMs - synced <= data.monitoredWindowMs;
 }
 
+/**
+ * THE monitoring claim and its wording, judged against a clock: monitored,
+ * paused, or not enabled. The page reads it after mount (its own clock) and the
+ * PDF when it is generated, so both say the same thing in the same words.
+ */
+export function trustCenterMonitoringStatus(
+  data: Pick<TrustCenterPublic, 'connected' | 'syncedAt' | 'monitoredWindowMs'>,
+  nowMs: number,
+): { status: 'success' | 'pending' | 'missing'; label: string } {
+  if (!data.connected) return { status: 'missing', label: 'Live control monitoring is not enabled yet' };
+  return isTrustCenterMonitored(data, nowMs)
+    ? { status: 'success', label: 'Controls continuously monitored' }
+    : { status: 'pending', label: 'Monitoring paused' };
+}
+
 /** "SOC 2 Type II: In progress · ISO 27001: Planned" — the ONE framework summary line (chat card, RAG mapper). */
 export function trustFrameworksSummary(
   frameworks: ReadonlyArray<Pick<TrustCenterFramework, 'label' | 'monitoring' | 'percent'>>,
@@ -195,10 +210,16 @@ export function trustFrameworksSummary(
   return frameworks.map(f => `${f.label}: ${trustFrameworkBadge(f)}`).join(' · ');
 }
 
+/** A path BESIDE the page's `endpoint`, which may carry a query string (an embed proxy): `endpoint/segment?query`. */
+function besideTrustCenterEndpoint(endpoint: string, segment: string): string {
+  const [path, query] = endpoint.split('?', 2);
+  return `${path}/${segment}${query ? `?${query}` : ''}`;
+}
+
 /**
  * Where a public document opens: its own link, or — for a file — the hub's
- * documents route beside the page's `endpoint` (which may carry a query string,
- * e.g. an embed proxy). `null` for a document that is only available on request.
+ * documents route beside the page's `endpoint`. `null` for a document that is
+ * only available on request.
  */
 export function trustCenterDocumentUrl(
   endpoint: string,
@@ -206,8 +227,35 @@ export function trustCenterDocumentUrl(
 ): string | null {
   if (document.access !== 'public') return null;
   if (document.externalUrl) return document.externalUrl;
-  const [path, query] = endpoint.split('?', 2);
-  return `${path}/documents/${encodeURIComponent(document.id)}${query ? `?${query}` : ''}`;
+  return besideTrustCenterEndpoint(endpoint, `documents/${encodeURIComponent(document.id)}`);
+}
+
+/** Where the page downloads as a PDF: the hub's `pdf` route beside the page's `endpoint`. */
+export function trustCenterPdfUrl(endpoint: string): string {
+  return besideTrustCenterEndpoint(endpoint, 'pdf');
+}
+
+/**
+ * THE rule for which sections a trust center shows, in reading order: a section
+ * with nothing to list is left out; Contact always shows. The page and its PDF
+ * both read it, so the two can never disagree about what is published.
+ */
+export function visibleTrustCenterSections(
+  data: Pick<
+    TrustCenterPublic,
+    'aiPractices' | 'frameworks' | 'controlDomains' | 'documents' | 'subprocessors' | 'faqs'
+  >,
+): Array<(typeof TRUST_CENTER_SECTIONS)[number]> {
+  const hasContent: Record<TrustCenterSectionId, boolean> = {
+    ai: data.aiPractices.length > 0,
+    compliance: data.frameworks.length > 0,
+    controls: data.controlDomains.length > 0,
+    documents: data.documents.length > 0,
+    subprocessors: data.subprocessors.length > 0,
+    faq: data.faqs.length > 0,
+    contact: true,
+  };
+  return TRUST_CENTER_SECTIONS.filter(section => hasContent[section.id]);
 }
 
 // ---------------------------------------------------------------------------

package/src/utils/ai-providers.ts

@@ -0,0 +1,46 @@
+/**
+ * The AI model providers the product names: what each is called and the NAME of
+ * its mark in the icon set. THE one owner of both, for every surface that shows
+ * a provider (the token rates, a model picker). Server-safe: it holds names
+ * only, and the mark is resolved from the icon set by that name where it is
+ * drawn (`findIcon`), so no surface imports a provider's icon.
+ *
+ * A host that is told a provider's name or mark by its server states them on
+ * the record and they win. A provider this list has not met is named from its
+ * key, and its mark is looked up by the icon set's own naming
+ * (`<provider>-logo-grey`), so a logo added to the set shows with no change here.
+ */
+
+export interface AiProvider {
+  /** The name people know the provider by. */
+  label: string;
+  /** The icon set's name of the provider's monochrome mark. */
+  icon: string;
+}
+
+/** Keyed by the provider key billing sends (`ANTHROPIC`). */
+export const AI_PROVIDERS: Readonly<Record<string, AiProvider>> = {
+  ANTHROPIC: { label: 'Anthropic', icon: 'anthropic-logo-grey' },
+  OPENAI: { label: 'OpenAI', icon: 'openai-logo-grey' },
+  GOOGLE_GEMINI: { label: 'Google Gemini', icon: 'gemini-logo-grey' },
+};
+
+const words = (key: string): string[] =>
+  key
+    .toLowerCase()
+    .split(/[^a-z0-9]+/)
+    .filter(Boolean);
+
+/**
+ * A provider by its key: what a host stated for it, else this list's entry,
+ * else its key read as a name and the mark the icon set would hold for it.
+ */
+export function aiProvider(key: string, stated?: { label?: string | null; icon?: string | null } | null): AiProvider {
+  const known = AI_PROVIDERS[key];
+  const parts = words(key);
+  return {
+    label:
+      stated?.label || known?.label || parts.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') || key,
+    icon: stated?.icon || known?.icon || `${parts.join('-')}-logo-grey`,
+  };
+}

package/src/utils/index.ts

@@ -17,6 +17,8 @@ export {
 // source of truth). Re-exported here so existing callers that pull from
 // the barrel keep working without changing imports.
 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 {
   VENDOR_CLASSIFICATIONS,

package/src/utils/list-url.ts

@@ -118,6 +118,7 @@ const BUILDERS: Record<string, (ids: string[], base: string) => string> = {
   prospect_call: (ids, b) => `${b}/api/prospect-calls?ids=${ids.join(',')}`,
   // The public website's own pages (live source; ChatRef-shaped items like the objects above).
   site_page: (ids, b) => `${b}/api/site-pages?ids=${ids.join(',')}`,
+  openframe_price: (ids, b) => `${b}/api/openframe-pricing?ids=${ids.join(',')}`,
   // The OpenMSP vendor directory (indexed source).
   vendor: (ids, b) => `${b}/api/vendors/cards?ids=${ids.join(',')}`,
   // Code intelligence — per-object card hydration, same `handleEntityCardList`

package/src/utils/model-token-rates.ts

@@ -0,0 +1,103 @@
+/**
+ * The per-model AI token exchange rates: their shape and how a rate is written.
+ * Server-safe (no client code), so a host's server (a chat source, a page's
+ * metadata) states a rate exactly as the shared table (`ModelTokenRates`) does.
+ */
+
+import { aiProvider } from './ai-providers';
+
+/** One model's rates: OpenFrame tokens charged per ONE token of the model. */
+export interface ModelTokenRate {
+  modelName: string;
+  /** The name people know the model by; the model's id stands in when it is missing. */
+  displayName?: string | null;
+  /** The provider's key (`ANTHROPIC`, `OPENAI`, `GOOGLE_GEMINI`); an unknown one is shown by name, without a mark. */
+  providerType: string;
+  /** The provider's name, when the host's server states one; else the shared provider list names it. */
+  providerLabel?: string | null;
+  /** The icon set's name of the provider's mark, when the host's server states one; else the shared provider list's. */
+  providerIcon?: string | null;
+  inputTokenRate: number;
+  outputTokenRate: number;
+  /** Charged for an input token read back from the prompt cache. Shown only where the table has room for it. */
+  cacheReadInputTokenRate?: number | null;
+}
+
+/** What a figure that cannot be stated is written as. */
+export const TOKEN_RATE_EMPTY = '\u2014';
+
+/**
+ * A rate as a multiplier. Two decimals from 0.1 up ("1.33×", "5×"), two
+ * significant digits under it ("0.033×"), so a cheap model's rate is never
+ * rounded to nothing.
+ */
+export function formatTokenRate(value: number | null | undefined): string {
+  if (value == null || !Number.isFinite(value) || value <= 0) return TOKEN_RATE_EMPTY;
+  const rounded = value >= 0.1 ? Number(value.toFixed(2)) : Number(value.toPrecision(2));
+  return `${rounded}\u00d7`;
+}
+
+/** What OpenFrame tokens cost: `price` USD buys `tokens` of them. */
+export interface TokenPrice {
+  tokens: number;
+  price: number;
+}
+
+/** What a number of OpenFrame tokens costs in USD at a price. Null without a price. */
+export function tokenCost(tokens: number, tokenPrice: TokenPrice | null | undefined): number | null {
+  if (!tokenPrice || !(tokenPrice.tokens > 0) || !(tokenPrice.price > 0) || !(tokens >= 0)) return null;
+  return (tokens / tokenPrice.tokens) * tokenPrice.price;
+}
+
+/** The units a token count is shortened to, largest first. */
+const TOKEN_AMOUNT_UNITS = [
+  { size: 1_000_000_000, suffix: 'B' },
+  { size: 1_000_000, suffix: 'M' },
+  { size: 1_000, suffix: 'K' },
+] as const;
+
+/**
+ * A token count in short form: "850", "10K", "750K", "1.25M". The unit is chosen
+ * from the ROUNDED figure, so a count just under a unit reads as the next one
+ * ("1M", never "1000K").
+ */
+export function formatTokenAmount(tokens: number | null | undefined): string {
+  if (tokens == null || !Number.isFinite(tokens) || tokens < 0) return TOKEN_RATE_EMPTY;
+  const whole = Math.round(tokens);
+  if (whole < 1_000) return String(whole);
+  for (const [index, unit] of TOKEN_AMOUNT_UNITS.entries()) {
+    if (whole < unit.size) continue;
+    const figure = Number((whole / unit.size).toPrecision(3));
+    // Rounded up to a thousand of this unit: it is one of the unit above.
+    const larger = TOKEN_AMOUNT_UNITS[index - 1];
+    return figure >= 1_000 && larger ? `1${larger.suffix}` : `${figure}${unit.suffix}`;
+  }
+  return String(whole);
+}
+
+/**
+ * How many of a model's tokens a balance of OpenFrame tokens runs at a rate:
+ * the balance divided by the rate. Null without a rate.
+ */
+export function tokensForBalance(balance: number, rate: number | null | undefined): number | null {
+  if (rate == null || !Number.isFinite(rate) || rate <= 0 || !(balance > 0)) return null;
+  return balance / rate;
+}
+
+/** A provider's name: what the host stated for it, else the shared provider list's (`aiProvider`). */
+export function tokenRateProviderLabel(providerType: string, stated?: string | null): string {
+  return aiProvider(providerType, { label: stated }).label;
+}
+
+/** The rates under their providers, in the order the host gave them (providers by first appearance). */
+export function groupTokenRatesByProvider<T extends ModelTokenRate>(
+  rates: readonly T[],
+): { providerType: string; rates: T[] }[] {
+  const groups = new Map<string, T[]>();
+  for (const rate of rates) {
+    const group = groups.get(rate.providerType);
+    if (group) group.push(rate);
+    else groups.set(rate.providerType, [rate]);
+  }
+  return [...groups].map(([providerType, grouped]) => ({ providerType, rates: grouped }));
+}

package/src/utils/source-icons.ts

@@ -58,6 +58,7 @@ export const SOURCE_ICON_NAMES: Record<string, string> = {
   'trust-center': 'shield-check',
   // The public website's own pages (live source): the site's own mark, as a glyph in the slot's colour
   'website-pages': 'flamingo-logo-grey',
+  'openframe-pricing': 'money-bill-dollar',
   // The OpenMSP vendor directory: the icon the site menu's "Tool directory" entry draws (it reads this one)
   vendors: 'package-search',
 
@@ -150,6 +151,7 @@ export const SOURCE_LABELS_BY_TABLE: Record<string, string> = {
   // Trust
   'trust-center': 'Trust Center',
   'website-pages': 'Website',
+  'openframe-pricing': 'OpenFrame pricing',
   vendors: 'Vendor Directory',
 
   // Financials
@@ -255,6 +257,7 @@ export const DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID: Record<string, string> = {
   // Trust
   trust_center: 'trust-center',
   site_page: 'website-pages',
+  openframe_price: 'openframe-pricing',
   vendor: 'vendors',
 
   // Financials