test(backups): prove the off-host ledger end to end and the card's empty state

The unit tests either side of this mock Prisma, so neither proves the
migration applies or that the writer and the reader agree on a shape. The
integration file runs the real nightly job against real Postgres with an
in-memory bucket, then reads the row back and asks the console's own
classifier what it says: fresh after a run, one row across two runs, stale
once it ages past two nightly periods, gone when the account is.

The component test pins the case an operator most needs stated: a host with
no bucket configured says so, rather than painting an empty list that reads
as "no problems". The accessibility scan's admin-backups response gains one
row in each state, because a card that paints only its header proves nothing
about the rows anybody reads.

Two small corrections ride along, both from writing the tests. The freshness
badge composes its classes through `cn` like every other surface, and the
error-reporting line waits for the settings to arrive instead of asserting
"nothing is sent" while the answer is still loading.

src/components/admin/__tests__/offhost-backups-section.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * The off-host card paints what the response says, including the case an
+ * operator most needs stated out loud: this host is not sending anything
+ * anywhere. A card that renders an empty list on an unconfigured host reads
+ * as "no problems".
+ */
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { BackupsList } from "@/types/backups";
+
+const queryResult = vi.hoisted(() => ({
+  current: {
+    data: null as BackupsList | null,
+    isLoading: false,
+    isError: false,
+  },
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ ...queryResult.current, refetch: vi.fn() }),
+}));
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { OffhostBackupsSection } from "../offhost-backups-section";
+
+function render(data: BackupsList["offhost"] | null): string {
+  queryResult.current = {
+    data:
+      data === null
+        ? null
+        : ({
+            rows: [],
+            retentionDays: 90,
+            schedule: null,
+            offhost: data,
+          } as unknown as BackupsList),
+    isLoading: false,
+    isError: false,
+  };
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale="en">
+      <OffhostBackupsSection />
+    </I18nProvider>,
+  );
+}
+
+describe("<OffhostBackupsSection>", () => {
+  it("says off-host backup is not configured rather than showing an empty list", () => {
+    const html = render({ configured: false, periodHours: 24, rows: [] });
+    expect(html).toContain("Off-host backup is not configured");
+    expect(html).not.toContain('data-slot="offhost-backup-rows"');
+  });
+
+  it("paints one row per account with its verdict", () => {
+    const html = render({
+      configured: true,
+      periodHours: 24,
+      rows: [
+        {
+          userId: "u1",
+          username: "account-one",
+          lastSuccessAt: "2026-09-10T06:00:00.000Z",
+          sizeBytes: 4096,
+          ageHours: 3,
+          freshness: "fresh",
+        },
+        {
+          userId: "u2",
+          username: "account-two",
+          lastSuccessAt: "2026-09-06T06:00:00.000Z",
+          sizeBytes: 2048,
+          ageHours: 99,
+          freshness: "stale",
+        },
+        {
+          userId: "u3",
+          username: "account-three",
+          lastSuccessAt: null,
+          sizeBytes: null,
+          ageHours: null,
+          freshness: "never",
+        },
+      ],
+    });
+
+    expect(html).toContain('data-offhost-freshness="fresh"');
+    expect(html).toContain('data-offhost-freshness="stale"');
+    expect(html).toContain('data-offhost-freshness="never"');
+    expect(html).toContain("account-two");
+    // The account with no object says so instead of showing a blank cell.
+    expect(html).toContain("No copy has ever reached the bucket");
+    // Never the bucket's own coordinates.
+    expect(html).not.toMatch(/secret|access[- ]key/i);
+  });
+});

src/components/admin/glitchtip-section.tsx

@@ -112,13 +112,18 @@ export function GlitchtipSection() {
           }
           disabled={updateSettings.isPending}
         />
-        <p className="text-sm" data-slot="glitchtip-target">
-          {reporting && targetHost
-            ? t("admin.glitchtipTargetOn", { host: targetHost })
-            : settings?.glitchtipEnabled
-              ? t("admin.glitchtipTargetNoTarget")
-              : t("admin.glitchtipTargetOff")}
-        </p>
+        {/* Only once the settings are in hand: a line that says "nothing is
+            sent" while the answer is still loading is a claim, not a
+            placeholder. */}
+        {settings ? (
+          <p className="text-sm" data-slot="glitchtip-target">
+            {reporting && targetHost
+              ? t("admin.glitchtipTargetOn", { host: targetHost })
+              : settings.glitchtipEnabled
+                ? t("admin.glitchtipTargetNoTarget")
+                : t("admin.glitchtipTargetOff")}
+          </p>
+        ) : null}
         <div className="grid gap-3 sm:grid-cols-2">
           <div className="space-y-1.5 sm:col-span-2">
             <Label htmlFor="admin-glitchtip-dsn" className="text-xs">

src/components/admin/offhost-backups-section.tsx

@@ -26,6 +26,7 @@ import { ListRow } from "@/components/ui/list-row";
 import { QueryErrorRow } from "@/components/ui/query-error-row";
 import { Skeleton } from "@/components/ui/skeleton";
 import { apiGet } from "@/lib/api/api-fetch";
+import { cn } from "@/lib/utils";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 import { queryKeys } from "@/lib/query-keys";
 import type { OffhostBackupFreshness } from "@/lib/jobs/offhost-backup-freshness";
@@ -80,7 +81,7 @@ function AccountRow({ row }: { row: OffhostAccountRow }) {
           </span>
           <Badge
             variant="outline"
-            className={`shrink-0 ${FRESHNESS_STYLE[row.freshness]}`}
+            className={cn("shrink-0", FRESHNESS_STYLE[row.freshness])}
           >
             {freshnessLabel(row.freshness, t)}
           </Badge>