@cosmicdrift/kumiko-bundled-features 0.79.2 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.79.2",
+  "version": "0.80.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -84,11 +84,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.79.2",
-    "@cosmicdrift/kumiko-framework": "0.79.2",
-    "@cosmicdrift/kumiko-headless": "0.79.2",
-    "@cosmicdrift/kumiko-renderer": "0.79.2",
-    "@cosmicdrift/kumiko-renderer-web": "0.79.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.80.0",
+    "@cosmicdrift/kumiko-framework": "0.80.0",
+    "@cosmicdrift/kumiko-headless": "0.80.0",
+    "@cosmicdrift/kumiko-renderer": "0.80.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.80.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/auth-email-password/web/auth-form-primitives.tsx

@@ -15,6 +15,7 @@
 //   authMutedLinkClass  — Subtle-Link-Style.
 //   parseUrlToken       — URL-Param-Helper (window.location.search).
 
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
 import { BareFormProvider, cn } from "@cosmicdrift/kumiko-renderer-web";
 import { createContext, type ReactNode, useContext } from "react";
 
@@ -51,17 +52,30 @@ export type AuthCardProps = {
 };
 
 export function AuthCard({ title, subtitle, children }: AuthCardProps): ReactNode {
+  const { Card } = usePrimitives();
   const shell = useAuthShell() ?? defaultAuthShell;
+  // h1 (Seiten-Hauptüberschrift) via Header-Slot erhalten — die Card-Default-
+  // Header wäre h3. padded:false = Form sitzt randlos wie bisher (bare form).
   const card = (
-    <div className="w-full max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm">
-      {(title !== undefined || subtitle !== undefined) && (
-        <div className="flex flex-col space-y-1.5 p-6 pb-4">
-          {title !== undefined && <h1 className="text-xl font-semibold tracking-tight">{title}</h1>}
-          {subtitle !== undefined && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-        </div>
-      )}
+    <Card
+      className="w-full max-w-sm"
+      options={{ padded: false }}
+      slots={{
+        header:
+          title !== undefined || subtitle !== undefined ? (
+            <div className="flex flex-col space-y-1.5 p-6 pb-4">
+              {title !== undefined && (
+                <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+              )}
+              {subtitle !== undefined && (
+                <p className="text-sm text-muted-foreground">{subtitle}</p>
+              )}
+            </div>
+          ) : undefined,
+      }}
+    >
       <BareFormProvider>{children}</BareFormProvider>
-    </div>
+    </Card>
   );
   return shell(card);
 }

package/src/user-data-rights/__tests__/download.integration.test.ts

@@ -374,19 +374,22 @@ describe("download-by-token :: error paths", () => {
 });
 
 describe("download-by-job :: happy path", () => {
-  test("session-auth: Job-Owner → returns signed URL + audit", async () => {
+  test("session-auth: Job-Owner → returns signed URL + audit (IP aus X-Forwarded-For)", async () => {
     const { jobId } = await seedDoneJobWithToken();
 
-    const result = await stack.http.queryOk<{ url: string }>(
+    // Der UI-Klick laeuft als direkter download-by-job-Query (Client traegt
+    // X-CSRF-Token). Die Audit-IP kommt server-trusted aus dem RequestContext
+    // (X-Forwarded-For, erster Hop), nicht aus einem vom Client mitgeschickten
+    // Feld.
+    const res = await stack.http.queryWithHeaders(
       "user-data-rights:query:download-by-job",
-      {
-        jobId,
-        auditMeta: { ip: "10.0.0.5", userAgent: "Mozilla/5.0" },
-      },
+      { jobId },
       aliceUser,
+      { "x-forwarded-for": "10.0.0.5, 10.0.0.1" },
     );
-
-    expect(result.url).toMatch(/^memory:\/\//);
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as { data: { url: string } };
+    expect(body.data.url).toMatch(/^memory:\/\//);
 
     // UI-Klick zaehlt auch als Use → audit-row updated
     const [row] = (await selectMany(stack.db, exportDownloadTokensTable, { jobId })) as Array<{

package/src/user-data-rights/constants.ts

@@ -13,6 +13,7 @@ export const PRIVACY_CENTER_SCREEN_ID = "privacy-center" as const;
 export const UserDataRightsQueries = {
   exportStatus: "user-data-rights:query:export-status",
   myAuditLog: "user-data-rights:query:my-audit-log",
+  downloadByJob: "user-data-rights:query:download-by-job",
 } as const;
 
 export const UserDataRightsHandlers = {
@@ -28,13 +29,6 @@ export const UserDataRightsHandlers = {
 // Screen-Test vergleicht gegen UserQueries.me.
 export const USER_ME_QUERY = "user:query:user:me" as const;
 
-// Download-Pfad des fertigen Export-Bundles: der dokumentierte UI-Klick-Pfad
-// (r.httpRoute in feature.ts), der per 302 auf die signed Storage-URL
-// weiterleitet. Anchor-navigierbar (Cookie-Auth wird mitgesendet).
-export function userExportByJobPath(jobId: string): string {
-  return `/user-export/by-job/${jobId}`;
-}
-
 // Client-safe Mirror von EXPORT_JOB_STATUS (schema/export-job.ts ist
 // server-only via Drizzle-Import). Drift-Schutz: der Screen-Test vergleicht
 // gegen die Schema-Originale.

package/src/user-data-rights/feature.ts

@@ -220,17 +220,18 @@ export function createUserDataRightsFeature(opts: UserDataRightsOptions = {}): F
       access: { openToAll: true },
     });
 
-    // r.httpRoute-Wrapper: Magic-Link-Pfad (anonymous) + UI-Klick-Pfad.
+    // Magic-Link-Pfad (anonymous): GET /user-export/by-token?token=<plain>.
+    // Ruft via app.fetch /api/query → success: 302-Redirect zur signed-URL →
+    // Browser folgt → Download startet beim Object-Store. Bei error:
+    // passthrough (404/410/501) als JSON.
     //
-    // Beide rufen via app.fetch /api/query → wenn success: 302-Redirect
-    // zur signed-URL → Browser folgt → Download startet beim Object-Store.
-    // Bei error: passthrough (404/410/501) als JSON.
+    // Path liegt AUSSERHALB /api/* weil r.httpRoute den /api-namespace nicht
+    // claimen darf (reserved fuer write/query/batch/auth/sse-dispatcher).
     //
-    // **Token-Pfad (anonymous):** GET /user-export/by-token?token=<plain>
-    //
-    // Path liegt AUSSERHALB /api/* weil r.httpRoute den /api-namespace
-    // nicht claimen darf (reserved fuer write/query/batch/auth/sse-
-    // dispatcher).
+    // Der Session-Pfad (eingeloggter Download) braucht KEINEN httpRoute-
+    // Wrapper: der Client ruft download-by-job direkt via Dispatcher (traegt
+    // X-CSRF-Token mit) und navigiert auf die zurueckgegebene signed-URL —
+    // siehe postWithDownload im privacy-center-screen.
     r.httpRoute({
       method: "GET",
       path: "/user-export/by-token",
@@ -255,33 +256,6 @@ export function createUserDataRightsFeature(opts: UserDataRightsOptions = {}): F
       },
     });
 
-    // **Session-Pfad (auth):** GET /user-export/by-job/:jobId
-    r.httpRoute({
-      method: "GET",
-      path: "/user-export/by-job/:jobId",
-      handler: async (c, { app }) => {
-        const url = new URL(c.req.url);
-        const jobId = c.req.param("jobId");
-        if (!jobId) {
-          return c.json({ error: "missing_job_id" }, 400);
-        }
-        const queryRes = await app.fetch(
-          new Request(`${url.origin}/api/query`, {
-            method: "POST",
-            headers: {
-              "content-type": "application/json",
-              ...forwardAuthHeaders(c.req.raw.headers),
-            },
-            body: JSON.stringify({
-              type: "user-data-rights:query:download-by-job",
-              payload: { jobId, auditMeta: extractAuditMeta(c.req.raw.headers) },
-            }),
-          }),
-        );
-        return mapQueryResponseToRedirect(c, queryRes);
-      },
-    });
-
     // S2.U3 Atom 3b — Worker fuer Async Export-Pipeline. Cron-getriggert.
     r.job(
       "run-export-jobs",
@@ -363,15 +337,6 @@ async function mapQueryResponseToRedirect(
   return c.redirect(body.data.url, 302);
 }
 
-function forwardAuthHeaders(headers: Headers): Record<string, string> {
-  const out: Record<string, string> = {};
-  const auth = headers.get("authorization");
-  if (auth) out["authorization"] = auth;
-  const cookie = headers.get("cookie");
-  if (cookie) out["cookie"] = cookie;
-  return out;
-}
-
 // Extract Audit-Meta (IP + UA) aus den HTTP-Headers + steck es in die
 // query-payload. Der httpRoute-Wrapper ist trusted-source — er hat den
 // raw-request gesehen, nicht der direkter /api/query-Caller. User der

package/src/user-data-rights/handlers/download-by-job.query.ts

@@ -23,6 +23,7 @@
 //   6. Audit-Update: useCount + 1, IP, UA, lastUsedAt (best-effort)
 //   7. Return {url, expiresAt}
 
+import { requestContext } from "@cosmicdrift/kumiko-framework/api";
 import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
 import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { NotFoundError, UnprocessableError } from "@cosmicdrift/kumiko-framework/errors";
@@ -54,12 +55,6 @@ export const downloadByJobQuery = defineQueryHandler({
   name: "download-by-job",
   schema: z.object({
     jobId: z.string().min(1, "jobId required"),
-    auditMeta: z
-      .object({
-        ip: z.string().nullable(),
-        userAgent: z.string().nullable(),
-      })
-      .optional(),
   }),
   access: { openToAll: true }, // openToAll = auth-required, kein anonymous
   handler: async (query, ctx) => {
@@ -68,8 +63,13 @@ export const downloadByJobQuery = defineQueryHandler({
     const userId = query.user.id;
     const jobId = query.payload.jobId;
     const tenantId = query.user.tenantId;
-    const auditIp = query.payload.auditMeta?.ip ?? null;
-    const auditUa = query.payload.auditMeta?.userAgent ?? null;
+    // IP aus dem request-scoped Kontext (von requestIdMiddleware aus
+    // x-forwarded-for befuellt) — server-trusted, anders als ein vom Client
+    // mitgeschickter Wert. UA steht nicht im RequestContext; der Audit-Row
+    // laesst sie null (best-effort, via requestId in den Server-Logs
+    // cross-referenzierbar).
+    const auditIp = requestContext.get()?.ip ?? null;
+    const auditUa: string | null = null;
 
     // Step 1-2: job-lookup + cross-user-isolation
     // ctx.db.raw weil tenant-agnostisch — Alice in Tenant B sucht den
@@ -179,8 +179,8 @@ export const downloadByJobQuery = defineQueryHandler({
         tokenUseCount: tokenRow.useCount ?? 0,
         tenantId: jobRow.requestedFromTenantId,
         now,
-        ip: query.payload.auditMeta?.ip ?? null,
-        userAgent: query.payload.auditMeta?.userAgent ?? null,
+        ip: auditIp,
+        userAgent: auditUa,
       });
     }
     // Wenn tokenRow fehlt (sollte nicht passieren wenn Atom 4a sauber

package/src/user-data-rights/web/__tests__/privacy-center-screen.test.tsx

@@ -139,7 +139,7 @@ describe.skip("PrivacyCenterScreen", () => {
     expect(view.container.textContent).not.toContain("userDataRights.privacyCenter");
   });
 
-  test("export done: Download-Link auf den by-job-Pfad + Verfügbar-bis-Datum", async () => {
+  test("export done: Download-Button + Verfügbar-bis-Datum", async () => {
     const { view } = renderCenter({
       me: activeMe,
       exportStatus: {
@@ -148,8 +148,7 @@ describe.skip("PrivacyCenterScreen", () => {
       },
     });
     await waitForMount(view);
-    const link = view.getByTestId("privacy-export-download") as HTMLAnchorElement;
-    expect(link.getAttribute("href")).toBe("/user-export/by-job/job-123");
+    expect(view.getByTestId("privacy-export-download")).toBeTruthy();
     const ready = view.getByTestId("privacy-export-ready");
     expect(ready.textContent).toContain("2026-07-11");
     expect(ready.textContent).not.toContain("T00:00");

package/src/user-data-rights/web/confirm-deletion-screen.tsx

@@ -27,7 +27,7 @@ export function ConfirmAccountDeletionScreen({
 }: ConfirmAccountDeletionScreenProps): ReactNode {
   const t = useTranslation();
   const dispatcher = useDispatcher();
-  const { Button, Banner } = usePrimitives();
+  const { Button, Banner, Card } = usePrimitives();
   const [token] = useState(readToken);
   const [phase, setPhase] = useState<Phase>(token.length > 0 ? "idle" : "missing");
 
@@ -42,12 +42,19 @@ export function ConfirmAccountDeletionScreen({
   };
 
   return (
-    <div className="w-full max-w-sm mx-auto rounded-lg border bg-card text-card-foreground shadow-sm">
-      <div className="flex flex-col space-y-1.5 p-6 pb-4">
-        <h1 className="text-xl font-semibold tracking-tight">
-          {title ?? t("userDataRights.deletion.confirm.title")}
-        </h1>
-      </div>
+    <Card
+      className="w-full max-w-sm mx-auto"
+      options={{ padded: false }}
+      slots={{
+        header: (
+          <div className="flex flex-col space-y-1.5 p-6 pb-4">
+            <h1 className="text-xl font-semibold tracking-tight">
+              {title ?? t("userDataRights.deletion.confirm.title")}
+            </h1>
+          </div>
+        ),
+      }}
+    >
       <div className="p-6 pt-0 flex flex-col gap-4">
         {phase === "success" ? (
           <Banner variant="info">
@@ -83,6 +90,6 @@ export function ConfirmAccountDeletionScreen({
           </>
         )}
       </div>
-    </div>
+    </Card>
   );
 }

package/src/user-data-rights/web/privacy-center-screen.tsx

@@ -19,6 +19,7 @@ import {
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
+import { postWithDownload } from "@cosmicdrift/kumiko-renderer-web";
 import { type ReactNode, useEffect, useState } from "react";
 import {
   EXPORT_JOB_STATUS,
@@ -26,7 +27,6 @@ import {
   USER_ME_QUERY,
   UserDataRightsHandlers,
   UserDataRightsQueries,
-  userExportByJobPath,
 } from "../constants";
 
 const STATUS_DELETION_REQUESTED = "deletionRequested";
@@ -104,6 +104,15 @@ function ExportSection(): ReactNode {
     void statusQuery.refetch?.();
   };
 
+  // Download laeuft ueber den Dispatcher (traegt X-CSRF-Token) statt ueber
+  // eine <a>-Navigation: download-by-job liefert eine signed URL zurueck, auf
+  // die postWithDownload den Browser navigiert (content-disposition:
+  // attachment → laedt herunter).
+  const downloadExport = async (jobId: string): Promise<void> => {
+    const err = await postWithDownload(dispatcher, UserDataRightsQueries.downloadByJob, { jobId });
+    if (err) setStatus({ kind: "error", messageKey: failureKey(err) });
+  };
+
   const result = statusQuery.data;
   const job = result && result.hasJob ? result.job : null;
   const submitting = status.kind === "submitting";
@@ -121,7 +130,26 @@ function ExportSection(): ReactNode {
   }, [inProgress, refetch]);
 
   return (
-    <Section title={t("userDataRights.privacyCenter.export.title")} testId="privacy-export">
+    <Section
+      title={t("userDataRights.privacyCenter.export.title")}
+      testId="privacy-export"
+      actions={
+        !inProgress ? (
+          <Button
+            onClick={() => void request()}
+            disabled={submitting}
+            loading={submitting}
+            testId="privacy-export-request"
+          >
+            {done
+              ? t("userDataRights.privacyCenter.export.requestNew")
+              : submitting
+                ? t("userDataRights.privacyCenter.export.requesting")
+                : t("userDataRights.privacyCenter.export.request")}
+          </Button>
+        ) : undefined
+      }
+    >
       <p className="text-sm text-muted-foreground">
         {t("userDataRights.privacyCenter.export.intro")}
       </p>
@@ -150,30 +178,18 @@ function ExportSection(): ReactNode {
               })}
             </p>
           )}
-          <a
-            href={userExportByJobPath(job.id)}
-            data-testid="privacy-export-download"
-            className="mt-2 inline-block font-medium underline"
-          >
-            {t("userDataRights.privacyCenter.export.download")}
-          </a>
+          <div className="mt-2">
+            <Button
+              variant="secondary"
+              onClick={() => void downloadExport(job.id)}
+              testId="privacy-export-download"
+            >
+              {t("userDataRights.privacyCenter.export.download")}
+            </Button>
+          </div>
         </Banner>
       )}
       <StatusBanner status={status} />
-      {!inProgress && (
-        <Button
-          onClick={() => void request()}
-          disabled={submitting}
-          loading={submitting}
-          testId="privacy-export-request"
-        >
-          {done
-            ? t("userDataRights.privacyCenter.export.requestNew")
-            : submitting
-              ? t("userDataRights.privacyCenter.export.requesting")
-              : t("userDataRights.privacyCenter.export.request")}
-        </Button>
-      )}
     </Section>
   );
 }
@@ -208,6 +224,17 @@ function RestrictionSection({
     <Section
       title={t("userDataRights.privacyCenter.restriction.title")}
       testId="privacy-restriction"
+      actions={
+        restricted ? undefined : (
+          <Button
+            variant="danger"
+            onClick={() => setDialogOpen(true)}
+            testId="privacy-restriction-restrict"
+          >
+            {t("userDataRights.privacyCenter.restriction.restrict")}
+          </Button>
+        )
+      }
     >
       {restricted ? (
         <Banner variant="error" testId="privacy-restriction-active">
@@ -219,13 +246,6 @@ function RestrictionSection({
             {t("userDataRights.privacyCenter.restriction.explainer")}
           </p>
           <StatusBanner status={status} />
-          <Button
-            variant="danger"
-            onClick={() => setDialogOpen(true)}
-            testId="privacy-restriction-restrict"
-          >
-            {t("userDataRights.privacyCenter.restriction.restrict")}
-          </Button>
           <Dialog
             open={dialogOpen}
             onOpenChange={setDialogOpen}
@@ -280,7 +300,29 @@ function DeletionSection({
   };
 
   return (
-    <Section title={t("userDataRights.privacyCenter.deletion.title")} testId="privacy-deletion">
+    <Section
+      title={t("userDataRights.privacyCenter.deletion.title")}
+      testId="privacy-deletion"
+      actions={
+        deletionRequested ? (
+          <Button
+            variant="secondary"
+            onClick={() => void cancelDeletion()}
+            testId="privacy-deletion-cancel"
+          >
+            {t("userDataRights.privacyCenter.deletion.cancel")}
+          </Button>
+        ) : (
+          <Button
+            variant="danger"
+            onClick={() => setDialogOpen(true)}
+            testId="privacy-deletion-delete"
+          >
+            {t("userDataRights.privacyCenter.deletion.delete")}
+          </Button>
+        )
+      }
+    >
       {deletionRequested ? (
         <>
           <Banner variant="error" testId="privacy-deletion-requested">
@@ -289,13 +331,6 @@ function DeletionSection({
             })}
           </Banner>
           <StatusBanner status={status} />
-          <Button
-            variant="secondary"
-            onClick={() => void cancelDeletion()}
-            testId="privacy-deletion-cancel"
-          >
-            {t("userDataRights.privacyCenter.deletion.cancel")}
-          </Button>
         </>
       ) : (
         <>
@@ -303,13 +338,6 @@ function DeletionSection({
             {t("userDataRights.privacyCenter.deletion.explainer")}
           </p>
           <StatusBanner status={status} />
-          <Button
-            variant="danger"
-            onClick={() => setDialogOpen(true)}
-            testId="privacy-deletion-delete"
-          >
-            {t("userDataRights.privacyCenter.deletion.delete")}
-          </Button>
           <Dialog
             open={dialogOpen}
             onOpenChange={setDialogOpen}

package/src/user-data-rights/web/request-deletion-screen.tsx

@@ -21,7 +21,7 @@ export function RequestAccountDeletionScreen({
 }: RequestAccountDeletionScreenProps): ReactNode {
   const t = useTranslation();
   const dispatcher = useDispatcher();
-  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const { Form, Field, Input, Button, Banner, Card } = usePrimitives();
   const [email, setEmail] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [done, setDone] = useState(false);
@@ -50,12 +50,19 @@ export function RequestAccountDeletionScreen({
   };
 
   return (
-    <div className="w-full max-w-sm mx-auto rounded-lg border bg-card text-card-foreground shadow-sm">
-      <div className="flex flex-col space-y-1.5 p-6 pb-4">
-        <h1 className="text-xl font-semibold tracking-tight">
-          {title ?? t("userDataRights.deletion.request.title")}
-        </h1>
-      </div>
+    <Card
+      className="w-full max-w-sm mx-auto"
+      options={{ padded: false }}
+      slots={{
+        header: (
+          <div className="flex flex-col space-y-1.5 p-6 pb-4">
+            <h1 className="text-xl font-semibold tracking-tight">
+              {title ?? t("userDataRights.deletion.request.title")}
+            </h1>
+          </div>
+        ),
+      }}
+    >
       {done ? (
         <div className="p-6 pt-0">
           <Banner variant="info">
@@ -91,6 +98,6 @@ export function RequestAccountDeletionScreen({
           </Form>
         </div>
       )}
-    </div>
+    </Card>
   );
 }

package/src/user-profile/web/profile-screen.tsx

@@ -243,7 +243,7 @@ function DangerZoneSection({
   readonly onChanged: () => void;
 }): ReactNode {
   const t = useTranslation();
-  const { Button, Banner, Dialog, Heading } = usePrimitives();
+  const { Button, Banner, Dialog, Card } = usePrimitives();
   const dispatcher = useDispatcher();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
@@ -270,52 +270,54 @@ function DangerZoneSection({
     onChanged();
   };
 
+  const footer = deletionRequested ? (
+    <Button
+      variant="secondary"
+      onClick={() => void cancelDeletion()}
+      testId="profile-danger-cancel"
+    >
+      {t("profile.danger.cancelDeletion")}
+    </Button>
+  ) : (
+    <Button variant="danger" onClick={() => setDialogOpen(true)} testId="profile-danger-delete">
+      {t("profile.danger.delete")}
+    </Button>
+  );
+
   return (
-    <section
-      data-testid="profile-danger"
-      className="flex flex-col gap-4 rounded-lg border border-destructive/40 bg-card p-6"
+    <Card
+      testId="profile-danger"
+      className="border-destructive/40"
+      slots={{ title: t("profile.danger.title"), footer }}
     >
-      <Heading variant="section">{t("profile.danger.title")}</Heading>
-      {deletionRequested ? (
-        <>
-          <Banner variant="error" testId="profile-danger-requested">
-            {t("profile.danger.requested", {
-              date: formatDeletionDate(me.gracePeriodEnd),
-            })}
-          </Banner>
-          <StatusBanner status={status} />
-          <Button
-            variant="secondary"
-            onClick={() => void cancelDeletion()}
-            testId="profile-danger-cancel"
-          >
-            {t("profile.danger.cancelDeletion")}
-          </Button>
-        </>
-      ) : (
-        <>
-          <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
-          <StatusBanner status={status} />
-          <Button
-            variant="danger"
-            onClick={() => setDialogOpen(true)}
-            testId="profile-danger-delete"
-          >
-            {t("profile.danger.delete")}
-          </Button>
-          <Dialog
-            open={dialogOpen}
-            onOpenChange={setDialogOpen}
-            title={t("profile.danger.dialogTitle")}
-            description={t("profile.danger.dialogDescription")}
-            variant="danger"
-            confirmLabel={t("profile.danger.delete")}
-            onConfirm={requestDeletion}
-            testId="profile-danger-dialog"
-          />
-        </>
-      )}
-    </section>
+      <div className="flex flex-col gap-4">
+        {deletionRequested ? (
+          <>
+            <Banner variant="error" testId="profile-danger-requested">
+              {t("profile.danger.requested", {
+                date: formatDeletionDate(me.gracePeriodEnd),
+              })}
+            </Banner>
+            <StatusBanner status={status} />
+          </>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
+            <StatusBanner status={status} />
+            <Dialog
+              open={dialogOpen}
+              onOpenChange={setDialogOpen}
+              title={t("profile.danger.dialogTitle")}
+              description={t("profile.danger.dialogDescription")}
+              variant="danger"
+              confirmLabel={t("profile.danger.delete")}
+              onConfirm={requestDeletion}
+              testId="profile-danger-dialog"
+            />
+          </>
+        )}
+      </div>
+    </Card>
   );
 }