feat(proof): the public per-repo proof page, the last piece of #9569

The API half already shipped: `/v1/public/repos/:owner/:repo/proof`, the badge
SVG, the feature flag and the per-repo opt-out are all on main, all built on
`buildProofSummary`. What was missing was the page the issue is named for.

ONE IMPLEMENTATION, TWO RENDERINGS. This component renders and computes nothing.
Every figure comes from the endpoint, which is the same composition the in-app
trust panel (#9193) reads, so the two cannot disagree about a number. The only
arithmetic is multiplying an already-computed rate by 100 for display -- a
percentage derived here would be a second implementation free to drift from the
first, undermining the exact property the page exists to demonstrate.

The states are the substance, because each is somewhere a plausible
implementation says something untrue:

  • BELOW THE SAMPLE FLOOR the page shows the decision COUNT and no rate --
    "7 decisions, too few to claim a rate". Hiding the count along with the
    figure, or printing 0%, both misrepresent it.
  • NOT-YET-ANCHORED and EMPTY LEDGER are neutral. A new repository is not a
    failing one, and rendering it as an error lies in the more damaging
    direction.
  • A BROKEN ledger is the one state stated as a problem, naming the row and the
    kind of break, because the kind is the actionable half.
  • UNAVAILABLE says so explicitly: it is not a claim that anything is wrong.
  • AN OPTED-OUT REPO (404) is an EMPTY state, not an error -- a different ARIA
    role and a different meaning. Telling an opted-out repo something broke
    invites someone to hunt a fault that does not exist.
  • ACCURACY never appears without its denominator and Wilson interval.

The boundary statement is rendered FROM THE PAYLOAD rather than written here, so
a screenshot or an embed cannot shed the caveat while keeping the numbers.

Digests are shown head-and-tail with the full value in `title`: a truncated
digest with no way back to the whole cannot be checked against anything.

Mutation-tested: publishing a rate below the floor, hardcoding the boundary
statement, and turning the 404 into an error each fail.

Closes #9569

Author: JSONbored

apps/loopover-ui/src/components/site/public-proof-page.test.tsx

@@ -0,0 +1,177 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PublicProofPage, type ProofSummary } from "./public-proof-page";
+
+// #9569: the public proof page.
+//
+// What is worth testing here is not that cards render — it is the JUDGEMENT the page encodes, because every
+// one of these states is a place where a plausible implementation says something untrue:
+//
+//   • a repo below the sample floor must show its decision COUNT and no rate. Hiding the count with the
+//     figure, or printing 0%, both misrepresent "we have 7 decisions, too few to claim a rate".
+//   • not-yet-anchored and empty-ledger are NEUTRAL. A page that renders a new repo as an error is lying in
+//     the more damaging direction than one that says nothing.
+//   • a genuinely BROKEN ledger is the one state that must read as a problem, and must name where it broke.
+//   • an opted-out repo (404) is an empty state, not an error state — different ARIA role, different meaning.
+//   • the boundary statement comes from the PAYLOAD. Hardcoding it here would let a screenshot or embed shed
+//     the caveat while keeping the numbers.
+
+const summary = (over: Partial<ProofSummary> = {}): ProofSummary => ({
+  schemaVersion: 1,
+  repoFullName: "acme/widgets",
+  decisionCount: 128,
+  accuracy: {
+    state: "published",
+    accuracy: 0.964,
+    decided: 112,
+    confirmed: 108,
+    interval: { lo: 0.912, hi: 0.987 },
+  },
+  ledger: {
+    state: "verified",
+    tipSeq: 128,
+    totalCount: 128,
+    checkedAt: "2026-07-31T12:00:00.000Z",
+  },
+  anchor: {
+    state: "anchored",
+    backend: "rekor",
+    seq: 128,
+    rowHash: "a".repeat(64),
+    at: "2026-07-30T00:00:00.000Z",
+  },
+  sampleRecords: [
+    {
+      pullNumber: 42,
+      action: "merge",
+      reasonCode: "gate_pass",
+      decidedAt: "2026-07-30T10:00:00.000Z",
+      recordDigest: "b".repeat(64),
+    },
+  ],
+  boundary:
+    "This page proves what was decided and that the record is intact. It does not prove the decisions were correct.",
+  ...over,
+});
+
+/** Renders with fetch stubbed to one response, then waits for the query to settle. */
+async function renderPage(response: { status: number; body?: unknown }): Promise<void> {
+  vi.stubGlobal("fetch", async () =>
+    response.status === 200
+      ? new Response(JSON.stringify(response.body), {
+          status: 200,
+          headers: { "content-type": "application/json" },
+        })
+      : new Response(JSON.stringify({ error: "not_found" }), {
+          status: response.status,
+          headers: { "content-type": "application/json" },
+        }),
+  );
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(
+    <QueryClientProvider client={client}>
+      <PublicProofPage owner="acme" repo="widgets" />
+    </QueryClientProvider>,
+  );
+  await waitFor(() => expect(screen.queryByText(/acme\/widgets/)).toBeTruthy());
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("PublicProofPage (#9569)", () => {
+  it("shows the accuracy WITH its denominator and interval, never as a bare percentage", async () => {
+    await renderPage({ status: 200, body: summary() });
+    await waitFor(() => expect(screen.getByText("96.4%")).toBeTruthy());
+    // The denominator and the interval are what make the number arguable rather than promotional.
+    expect(screen.getByText(/108 of 112 decisions confirmed/)).toBeTruthy();
+    expect(screen.getByText(/91\.2%–98\.7%/)).toBeTruthy();
+  });
+
+  it("REGRESSION: below the sample floor it publishes the COUNT and no rate", async () => {
+    await renderPage({
+      status: 200,
+      body: summary({ accuracy: { state: "insufficient_data", decided: 7, minimumDecisions: 20 } }),
+    });
+    await waitFor(() => expect(screen.getByText(/7 decisions so far/)).toBeTruthy());
+    expect(screen.getByText(/fewer than the 20 needed/)).toBeTruthy();
+    // The failure mode this guards: rendering a fabricated 0% for "no data".
+    expect(screen.queryByText("0%")).toBeNull();
+  });
+
+  it("renders not-yet-anchored as a NEUTRAL state, not an error", async () => {
+    await renderPage({ status: 200, body: summary({ anchor: { state: "not_yet_anchored" } }) });
+    await waitFor(() => expect(screen.getByText("Not yet anchored")).toBeTruthy());
+    expect(screen.getByText(/The chain is still self-verifying/)).toBeTruthy();
+  });
+
+  it("renders an empty ledger as a new repository, not a failing one", async () => {
+    await renderPage({
+      status: 200,
+      body: summary({ ledger: { state: "empty", checkedAt: "2026-07-31T12:00:00.000Z" } }),
+    });
+    await waitFor(() => expect(screen.getByText("No decisions recorded yet")).toBeTruthy());
+    expect(screen.getByText(/not a failing one/)).toBeTruthy();
+  });
+
+  it("REGRESSION: a BROKEN ledger is stated as a problem, naming the row and the kind", async () => {
+    // The one state that must not be softened — and the kind of break is the actionable half.
+    await renderPage({
+      status: 200,
+      body: summary({
+        ledger: {
+          state: "broken",
+          tipSeq: 128,
+          totalCount: 128,
+          checkedAt: "2026-07-31T12:00:00.000Z",
+          brokenAtSeq: 57,
+          brokenKind: "row_hash_mismatch",
+        },
+      }),
+    });
+    await waitFor(() => expect(screen.getByText("Ledger verification failed")).toBeTruthy());
+    expect(screen.getByText(/sequence 57 of 128 \(row_hash_mismatch\)/)).toBeTruthy();
+  });
+
+  it("says an unavailable verification is not a claim that anything is wrong", async () => {
+    await renderPage({
+      status: 200,
+      body: summary({ ledger: { state: "unavailable", checkedAt: "2026-07-31T12:00:00.000Z" } }),
+    });
+    await waitFor(() => expect(screen.getByText("Ledger state unavailable")).toBeTruthy());
+    expect(screen.getByText(/not a claim that anything is wrong/)).toBeTruthy();
+  });
+
+  it("INVARIANT: renders the boundary statement from the payload, not from this component", async () => {
+    // Carried in the response so an embed or screenshot cannot shed the caveat while keeping the figures.
+    const boundary = "A bespoke boundary sentence that exists only in this fixture.";
+    await renderPage({ status: 200, body: summary({ boundary }) });
+    await waitFor(() => expect(screen.getByText(boundary)).toBeTruthy());
+  });
+
+  it("treats an opted-out repo (404) as EMPTY, not as an error", async () => {
+    // Different meaning and a different ARIA role: telling an opted-out repo that something broke would be
+    // wrong, and would invite someone to go looking for a fault that does not exist.
+    await renderPage({ status: 404 });
+    await waitFor(() => expect(screen.getByText(/No public proof page/)).toBeTruthy());
+    expect(screen.queryByText(/Proof summary unavailable/)).toBeNull();
+  });
+
+  it("shows sample records with a digest that can be checked", async () => {
+    await renderPage({ status: 200, body: summary() });
+    await waitFor(() => expect(screen.getByText("#42")).toBeTruthy());
+    expect(screen.getByText("gate_pass")).toBeTruthy();
+    // Truncated for the eye, complete in the title — a shortened digest with no way back to the full value
+    // cannot be checked against anything.
+    expect(screen.getByTitle("b".repeat(64))).toBeTruthy();
+  });
+
+  it("omits the sample-records card entirely when there are none", async () => {
+    await renderPage({ status: 200, body: summary({ sampleRecords: [] }) });
+    await waitFor(() => expect(screen.getByText("Decisions")).toBeTruthy());
+    expect(screen.queryByText("Sample decision records")).toBeNull();
+  });
+});