Trust Panel Embed

<surface-trust-panel> is a dependency-free, read-only web component that renders a derived trust report so a viewer can inspect claims, evidence, freshness, and transparency gaps before relying on them. It is the reference implementation of the Minimum Trust Panel disclosure baseline for derived reports.

The surface-trust-panel element rendering the example report: status chips, expandable claims, evidence, and policy context

Here is the intended integration, end to end: a product listing shows the Built with Surface badge as the entry point, and the embedded panel discloses — claim by claim — that the registration status was verified from a source excerpt and a human attestation, but needs refresh because its 14-day freshness window expired:

A product listing with the Built with Surface badge and an embedded trust panel showing a stale registration-status claim with its evidence and freshness gap

Try it without installing anything in the hosted Trust Snapshot Viewer — reports are parsed entirely in the browser and never leave the page.

Embed it

The component is authored in TypeScript (src/trust-panel/surface-trust-panel.ts) and compiles to a single standalone script with no dependencies and no module loader. It ships in the npm package — copy or serve it from there and load a derived report:

cp node_modules/@kontourai/surface/dist/src/trust-panel/surface-trust-panel.js public/

<script type="module" src="surface-trust-panel.js"></script>

<!-- Fetch a report by URL -->
<surface-trust-panel src="./report.json"></surface-trust-panel>

<!-- Or assign the report object directly -->
<surface-trust-panel id="panel"></surface-trust-panel>
<script type="module">
  document.getElementById("panel").report = myTrustReport;
</script>

<!-- Override the panel heading to match your product's voice -->
<surface-trust-panel src="./report.json" heading="Why you can trust this listing"></surface-trust-panel>

The compiled file is a self-contained ES module with no imports, so type="module" is the only loading requirement.

Basis mode

The same compatibility element also renders the Surface Basis Viewer. Set a projection directly, or select Basis explicitly for src content. The element does not infer mode from an input shape.

<surface-trust-panel id="basis" mode="basis"></surface-trust-panel>
<script>
  document.querySelector("#basis").basisProjection = projection;
</script>

Basis mode always shows standing and gaps. Assessment is expanded; context, relationships, and technical identities use native collapsed disclosures. Its stable parts include panel, header, title, standing, gaps, assessment, evidence, context, relationships, technical, empty, error, and footer.

The input is the output of surface report or buildTrustReport — a derived TrustReport, not a raw TrustBundle. If the JSON has claims but no derived statuses, the panel says so instead of guessing.

What it renders

A summary header with the report source and generation time. The heading defaults to "Surface Trust Panel"; set the heading attribute to use your own copy.
Status chips with plain-language labels (verified → "Verified", stale → "Needs refresh", unknown → "No evidence"). Every status the report can carry has its own label and its own colour band, so a claim that was never checked can never read like one that was verified.
One expandable row per claim: subject, asserted field and value, impact, policy, the evidence items behind it, and any transparency gaps, color-coded by severity.
Per evidence item, the state a reader needs in order to judge it — not just its type, method and summary:

- Support strength — "Entails the claim", "Cited only", or "Support strength not stated". Evidence that is merely cited is not evidence that establishes the claim.

- Result — "Passed", "Failed", "Failed — blocking", or "Not evaluated". Absent passing is reported as not evaluated; it is never rendered as a pass.

- Visibility — the producer's disclosure state from metadata.visibility (or metadata.disclosure.visibility), per Disclosure Requirements. Undeclared visibility says so rather than implying "public", because private, redacted, permissioned and unavailable evidence must not read as missing.

- Integrity — the integrityAnchor's kind and verificationStatus when one is supplied, so an anchor that failed verification does not render like one that passed.

- Observed time, always, or "Observed time not supplied".

Each row also carries data-support, data-result, data-blocking, data-visibility and data-integrity attributes for host styling and for tests. This is the Minimum Trust Panel §Required Sections 3 baseline: "evidence summary, type, method, source, observed time, result when supplied, and visibility state".

Theming

The panel inherits the host page through CSS custom properties with built-in fallbacks: --k-text, --k-text-muted, --k-panel, --k-panel-raised, --k-line, --k-positive, --k-caution, --k-negative, and --k-font-ui. Pages already using Kontour design tokens get a native look with no extra work; any other page can set those properties on the element.

Boundaries

The panel displays derived trust state; it never re-derives, scores, or mutates it. Producer-specific vocabulary and actions belong to the product embedding the panel — see Producer Extension Limits. For an operator workspace rather than a viewer surface, use the Surface Console.