From b5c05b5f20cc8e39b8ac69632c996e46eb4a07ca Mon Sep 17 00:00:00 2001
From: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>
Date: Thu, 15 Oct 2026 15:49:24 -0400
Subject: [PATCH] refactor(console): restyle the first-run wizard and
 credential request

The first-run wizard (token, CA and admin steps) and the "Make a
credential request" page move onto the @cryptos-pki/ui kit: Field and
Input for every form control, Notice for the fingerprint warnings and
errors, FingerprintConfirm for the CA reconfirm step, CopyBlock and
KeyBackupStep for the in-browser key flows, and Stepper for the
wizard's progress strip. Routes, API calls and refusal wording are
unchanged.

These were also the last importers of the local components/ui/button
and components/ui/input, the local copy-block and key-backup-step.
diagnostics-copy (shown on every sign-in gate) picks up the kit's
Button too, which was its only remaining local import. With nothing
left importing them, components/ui/, copy-block.tsx and
key-backup-step.tsx (plus their tests) are removed, closing out #137's
design review.

Each rebuilt page gets an axe check of its initial state alongside the
existing behavioural tests, which stay green unchanged.

Refs CryptOS-PKI/cryptos-web#187
Refs CryptOS-PKI/cryptos-web#157

Signed-off-by: Bugs5382 <12115015+Bugs5382@users.noreply.github.com>
---
 AGENTS.md                                     |   3 +-
 apps/console/src/components/copy-block.tsx    |  66 ------
 .../src/components/first-run/admin-step.tsx   | 203 ++++++++++++------
 .../src/components/first-run/ca-step.tsx      |  62 +++---
 .../first-run/first-run-wizard.test.tsx       |  24 +++
 .../components/first-run/first-run-wizard.tsx |  18 +-
 .../src/components/first-run/token-step.tsx   |  46 ++--
 .../src/components/key-backup-step.test.tsx   |  88 --------
 .../src/components/key-backup-step.tsx        | 170 ---------------
 .../components/layout/diagnostics-copy.tsx    |   2 +-
 apps/console/src/components/ui/button.tsx     |  65 ------
 apps/console/src/components/ui/input.test.tsx |  29 ---
 apps/console/src/components/ui/input.tsx      |  39 ----
 apps/console/src/lib/form.ts                  |   5 +-
 .../src/pages/credential-request.test.tsx     |   6 +
 apps/console/src/pages/credential-request.tsx | 170 ++++++++++-----
 16 files changed, 340 insertions(+), 656 deletions(-)
 delete mode 100644 apps/console/src/components/copy-block.tsx
 delete mode 100644 apps/console/src/components/key-backup-step.test.tsx
 delete mode 100644 apps/console/src/components/key-backup-step.tsx
 delete mode 100644 apps/console/src/components/ui/button.tsx
 delete mode 100644 apps/console/src/components/ui/input.test.tsx
 delete mode 100644 apps/console/src/components/ui/input.tsx

diff --git a/AGENTS.md b/AGENTS.md
index b556bd1..0c73bae 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -32,7 +32,8 @@ components, named exports from `src/index.ts`) and
   The "Make a credential request" page `/request-credential` is outside the gate too, and makes
   no network calls at all: it must not import the Fleet Manager client.
 - `src/components/layout/` - app shell: header, sidebar nav, wordmark, theme toggle, auth gate.
-- `src/components/ui/` - shadcn/ui primitives (button, card, badge, separator).
+  There is no local `src/components/ui/`: every primitive comes from `@cryptos-pki/ui`, and
+  `src/components/` holds only app-specific parts (wizards, dialogs, the topology graph).
 - `src/context/` - `theme.tsx` (dark/light, persisted) and `auth.tsx` (browser-mTLS gate stub).
 - `src/lib/` - `mock.ts` (the typed Node model), `mock-fixtures.real.ts`/`mock-fixtures.stub.ts`
   (the fixture data every mock store's `seed()` copies from, swapped by `vite.config.ts` at build
diff --git a/apps/console/src/components/copy-block.tsx b/apps/console/src/components/copy-block.tsx
deleted file mode 100644
index 412c316..0000000
--- a/apps/console/src/components/copy-block.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Button } from "@/components/ui/button";
-import { downloadText } from "@/lib/download";
-
-// CopyBlock shows generated text (a CSR, an OpenSSL section, a command) with a
-// copy button and, when a filename is given, a download button.
-export const CopyBlock = ({
-  filename,
-  label,
-  text,
-}: {
-  filename?: string;
-  label: string;
-  text: string;
-}) => (
-  <div className="space-y-1">
-    <div className="flex items-center justify-between gap-2">
-      <span className="font-mono text-[11px] uppercase tracking-wider text-muted-foreground">
-        {label}
-      </span>
-      <div className="flex gap-2">
-        <Button
-          aria-label={`Copy ${label}`}
-          onClick={() => void navigator.clipboard?.writeText(text)}
-          size="sm"
-          type="button"
-          variant="outline"
-        >
-          Copy
-        </Button>
-        {filename ? (
-          <Button
-            aria-label={`Download ${label}`}
-            onClick={() => downloadText(filename, text)}
-            size="sm"
-            type="button"
-            variant="outline"
-          >
-            Download
-          </Button>
-        ) : null}
-      </div>
-    </div>
-    <pre
-      aria-label={label}
-      className="max-h-48 overflow-auto whitespace-pre-wrap break-all rounded-md border bg-secondary/40 p-2 font-mono text-[11px]"
-    >
-      {text}
-    </pre>
-  </div>
-);
diff --git a/apps/console/src/components/first-run/admin-step.tsx b/apps/console/src/components/first-run/admin-step.tsx
index 76c0101..e11d330 100644
--- a/apps/console/src/components/first-run/admin-step.tsx
+++ b/apps/console/src/components/first-run/admin-step.tsx
@@ -14,31 +14,83 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Button } from "@cryptos-pki/ui";
-import { useState } from "react";
+import {
+  Button,
+  CopyBlock,
+  Field,
+  Input,
+  inputClasses,
+  KeyBackupStep,
+  Notice,
+} from "@cryptos-pki/ui";
+import { useEffect, useState } from "react";
 
