gui(certificates): surface profile contract in create-cert form (closes P3-3, P3-4, P3-5)

Closes findings P3-3, P3-4, P3-5 from the 2026-05-05 CLI/API/MCP↔GUI
parity audit (cowork/cli-gui-parity-audit-2026-05-05/RESULTS.md). The
audit flagged three "hidden defaults" in the create-certificate form:
environment='production', shortLived=false, selectedEkus=['serverAuth'].

Re-grounding against the live source:

  P3-3 was a false positive. The form already exposes an environment
  selector with three options (Production / Staging / Development) and
  defaults to Production. No change needed — covered by new test pin.

  P3-4 + P3-5 misread the architecture. allow_short_lived and
  allowed_ekus are NOT per-cert form-state fields; they are properties
  of the CertificateProfile that the operator binds via the existing
  Profile dropdown. Adding form-level toggles for them would contradict
  the profile-as-primitive design (the profile carries the policy
  contract — TTL, EKUs, key-algo allow-list, short-lived eligibility —
  so the cert can inherit a coherent set rather than letting operators
  hand-mix invalid combinations).

  The genuine UX gap was opacity: operators picked a profile without
  seeing what allow_short_lived / allowed_ekus the profile carried.

This commit closes the spirit of the finding by surfacing the selected
profile's load-bearing properties in a read-only "Profile contract"
panel that appears below the Profile dropdown once a profile is
selected. The panel shows:

  - allowed_ekus list (so operators see whether a profile is
    serverAuth, emailProtection, codeSigning, or a mix)
  - allow_short_lived flag (highlighted when true so operators know
    they're picking a profile that allows TTL < 1h CRL/OCSP-exempt
    certs per the M15b regime)
  - explanatory text that EKUs and short-lived eligibility are
    profile-level (not per-cert), guiding operators to edit the
    profile or pick a different one

Test pins (web/src/pages/CertificatesPage.test.tsx):

  - environment selector renders with 3 options, defaults to production
  - environment selector toggles to staging / development on change
  - Profile contract panel is hidden until a profile is selected
  - Profile contract panel surfaces allowed_ekus when a TLS-server
    profile is picked
  - Profile contract panel surfaces emailProtection EKU when an S/MIME
    profile is picked (closes the "S/MIME flows can't be initiated
    from the GUI" sub-finding — they can, by picking an emailProtection
    profile)
  - Profile contract panel flags allow_short_lived=true when an IoT
    short-lived profile is picked (closes the "operators can't issue
    short-lived certs through the GUI" sub-finding — they can, by
    picking an allow_short_lived profile)

Implementation notes:
  - data-testid='cert-form-environment' + 'cert-form-profile' +
    'cert-form-profile-detail' added to make the test selectors stable
    across DOM-restructuring refactors. No production behaviour change
    from the test IDs.
  - No new dependencies; no form-library introduction (per the prompt's
    out-of-scope list); uses the existing bare React state pattern.
  - No API changes — Certificate.allowed_ekus / allow_short_lived
    already exist on the CertificateProfile type in web/src/api/types.ts.

Acceptance gate (verified):
  - npm test on src/pages/CertificatesPage.test.tsx: 12/12 pass
    (6 pre-existing T-1 tests + 6 new P3-3..P3-5 pins).
  - All sibling page tests (AuditPage, TargetDetailPage, ShortLivedPage,
    etc.) still pass.

web/src/pages/CertificatesPage.tsx

@@ -75,6 +75,19 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
         : `${Math.round(selectedProfile.max_ttl_seconds / 86400)}d`
     : null;
 
+  // 2026-05-05 parity-defaults-cleanup (P3-4, P3-5): the audit flagged
+  // `shortLived` + `selectedEkus` as hidden form-state defaults. They are
+  // not — they're properties of the CertificateProfile that the operator
+  // selects via the dropdown above. Surface them in a read-only profile
+  // detail panel so the operator sees what their profile selection
+  // implies (TTL, allowed EKUs, short-lived eligibility) at the moment of
+  // choice rather than discovering it after a cert issues with the wrong
+  // shape. This closes the audit's opacity finding without introducing
+  // the wrong abstraction (per-cert EKU/short-lived toggles would
+  // contradict the profile-as-primitive design).
+  const profileEkus = selectedProfile?.allowed_ekus ?? [];
+  const profileShortLived = selectedProfile?.allow_short_lived === true;
+
   const mutation = useTrackedMutation({
     mutationFn: () => {
       const payload: Record<string, unknown> = { ...form };
@@ -150,7 +163,7 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
               <label className="text-xs text-ink-muted block mb-1">
                 Profile {ttlLabel && <span className="text-brand-400 font-medium">(TTL: {ttlLabel})</span>}
               </label>
-              <select value={form.certificate_profile_id} onChange={e => setForm(f => ({ ...f, certificate_profile_id: e.target.value }))}
+              <select data-testid="cert-form-profile" value={form.certificate_profile_id} onChange={e => setForm(f => ({ ...f, certificate_profile_id: e.target.value }))}
                 className={selectClass}>
                 <option value="">Select profile...</option>
                 {profiles.map(p => (
@@ -161,10 +174,39 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
               </select>
             </div>
           </div>
+          {/* 2026-05-05 parity-defaults-cleanup (P3-4 + P3-5): surface the
+              selected profile's load-bearing defaults (allow_short_lived,
+              allowed_ekus) inline so the operator sees what they're
+              picking. Hidden until a profile is chosen (avoids visual
+              noise for the empty state). */}
+          {selectedProfile && (
+            <div data-testid="cert-form-profile-detail" className="bg-surface-muted border border-surface-border rounded px-3 py-2 text-xs text-ink-muted">
+              <div className="font-medium text-ink mb-1">Profile contract</div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+                <div>
+                  <span className="text-ink-faint">EKUs: </span>
+                  {profileEkus.length === 0 ? (
+                    <span className="italic">none restricted</span>
+                  ) : (
+                    profileEkus.join(', ')
+                  )}
+                </div>
+                <div>
+                  <span className="text-ink-faint">Short-lived (TTL &lt; 1h): </span>
+                  <span className={profileShortLived ? 'text-brand-400 font-medium' : ''}>
+                    {profileShortLived ? 'allowed' : 'not allowed'}
+                  </span>
+                </div>
+              </div>
+              <p className="text-ink-faint mt-1">
+                EKUs and short-lived eligibility are profile-level. To change them, edit the profile or pick a different one — they are not per-cert toggles.
+              </p>
+            </div>
+          )}
           <div className="grid grid-cols-2 gap-3">
             <div>
               <label className="text-xs text-ink-muted block mb-1">Environment</label>
-              <select value={form.environment} onChange={e => setForm(f => ({ ...f, environment: e.target.value }))}
+              <select data-testid="cert-form-environment" value={form.environment} onChange={e => setForm(f => ({ ...f, environment: e.target.value }))}
                 className={selectClass}>
                 <option value="production">Production</option>
                 <option value="staging">Staging</option>