@flamingo-stack/openframe-frontend-core 0.0.736 → 0.0.738

package/src/components/faq/faq-section.tsx

@@ -27,6 +27,15 @@ export interface FaqSectionProps {
   /** Both required together for entity-attached FAQs; partial → bare /api/faqs. */
   entityType?: string;
   entityId?: number | string;
+  /**
+   * What the page this FAQ sits on is about: ANY string the host's FAQ
+   * endpoint knows. ONE topic for the whole block: the questions are the FAQs
+   * written for it (`/api/faqs?topic=`; `initialFaqs` are then the host's read
+   * of the same topic) and the "ask the assistant" card offers the questions
+   * written for it. Whoever renders the FAQ states it; the lib names none.
+   * Ignored for the questions when the FAQ is attached to an entity.
+   */
+  topic?: string;
   /**
    * Heading node above the grouped list. `undefined` → default
    * `<h2>`"Frequently Asked Questions". `null` → no heading (the host page
@@ -43,6 +52,14 @@ export interface FaqSectionProps {
   /** Overrides for the JSON-LD's name/description/url. */
   jsonLd?: FaqSchemaOptions;
   className?: string;
+  /** The `id` of the rendered section: what an in-page link to the FAQ points at (`PAGE_FAQ_SECTION_ID` for a page's own block). */
+  id?: string;
+  /**
+   * Print the topic's bare name in small muted text under the heading
+   * (`pricing`), so whoever edits the FAQs can see which topic a page asks
+   * for. Default off. The section always carries it as `data-faq-topic` too.
+   */
+  showTopic?: boolean;
   /** Maps to /api/faqs `?count=` (the 5-tier fill target). Absent → param
    *  not sent (server default applies). */
   minResults?: number;
@@ -60,10 +77,10 @@ export interface FaqSectionProps {
    * The "ask the assistant" card beside the questions. Shown wherever the
    * host's assistant runtime says a chat is there to open
    * (`AssistantRuntimeContext`: its name, glyph, questions endpoint and
-   * opener) AND the FAQ has a topic: `ask.topic` (any string the host's
-   * questions endpoint knows), else the `entityType` the FAQ is attached to.
-   * No runtime or no topic: the FAQ is the single column it always was; the
-   * lib names no topic of its own. `false` switches the card off; the object
+   * opener) AND the FAQ has a topic: the block's `topic`, else the
+   * `entityType` the FAQ is attached to (`ask.topic` states another one for
+   * the card alone). No runtime or no topic: the FAQ is the single column it
+   * always was; the lib names no topic of its own. `false` switches the card off; the object
    * also states the questions to leave out, the wording and the chat it opens
    * (`onOpen`). An `aside` takes the card's place.
    */
@@ -72,11 +89,47 @@ export interface FaqSectionProps {
 
 const DEFAULT_HEADING_TEXT = 'Frequently Asked Questions';
 
+/** The id of a page's own FAQ block: what a page's "FAQ" link or section nav points at. */
+export const PAGE_FAQ_SECTION_ID = 'faq';
+
+/** A page's own FAQ block inside a page that already provides the container: vertical rhythm only. */
+const PAGE_FAQ_IN_PAGE_CLASS = 'space-y-10 pt-12 md:pt-20';
+
+/**
+ * What a shared page of the lib takes as its `faq` prop: the topic the page is
+ * about (REQUIRED, stated by the host, never read from the page's address) and
+ * where the host serves the FAQs. The page renders `FaqSection` with it, inside
+ * its own container, after its content (`pageFaqProps`).
+ */
+export type PageFaqSlot = Pick<
+  FaqSectionProps,
+  'apiBaseUrl' | 'initialFaqs' | 'heading' | 'ask' | 'emitJsonLd' | 'jsonLd' | 'showTopic'
+> & { topic: string };
+
+/** The `FaqSection` props of a shared page's own FAQ block: the host's slot, as the page's `#faq` section. */
+export function pageFaqProps(faq: PageFaqSlot): FaqSectionProps {
+  return { ...faq, id: PAGE_FAQ_SECTION_ID, className: PAGE_FAQ_IN_PAGE_CLASS };
+}
+
 /** URL composition shared with RelatedContentSection (`buildSuggestionUrl`)
  *  — byte-identical to the historical `buildFaqsUrl` output when
  *  `minResults`/`apiBaseUrl` are absent. */
-function buildFaqsUrl(entityType?: string, entityId?: number | string, minResults?: number, apiBaseUrl = ''): string {
-  return buildSuggestionUrl('/api/faqs', { apiBaseUrl, entityType, entityId, count: minResults });
+function buildFaqsUrl(
+  entityType?: string,
+  entityId?: number | string,
+  minResults?: number,
+  apiBaseUrl = '',
+  topic?: string,
+): string {
+  // An entity's FAQs are the entity's: a topic narrows only the platform's own list.
+  const entityScoped = !!entityType && entityId !== undefined && entityId !== null && entityId !== '';
+  return buildSuggestionUrl('/api/faqs', {
+    apiBaseUrl,
+    entityType,
+    entityId,
+    count: minResults,
+    extraParams: entityScoped ? undefined : { topic },
+  });
 }
 
 interface FaqGroup {
@@ -390,6 +443,8 @@ interface FaqsResponse {
  *   page owns the <h1>) + `emitJsonLd` with `jsonLd` overrides for SEO.
  * - Per-entity embed: pass `entityType` + `entityId` (no `initialFaqs`); the
  *   hook self-fetches `GET /api/faqs`, and `heading` is this block's own <h2>.
+ * - A page's own FAQ: pass `topic` (what the page is about); the hook
+ *   self-fetches `GET /api/faqs?topic=`, and the ask card takes the same topic.
  *
  * CONTRACT: the consuming app MUST implement `GET /api/faqs`. On a fetch error
  * (or zero FAQs) the component renders nothing so the host page isn't
@@ -400,10 +455,13 @@ export function FaqSection({
   initialFaqs,
   entityType,
   entityId,
+  topic,
   heading,
   emitJsonLd = false,
   jsonLd,
   className,
+  id,
+  showTopic = false,
   minResults,
   apiBaseUrl = '',
   aside: asideProp,
@@ -412,30 +470,44 @@ export function FaqSection({
   const assistant = useAssistantRuntime();
   // The host's own block wins; else the card, where a chat is there to open and the FAQ has a topic
   // (an empty topic is no topic, as the questions request reads it).
-  const askTopic = ask === false ? undefined : ask?.topic || entityType;
+  const askTopic = ask === false ? undefined : ask?.topic || topic || entityType;
   const aside =
     asideProp ??
     (ask !== false && askTopic && faqAskCardShown(assistant) ? <FaqAskCard {...ask} topic={askTopic} /> : undefined);
-  const url = buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl);
+  const url = buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl, topic);
   // Memoized — useSelfFetch re-syncs on [initialData]; a fresh per-render
   // wrapper object would setState-loop under re-rendering parents.
   const initialData = useMemo<FaqsResponse | undefined>(
     () => (initialFaqs ? { faqs: initialFaqs } : undefined),
     [initialFaqs],
   );
-  const { data, isLoading, error } = useSelfFetch<FaqsResponse>(url, { initialData });
+  const { data, dataUrl, isLoading, error } = useSelfFetch<FaqsResponse>(url, { initialData });
 
-  // Memoised because the `??` fallback minted a NEW array on every
-  // render, which made the memo below re-run every time — i.e. do nothing.
-  const faqs = useMemo(() => data?.faqs ?? [], [data?.faqs]);
+  // Only the answer for THIS url: while another topic's questions load, the
+  // previous topic's are not this page's. Memoised because the `??` fallback
+  // minted a NEW array on every render, which made the memo below re-run
+  // every time — i.e. do nothing.
+  const held = dataUrl === url ? data?.faqs : undefined;
+  const faqs = useMemo(() => held ?? [], [held]);
   // Grouped before the early returns so the hook order stays stable.
   const groups = useMemo(() => (faqs.length > 0 ? groupFaqsBySection(faqs) : []), [faqs]);
 
   // `undefined` → default <h2> title; `null` → the host page owns the <h1>, so
   // no title renders here. `heading === null` also makes the category headings
   // <h2> (directly under the page <h1>); otherwise they nest as <h3>.
+  const titleNode = heading === undefined ? <h2 className={SECTION_HEADING_CLASS}>{DEFAULT_HEADING_TEXT}</h2> : heading;
   const headingNode =
-    heading === undefined ? <h2 className={SECTION_HEADING_CLASS}>{DEFAULT_HEADING_TEXT}</h2> : heading;
+    showTopic && topic ? (
+      // The host's heading may arrive from a server component, still streaming: React cannot check such a
+      // node when it sits in a list of siblings and warns about a missing key. So it is the ONLY child of its
+      // own wrapper, and the two siblings here are this component's own elements.
+      <div className="space-y-1">
+        <div>{titleNode}</div>
+        <p className="text-ods-text-muted text-h6">{topic}</p>
+      </div>
+    ) : (
+      titleNode
+    );
 
   // Degrade silently — never show an error banner or an empty section shell
   // where FAQs would be (host pages and the standalone surface both rely on it).
@@ -453,7 +525,7 @@ export function FaqSection({
 
   return (
     <>
-      <section className={className ?? 'space-y-10'}>
+      <section id={id} data-faq-topic={topic} className={className ?? 'space-y-10'}>
         {!aside && headingNode}
         <GroupedFaqList
           groups={groups}

package/src/components/faq/index.ts

@@ -9,6 +9,6 @@
 //
 // (Server-safe subpath is wired in tsup.config.ts under the server/universal
 // block and exposed via "./components/faq/json-ld" in package.json#exports.)
-export { FaqSection, type FaqSectionProps } from './faq-section';
+export { FaqSection, PAGE_FAQ_SECTION_ID, pageFaqProps, type FaqSectionProps, type PageFaqSlot } from './faq-section';
 export { FaqDocumentPage, type FaqDocumentPageProps } from './faq-document-page';
 export { FaqAskCard, type FaqAskOptions } from './faq-ask-card';

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

@@ -1,19 +1,12 @@
 'use client';
 
-import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
-import { trialLabels } from '../../../utils/trial';
-import { FileOffIcon } from '../../icons-v2-generated/documents/file-off-icon';
-import { CreditCardXmarkIcon } from '../../icons-v2-generated/finance/credit-card-xmark-icon';
 import { OpenframeLogoIcon } from '../../icons-v2-generated/logos/openframe-logo-icon';
-import { FlaskVialIcon } from '../../icons-v2-generated/school/flask-vial-icon';
-import { XmarkAltIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-alt-icon';
+import { BenefitList, trialBenefits, type BenefitItem } from '../../ui/benefit-list';
 import { Button } from '../../ui/button';
 
-export interface AuthBenefit {
-  icon: ReactNode;
-  label: string;
-}
+/** One benefit of the panel: the lib's benefit item. */
+export type AuthBenefit = BenefitItem;
 
 export interface AuthBenefitsPanelProps {
   title?: string;
@@ -31,17 +24,6 @@ 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.';
 
-/** 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
  * and a "learn more" link. Presentational; content is overridable via props.
@@ -50,7 +32,7 @@ export function AuthBenefitsPanel({
   title = DEFAULT_TITLE,
   description = DEFAULT_DESCRIPTION,
   trialDays,
-  benefits = defaultBenefits(trialDays),
+  benefits = trialBenefits(trialDays),
   learnMoreLabel = 'Learn More About OpenFrame',
   learnMoreUrl = 'https://www.flamingo.run/',
   className,
@@ -65,16 +47,7 @@ export function AuthBenefitsPanel({
       <h2 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h2>
       <p className="text-ods-text-primary text-h4">{description}</p>
 
-      <div className="flex flex-wrap content-center items-center gap-[var(--spacing-system-m)]">
-        {benefits.map(benefit => (
-          <div key={benefit.label} className="flex items-center gap-[var(--spacing-system-xs)]">
-            <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary [&_svg]:size-4">
-              {benefit.icon}
-            </span>
-            <span className="whitespace-nowrap text-ods-text-primary text-h4">{benefit.label}</span>
-          </div>
-        ))}
-      </div>
+      <BenefitList items={benefits} />
 
       <Button
         variant="outline"

package/src/components/features/conversation-card.tsx

@@ -1,6 +1,11 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { useAgentTint } from '../agent-identity';
+import { ChatTurn } from '../chat/chat-turn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { Tag } from '../ui/tag';
 
 export interface ConversationCardSpeaker {
   /** Rendered as given (an avatar, an agent mark). */
@@ -8,11 +13,13 @@ export interface ConversationCardSpeaker {
   name: string;
   /** A quieter word after the name ("on her laptop", "this computer"). */
   meta?: string;
+  /** When they spoke, as shown ("2:47 PM"). */
+  time?: string;
 }
 
 export interface ConversationCardProps {
   requester: ConversationCardSpeaker;
-  /** What they said, shown in quotation marks. */
+  /** What they said. */
   request: string;
   responder: ConversationCardSpeaker;
   /** What was done about it. */
@@ -25,22 +32,19 @@ export interface ConversationCardProps {
   footerValue: string;
   /** `attention` paints the answer in the warning colour: it needs a person. */
   footerTone?: 'default' | 'attention';
+  /**
+   * The slug of the agent that answered. The card takes that agent's tint from
+   * its identity, so it reads as that agent's at a glance. A card names its
+   * agent, never a colour.
+   */
+  agent?: string | null;
   className?: string;
 }
 
-function Who({ speaker }: { speaker: ConversationCardSpeaker }) {
-  return (
-    <div className="flex items-baseline gap-2 text-ods-text-primary text-h4">
-      {speaker.name}
-      {speaker.meta && <span className="text-ods-text-secondary text-h6">{speaker.meta}</span>}
-    </div>
-  );
-}
-
 /**
  * A request and what was done about it, as two turns and a footer: who asked
- * and what they said, who answered and the result, then one line that sums up
- * the reader's own part in it.
+ * and what they said, who answered and the result (a command block with its
+ * check), then one line that sums up the reader's own part in it.
  */
 export function ConversationCard({
   requester,
@@ -51,47 +55,45 @@ export function ConversationCard({
   footerLabel,
   footerValue,
   footerTone = 'default',
+  agent,
   className,
 }: ConversationCardProps) {
+  const tint = useAgentTint(agent);
   return (
     <div
-      className={cn('flex h-full flex-col gap-4 rounded-xl border border-ods-border bg-ods-card p-5 md:p-7', className)}
+      className={cn(
+        'flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]',
+        className,
+      )}
+      style={tint}
     >
-      <div className="flex items-start gap-3">
-        <span className="shrink-0">{requester.avatar}</span>
-        <div className="min-w-0 flex-1">
-          <Who speaker={requester} />
-          {/* Every part keeps a fixed number of lines, so cards in a row or a carousel line up part by part. */}
-          <p className="m-0 mt-1 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3" title={request}>
-            &ldquo;{request}&rdquo;
-          </p>
-        </div>
-      </div>
-      <div className="flex items-start gap-3 rounded-md border border-ods-border bg-ods-bg p-3.5">
-        <span className="shrink-0">{responder.avatar}</span>
-        <div className="min-w-0 flex-1">
-          <Who speaker={responder} />
-          <div className="mt-1 flex items-start gap-2 text-ods-text-secondary text-h4">
-            <CheckCircleIcon size={16} className="mt-1 shrink-0 text-ods-success" aria-hidden />
-            <span className="line-clamp-3 min-h-[3lh] min-w-0 flex-1" title={outcome}>
-              {outcome}
-            </span>
-            {outcomeAside}
-          </div>
+      {/* Every part keeps a fixed number of lines, so cards in a row or a carousel line up part by part. */}
+      <ChatTurn avatar={requester.avatar} name={requester.name} meta={requester.meta} time={requester.time}>
+        <p className="m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3" title={request}>
+          &ldquo;{request}&rdquo;
+        </p>
+      </ChatTurn>
+      {/* The answer is a command block: who did it, what was done, and its check. */}
+      <ChatTurn
+        avatar={responder.avatar}
+        name={responder.name}
+        meta={responder.meta}
+        time={responder.time}
+        className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]"
+      >
+        <div className="flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4">
+          <span className="line-clamp-3 min-h-[3lh] min-w-0 flex-1" title={outcome}>
+            {outcome}
+          </span>
+          {outcomeAside}
+          <span className="flex h-[1lh] shrink-0 items-center">
+            <CheckCircleIcon size={16} className="text-ods-success" aria-hidden />
+          </span>
         </div>
-      </div>
-      <div className="mt-auto flex items-center justify-between gap-3 border-t border-ods-border pt-3.5 text-ods-text-secondary text-h6">
+      </ChatTurn>
+      <div className="mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h6">
         <span>{footerLabel}</span>
-        <span
-          className={cn(
-            'inline-flex whitespace-nowrap rounded-full border px-3 py-1',
-            footerTone === 'attention'
-              ? 'border-ods-warning text-ods-warning'
-              : 'border-ods-border text-ods-text-secondary',
-          )}
-        >
-          {footerValue}
-        </span>
+        <Tag as="span" label={footerValue} variant={footerTone === 'attention' ? 'warning' : 'badge'} />
       </div>
     </div>
   );

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

@@ -8,6 +8,7 @@
  */
 
 import type { ReactNode } from 'react';
+import type { PageFaqSlot } from '../faq/faq-section';
 import { DeliveryLists } from '../shared/delivery';
 import { DevSectionPage } from '../shared/dev-section';
 
@@ -22,6 +23,12 @@ export interface DeliveryPageProps {
   subtitle?: string;
   /** Optional slot rendered below the lists, inside the page chrome. */
   belowContent?: ReactNode;
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
   /** Render the standalone `<PageShell>`. Default true. Pass false when the host
    *  layout already provides the page container (forwarded to `DevSectionPage`). */
   shell?: boolean;
@@ -34,10 +41,18 @@ export function DeliveryPage({
   title,
   subtitle,
   belowContent,
+  faq,
   shell,
 }: DeliveryPageProps) {
   return (
-    <DevSectionPage sectionKey="delivery" backButton={backButton} title={title} subtitle={subtitle} shell={shell}>
+    <DevSectionPage
+      sectionKey="delivery"
+      backButton={backButton}
+      title={title}
+      subtitle={subtitle}
+      faq={faq}
+      shell={shell}
+    >
       <DeliveryLists completedApiEndpoint={completedEndpoint} inProgressApiEndpoint={inProgressEndpoint} />
       {belowContent}
     </DevSectionPage>

package/src/components/help-center-pages/download-apps-page.tsx

@@ -52,6 +52,7 @@ import {
 import { cn } from '../../utils/cn';
 import { formatUrlForDisplay } from '../../utils/format';
 import { DESKTOP_OSES, type DesktopOs } from '../../utils/visitor-os';
+import { FaqSection, pageFaqProps, type PageFaqSlot } from '../faq/faq-section';
 import { CommandBox } from '../features/command-box';
 import { AppleLogoIcon } from '../icons-v2-generated/brand-logos/apple-logo-icon';
 import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-logo-grey-icon';
@@ -86,6 +87,12 @@ export interface DownloadAppsPageProps {
   onDownloadAction?: (event: DownloadActionEvent) => void;
   /** The closing card, under the mobile app: using OpenFrame without installing anything. Default: none. */
   web?: DownloadAppsWebOption;
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
 }
 
 /** The "no install" card: the host's words and its own button (the page holds no signup link). */
@@ -281,6 +288,7 @@ export function DownloadAppsPage({
   openStoresInNewTab = true,
   onDownloadAction,
   web,
+  faq,
 }: DownloadAppsPageProps) {
   const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
   // The page adapts to the server's answer: a section exists only for what it names.
@@ -362,6 +370,7 @@ export function DownloadAppsPage({
         {body}
         {web && <WebCard web={web} />}
       </div>
+      {faq && <FaqSection {...pageFaqProps(faq)} />}
     </DownloadAppsChrome>
   );
 }

package/src/components/help-center-pages/onboarding-guides-catalog-page.tsx

@@ -10,6 +10,7 @@
 
 import type { ReactNode } from 'react';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
+import type { PageFaqSlot } from '../faq/faq-section';
 import { OnboardingGuidesCatalogView } from '../onboarding-guides';
 import { DevSectionPage } from '../shared/dev-section';
 
@@ -32,6 +33,12 @@ export interface OnboardingGuidesCatalogPageProps {
   subtitle?: string;
   /** Optional slot rendered below the catalog, inside the page chrome. */
   belowContent?: ReactNode;
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
   /** Render the standalone `<PageShell>`. Default true. Pass false when the host
    *  layout already provides the page container (forwarded to `DevSectionPage`). */
   shell?: boolean;
@@ -48,10 +55,18 @@ export function OnboardingGuidesCatalogPage({
   title,
   subtitle,
   belowContent,
+  faq,
   shell,
 }: OnboardingGuidesCatalogPageProps) {
   return (
-    <DevSectionPage sectionKey="onboarding" backButton={backButton} title={title} subtitle={subtitle} shell={shell}>
+    <DevSectionPage
+      sectionKey="onboarding"
+      backButton={backButton}
+      title={title}
+      subtitle={subtitle}
+      faq={faq}
+      shell={shell}
+    >
       <OnboardingGuidesCatalogView
         guidesEndpoint={guidesEndpoint}
         sectionsEndpoint={sectionsEndpoint}

package/src/components/help-center-pages/product-releases-list-page.tsx

@@ -10,6 +10,7 @@
 
 import type { ReactNode } from 'react';
 import type { ProductRelease, ProductReleaseListResponse } from '../../types/product-release';
+import type { PageFaqSlot } from '../faq/faq-section';
 import { DevSectionPage } from '../shared/dev-section';
 import { ProductReleasesView, type ProductReleaseCardExtras } from '../shared/product-release';
 
@@ -28,6 +29,12 @@ export interface ProductReleasesListPageProps {
   subtitle?: string;
   /** Optional slot rendered below the list, inside the page chrome. */
   belowContent?: ReactNode;
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
   /** Render the standalone `<PageShell>`. Default true. Pass false when the host
    *  layout already provides the page container (forwarded to `DevSectionPage`). */
   shell?: boolean;
@@ -42,10 +49,18 @@ export function ProductReleasesListPage({
   title,
   subtitle,
   belowContent,
+  faq,
   shell,
 }: ProductReleasesListPageProps) {
   return (
-    <DevSectionPage sectionKey="releases" backButton={backButton} title={title} subtitle={subtitle} shell={shell}>
+    <DevSectionPage
+      sectionKey="releases"
+      backButton={backButton}
+      title={title}
+      subtitle={subtitle}
+      faq={faq}
+      shell={shell}
+    >
       <ProductReleasesView
         endpoint={releasesEndpoint}
         basePath={basePath}

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

@@ -10,6 +10,7 @@
 
 import type { ReactNode } from 'react';
 import type { RoadmapItem } from '../chat/types/entities/roadmap-item';
+import type { PageFaqSlot } from '../faq/faq-section';
 import { DevSectionPage } from '../shared/dev-section';
 import { RoadmapView } from '../shared/roadmap';
 import type { UseRoadmapVotingOptions } from '../shared/roadmap';
@@ -35,6 +36,12 @@ export interface RoadmapPageProps {
   /** Optional slot rendered below the list, inside the page chrome — e.g. the
    *  hub's related-content rail. */
   belowContent?: ReactNode;
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
   /** Render the standalone `<PageShell>`. Default true. Pass false when the host
    *  layout already provides the page container (forwarded to `DevSectionPage`). */
   shell?: boolean;
@@ -51,10 +58,18 @@ export function RoadmapPage({
   title,
   subtitle,
   belowContent,
+  faq,
   shell,
 }: RoadmapPageProps) {
   return (
-    <DevSectionPage sectionKey="roadmap" backButton={backButton} title={title} subtitle={subtitle} shell={shell}>
+    <DevSectionPage
+      sectionKey="roadmap"
+      backButton={backButton}
+      title={title}
+      subtitle={subtitle}
+      faq={faq}
+      shell={shell}
+    >
       <RoadmapView
         endpoint={roadmapEndpoint}
         initialItems={initialItems}

package/src/components/platform/ToolBadge.tsx

@@ -85,13 +85,14 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
     return linked(
       <span
         className={cn(
-          'inline-flex h-7 items-center gap-1.5 rounded-md border border-ods-border px-2 text-ods-text-secondary text-h6',
-          href && 'transition-colors hover:border-ods-border-hover hover:text-ods-text-primary',
+          // The house tag (Figma `tag`): 32px, on the card surface, the caption face.
+          'inline-flex h-8 items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] text-ods-text-primary text-h5',
+          href && 'transition-colors hover:border-ods-border-hover',
           className,
         )}
       >
         {mark && (
-          <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center [&_img]:h-full [&_img]:w-full [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full">
+          <span className="flex h-4 w-4 shrink-0 items-center justify-center [&_img]:h-full [&_img]:w-full [&_img]:rounded-sm [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full">
             {mark}
           </span>
         )}

package/src/components/shared/dev-section/dev-section-page.tsx

@@ -22,6 +22,7 @@ import {
   OPENFRAME_DEV_SECTIONS,
   type OpenframeDevSectionKey,
 } from '../../../utils/dev-sections/openframe-dev-sections';
+import { FaqSection, pageFaqProps, type PageFaqSlot } from '../../faq/faq-section';
 import { PageShell, PageLayout } from '../../ui';
 import { DevSectionView } from './dev-section-view';
 
@@ -51,6 +52,12 @@ export interface DevSectionPageProps {
    *  `false` when the host layout already provides the page container (e.g.
    *  openframe-frontend's `AppLayout` `<main>`): then only the
    *  `page-shell-content` padding box is rendered, avoiding a nested `<main>`. */
+  /**
+   * The page's own FAQ block: the topic the page is about (stated by the host,
+   * never read from its address) and where the host serves the FAQs. Rendered
+   * after the page's content, inside its container. Absent: no FAQ block.
+   */
+  faq?: PageFaqSlot;
   shell?: boolean;
 }
 
@@ -61,6 +68,7 @@ export function DevSectionPage({
   backButton,
   title,
   subtitle,
+  faq,
   shell = true,
 }: DevSectionPageProps) {
   const router = useRouter();
@@ -95,6 +103,7 @@ export function DevSectionPage({
       <DevSectionView sectionKey={sectionKey} showHeading={false} preControls={preControls}>
         {children}
       </DevSectionView>
+      {faq && <FaqSection {...pageFaqProps(faq)} />}
     </PageLayout>
   );