@flamingo-stack/openframe-frontend-core 0.0.668 → 0.0.669-snapshot.20260927145656

package/dist/utils/list-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAaH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAKtE;AAqFD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}
+{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAaH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAKtE;AAsFD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}

package/dist/utils/source-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkEpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwEzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkEpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK5E"}
+{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmEpD,CAAC;AAEF;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyEzD,CAAC;AAEF;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmEpE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.668",
+  "version": "0.0.669-snapshot.20260927145656",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/entity-cards/design-doc-card.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+/**
+ * DesignDocCard (pure presentation) — a design doc as the entity card every surface shows it with: the full card
+ * (`default`, the `RoadmapCard` layout without its image slot, since a doc has no image of its own and a constant glyph
+ * says nothing: title, DRI and date, readiness (the hub's own wording, `design-doc-readiness`), summary, sign-off caption and the people) for admin surfaces, and the chat's compact card (`DesignDocChatCard` in `dispatch.tsx`, which reads
+ * the same readiness and meta). The card writes no click logic beyond its `href` anchor.
+ */
+
+import type { DesignDoc } from '../../../types/design-doc';
+import { formatDateShort } from '../../../utils/date-formatters';
+import {
+  DESIGN_DOC_READINESS_DISPLAY,
+  designDocReadiness,
+  formatCompletionLabelWithBlockers,
+} from '../../../utils/design-doc-readiness';
+import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
+import { StatusBadge } from '../../ui/status-badge';
+import { safeHref } from '../utils/compact-card-classes';
+
+/** The people behind a doc: the DRI first, then the implementation owners (display only). */
+export function designDocPeople(doc: Pick<DesignDoc, 'author' | 'feature_leads'>): AvatarStackPerson[] {
+  const people: AvatarStackPerson[] = [];
+  if (doc.author?.full_name)
+    people.push({
+      key: `dri-${doc.author.id ?? doc.author.full_name}`,
+      name: doc.author.full_name,
+      avatarUrl: doc.author.avatar_url,
+    });
+  for (const p of doc.feature_leads ?? []) {
+    if (!p.full_name) continue;
+    people.push({ key: `lead-${p.id}`, name: p.full_name, avatarUrl: p.avatar_url });
+  }
+  return people;
+}
+
+/** "DRI Jane Doe · updated Sep 24, 2026" — the card's subtitle. */
+export function designDocMetaLine(doc: Pick<DesignDoc, 'author' | 'updated_at'>): string {
+  return [doc.author?.full_name ? `DRI ${doc.author.full_name}` : null, `updated ${formatDateShort(doc.updated_at)}`]
+    .filter(Boolean)
+    .join(' · ');
+}
+
+export interface DesignDocCardProps {
+  doc: DesignDoc;
+  /** The doc's page. */
+  href?: string | null;
+  target?: '_blank';
+  rel?: 'noopener' | 'noopener noreferrer';
+  className?: string;
+}
+
+export function DesignDocCardSkeleton() {
+  return (
+    <div className="flex h-full animate-pulse flex-col gap-[16px] rounded-[6px] border border-ods-border bg-ods-card p-[24px]">
+      <div className="flex items-center gap-[16px]">
+        <div className="flex flex-1 flex-col gap-2">
+          <div className="h-5 w-3/4 rounded bg-ods-bg" />
+          <div className="h-4 w-1/3 rounded bg-ods-bg/70" />
+        </div>
+      </div>
+      <div className="h-4 w-full rounded bg-ods-bg/60" />
+      <div className="h-4 w-5/6 rounded bg-ods-bg/60" />
+    </div>
+  );
+}
+
+export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCardProps) {
+  const readiness = DESIGN_DOC_READINESS_DISPLAY[designDocReadiness(doc.completion)];
+  const people = designDocPeople(doc);
+  const link = safeHref(href ?? null);
+  const body = (
+    <>
+      <div className="flex w-full items-center gap-[16px]">
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex min-h-[48px] items-center">
+            <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{doc.title || 'Untitled design doc'}</h3>
+          </div>
+          <div className="flex min-h-[20px] items-center">
+            <p className="truncate text-ods-text-secondary text-h5">{designDocMetaLine(doc)}</p>
+          </div>
+        </div>
+        <StatusBadge
+          text={readiness.label}
+          colorScheme={readiness.scheme}
+          variant="button"
+          singleLine
+          className="hidden md:inline-flex"
+        />
+      </div>
+      <div className="md:hidden">
+        <StatusBadge text={readiness.label} colorScheme={readiness.scheme} variant="button" singleLine />
+      </div>
+      <div className="flex min-h-[72px] items-center">
+        <p className="line-clamp-3 text-ods-text-secondary text-h4">{doc.summary || ''}</p>
+      </div>
+      <div className="flex-1" />
+      <div className="flex w-full items-center justify-between gap-2">
+        <span className="truncate text-ods-text-secondary text-h6">
+          {formatCompletionLabelWithBlockers(doc.completion)}
+        </span>
+        {people.length > 0 ? <AvatarStack size="xs" people={people} className="shrink-0" /> : null}
+      </div>
+    </>
+  );
+  const outer = `flex h-full flex-col gap-[16px] rounded-[6px] border border-ods-border bg-ods-card p-[24px] transition-all hover:border-ods-accent ${className ?? ''}`;
+  return link ? (
+    <a href={link} target={target} rel={rel} className={outer}>
+      {body}
+    </a>
+  ) : (
+    <div className={outer}>{body}</div>
+  );
+}

