feat: add issuer catalog page with type discovery + fix cert creation defaults (M33)

Issuer Catalog (M33):
- Shared issuer type config (issuerTypes.ts) with 6 supported + 2 coming-soon types
- Composable wizard components (TypeSelector, ConfigForm, ConfigDetailModal)
- Catalog card layout with Connected/Available/Coming Soon badges
- VaultPKI and DigiCert added to create wizard with full config fields
- ACME EAB fields (eab_kid, eab_hmac with sensitive flag)
- Issuer type filter dropdown on configured issuers table
- Config detail modal replacing 60-char truncation
- IssuerDetailPage uses shared typeLabels/redactConfig, Edit button, enabled/disabled status
- StatusBadge extended with Enabled/Disabled styles
- 2 new frontend tests (VaultPKI + DigiCert create payload verification)

Bug fixes:
- CertificateService.CreateCertificate now defaults Status to Pending and Tags to
  empty map when not set (DB column DEFAULTs only apply when columns are omitted
  from INSERT, but our repo always includes all columns)
- CreateCertificate handler now logs actual error via slog.Error before returning
  generic 500, enabling root cause debugging

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/StatusBadge.tsx

@@ -23,6 +23,9 @@ const statusStyles: Record<string, string> = {
   Unmanaged:           'badge-warning',
   Managed:             'badge-success',
   Dismissed:           'badge-neutral',
+  // Issuer statuses
+  Enabled:             'badge-success',
+  Disabled:            'badge-neutral',
   // Notification statuses
   sent:                'badge-success',
   pending:             'badge-warning',

web/src/components/issuer/ConfigDetailModal.tsx

@@ -0,0 +1,56 @@
+/**
+ * Full config viewer modal with sensitive field redaction.
+ * Replaces the 60-char truncation in the issuers table.
+ * Reusable for targets in M35 — no IssuersPage-specific imports.
+ */
+import { isSensitiveKey } from '../../config/issuerTypes';
+
+interface ConfigDetailModalProps {
+  title: string;
+  config: Record<string, unknown>;
+  onClose: () => void;
+}
+
+export default function ConfigDetailModal({ title, config, onClose }: ConfigDetailModalProps) {
+  const entries = Object.entries(config);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+      <div className="bg-surface border border-surface-border rounded-lg shadow-lg max-w-lg w-full mx-4">
+        <div className="border-b border-surface-border px-6 py-4 flex justify-between items-center">
+          <h2 className="text-lg font-semibold text-ink">{title}</h2>
+          <button onClick={onClose} className="text-ink-muted hover:text-ink transition-colors">
+            ✕
+          </button>
+        </div>
+        <div className="px-6 py-4 max-h-96 overflow-y-auto">
+          {entries.length === 0 ? (
+            <div className="text-sm text-ink-faint py-4 text-center">No configuration data</div>
+          ) : (
+            <div className="space-y-0">
+              {entries.map(([key, val]) => {
+                const redacted = isSensitiveKey(key);
+                return (
+                  <div key={key} className="flex justify-between py-2 border-b border-surface-border/50">
+                    <span className="text-sm text-ink-muted">{key}</span>
+                    <span className="text-sm text-ink font-mono text-right max-w-xs break-all">
+                      {redacted ? '********' : String(val ?? '')}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        <div className="border-t border-surface-border px-6 py-4 flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 border border-surface-border rounded text-ink hover:bg-surface-hover transition-colors text-sm font-medium"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/issuer/ConfigForm.tsx

@@ -0,0 +1,139 @@
+/**
+ * Renders config fields from an IssuerTypeConfig.configFields definition.
+ * Handles sensitive field masking. M34 will reuse this directly for its
+ * dynamic config wizard. M35 can reuse it for target config forms.
+ */
+import type { ConfigField } from '../../config/issuerTypes';
+
+interface ConfigFormProps {
+  fields: ConfigField[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  /** When true, sensitive fields show as ******** with a "Change" button.
+   *  Used in edit mode — empty value means "keep existing". */
+  editMode?: boolean;
+}
+
+export default function ConfigForm({ fields, values, onChange, editMode }: ConfigFormProps) {
+  return (
+    <div className="space-y-5">
+      {fields.map((field) => (
+        <ConfigFieldInput
+          key={field.key}
+          field={field}
+          value={values[field.key]}
+          onChange={(v) => onChange(field.key, v)}
+          editMode={editMode}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ConfigFieldInput({
+  field,
+  value,
+  onChange,
+  editMode,
+}: {
+  field: ConfigField;
+  value: unknown;
+  onChange: (v: unknown) => void;
+  editMode?: boolean;
+}) {
+  const inputCls =
+    'w-full px-3 py-2 bg-surface border border-surface-border rounded text-ink placeholder-ink-faint focus:outline-none focus:border-brand-500 transition-colors';
+
+  // In edit mode, sensitive fields that haven't been touched show as masked
+  if (editMode && field.sensitive && value === undefined) {
+    return (
+      <div>
+        <FieldLabel field={field} />
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-ink-muted font-mono">********</span>
+          <button
+            type="button"
+            onClick={() => onChange('')}
+            className="text-xs text-brand-400 hover:text-brand-500"
+          >
+            Change
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (field.type === 'select') {
+    return (
+      <div>
+        <FieldLabel field={field} />
+        <select
+          value={(value as string) || ''}
+          onChange={(e) => onChange(e.target.value)}
+          className={inputCls}
+        >
+          <option value="">Select {field.label}</option>
+          {field.options?.map((opt) => (
+            <option key={opt} value={opt}>{opt}</option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <div>
+        <FieldLabel field={field} />
+        <textarea
+          value={(value as string) || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder}
+          rows={4}
+          className={`${inputCls} font-mono text-xs`}
+        />
+      </div>
+    );
+  }
+
+  if (field.type === 'number') {
+    return (
+      <div>
+        <FieldLabel field={field} />
+        <input
+          type="number"
+          value={(value as number | string) ?? ''}
+          onChange={(e) => onChange(e.target.value ? parseInt(e.target.value, 10) : '')}
+          placeholder={field.placeholder}
+          className={inputCls}
+        />
+      </div>
+    );
+  }
+
+  // text or password
+  return (
+    <div>
+      <FieldLabel field={field} />
+      <input
+        type={field.type === 'password' ? 'password' : 'text'}
+        value={(value as string) || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder}
+        className={inputCls}
+      />
+    </div>
+  );
+}
+
+function FieldLabel({ field }: { field: ConfigField }) {
+  return (
+    <label className="block text-sm font-medium text-ink mb-2">
+      {field.label}
+      {field.required && <span className="text-red-600 ml-1">*</span>}
+      {field.sensitive && (
+        <span className="ml-2 text-xs text-yellow-500 font-normal">sensitive</span>
+      )}
+    </label>
+  );
+}

web/src/components/issuer/TypeSelector.tsx

@@ -0,0 +1,35 @@
+/**
+ * Issuer type selector grid. Used in both the catalog view and create wizard.
+ * M34 will reuse this for its 3-step wizard (Select Type step).
+ */
+import { issuerTypes, type IssuerTypeConfig } from '../../config/issuerTypes';
+
+interface TypeSelectorProps {
+  onSelect: (typeId: string) => void;
+  /** Filter to only show these type IDs. If not provided, shows all non-comingSoon types. */
+  filterIds?: string[];
+}
+
+export default function TypeSelector({ onSelect, filterIds }: TypeSelectorProps) {
+  const types = filterIds
+    ? issuerTypes.filter(t => filterIds.includes(t.id))
+    : issuerTypes.filter(t => !t.comingSoon);
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {types.map((type: IssuerTypeConfig) => (
+        <button
+          key={type.id}
+          onClick={() => onSelect(type.id)}
+          className="p-4 border border-surface-border rounded-lg hover:border-brand-500 hover:bg-opacity-5 transition-all text-left"
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-lg">{type.icon}</span>
+            <span className="font-medium text-ink">{type.name}</span>
+          </div>
+          <div className="text-sm text-ink-muted mt-1">{type.description}</div>
+        </button>
+      ))}
+    </div>
+  );
+}