-import { CopyBlock } from "@/components/copy-block";
-import { KeyBackupStep } from "@/components/key-backup-step";
 import { type FirstAdminResult, submitFirstAdminCertificate } from "@/lib/bootstrap";
 import {
   buildCredentialPkcs12,
+  generateBackupPassphrase,
+  keyBackupFilename,
+  keyBackupPem,
   keyMatchesCertificate,
   readCertificateDer,
   readKeyBackup,
 } from "@/lib/crypto/key-backup";
-import { downloadBytes, readFileBytes } from "@/lib/download";
+import { generateLeafKeyAndCSR } from "@/lib/crypto/leaf-key";
+import { downloadBytes, downloadText, readFileBytes } from "@/lib/download";
 import { fleetErrorMessage } from "@/lib/fleet/error-copy";
-import { fieldClass, labelClass, looksLikeEmail } from "@/lib/form";
+import { looksLikeEmail } from "@/lib/form";
 import { credentialFileBase, csrToPem, levelOpensslCommand } from "@/lib/operators";
 
+const legendClass = "font-mono text-[10.5px] uppercase tracking-[0.08em] text-muted-foreground";
+
 const SessionCaution = () => (
-  <p className="rounded-md border border-warning/40 bg-warning/10 p-3 text-xs text-muted-foreground">
+  <Notice tone="warning">
     The first-run session ends after 15 minutes without a call. If it ends while you are at the CA,
     start again with the newest token from the log, confirm the CA&apos;s fingerprint again, and
     continue from your key backup.
-  </p>
+  </Notice>
 );
 
+interface MadeAdminKey {
+  backupPem: string;
+  csrDer: Uint8Array;
+  passphrase: string;
+}
+
+// useMadeAdminKey makes a P-384 admin key and CSR in the browser once PathA
+// reaches the backup step (the same pattern CredentialRequestWizard uses for
+// its own in-browser key), then makes the encrypted key backup.
+const useMadeAdminKey = (active: boolean, email: string) => {
+  const [made, setMade] = useState<MadeAdminKey | null>(null);
+  const [error, setError] = useState<null | string>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { csrDer, privateKey } = await generateLeafKeyAndCSR({
+          extensionRequest: { level: "admin" },
+          sans: [],
+          subjectCn: email,
+        });
+        const passphrase = generateBackupPassphrase();
+        const backupPem = await keyBackupPem(privateKey, passphrase);
+        if (!cancelled) setMade({ backupPem, csrDer, passphrase });
+      } catch (error_: unknown) {
+        if (!cancelled)
+          setError(error_ instanceof Error ? error_.message : "Key generation failed");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- runs once per activation of the step
+  }, [active]);
+
+  return { error, made };
+};
+
 const certFrom = (text: string): Uint8Array =>
   readCertificateDer(new TextEncoder().encode(text.trim()));
 