package/src/components/chat/entity-cards/dispatch.tsx

@@ -33,6 +33,7 @@ import React, { type ReactNode } from 'react';
 import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context';
 import Image from '../../../embed-shims/next-image';
 import { useRouter } from '../../../embed-shims/next-navigation';
+import type { DesignDoc } from '../../../types/design-doc';
 import {
   TRUST_CENTER_DOCUMENT_TYPE,
   TRUST_CENTER_PAGE_PATH,
@@ -45,6 +46,11 @@ import {
   type TrustFrameworkMonitoringEntry,
 } from '../../../types/trust-center';
 import { formatDateShort } from '../../../utils/date-formatters';
+import {
+  DESIGN_DOC_READINESS_DISPLAY,
+  designDocReadiness,
+  formatCompletionLabel,
+} from '../../../utils/design-doc-readiness';
 import { faqItemAnchor } from '../../../utils/faq-anchor';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
@@ -62,6 +68,7 @@ import { CodeIcon } from '../../icons-v2-generated/coding/code-icon';
 import { CodeSquareIcon } from '../../icons-v2-generated/coding/code-square-icon';
 import { CodingBranchIcon } from '../../icons-v2-generated/coding/coding-branch-icon';
 import { CodingCommitIcon } from '../../icons-v2-generated/coding/coding-commit-icon';
+import { CodingMergeIcon } from '../../icons-v2-generated/coding/coding-merge-icon';
 import { CodingPullRequestIcon } from '../../icons-v2-generated/coding/coding-pull-request-icon';
 import { PackageIcon } from '../../icons-v2-generated/coding/package-icon';
 import { CallIcon } from '../../icons-v2-generated/communication/call-icon';
@@ -115,6 +122,7 @@ import { CaseStudyCardSkeleton } from './case-study-card';
 import { ChatVideoEntityCard } from './chat-video-entity-card';
 import { CustomerInterviewCardSkeleton } from './customer-interview-card';
 import { DeletedDataCard } from './deleted-data-card';
+import { designDocMetaLine } from './design-doc-card';
 import {
   parseGithubTitle,
   formatActivityId,
@@ -1068,6 +1076,46 @@ function CustomerInterviewChatCard({
   );
 }
 
+/**
+ * Design doc → the doc glyph, its readiness as the pill (the hub's own wording: "Ready to build" / "Not ready",
+ * `design-doc-readiness`) and "DRI · updated · n/m reviews signed off" under the title. The hub's card route attaches the doc's list row as
+ * `item.doc`; a row without it (an older hub) renders the ref's own title and preview.
+ */
+function DesignDocChatCard({
+  item,
+  chatRef,
+  isNewTab,
+  discuss,
+}: {
+  item: (ChatCardItem & { doc?: DesignDoc }) | undefined;
+  chatRef: ChatRef;
+  isNewTab: boolean;
+  discuss?: CardDiscussAction;
+}) {
+  const displayRef = fetchedItemDisplayRef(item, chatRef);
+  const doc = item?.doc;
+  const readiness = doc ? DESIGN_DOC_READINESS_DISPLAY[designDocReadiness(doc.completion)] : null;
+  return (
+    <MingoInfoCard
+      title={doc?.title ?? displayRef.title}
+      description={
+        doc
+          ? [designDocMetaLine(doc), formatCompletionLabel(doc.completion)].join(' · ')
+          : (displayRef.preview ?? undefined)
+      }
+      icon={<FileContentIcon size={24} />}
+      status={
+        readiness
+          ? { label: readiness.label, variant: readiness.scheme === 'success' ? 'success' : 'grey' }
+          : { label: 'Design doc', variant: 'grey' }
+      }
+      anchorProps={buildAnchorProps(displayRef.url, isNewTab)}
+      menuGroups={cardMenuGroups(displayRef.url, discuss)}
+      menuAriaLabel="Design doc actions"
+    />
+  );
+}
+
 /** Investor update → presentation icon + "Investor update" pill. Title falls
  *  back to "Update #N" when the row has no explicit title. */
 function InvestorUpdateChatCard({
@@ -1411,7 +1459,6 @@ interface GlyphCardConfig {
 /** The OpenFrame logo every OpenFrame surface uses (the `openframe` icon name). */
 const OpenFrameGlyph = resolveIcon('openframe');
 const REF_GLYPH_CARD_CONFIGS: Record<string, GlyphCardConfig> = {
-  design_doc: { label: 'Design doc', icon: () => <FileContentIcon size={24} /> },
   openframe_tenant: { label: 'OpenFrame tenant', icon: () => <OpenFrameGlyph size={24} /> },
   prospect_call: { label: 'Prospect call', icon: () => <CallIcon size={24} />, media: true },
   // Code intelligence (product-hub internal): the review rules a repository is
@@ -1429,6 +1476,9 @@ const REF_GLYPH_CARD_CONFIGS: Record<string, GlyphCardConfig> = {
   code_symbol: { label: 'Code symbol', icon: () => <CodeSquareIcon size={24} /> },
   code_duplicate: { label: 'Duplicate code', icon: () => <Copy01Icon size={24} /> },
   code_impact: { label: 'Change impact', icon: () => <CodingPullRequestIcon size={24} /> },
+  // A change set: pull requests across repositories declared as one change, with the ClickUp tasks and design
+  // docs its pull requests are attached to. ONE card for it wherever a set is shown (chat, a design doc's page).
+  change_set: { label: 'Change set', icon: () => <CodingMergeIcon size={24} /> },
 };
 function refGlyphRegistryEntries(): Record<string, ChatCardRegistryEntry> {
   return registryEntries(REF_GLYPH_CARD_CONFIGS, (cfg, docType) =>
@@ -1698,6 +1748,17 @@ const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
       />
     ),
   },
+  design_doc: {
+    label: 'Design doc',
+    contentRefType: 'design_doc',
+    bareInline: true,
+    noComposedHref: true,
+    fallbackHref: (item: { url?: string | null }) => item?.url ?? null,
+    skeleton: () => <MingoInfoCardSkeleton />,
+    render: (item, chatRef, opts) => (
+      <DesignDocChatCard item={item} chatRef={chatRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
+    ),
+  },
   customer_interview: {
     label: 'Customer interview',
     contentRefType: 'customer_interview',

package/src/components/chat/entity-cards/index.ts

@@ -69,6 +69,13 @@ export {
   type OnboardingGuideCardProps,
 } from './onboarding-guide-card';
 export { RoadmapCard, RoadmapCardSkeleton, type RoadmapCardProps, type VoteType } from './roadmap-card';
+export {
+  DesignDocCard,
+  DesignDocCardSkeleton,
+  designDocMetaLine,
+  designDocPeople,
+  type DesignDocCardProps,
+} from './design-doc-card';
 export { RoadmapVoteButton, type RoadmapVoteButtonProps } from './roadmap-vote-button';
 export { TaskTypeIcon, type TaskTypeIconProps } from './task-type-icon';
 export {

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

@@ -14,7 +14,8 @@ import {
   type TrustCenterPublic,
 } from '../../../types/trust-center';
 import { TRUST_CENTER_FIXTURE_WINDOW_MS, makeTrustCenterData } from '../__fixtures__/trust-center';
-import { TrustCenterPage } from '../trust-center-page';
+import { TrustCenterPage, TrustCenterPageSkeleton } from '../trust-center-page';
+import { TRUST_SECTION_LEADS } from '../trust-center-sections';
 
 // The real ContactForm needs the endpoints + chat runtimes; the page only
 // decides WHAT it is handed, so a stub that echoes its props is the honest
@@ -114,6 +115,32 @@ describe('TrustCenterPage', () => {
     expect(String(fetchMock.mock.calls[0][0])).toBe('/content/api/trust-center');
   });
 
+  it('while it loads, the skeleton shows the real section headings and leads the content will fill', async () => {
+    let answer: (response: Response) => void = () => {};
+    fetchMock.mockReturnValueOnce(new Promise<Response>(resolve => (answer = resolve)));
+    render(<TrustCenterPage endpoint="/content/api/trust-center" />);
+    const loading = await screen.findByLabelText('Loading the trust center');
+    for (const [label, lead] of [
+      ['Compliance', TRUST_SECTION_LEADS.compliance],
+      ['Controls', TRUST_SECTION_LEADS.controls],
+      ['Documents', TRUST_SECTION_LEADS.documents],
+    ] as const) {
+      expect(within(loading).getByRole('heading', { level: 2, name: label, hidden: true })).toBeInTheDocument();
+      expect(within(loading).getByText(lead as string)).toBeInTheDocument();
+    }
+    act(() => answer(jsonResponse(makeData())));
+    expect(await screen.findByText('SOC 2 Type II')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Loading the trust center')).toBeNull();
+  });
+
+  it('TrustCenterPageSkeleton wears the page chrome it is given: no title and subtitle means no header at all', () => {
+    const { rerender } = render(<TrustCenterPageSkeleton shell={false} title="" subtitle="" />);
+    expect(screen.queryByRole('heading', { level: 1 })).toBeNull();
+    expect(screen.getByLabelText('Loading the trust center')).toBeInTheDocument();
+    rerender(<TrustCenterPageSkeleton shell={false} />);
+    expect(screen.getByRole('heading', { level: 1, name: TRUST_CENTER_TITLE })).toBeInTheDocument();
+  });
+
   it('is ONE page: every section is an anchored h2, in reading order — AI & data use after Subprocessors, Contact before FAQ', () => {
     render(<TrustCenterPage initialData={makeData()} />);
     const headings = screen.getAllByRole('heading', { level: 2 }).map(h => h.textContent);

package/src/components/help-center-pages/index.ts

@@ -21,7 +21,7 @@ export { RoadmapPage, type RoadmapPageProps } from './roadmap-page';
 export { ProductReleasesListPage, type ProductReleasesListPageProps } from './product-releases-list-page';
 export { DeliveryPage, type DeliveryPageProps } from './delivery-page';
 export { OnboardingGuidesCatalogPage, type OnboardingGuidesCatalogPageProps } from './onboarding-guides-catalog-page';
-export { TrustCenterPage, type TrustCenterPageProps } from './trust-center-page';
+export { TrustCenterPage, TrustCenterPageSkeleton, type TrustCenterPageProps } from './trust-center-page';
 
 // Existing full-pages re-exported for a single Help Center import site.
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';

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

@@ -61,6 +61,10 @@ import {
   DocumentRequestModal,
   DocumentsSection,
   SubprocessorsSection,
+  TRUST_BODY_GRID_CLASS,
+  TRUST_SECTIONS_COLUMN_CLASS,
+  TRUST_SECTION_LEADS,
+  TRUST_STATUS_ROW_CLASS,
   TrustCenterSkeleton,
   TrustSection,
 } from './trust-center-sections';
@@ -146,7 +150,6 @@ export function TrustCenterPage({
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
 }: TrustCenterPageProps) {
-  const router = useRouter();
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
     revalidateOnVisibleAfterMs: TRUST_CENTER_CACHE_SECONDS * 1000,
@@ -191,11 +194,6 @@ export function TrustCenterPage({
   const openRequest = useCallback((documentTitle: string | null) => setRequest({ open: true, documentTitle }), []);
   const closeRequest = useCallback(() => setRequest(current => ({ ...current, open: false })), []);
 
-  const backCfg =
-    backButton === false
-      ? undefined
-      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
-
   const hasGatedDocuments = data?.documents.some(document => document.access === 'request') ?? false;
   const actions = hasGatedDocuments
     ? [{ label: 'Request access', variant: 'accent' as const, onClick: () => openRequest(null) }]
@@ -205,19 +203,19 @@ export function TrustCenterPage({
   // sections show comes from `visibleSections` — this map only says what each renders.
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
-      lead: 'How customer data is handled by the AI in our products.',
+      lead: TRUST_SECTION_LEADS.ai,
       render: d => <AiSection practices={d.aiPractices} />,
     },
     compliance: {
-      lead: 'Frameworks we are audited against, and what is next.',
+      lead: TRUST_SECTION_LEADS.compliance,
       render: d => <ComplianceSection frameworks={d.frameworks} />,
     },
     controls: {
-      lead: 'Security controls currently passing in continuous monitoring (via Vanta).',
+      lead: TRUST_SECTION_LEADS.controls,
       render: d => <ControlsSection endpoint={endpoint} seed={controlsSeed(d)} />,
     },
     documents: {
-      lead: 'Public documents open directly. Gated documents are shared under NDA after one short request.',
+      lead: TRUST_SECTION_LEADS.documents,
       render: d => (
         <DocumentsSection
           documents={d.documents}
@@ -227,7 +225,7 @@ export function TrustCenterPage({
       ),
     },
     subprocessors: {
-      lead: 'Third parties that process customer data on our behalf.',
+      lead: TRUST_SECTION_LEADS.subprocessors,
       render: d => <SubprocessorsSection subprocessors={d.subprocessors} />,
     },
     faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} /> },
@@ -243,7 +241,7 @@ export function TrustCenterPage({
     const status = monitoringStatus(data, hydrated, nowMs);
     body = (
       <>
-        <div className="flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between">
+        <div className={TRUST_STATUS_ROW_CLASS}>
           <StatusIndicator status={status.status} label={status.label} />
           {data.connected ? (
             <DataAttribution
@@ -263,8 +261,8 @@ export function TrustCenterPage({
           ) : null}
         </div>
 
-        <div className="grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]">
-          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]">
+        <div className={TRUST_BODY_GRID_CLASS}>
+          <div className={TRUST_SECTIONS_COLUMN_CLASS}>
             {sections.map(section => {
               const view = views[section.id];
               return (
@@ -296,6 +294,34 @@ export function TrustCenterPage({
     );
   }
 
+  return (
+    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
+      {body}
+    </TrustCenterChrome>
+  );
+}
+
+/**
+ * The page's chrome, ONE copy for the page and its skeleton: the standalone
+ * `PageShell` or the host's padded box (`shell`), and the frozen `PageLayout`
+ * header (title, subtitle, back button, actions).
+ */
+function TrustCenterChrome({
+  shell,
+  title,
+  subtitle,
+  backButton,
+  actions,
+  children,
+}: Required<Pick<TrustCenterPageProps, 'shell' | 'title' | 'subtitle' | 'backButton'>> & {
+  actions?: Array<{ label: string; variant: 'accent'; onClick: () => void }>;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  const backCfg =
+    backButton === false
+      ? undefined
+      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
   const inner = (
     <PageLayout
       title={title}
@@ -306,9 +332,26 @@ export function TrustCenterPage({
       actions={actions}
       actionsVariant="primary-buttons"
     >
-      {body}
+      {children}
     </PageLayout>
   );
-
   return shell ? <PageShell>{inner}</PageShell> : <div className="page-shell-content">{inner}</div>;
 }
+
+/**
+ * The whole page while a host loads the data itself (the hub's admin preview):
+ * the SAME chrome and the same body skeleton `TrustCenterPage` shows while it
+ * self-fetches. Pass the chrome props the page will get.
+ */
+export function TrustCenterPageSkeleton({
+  shell = true,
+  backButton = false,
+  title = TRUST_CENTER_TITLE,
+  subtitle = TRUST_CENTER_TAGLINE,
+}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'>) {
+  return (
+    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton}>
+      <TrustCenterSkeleton />
+    </TrustCenterChrome>
+  );
+}