- {sections.map(section => {
+ {columnSections.map(section => {
const view = views[section.id];
return (
@@ -302,9 +309,23 @@ export function TrustCenterPage({
}
return (
-
- {body}
-
+ <>
+
+ {body}
+
+ {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.
+
{/* `DataAttribution`'s own layout: two lines below `sm`, one row above it. */}
-
+
+ ) : null}
+
);
}
diff --git a/openframe-frontend-core/src/components/help-center-pages/trust-center-sections.tsx b/openframe-frontend-core/src/components/help-center-pages/trust-center-sections.tsx
index c3284237c..e2adc3414 100644
--- a/openframe-frontend-core/src/components/help-center-pages/trust-center-sections.tsx
+++ b/openframe-frontend-core/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() {
+
+ {views.faq.render(data)}
+
+
+
+
{}} />);
+ const regular = screen.getByRole('button', { name: 'Download PDF' }).className;
+ rerender( {}} />);
+ expect(screen.getByRole('button', { name: 'Download PDF' }).className).not.toBe(regular);
+ });
+});
diff --git a/openframe-frontend-core/src/components/ui/data-attribution.tsx b/openframe-frontend-core/src/components/ui/data-attribution.tsx
index fb329b038..3e7a23c67 100644
--- a/openframe-frontend-core/src/components/ui/data-attribution.tsx
+++ b/openframe-frontend-core/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 (
+
+ );
}
/**
@@ -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 (
-
-
+ & {
+ /** 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 (
+ }
+ href={href}
+ {...(href ? { openInNewTab: true, prefetch: false } : {})}
+ {...props}
+ >
+ {label}
+
+ );
+}
diff --git a/openframe-frontend-core/src/components/ui/index.ts b/openframe-frontend-core/src/components/ui/index.ts
index 95e54e6be..b5f86e1de 100644
--- a/openframe-frontend-core/src/components/ui/index.ts
+++ b/openframe-frontend-core/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';
diff --git a/openframe-frontend-core/src/types/trust-center.ts b/openframe-frontend-core/src/types/trust-center.ts
index b9fca2942..3f703dd13 100644
--- a/openframe-frontend-core/src/types/trust-center.ts
+++ b/openframe-frontend-core/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,
+ 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>,
@@ -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 = {
+ 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]);
}
// ---------------------------------------------------------------------------
+
);
}
diff --git a/openframe-frontend-core/src/components/ui/download-button.tsx b/openframe-frontend-core/src/components/ui/download-button.tsx
new file mode 100644
index 000000000..5f7c67de4
--- /dev/null
+++ b/openframe-frontend-core/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
{icon}
Data synced from {source}
-
+ {action}
: null}