@@ -69,6 +121,7 @@ const PathA = ({
 
   const cleanEmail = email.trim().toLowerCase();
   const detailsReady = fullName.trim() !== "" && looksLikeEmail(email);
+  const { error: keyError, made } = useMadeAdminKey(mode === "make" && !csrDer, cleanEmail);
 
   const record = async () => {
     setPending(true);
@@ -116,24 +169,17 @@ const PathA = ({
   if (mode === "details") {
     return (
       <div className="space-y-3">
-        <label className="block space-y-1">
-          <span className={labelClass}>Full name</span>
-          <input
-            className={fieldClass}
-            onChange={(e) => setFullName(e.target.value)}
-            value={fullName}
-          />
-        </label>
-        <label className="block space-y-1">
-          <span className={labelClass}>Email (the certificate&apos;s CN)</span>
-          <input
+        <Field label="Full name">
+          <Input onChange={(e) => setFullName(e.target.value)} value={fullName} />
+        </Field>
+        <Field label="Email (the certificate's CN)">
+          <Input
             autoComplete="off"
-            className={fieldClass}
             onChange={(e) => setEmail(e.target.value)}
             type="email"
             value={email}
           />
-        </label>
+        </Field>
         <div className="flex justify-end gap-2">
           <Button
             disabled={!detailsReady}
@@ -152,14 +198,44 @@ const PathA = ({
   }
 
   if (mode === "make" && !csrDer) {
+    if (keyError)
+      return (
+        <Notice role="alert" tone="danger">
+          {keyError}
+        </Notice>
+      );
+    if (!made)
+      return (
+        <p className="font-mono text-xs text-muted-foreground" role="status">
+          Making a P-384 key and CSR in this browser&hellip;
+        </p>
+      );
     return (
       <KeyBackupStep
-        email={cleanEmail}
-        level="admin"
-        onBackedUp={(key) => {
-          setBackup(key.backup);
-          setCsrDer(key.csrDer);
+        filename={keyBackupFilename("admin", cleanEmail)}
+        onContinue={() => {
+          setBackup(new TextEncoder().encode(made.backupPem));
+          setCsrDer(made.csrDer);
         }}
+        onDownload={() =>
+          downloadText(
+            keyBackupFilename("admin", cleanEmail),
+            made.backupPem,
+            "application/x-pem-file",
+          )
+        }
+        passphrase={made.passphrase}
+        warning={
+          <>
+            <p className="font-semibold">Save the key backup and its passphrase</p>
+            <p>
+              The private key was made in this browser and never goes to the Fleet Manager. Download
+              the encrypted key backup and store the passphrase in a password manager. The
+              passphrase is shown only here, once; without both, the key is lost and the request has
+              to start again.
+            </p>
+          </>
+        }
       />
     );
   }
@@ -171,6 +247,7 @@ const PathA = ({
           <CopyBlock
             filename={`${credentialFileBase("admin", cleanEmail)}.csr`}
             label="CSR"
+            onDownload={downloadText}
             text={csrToPem(csrDer)}
           />
           <CopyBlock label="Admin extension section" text={adminExtfile} />
@@ -183,55 +260,51 @@ const PathA = ({
           <SessionCaution />
         </>
       ) : (
-        <label className="block space-y-1 text-xs">
-          <span className={`${labelClass} block`}>Key backup file</span>
-          <input
+        <Field label="Key backup file">
+          <Input
             accept=".pem,.key"
+            mono={false}
             onChange={(e) => {
               const chosen = e.target.files?.[0];
               if (chosen) void readFileBytes(chosen).then(setBackup);
             }}
             type="file"
           />
-        </label>
+        </Field>
       )}
-      <label className="block space-y-1">
-        <span className={labelClass}>Signed admin certificate (PEM)</span>
+      <Field label="Signed admin certificate (PEM)">
         <textarea
-          className={`${fieldClass} h-28`}
+          className={`${inputClasses} h-28`}
           onChange={(e) => setCertText(e.target.value)}
           value={certText}
         />
-      </label>
+      </Field>
       {anchorDer ? null : (
-        <label className="block space-y-1">
-          <span className={labelClass}>Operator CA certificate for the chain (optional)</span>
+        <Field label="Operator CA certificate for the chain (optional)">
           <textarea
-            className={`${fieldClass} h-20`}
+            className={`${inputClasses} h-20`}
             onChange={(e) => setChainText(e.target.value)}
             value={chainText}
           />
-        </label>
+        </Field>
       )}
-      <label className="block space-y-1">
-        <span className={labelClass}>Key backup passphrase</span>
-        <input
+      <Field label="Key backup passphrase">
+        <Input
           autoComplete="off"
-          className={fieldClass}
           onChange={(e) => setPassphrase(e.target.value)}
           type="password"
           value={passphrase}
         />
-      </label>
+      </Field>
       {result?.warnings.map((w) => (
-        <p className="font-mono text-xs text-warning" key={w}>
+        <Notice key={w} tone="warning">
           {w}
-        </p>
+        </Notice>
       ))}
       {error ? (
-        <p className="font-mono text-xs text-destructive" role="alert">
+        <Notice role="alert" tone="danger">
           {error}
-        </p>
+        </Notice>
       ) : null}
       <div className="flex justify-end">
         <Button
@@ -284,15 +357,9 @@ const PathB = ({ adminExtfile, onDone }: { adminExtfile: string; onDone: () => v
 
   return (
     <div className="space-y-3">
-      <label className="block space-y-1">
-        <span className={labelClass}>Email (the certificate&apos;s CN)</span>
-        <input
-          className={fieldClass}
-          onChange={(e) => setEmail(e.target.value)}
-          type="email"
-          value={email}
-        />
-      </label>
+      <Field label="Email (the certificate's CN)">
+        <Input onChange={(e) => setEmail(e.target.value)} type="email" value={email} />
+      </Field>
       <CopyBlock label="Admin extension section" text={adminExtfile} />
       <CopyBlock label="OpenSSL commands" text={pathBRecipe(cleanEmail)} />
       <p className="text-xs text-muted-foreground">
@@ -305,26 +372,20 @@ const PathB = ({ adminExtfile, onDone }: { adminExtfile: string; onDone: () => v
           Paste the signed certificate to have the Fleet Manager check it now. Only the certificate
           is sent.
         </p>
-        <label className="block space-y-1">
-          <span className={labelClass}>Full name</span>
-          <input
-            className={fieldClass}
-            onChange={(e) => setFullName(e.target.value)}
-            value={fullName}
-          />
-        </label>
-        <label className="block space-y-1">
-          <span className={labelClass}>Signed admin certificate (PEM)</span>
+        <Field label="Full name">
+          <Input onChange={(e) => setFullName(e.target.value)} value={fullName} />
+        </Field>
+        <Field label="Signed admin certificate (PEM)">
           <textarea
-            className={`${fieldClass} h-24`}
+            className={`${inputClasses} h-24`}
             onChange={(e) => setCertText(e.target.value)}
             value={certText}
           />
-        </label>
+        </Field>
         {error ? (
-          <p className="font-mono text-xs text-destructive" role="alert">
+          <Notice role="alert" tone="danger">
             {error}
-          </p>
+          </Notice>
         ) : null}
         {result ? (
           <p className="text-xs" role="status">
@@ -365,7 +426,7 @@ export const AdminStep = ({
   return (
     <div className="space-y-4">
       <fieldset className="space-y-2">
-        <legend className={labelClass}>How to make the certificate</legend>
+        <legend className={legendClass}>How to make the certificate</legend>
         <label className="flex items-start gap-2 text-sm">
           <input
             checked={path === "a"}
diff --git a/apps/console/src/components/first-run/ca-step.tsx b/apps/console/src/components/first-run/ca-step.tsx
index 93c3c4e..0583314 100644
--- a/apps/console/src/components/first-run/ca-step.tsx
+++ b/apps/console/src/components/first-run/ca-step.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Button } from "@cryptos-pki/ui";
+import { Button, FingerprintConfirm, Notice } from "@cryptos-pki/ui";
 import { useEffect, useState } from "react";
 
 import type { RegisterForm, RegisterResult } from "@/lib/operator-cas";
@@ -22,9 +22,7 @@ import type { RegisterForm, RegisterResult } from "@/lib/operator-cas";
 import { OperatorCARegisterForm } from "@/components/operator-ca-register-form";
 import { registerOperatorCABootstrap } from "@/lib/bootstrap";
 import { readCertificateDer } from "@/lib/crypto/key-backup";
-import { colonFingerprint, normalizeFingerprint } from "@/lib/fingerprint";
 import { fleetErrorMessage } from "@/lib/fleet/error-copy";
-import { fieldClass, labelClass } from "@/lib/form";
 
 const EMPTY_FORM: RegisterForm = {
   caCertDer: new Uint8Array(),
@@ -57,7 +55,7 @@ export const CaStep = ({
     inProgress ? null : "none",
   );
   const [replace, setReplace] = useState(false);
-  const [pasted, setPasted] = useState("");
+  const [matches, setMatches] = useState(false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<null | string>(null);
 
@@ -86,7 +84,6 @@ export const CaStep = ({
 
   if (current !== "none" && !replace) {
     const ca = current.operatorCa;
-    const matches = normalizeFingerprint(pasted) === ca.sha256;
     const reconfirm = async () => {
       setPending(true);
       setError(null);
@@ -104,42 +101,37 @@ export const CaStep = ({
     };
     return (
       <div className="space-y-3">
-        <p className="text-sm">
-          An operator CA is already registered: <span className="font-mono">{ca.subject}</span>.
-          Confirm it is yours before you continue.
-        </p>
-        <code className="block break-all rounded-md border bg-secondary/40 p-2 font-mono text-xs">
-          {colonFingerprint(ca.sha256)}
-        </code>
-        <p className="text-xs text-muted-foreground">
-          On the CA machine, run{" "}
+        <FingerprintConfirm
+          actions={
+            <>
+              <Button onClick={() => setReplace(true)} size="sm" variant="outline">
+                Register a different CA
+              </Button>
+              <Button disabled={!matches || pending} onClick={() => void reconfirm()} size="sm">
+                Confirm this CA
+              </Button>
+            </>
+          }
+          compare
+          fingerprint={ca.sha256}
+          fingerprintLabel="sha256"
+          onCompare={setMatches}
+          subject={[["subject", ca.subject]]}
+          title="An operator CA is already registered"
+          tone="warning"
+        >
+          Confirm it is yours before you continue. On the CA machine, run{" "}
           <code className="font-mono">
             openssl x509 -in operator-ca.crt -noout -fingerprint -sha256
           </code>{" "}
-          and paste the output. If it doesn&apos;t match, register your own CA: that retires this
-          one immediately.
-        </p>
-        <label className="block space-y-1">
-          <span className={labelClass}>Paste the fingerprint from the CA machine</span>
-          <input
-            className={fieldClass}
-            onChange={(e) => setPasted(e.target.value)}
-            value={pasted}
-          />
-        </label>
+          and paste the output below. If it doesn&apos;t match, register your own CA: that retires
+          this one immediately.
+        </FingerprintConfirm>
         {error ? (
-          <p className="font-mono text-xs text-destructive" role="alert">
+          <Notice role="alert" tone="danger">
             {error}
-          </p>
+          </Notice>
         ) : null}
-        <div className="flex justify-end gap-2">
-          <Button onClick={() => setReplace(true)} size="sm" variant="outline">
-            Register a different CA
-          </Button>
-          <Button disabled={!matches || pending} onClick={() => void reconfirm()} size="sm">
-            Confirm this CA
-          </Button>
-        </div>
       </div>
     );
   }
diff --git a/apps/console/src/components/first-run/first-run-wizard.test.tsx b/apps/console/src/components/first-run/first-run-wizard.test.tsx
index 68d8344..c1ca7cb 100644
--- a/apps/console/src/components/first-run/first-run-wizard.test.tsx
+++ b/apps/console/src/components/first-run/first-run-wizard.test.tsx
@@ -29,6 +29,7 @@ import { __resetBootstrap } from "@/lib/bootstrap";
 import { base64 } from "@/lib/crypto/leaf-key";
 import { colonFingerprint } from "@/lib/fingerprint";
 import * as modeMod from "@/lib/fleet/mode";
+import { expectNoA11yViolations } from "@/test/axe";
 
 const { buildCredentialPkcs12, downloadBytes, downloadText } = vi.hoisted(() => ({
   buildCredentialPkcs12: vi.fn(),
@@ -157,6 +158,13 @@ afterEach(() => {
 });
 
 describe("FirstRunWizard token step", () => {
+  it("has no axe violations", async () => {
+    const { container } = render(
+      <FirstRunWizard inProgress={false} tokenExpiresAt="2026-09-30T13:00:00Z" />,
+    );
+    await expectNoA11yViolations(container);
+  });
+
   it("leads with the fingerprint check and shows where the token is on each OS", () => {
     render(<FirstRunWizard inProgress={false} tokenExpiresAt="2026-09-30T13:00:00Z" />);
     const danger = screen.getAllByRole("note")[0];
@@ -194,6 +202,22 @@ describe("FirstRunWizard (mock mode)", () => {
     vi.spyOn(modeMod, "fleetMode").mockReturnValue("mock");
   });
 
+  it("has no axe violations once the admin key backup step is showing", async () => {
+    const ca = await makeCA();
+    const { container } = render(<FirstRunWizard inProgress={false} tokenExpiresAt="" />);
+    await startSession();
+    await registerCA(ca);
+    fill(/full name/i, "Ada Admin");
+    fill(/^email/i, EMAIL);
+    fireEvent.click(screen.getByRole("button", { name: /make my admin key/i }));
+    await screen.findByLabelText(
+      /key backup passphrase/i,
+      { selector: "code" },
+      { timeout: 10_000 },
+    );
+    await expectNoA11yViolations(container);
+  }, 30_000);
+
   it("path A: token, CA with fingerprint confirm, key backup before the CSR, upload, PKCS#12, install", async () => {
     const generated = captureKeys();
     const ca = await makeCA();
diff --git a/apps/console/src/components/first-run/first-run-wizard.tsx b/apps/console/src/components/first-run/first-run-wizard.tsx
index 71bd013..48054d4 100644
--- a/apps/console/src/components/first-run/first-run-wizard.tsx
+++ b/apps/console/src/components/first-run/first-run-wizard.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Button, Wordmark } from "@cryptos-pki/ui";
+import { Button, Stepper, Wordmark } from "@cryptos-pki/ui";
 import { useState } from "react";
 
 import { AdminStep } from "@/components/first-run/admin-step";
@@ -81,17 +81,11 @@ export const FirstRunWizard = ({
           No operator can sign in yet. Register your operator CA and get the first admin
           certificate.
         </p>
-        <ol className="flex gap-3 font-mono text-[11px] uppercase tracking-wider">
-          {STEPS.map((s) => (
-            <li
-              aria-current={s.id === step ? "step" : undefined}
-              className={s.id === step ? "text-primary" : "text-muted-foreground"}
-              key={s.id}
-            >
-              {s.label}
-            </li>
-          ))}
-        </ol>
+        <Stepper
+          current={STEPS.findIndex((s) => s.id === step)}
+          label="First-run progress"
+          steps={STEPS}
+        />
       </div>
 
       <section className="space-y-3 rounded-xl border bg-card p-5">
diff --git a/apps/console/src/components/first-run/token-step.tsx b/apps/console/src/components/first-run/token-step.tsx
index e6c6dd2..2b91ad1 100644
--- a/apps/console/src/components/first-run/token-step.tsx
+++ b/apps/console/src/components/first-run/token-step.tsx
@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Button } from "@cryptos-pki/ui";
+import { Button, Field, Input, Notice } from "@cryptos-pki/ui";
 import { useState } from "react";
 
 import { startBootstrapSession } from "@/lib/bootstrap";
 import { fleetErrorMessage } from "@/lib/fleet/error-copy";
-import { fieldClass, labelClass } from "@/lib/form";
+
+const legendClass = "font-mono text-[10.5px] uppercase tracking-[0.08em] text-muted-foreground";
 
 const Command = ({ children }: { children: string }) => (
   <code className="block break-all rounded-md border bg-secondary/40 px-2 py-1 font-mono text-[11px]">
@@ -60,27 +61,20 @@ export const TokenStep = ({
 
   return (
     <div className="space-y-4">
-      <div
-        className="space-y-1 rounded-md border border-destructive/40 bg-destructive/5 p-3"
-        role="note"
-      >
-        <p className="text-sm font-semibold text-foreground">Check the fingerprint first</p>
-        <p className="text-xs text-muted-foreground">
-          This Fleet Manager serves a self-signed certificate until you give it one. Before you type
-          the token, open the certificate details from the browser&apos;s address bar and compare
-          its SHA-256 fingerprint with the{" "}
-          <code className="font-mono">server certificate SHA-256</code> line in the Fleet
-          Manager&apos;s log. If they differ, stop: someone may be intercepting the connection, and
-          the token would be theirs.
-        </p>
-      </div>
+      <Notice role="note" title="Check the fingerprint first" tone="danger">
+        This Fleet Manager serves a self-signed certificate until you give it one. Before you type
+        the token, open the certificate details from the browser&apos;s address bar and compare its
+        SHA-256 fingerprint with the <code className="font-mono">server certificate SHA-256</code>{" "}
+        line in the Fleet Manager&apos;s log. If they differ, stop: someone may be intercepting the
+        connection, and the token would be theirs.
+      </Notice>
 
       {inProgress ? (
-        <p className="rounded-md border border-warning/40 bg-warning/10 p-3 text-xs text-muted-foreground">
+        <Notice tone="warning">
           First run was already started. If that wasn&apos;t you, continue with the newest token
           from the log. That ends the earlier session, and replacing the registered CA retires
           anything it trusted.
-        </p>
+        </Notice>
       ) : null}
 
       <div className="space-y-1 rounded-md border p-3">
@@ -98,10 +92,10 @@ export const TokenStep = ({
           The Fleet Manager prints a single-use token in its log at start, and a new one each time
           one is used or expires. Take the newest.
         </p>
-        <p className={labelClass}>Linux / macOS</p>
+        <p className={legendClass}>Linux / macOS</p>
         <Command>{"docker logs <container> 2>&1 | grep 'bootstrap token'"}</Command>
         <Command>{"journalctl -u fleet-manager | grep 'bootstrap token'"}</Command>
-        <p className={labelClass}>Windows (PowerShell)</p>
+        <p className={legendClass}>Windows (PowerShell)</p>
         <Command>{"docker logs <container> 2>&1 | Select-String 'bootstrap token'"}</Command>
         {tokenExpiresAt ? (
           <p className="text-xs text-muted-foreground">
@@ -110,21 +104,19 @@ export const TokenStep = ({
         ) : null}
       </div>
 
-      <label className="block space-y-1">
-        <span className={labelClass}>Bootstrap token</span>
-        <input
+      <Field label="Bootstrap token">
+        <Input
           autoComplete="off"
-          className={fieldClass}
           onChange={(e) => setToken(e.target.value)}
           placeholder="fos_boot_..."
           spellCheck={false}
           value={token}
         />
-      </label>
+      </Field>
       {error ? (
-        <p className="font-mono text-xs text-destructive" role="alert">
+        <Notice role="alert" tone="danger">
           {error}
-        </p>
+        </Notice>
       ) : null}
       <div className="flex justify-end">
         <Button disabled={token.trim() === "" || pending} onClick={() => void start()} size="sm">
diff --git a/apps/console/src/components/key-backup-step.test.tsx b/apps/console/src/components/key-backup-step.test.tsx
deleted file mode 100644
index a6fca59..0000000
--- a/apps/console/src/components/key-backup-step.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import { KeyBackupStep } from "@/components/key-backup-step";
-
-const downloadText = vi.fn();
-vi.mock("@/lib/download", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@/lib/download")>()),
-  downloadText: (...a: unknown[]) => downloadText(...a),
-}));
-
-const passphraseShown = async (): Promise<string> => {
-  const el = await screen.findByLabelText(/key backup passphrase/i, {}, { timeout: 10_000 });
-  return el.textContent ?? "";
-};
-
-describe("KeyBackupStep", () => {
-  beforeEach(() => downloadText.mockReset());
-
-  it("won't continue until the key backup is downloaded", async () => {
-    const onBackedUp = vi.fn();
-    render(<KeyBackupStep email="alice@example.org" level="admin" onBackedUp={onBackedUp} />);
-    const passphrase = await passphraseShown();
-    expect(passphrase).toHaveLength(24);
-
-    const next = screen.getByRole("button", { name: /continue/i });
-    expect(next).toBeDisabled();
-    fireEvent.click(screen.getByLabelText(/saved the passphrase/i));
-    expect(next).toBeDisabled();
-
-    fireEvent.click(screen.getByRole("button", { name: /download key backup/i }));
-    expect(downloadText).toHaveBeenCalledWith(
-      "fleetos-admin-alice@example.org.key.pem",
-      expect.stringMatching(/^-----BEGIN ENCRYPTED PRIVATE KEY-----/),
-      "application/x-pem-file",
-    );
-    expect(next).toBeEnabled();
-
-    fireEvent.click(next);
-    await waitFor(() => expect(onBackedUp).toHaveBeenCalledTimes(1));
-    const [{ backup, csrDer }] = onBackedUp.mock.calls[0] as [
-      { backup: Uint8Array; csrDer: Uint8Array },
-    ];
-    expect(new TextDecoder().decode(backup)).toBe(downloadText.mock.calls[0][1]);
-    expect(csrDer[0]).toBe(0x30);
-  }, 20_000);
-
-  it("shows the passphrase once: a remount makes a new key and never shows the old one", async () => {
-    const first = render(
-      <KeyBackupStep email="alice@example.org" level="operator" onBackedUp={vi.fn()} />,
-    );
-    const old = await passphraseShown();
-    first.unmount();
-    expect(screen.queryByText(old)).not.toBeInTheDocument();
-
-    render(<KeyBackupStep email="alice@example.org" level="operator" onBackedUp={vi.fn()} />);
-    const fresh = await passphraseShown();
-    expect(fresh).not.toBe(old);
-    expect(screen.queryByText(old)).not.toBeInTheDocument();
-  }, 20_000);
-
-  it("keeps the passphrase out of storage", async () => {
-    render(<KeyBackupStep email="alice@example.org" level="viewer" onBackedUp={vi.fn()} />);
-    const passphrase = await passphraseShown();
-    const stored = [
-      ...Object.values(localStorage),
-      ...Object.values(sessionStorage),
-      document.cookie,
-    ].join("\n");
-    expect(stored).not.toContain(passphrase);
-  }, 20_000);
-});
diff --git a/apps/console/src/components/key-backup-step.tsx b/apps/console/src/components/key-backup-step.tsx
deleted file mode 100644
index 2d251b4..0000000
--- a/apps/console/src/components/key-backup-step.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useEffect, useState } from "react";
-
-import type { OperatorLevel } from "@/lib/operators";
-
-import { Button } from "@/components/ui/button";
-import { generateBackupPassphrase, keyBackupFilename, keyBackupPem } from "@/lib/crypto/key-backup";
-import { generateLeafKeyAndCSR } from "@/lib/crypto/leaf-key";
-import { downloadText } from "@/lib/download";
-
-export interface BackedUpKey {
-  // backup is the encrypted key backup file, exactly as downloaded.
-  backup: Uint8Array;
-  csrDer: Uint8Array;
-}
-
-interface Made {
-  backupPem: string;
-  csrDer: Uint8Array;
-  passphrase: string;
-}
-
-// KeyBackupStep makes a P-384 key and a CSR (CN=<email>, asking for the level's
-// profile) in the browser, then makes the operator save an encrypted key
-// backup before anything else happens. The passphrase is generated here and
-// shown only while this step is mounted; nothing stores it. The private key
-// itself is dropped once the backup is written: later steps open the backup.
-export const KeyBackupStep = ({
-  email,
-  level,
-  onBackedUp,
-}: {
-  email: string;
-  level: OperatorLevel;
-  onBackedUp: (key: BackedUpKey) => void;
-}) => {
-  const [made, setMade] = useState<Made | null>(null);
-  const [error, setError] = useState<null | string>(null);
-  const [downloaded, setDownloaded] = useState(false);
-  const [saved, setSaved] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const { csrDer, privateKey } = await generateLeafKeyAndCSR({
-          extensionRequest: { level },
-          sans: [],
-          subjectCn: email,
-        });
-        const passphrase = generateBackupPassphrase();
-        const backupPem = await keyBackupPem(privateKey, passphrase);
-        if (!cancelled) setMade({ backupPem, csrDer, passphrase });
-      } catch (error_: unknown) {
-        if (!cancelled)
-          setError(error_ instanceof Error ? error_.message : "Key generation failed");
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [email, level]);
-
-  if (error) {
-    return (
-      <p className="font-mono text-xs text-destructive" role="alert">
-        {error}
-      </p>
-    );
-  }
-
-  if (!made) {
-    return (
-      <p className="font-mono text-xs text-muted-foreground" role="status">
-        Making a P-384 key and CSR in this browser&hellip;
-      </p>
-    );
-  }
-
-  const filename = keyBackupFilename(level, email);
-
-  return (
-    <div className="space-y-3">
-      <div
-        className="space-y-1 rounded-md border border-destructive/40 bg-destructive/5 p-3"
-        role="note"
-      >
-        <p className="text-xs font-semibold text-foreground">
-          Save the key backup and its passphrase
-        </p>
-        <p className="text-xs text-muted-foreground">
-          The private key was made in this browser and never goes to the Fleet Manager. Download the
-          encrypted key backup and store the passphrase in a password manager. The passphrase is
-          shown only here, once; the same passphrase will protect the PKCS#12. Without both, the key
-          is lost and the request has to start again.
-        </p>
-      </div>
-
-      <div className="space-y-1">
-        <span className="font-mono text-[11px] uppercase tracking-wider text-muted-foreground">
-          Passphrase
-        </span>
-        <div className="flex items-center gap-2">
-          <code
-            aria-label="Key backup passphrase"
-            className="flex-1 select-all break-all rounded-md border bg-secondary/40 px-3 py-2 font-mono text-sm"
-          >
-            {made.passphrase}
-          </code>
-          <Button
-            onClick={() => void navigator.clipboard?.writeText(made.passphrase)}
-            size="sm"
-            type="button"
-            variant="outline"
-          >
-            Copy
-          </Button>
-        </div>
-      </div>
-
-      <div className="flex flex-wrap items-center gap-3">
-        <Button
-          onClick={() => {
-            downloadText(filename, made.backupPem, "application/x-pem-file");
-            setDownloaded(true);
-          }}
-          size="sm"
-          type="button"
-          variant="outline"
-        >
-          Download key backup
-        </Button>
-        <span className="font-mono text-[11px] text-muted-foreground">{filename}</span>
-      </div>
-
-      <label className="flex items-center gap-2 text-xs">
-        <input checked={saved} onChange={(e) => setSaved(e.target.checked)} type="checkbox" />I have
-        saved the passphrase
-      </label>
-
-      <div className="flex justify-end">
-        <Button
-          disabled={!downloaded || !saved}
-          onClick={() =>
-            onBackedUp({ backup: new TextEncoder().encode(made.backupPem), csrDer: made.csrDer })
-          }
-          size="sm"
-          type="button"
-        >
-          Continue
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/console/src/components/layout/diagnostics-copy.tsx b/apps/console/src/components/layout/diagnostics-copy.tsx
index 602b38c..b15ebff 100644
--- a/apps/console/src/components/layout/diagnostics-copy.tsx
+++ b/apps/console/src/components/layout/diagnostics-copy.tsx
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { Button } from "@cryptos-pki/ui";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 
-import { Button } from "@/components/ui/button";
 import { useOptionalAuth } from "@/context/auth";
 import { buildReport, fetchBuildInfo } from "@/lib/diagnostics";
 import { fleetMode } from "@/lib/fleet/mode";
diff --git a/apps/console/src/components/ui/button.tsx b/apps/console/src/components/ui/button.tsx
deleted file mode 100644
index de4e760..0000000
--- a/apps/console/src/components/ui/button.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-9 px-4 py-2",
-        icon: "h-9 w-9",
-        lg: "h-10 rounded-md px-8",
-        sm: "h-8 rounded-md px-3 text-xs",
-      },
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-      },
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/apps/console/src/components/ui/input.test.tsx b/apps/console/src/components/ui/input.test.tsx
deleted file mode 100644
index 7d2fa54..0000000
--- a/apps/console/src/components/ui/input.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { Input } from "./input";
-
-describe("Input", () => {
-  it("renders and forwards typed value", () => {
-    const onChange = vi.fn();
-    render(<Input onChange={onChange} placeholder="search" value="" />);
-    const el = screen.getByPlaceholderText("search");
-    fireEvent.change(el, { target: { value: "ldap" } });
-    expect(onChange).toHaveBeenCalled();
-  });
-});
diff --git a/apps/console/src/components/ui/input.tsx b/apps/console/src/components/ui/input.tsx
deleted file mode 100644
index 2205485..0000000
--- a/apps/console/src/components/ui/input.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
-Copyright The CryptOS Authors.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  // eslint-disable-next-line react/prop-types
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          "flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 font-mono text-xs shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
diff --git a/apps/console/src/lib/form.ts b/apps/console/src/lib/form.ts
index 0536929..ca0f7a7 100644
--- a/apps/console/src/lib/form.ts
+++ b/apps/console/src/lib/form.ts
@@ -14,8 +14,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Shared field styling and checks for the operator credential forms.
-export const fieldClass = "w-full rounded-md border bg-card px-3 py-2 font-mono text-sm";
-export const labelClass = "font-mono text-[11px] uppercase tracking-wider text-muted-foreground";
-
+// Shared checks for the operator credential forms.
 export const looksLikeEmail = (v: string): boolean => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
diff --git a/apps/console/src/pages/credential-request.test.tsx b/apps/console/src/pages/credential-request.test.tsx
index 7891bab..12236af 100644
--- a/apps/console/src/pages/credential-request.test.tsx
+++ b/apps/console/src/pages/credential-request.test.tsx
@@ -21,6 +21,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { generateBackupPassphrase, keyBackupPem } from "@/lib/crypto/key-backup";
 import { CredentialRequestPage } from "@/pages/credential-request";
+import { expectNoA11yViolations } from "@/test/axe";
 
 const { downloadBytes, downloadText, fleetClient } = vi.hoisted(() => ({
   downloadBytes: vi.fn(),
@@ -62,6 +63,11 @@ const expectNoNetwork = () => {
 };
 
 describe("CredentialRequestPage", () => {
+  it("has no axe violations", async () => {
+    const { container } = render(<CredentialRequestPage />);
+    await expectNoA11yViolations(container);
+  });
+
   it("makes the key, backup and CSR entirely in the browser, with no network calls", async () => {
     render(<CredentialRequestPage />);
     fill(/full name/i, "Dana Example");
diff --git a/apps/console/src/pages/credential-request.tsx b/apps/console/src/pages/credential-request.tsx
index f8c7aec..0976a7b 100644
--- a/apps/console/src/pages/credential-request.tsx
+++ b/apps/console/src/pages/credential-request.tsx
@@ -15,15 +15,29 @@ limitations under the License.
 */
 
 import "reflect-metadata";
-import { Button, Wordmark } from "@cryptos-pki/ui";
+import {
+  Button,
+  CopyBlock,
+  Field,
+  Input,
+  inputClasses,
+  KeyBackupStep,
+  Notice,
+  Wordmark,
+} from "@cryptos-pki/ui";
 import { X509Certificate } from "@peculiar/x509";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-import { CopyBlock } from "@/components/copy-block";
-import { KeyBackupStep } from "@/components/key-backup-step";
-import { buildCredentialPkcs12, readCertificateDer } from "@/lib/crypto/key-backup";
-import { downloadBytes, readFileBytes } from "@/lib/download";
-import { fieldClass, labelClass, looksLikeEmail } from "@/lib/form";
+import {
+  buildCredentialPkcs12,
+  generateBackupPassphrase,
+  keyBackupFilename,
+  keyBackupPem,
+  readCertificateDer,
+} from "@/lib/crypto/key-backup";
+import { generateLeafKeyAndCSR } from "@/lib/crypto/leaf-key";
+import { downloadBytes, downloadText, readFileBytes } from "@/lib/download";
+import { looksLikeEmail } from "@/lib/form";
 import {
   credentialFileBase,
   csrToPem,
@@ -47,6 +61,46 @@ const certIdentity = (certDer: Uint8Array): { email: string; level: string } =>
   return { email, level };
 };
 
+interface MadeRequestKey {
+  backupPem: string;
+  csrDer: Uint8Array;
+  passphrase: string;
+}
+
+// useMadeRequestKey makes the holder's P-384 key and CSR in the browser once
+// the form asks for one, the same pattern CredentialRequestWizard uses for
+// its own in-browser key, then makes the encrypted key backup.
+const useMadeRequestKey = (active: boolean, email: string, level: OperatorLevel) => {
+  const [made, setMade] = useState<MadeRequestKey | null>(null);
+  const [error, setError] = useState<null | string>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { csrDer, privateKey } = await generateLeafKeyAndCSR({
+          extensionRequest: { level },
+          sans: [],
+          subjectCn: email,
+        });
+        const passphrase = generateBackupPassphrase();
+        const backupPem = await keyBackupPem(privateKey, passphrase);
+        if (!cancelled) setMade({ backupPem, csrDer, passphrase });
+      } catch (error_: unknown) {
+        if (!cancelled)
+          setError(error_ instanceof Error ? error_.message : "Key generation failed");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- runs once per activation of the step
+  }, [active]);
+
+  return { error, made };
+};
+
 const MakeRequest = () => {
   const [fullName, setFullName] = useState("");
   const [email, setEmail] = useState("");
@@ -55,6 +109,7 @@ const MakeRequest = () => {
   const [csrPem, setCsrPem] = useState<null | string>(null);
 
   const cleanEmail = email.trim().toLowerCase();
+  const { error: keyError, made } = useMadeRequestKey(making && !csrPem, cleanEmail, level);
 
   if (csrPem) {
     return (
@@ -62,6 +117,7 @@ const MakeRequest = () => {
         <CopyBlock
           filename={`${credentialFileBase(level, cleanEmail)}.csr`}
           label="CSR"
+          onDownload={downloadText}
           text={csrPem}
         />
         <p className="text-sm text-muted-foreground">
@@ -74,39 +130,61 @@ const MakeRequest = () => {
   }
 
   if (making) {
+    if (keyError)
+      return (
+        <Notice role="alert" tone="danger">
+          {keyError}
+        </Notice>
+      );
+    if (!made)
+      return (
+        <p className="font-mono text-xs text-muted-foreground" role="status">
+          Making a P-384 key and CSR in this browser&hellip;
+        </p>
+      );
     return (
       <KeyBackupStep
-        email={cleanEmail}
-        level={level}
-        onBackedUp={({ csrDer }) => setCsrPem(csrToPem(csrDer))}
+        filename={keyBackupFilename(level, cleanEmail)}
+        onContinue={() => setCsrPem(csrToPem(made.csrDer))}
+        onDownload={() =>
+          downloadText(
+            keyBackupFilename(level, cleanEmail),
+            made.backupPem,
+            "application/x-pem-file",
+          )
+        }
+        passphrase={made.passphrase}
+        warning={
+          <>
+            <p className="font-semibold">Save the key backup and its passphrase</p>
+            <p>
+              The private key was made in this browser and never goes to the Fleet Manager. Download
+              the encrypted key backup and store the passphrase in a password manager. The
+              passphrase is shown only here, once; without both, the key is lost and you must start
+              again.
+            </p>
+          </>
+        }
       />
     );
   }
 
   return (
     <div className="space-y-3">
-      <label className="block space-y-1">
-        <span className={labelClass}>Full name</span>
-        <input
-          className={fieldClass}
-          onChange={(e) => setFullName(e.target.value)}
-          value={fullName}
-        />
-      </label>
-      <label className="block space-y-1">
-        <span className={labelClass}>Email (your certificate&apos;s CN)</span>
-        <input
+      <Field label="Full name">
+        <Input onChange={(e) => setFullName(e.target.value)} value={fullName} />
+      </Field>
+      <Field label="Email (your certificate's CN)">
+        <Input
           autoComplete="off"
-          className={fieldClass}
           onChange={(e) => setEmail(e.target.value)}
           type="email"
           value={email}
         />
-      </label>
-      <label className="block space-y-1">
-        <span className={labelClass}>Access level</span>
+      </Field>
+      <Field label="Access level">
         <select
-          className={fieldClass}
+          className={inputClasses}
           onChange={(e) => setLevel(e.target.value as OperatorLevel)}
           value={level}
         >
@@ -116,7 +194,7 @@ const MakeRequest = () => {
             </option>
           ))}
         </select>
-      </label>
+      </Field>
       <div className="flex justify-end">
         <Button
           disabled={fullName.trim() === "" || !looksLikeEmail(email)}
@@ -169,53 +247,49 @@ const BuildPkcs12 = () => {
 
   return (
     <div className="space-y-3">
-      <label className="block space-y-1 text-xs">
-        <span className={`${labelClass} block`}>Your key backup file</span>
-        <input
+      <Field label="Your key backup file">
+        <Input
           accept=".pem,.key"
+          mono={false}
           onChange={(e) => {
             const chosen = e.target.files?.[0];
             if (chosen) void readFileBytes(chosen).then(setBackup);
           }}
           type="file"
         />
-      </label>
-      <label className="block space-y-1">
-        <span className={labelClass}>Your signed certificate (PEM)</span>
+      </Field>
+      <Field label="Your signed certificate (PEM)">
         <textarea
-          className={`${fieldClass} h-28`}
+          className={`${inputClasses} h-28`}
           onChange={(e) => setCertText(e.target.value)}
           value={certText}
         />
-      </label>
-      <label className="block space-y-1">
-        <span className={labelClass}>Operator CA certificate for the chain (optional)</span>
+      </Field>
+      <Field label="Operator CA certificate for the chain (optional)">
         <textarea
-          className={`${fieldClass} h-20`}
+          className={`${inputClasses} h-20`}
           onChange={(e) => setChainText(e.target.value)}
           value={chainText}
         />
-      </label>
-      <label className="block space-y-1">
-        <span className={labelClass}>Key backup passphrase</span>
-        <input
+      </Field>
+      <Field label="Key backup passphrase">
+        <Input
           autoComplete="off"
-          className={fieldClass}
           onChange={(e) => setPassphrase(e.target.value)}
           type="password"
           value={passphrase}
         />
-      </label>
+      </Field>
       {error ? (
-        <p className="font-mono text-xs text-destructive" role="alert">
+        <Notice role="alert" tone="danger">
           {error}
-        </p>
+        </Notice>
       ) : null}
       {done ? (
-        <p className="text-xs text-muted-foreground" role="status">
+        <Notice role="status" tone="success">
           PKCS#12 downloaded as <span className="font-mono">{done}</span>. It opens with the same
           passphrase. Import it into your browser or OS certificate store.
-        </p>
+        </Notice>
       ) : null}
       <div className="flex justify-end">
         <Button