auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialForm.tsx

@@ -0,0 +1,1212 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Key, Eye, Loader2, CreditCard, FileText, RefreshCw } from 'lucide-react';
+import { Button, TextInput, FilterDropdown, Modal, Toggle } from '@/components/design-system';
+import { api, Api } from '@/lib/api';
+import { decryptCredentialPayload } from '@/lib/vault-crypto';
+import { PasswordGenerator } from './PasswordGenerator';
+import type { VaultInfo, CredentialMeta, WalletLinkMetaV1 } from './types';
+
+interface CredentialFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+  editCredentialId?: string;
+  vaults: VaultInfo[];
+}
+
+type FormType = 'login' | 'card' | 'note' | 'apikey' | 'oauth2' | 'ssh' | 'gpg';
+
+const TYPE_OPTIONS = [
+  { value: 'login', label: 'Login' },
+  { value: 'card', label: 'Card' },
+  { value: 'note', label: 'Note' },
+  { value: 'apikey', label: 'API Key' },
+  { value: 'oauth2', label: 'OAuth2' },
+  { value: 'ssh', label: 'SSH Key' },
+  { value: 'gpg', label: 'GPG Key' },
+];
+
+const TYPE_CARDS: Array<{
+  value: FormType;
+  label: string;
+  description: string;
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+}> = [
+  {
+    value: 'login',
+    label: 'Login',
+    description: 'Websites and app accounts',
+    icon: Key,
+  },
+  {
+    value: 'card',
+    label: 'Credit Card',
+    description: 'Payment cards and details',
+    icon: CreditCard,
+  },
+  {
+    value: 'note',
+    label: 'Secure Note',
+    description: 'Private notes and secrets',
+    icon: FileText,
+  },
+  {
+    value: 'apikey',
+    label: 'API Key',
+    description: 'Simple key/value secret',
+    icon: Key,
+  },
+  {
+    value: 'oauth2',
+    label: 'OAuth2',
+    description: 'Auto-refreshing OAuth2 tokens',
+    icon: RefreshCw,
+  },
+  {
+    value: 'ssh',
+    label: 'SSH Key',
+    description: 'Private/public keypair for SSH',
+    icon: Key,
+  },
+  {
+    value: 'gpg',
+    label: 'GPG Key',
+    description: 'Armored key material and metadata',
+    icon: FileText,
+  },
+];
+
+const BRAND_OPTIONS = [
+  { value: 'visa', label: 'Visa' },
+  { value: 'mastercard', label: 'Mastercard' },
+  { value: 'amex', label: 'Amex' },
+  { value: 'discover', label: 'Discover' },
+  { value: 'other', label: 'Other' },
+];
+
+const normalizeForRank = (value: string) => value.trim().toLowerCase();
+
+const toTimestamp = (updatedAt?: string, createdAt?: string) => {
+  const updated = updatedAt ? Date.parse(updatedAt) : Number.NaN;
+  if (Number.isFinite(updated)) return updated;
+  const created = createdAt ? Date.parse(createdAt) : Number.NaN;
+  if (Number.isFinite(created)) return created;
+  return 0;
+};
+
+export const CredentialForm: React.FC<CredentialFormProps> = ({
+  isOpen,
+  onClose,
+  onSaved,
+  editCredentialId,
+  vaults,
+}) => {
+  const [type, setType] = useState<FormType>('login');
+  const [createStep, setCreateStep] = useState<'type' | 'form'>('type');
+  const [name, setName] = useState('');
+  const [vaultId, setVaultId] = useState('');
+  const [favorite, setFavorite] = useState(false);
+  const [tags, setTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState('');
+
+  // Login fields
+  const [url, setUrl] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loginNotes, setLoginNotes] = useState('');
+  const [totpSecret, setTotpSecret] = useState('');
+
+  // Card fields
+  const [cardholder, setCardholder] = useState('');
+  const [brand, setBrand] = useState('visa');
+  const [cardNumber, setCardNumber] = useState('');
+  const [expiry, setExpiry] = useState('');
+  const [cvv, setCvv] = useState('');
+  const [billingZip, setBillingZip] = useState('');
+  const [cardNotes, setCardNotes] = useState('');
+
+  // Note fields
+  const [noteContent, setNoteContent] = useState('');
+
+  // API key fields
+  const [apiKeyName, setApiKeyName] = useState('');
+  const [apiKeyValue, setApiKeyValue] = useState('');
+
+  // OAuth2 fields
+  const [oauth2TokenEndpoint, setOauth2TokenEndpoint] = useState('');
+  const [oauth2ClientId, setOauth2ClientId] = useState('');
+  const [oauth2ClientSecret, setOauth2ClientSecret] = useState('');
+  const [oauth2AccessToken, setOauth2AccessToken] = useState('');
+  const [oauth2RefreshToken, setOauth2RefreshToken] = useState('');
+  const [oauth2Scopes, setOauth2Scopes] = useState('');
+  const [oauth2AuthMethod, setOauth2AuthMethod] = useState('client_secret_post');
+  const [oauth2ExpiresAt, setOauth2ExpiresAt] = useState('');
+
+
+  // SSH fields
+  const [sshPublicKey, setSshPublicKey] = useState('');
+  const [sshPrivateKey, setSshPrivateKey] = useState('');
+  const [sshPassphrase, setSshPassphrase] = useState('');
+  const [sshHostsInput, setSshHostsInput] = useState('');
+  const [sshKeyType, setSshKeyType] = useState('');
+
+  // GPG fields
+  const [gpgPublicKey, setGpgPublicKey] = useState('');
+  const [gpgPrivateKey, setGpgPrivateKey] = useState('');
+  const [gpgKeyId, setGpgKeyId] = useState('');
+  const [gpgUidEmail, setGpgUidEmail] = useState('');
+  const [gpgExpiresAt, setGpgExpiresAt] = useState('');
+
+  // Preserve any existing wallet link metadata during edits.
+  const [walletLink, setWalletLink] = useState<WalletLinkMetaV1 | null>(null);
+
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showPasswordGen, setShowPasswordGen] = useState(false);
+  const [showPasswordActions, setShowPasswordActions] = useState(false);
+  const [typeAdvancedOpen, setTypeAdvancedOpen] = useState<Record<FormType, boolean>>({
+    login: false,
+    card: false,
+    note: false,
+    apikey: false,
+    oauth2: false,
+    ssh: false,
+    gpg: false,
+  });
+  const [showGlobalAdvanced, setShowGlobalAdvanced] = useState(false);
+  const [showUsernameSuggestions, setShowUsernameSuggestions] = useState(false);
+  const [usernameSuggestions, setUsernameSuggestions] = useState<string[]>([]);
+  const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
+  const [revealingField, setRevealingField] = useState<string | null>(null);
+  const [sensitiveFieldCache, setSensitiveFieldCache] = useState<Record<string, string> | null>(null);
+  const [dirtySensitiveFields, setDirtySensitiveFields] = useState<Record<string, boolean>>({});
+  const passwordActionsRef = useRef<HTMLDivElement | null>(null);
+
+  const isEdit = !!editCredentialId;
+
+  const setSensitiveFieldValue = useCallback((fieldKey: string, value: string) => {
+    switch (fieldKey) {
+      case 'password':
+        setPassword(value);
+        break;
+      case 'notes':
+        if (type === 'login') setLoginNotes(value);
+        if (type === 'card') setCardNotes(value);
+        break;
+      case 'number':
+        setCardNumber(value);
+        break;
+      case 'expiry':
+        setExpiry(value);
+        break;
+      case 'cvv':
+        setCvv(value);
+        break;
+      case 'content':
+        setNoteContent(value);
+        break;
+      case 'value':
+        setApiKeyValue(value);
+        break;
+      case 'access_token':
+        setOauth2AccessToken(value);
+        break;
+      case 'refresh_token':
+        setOauth2RefreshToken(value);
+        break;
+      case 'client_id':
+        setOauth2ClientId(value);
+        break;
+      case 'client_secret':
+        setOauth2ClientSecret(value);
+        break;
+      case 'private_key':
+        if (type === 'ssh') setSshPrivateKey(value);
+        if (type === 'gpg') setGpgPrivateKey(value);
+        break;
+      case 'passphrase':
+        setSshPassphrase(value);
+        break;
+      default:
+        break;
+    }
+  }, [type]);
+
+  const markSensitiveDirty = useCallback((fieldKey: string) => {
+    setDirtySensitiveFields((prev) => ({ ...prev, [fieldKey]: true }));
+  }, []);
+
+  // Default vault
+  useEffect(() => {
+    if (vaults.length > 0 && !vaultId) {
+      const primary = vaults.find((v) => v.isPrimary);
+      setVaultId(primary?.id || vaults[0].id);
+    }
+  }, [vaults, vaultId]);
+
+  // Load existing credential for editing
+  const loadCredential = useCallback(async () => {
+    if (!editCredentialId) return;
+    try {
+      const res = await api.get<{ success: boolean; credential: CredentialMeta }>(Api.Wallet, `/credentials/${editCredentialId}`);
+      const cred = res.credential;
+      setName(cred.name);
+      setType(cred.type as FormType);
+      setVaultId(cred.vaultId);
+      setFavorite(cred.meta.favorite || false);
+      setTags(cred.meta.tags || []);
+      const existingWalletLink = cred.meta.walletLink as WalletLinkMetaV1 | undefined;
+      setWalletLink(existingWalletLink?.walletAddress && (existingWalletLink.tier === 'hot' || existingWalletLink.tier === 'cold') ? existingWalletLink : null);
+
+      if (cred.type === 'login') {
+        setUrl(cred.meta.url || '');
+        setUsername(cred.meta.username || '');
+      } else if (cred.type === 'card') {
+        setCardholder(cred.meta.cardholder || '');
+        setBrand(cred.meta.brand || 'visa');
+        setBillingZip((cred.meta.billing_zip as string) || '');
+      } else if (cred.type === 'apikey') {
+        setApiKeyName((cred.meta.key as string) || '');
+      } else if (cred.type === 'oauth2') {
+        setOauth2TokenEndpoint((cred.meta.token_endpoint as string) || '');
+        setOauth2Scopes((cred.meta.scopes as string) || '');
+        setOauth2AuthMethod((cred.meta.auth_method as string) || 'client_secret_post');
+        setOauth2ExpiresAt(
+          typeof cred.meta.expires_at === 'number'
+            ? String(cred.meta.expires_at)
+            : typeof cred.meta.expires_at === 'string'
+              ? cred.meta.expires_at
+              : '',
+        );
+
+      } else if (cred.type === 'ssh') {
+        setSshPublicKey((cred.meta.public_key as string) || '');
+        setSshHostsInput(Array.isArray(cred.meta.hosts) ? (cred.meta.hosts as string[]).join('\n') : '');
+        setSshKeyType((cred.meta.key_type as string) || '');
+      } else if (cred.type === 'gpg') {
+        setGpgPublicKey((cred.meta.public_key as string) || '');
+        setGpgKeyId((cred.meta.key_id as string) || '');
+        setGpgUidEmail((cred.meta.uid_email as string) || '');
+        setGpgExpiresAt((cred.meta.expires_at as string) || '');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load credential');
+    }
+  }, [editCredentialId]);
+
+  const getSensitiveFieldMap = useCallback(async (): Promise<Record<string, string>> => {
+    if (!isEdit || !editCredentialId) return {};
+    if (sensitiveFieldCache) return sensitiveFieldCache;
+
+    const res = await api.post<{ encrypted: string }>(Api.Wallet, `/credentials/${editCredentialId}/read`);
+    const plaintext = await decryptCredentialPayload(res.encrypted);
+    const parsed = JSON.parse(plaintext) as { fields?: Array<{ key: string; value: string }> };
+    const fieldMap: Record<string, string> = {};
+
+    (parsed.fields || []).forEach((field) => {
+      fieldMap[field.key] = field.value;
+    });
+
+    setSensitiveFieldCache(fieldMap);
+    return fieldMap;
+  }, [isEdit, editCredentialId, sensitiveFieldCache]);
+
+  const handleRevealField = useCallback(async (fieldKey: string) => {
+    if (!isEdit) return;
+    setRevealingField(fieldKey);
+    setError(null);
+    try {
+      const fieldMap = await getSensitiveFieldMap();
+      setSensitiveFieldValue(fieldKey, fieldMap[fieldKey] || '');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Decryption failed -- try re-unlocking');
+    } finally {
+      setRevealingField(null);
+    }
+  }, [getSensitiveFieldMap, isEdit, setSensitiveFieldValue]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setCreateStep(isEdit ? 'form' : 'type');
+      setTypeAdvancedOpen({ login: false, card: false, note: false, apikey: false, oauth2: false, ssh: false, gpg: false });
+      setShowGlobalAdvanced(false);
+      setShowPasswordActions(false);
+    }
+  }, [isOpen, isEdit]);
+
+  useEffect(() => {
+    if (!isOpen || isEdit || type !== 'oauth2' || oauth2ExpiresAt) return;
+    setOauth2ExpiresAt(String(Math.floor(Date.now() / 1000) + 60 * 60));
+  }, [isOpen, isEdit, type, oauth2ExpiresAt]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const loadSuggestions = async () => {
+      try {
+        const res = await api.get<{ success: boolean; credentials: CredentialMeta[] }>(Api.Wallet, '/credentials');
+        const creds = res.credentials || [];
+
+        const loginCreds = creds.filter((c) => c.type === 'login');
+        const usernameStats = new Map<string, { raw: string; frequency: number; recent: number }>();
+
+        loginCreds.forEach((credential) => {
+          const raw = String(credential.meta.username || '').trim();
+          if (!raw) return;
+          const normalized = normalizeForRank(raw);
+          const timestamp = toTimestamp(credential.updatedAt, credential.createdAt);
+          const existing = usernameStats.get(normalized);
+          if (!existing) {
+            usernameStats.set(normalized, { raw, frequency: 1, recent: timestamp });
+            return;
+          }
+          existing.frequency += 1;
+          if (timestamp > existing.recent) {
+            existing.recent = timestamp;
+            existing.raw = raw;
+          }
+        });
+
+        const usernames = Array.from(usernameStats.entries())
+          .sort((a, b) => {
+            if (b[1].recent !== a[1].recent) return b[1].recent - a[1].recent;
+            if (b[1].frequency !== a[1].frequency) return b[1].frequency - a[1].frequency;
+            return a[0].localeCompare(b[0]);
+          })
+          .map(([, value]) => value.raw)
+          .slice(0, 20);
+
+        const tagStats = new Map<string, { frequency: number; recent: number }>();
+        creds.forEach((credential) => {
+          const timestamp = toTimestamp(credential.updatedAt, credential.createdAt);
+          const uniqueTags = new Set((Array.isArray(credential.meta.tags) ? credential.meta.tags : [])
+            .map((t) => String(t).trim())
+            .filter(Boolean));
+          uniqueTags.forEach((tag) => {
+            const normalized = normalizeForRank(tag);
+            const existing = tagStats.get(normalized);
+            if (!existing) {
+              tagStats.set(normalized, { frequency: 1, recent: timestamp });
+              return;
+            }
+            existing.frequency += 1;
+            if (timestamp > existing.recent) existing.recent = timestamp;
+          });
+        });
+
+        const tagsFromVault = Array.from(tagStats.entries())
+          .sort((a, b) => {
+            if (b[1].recent !== a[1].recent) return b[1].recent - a[1].recent;
+            if (b[1].frequency !== a[1].frequency) return b[1].frequency - a[1].frequency;
+            return a[0].localeCompare(b[0]);
+          })
+          .map(([tag]) => tag)
+          .slice(0, 30);
+
+        setUsernameSuggestions(usernames);
+        setTagSuggestions(tagsFromVault);
+      } catch {
+        setUsernameSuggestions([]);
+        setTagSuggestions([]);
+      }
+    };
+
+    void loadSuggestions();
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen && editCredentialId) {
+      setSensitiveFieldCache(null);
+      setDirtySensitiveFields({});
+      loadCredential();
+    }
+  }, [isOpen, editCredentialId, loadCredential]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setType('login');
+      setCreateStep('type');
+      setName('');
+      setVaultId('');
+      setFavorite(false);
+      setTags([]);
+      setTagInput('');
+      setUrl('');
+      setUsername('');
+      setPassword('');
+      setLoginNotes('');
+      setCardholder('');
+      setBrand('visa');
+      setCardNumber('');
+      setExpiry('');
+      setCvv('');
+      setBillingZip('');
+      setCardNotes('');
+      setNoteContent('');
+      setApiKeyName('');
+      setApiKeyValue('');
+      setOauth2TokenEndpoint('');
+      setOauth2ClientId('');
+      setOauth2ClientSecret('');
+      setOauth2AccessToken('');
+      setOauth2RefreshToken('');
+      setOauth2Scopes('');
+      setOauth2AuthMethod('client_secret_post');
+      setOauth2ExpiresAt('');
+      setSshPublicKey('');
+      setSshPrivateKey('');
+      setSshPassphrase('');
+      setSshHostsInput('');
+      setSshKeyType('');
+      setGpgPublicKey('');
+      setGpgPrivateKey('');
+      setGpgKeyId('');
+      setGpgUidEmail('');
+      setGpgExpiresAt('');
+      setWalletLink(null);
+      setError(null);
+      setSaving(false);
+      setShowPasswordActions(false);
+      setRevealingField(null);
+      setSensitiveFieldCache(null);
+      setDirtySensitiveFields({});
+      setTypeAdvancedOpen({ login: false, card: false, note: false, apikey: false, oauth2: false, ssh: false, gpg: false });
+      setShowGlobalAdvanced(false);
+      setShowUsernameSuggestions(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (type !== 'login') {
+      setShowPasswordActions(false);
+    }
+  }, [type]);
+
+  const vaultOptions = vaults.map((v) => ({
+    value: v.id,
+    label: v.name || (v.isPrimary ? 'Primary' : v.id.slice(0, 8)),
+  }));
+
+  const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const tag = tagInput.trim();
+      if (tag && !tags.includes(tag)) {
+        setTags([...tags, tag]);
+      }
+      setTagInput('');
+    }
+  };
+
+  const removeTag = (tag: string) => {
+    setTags(tags.filter((t) => t !== tag));
+  };
+
+  const visibleTagSuggestions = tagSuggestions
+    .filter((tag) => !tags.includes(tag))
+    .filter((tag) => !tagInput.trim() || tag.toLowerCase().includes(tagInput.trim().toLowerCase()))
+    .slice(0, 6);
+
+  const buildPayload = () => {
+    const resolvedName = name.trim() || (type === 'apikey' ? apiKeyName.trim() : '');
+    const fields: { key: string; value: string; type: string; sensitive: boolean }[] = [];
+    let meta: Record<string, unknown> = { tags, favorite };
+
+    switch (type) {
+      case 'login':
+        if (url) fields.push({ key: 'url', value: url, type: 'text', sensitive: false });
+        fields.push({ key: 'username', value: username, type: 'text', sensitive: false });
+        fields.push({ key: 'password', value: password, type: 'secret', sensitive: true });
+        fields.push({ key: 'notes', value: loginNotes, type: 'text', sensitive: true });
+        if (totpSecret.trim()) {
+          fields.push({ key: 'totp', value: totpSecret.trim().replace(/\s+/g, '').toUpperCase(), type: 'secret', sensitive: true });
+        }
+        meta = { ...meta, url, username };
+        break;
+      case 'card':
+        fields.push({ key: 'cardholder', value: cardholder, type: 'text', sensitive: false });
+        fields.push({ key: 'number', value: cardNumber, type: 'text', sensitive: true });
+        fields.push({ key: 'cvv', value: cvv, type: 'secret', sensitive: true });
+        fields.push({ key: 'expiry', value: expiry, type: 'text', sensitive: true });
+        fields.push({ key: 'notes', value: cardNotes, type: 'text', sensitive: true });
+        meta = { ...meta, brand, cardholder, last4: cardNumber.slice(-4), billing_zip: billingZip };
+        break;
+      case 'note':
+        fields.push({ key: 'content', value: noteContent, type: 'text', sensitive: true });
+        break;
+      case 'apikey':
+        fields.push({ key: 'key', value: apiKeyName, type: 'text', sensitive: false });
+        fields.push({ key: 'value', value: apiKeyValue, type: 'secret', sensitive: true });
+        meta = { ...meta, key: apiKeyName };
+        break;
+      case 'oauth2': {
+        const expiresAtSeconds = Number.parseInt(oauth2ExpiresAt, 10);
+        fields.push({ key: 'access_token', value: oauth2AccessToken, type: 'secret', sensitive: true });
+        fields.push({ key: 'refresh_token', value: oauth2RefreshToken, type: 'secret', sensitive: true });
+        fields.push({ key: 'client_id', value: oauth2ClientId, type: 'secret', sensitive: true });
+        fields.push({ key: 'client_secret', value: oauth2ClientSecret, type: 'secret', sensitive: true });
+        meta = {
+          ...meta,
+          token_endpoint: oauth2TokenEndpoint,
+          scopes: oauth2Scopes,
+          auth_method: oauth2AuthMethod,
+          expires_at: Number.isFinite(expiresAtSeconds) ? expiresAtSeconds : null,
+        };
+        break;
+      }
+
+      case 'ssh': {
+        const hosts = sshHostsInput
+          .split(/\n|,/)
+          .map((host) => host.trim())
+          .filter(Boolean);
+        fields.push({ key: 'private_key', value: sshPrivateKey, type: 'secret', sensitive: true });
+        if (sshPassphrase.trim()) fields.push({ key: 'passphrase', value: sshPassphrase, type: 'secret', sensitive: true });
+        if (sshPublicKey.trim()) fields.push({ key: 'public_key', value: sshPublicKey, type: 'text', sensitive: false });
+        meta = { ...meta, public_key: sshPublicKey, hosts, key_type: sshKeyType || undefined };
+        break;
+      }
+      case 'gpg':
+        fields.push({ key: 'private_key', value: gpgPrivateKey, type: 'secret', sensitive: true });
+        if (gpgPublicKey.trim()) fields.push({ key: 'public_key', value: gpgPublicKey, type: 'text', sensitive: false });
+        meta = { ...meta, public_key: gpgPublicKey, key_id: gpgKeyId, uid_email: gpgUidEmail, expires_at: gpgExpiresAt || undefined };
+        break;
+    }
+
+    if (walletLink) {
+      meta = { ...meta, walletLink };
+    }
+
+    return { vaultId, type, name: resolvedName, fields, meta };
+  };
+
+  const handleSave = async () => {
+    const hasHumanName = !!name.trim();
+    const canDeriveApiKeyName = type === 'apikey' && !!apiKeyName.trim();
+    if (!hasHumanName && !canDeriveApiKeyName) {
+      setError('Name is required');
+      return;
+    }
+    if (type === 'login' && !isEdit && !password.trim()) {
+      setError('Password is required for login');
+      return;
+    }
+    if (type === 'apikey' && (!apiKeyName.trim() || !apiKeyValue.trim())) {
+      setError('Key and value are required for API key');
+      return;
+    }
+    if (type === 'ssh' && !sshPrivateKey.trim() && !isEdit) {
+      setError('SSH private key is required');
+      return;
+    }
+    if (type === 'gpg' && !gpgPrivateKey.trim() && !isEdit) {
+      setError('GPG private key is required');
+      return;
+    }
+    if (type === 'oauth2') {
+      if (!oauth2TokenEndpoint.trim()) {
+        setError('OAuth2 requires a token endpoint. Add a valid token endpoint URL.');
+        return;
+      }
+
+      const expiresAtNumber = Number.parseInt(oauth2ExpiresAt, 10);
+      if (!Number.isFinite(expiresAtNumber) || expiresAtNumber <= 0) {
+        setError('OAuth2 expiry is invalid. Enter a positive unix timestamp in seconds.');
+        return;
+      }
+    }
+    setSaving(true);
+    setError(null);
+
+    try {
+      const payload = buildPayload();
+
+      if (isEdit) {
+        // Only submit changed sensitive fields for edit.
+        const editFields = payload.fields.filter((f) => !f.sensitive || !!dirtySensitiveFields[f.key]);
+        await api.put(Api.Wallet, `/credentials/${editCredentialId}`, {
+          ...payload,
+          fields: editFields,
+        });
+      } else {
+        await api.post(Api.Wallet, '/credentials', payload);
+      }
+
+      onSaved();
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save credential');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const textareaClassName =
+    'w-full h-24 bg-[var(--color-background-alt,#f4f4f5)] border border-[var(--color-border,#d4d4d8)] font-mono text-sm p-3 resize-none focus:border-[var(--color-border-focus,#0a0a0a)] outline-none text-[var(--color-text,#0a0a0a)] placeholder-[var(--color-text-muted,#6b7280)]';
+
+  const selectedTypeLabel = TYPE_OPTIONS.find((opt) => opt.value === type)?.label || 'Login';
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title={isEdit ? 'Edit Credential' : createStep === 'type' ? 'Choose Item Type' : 'New Credential'}
+        subtitle="Credential_Form"
+        size="lg"
+      >
+        {!isEdit && createStep === 'type' ? (
+          <div className="space-y-4">
+            <p className="font-mono text-[10px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+              Select what you want to add
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
+              {TYPE_CARDS.map(({ value, label, description, icon: Icon }) => (
+                <button
+                  key={value}
+                  type="button"
+                  data-testid={`type-card-${value}`}
+                  onClick={() => {
+                    setType(value);
+                    setError(null);
+                    setCreateStep('form');
+                  }}
+                  className="text-left border border-[var(--color-border,#d4d4d8)] bg-[var(--color-background-alt,#f4f4f5)] hover:border-[var(--color-border-focus,#0a0a0a)] transition-colors px-3 py-3"
+                >
+                  <div className="w-8 h-8 mb-2 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] flex items-center justify-center">
+                    <Icon size={14} className="text-[var(--color-text,#0a0a0a)]" />
+                  </div>
+                  <div className="font-mono text-[10px] font-bold uppercase tracking-widest text-[var(--color-text,#0a0a0a)]">
+                    {label}
+                  </div>
+                  <div className="mt-1 font-mono text-[9px] text-[var(--color-text-muted,#6b7280)]">
+                    {description}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="flex justify-end gap-2 pt-1">
+              <Button variant="secondary" size="sm" onClick={onClose}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div data-testid="credential-form-layout" className="space-y-4 gap-4">
+            {/* Top row: type + name (+ vault in create) */}
+            {isEdit ? (
+              <div className="flex gap-3">
+                <div className="w-32 flex-shrink-0">
+                  <FilterDropdown
+                    options={TYPE_OPTIONS}
+                    value={type}
+                    onChange={(v) => setType(v as FormType)}
+                    label="Type"
+                  />
+                </div>
+                <div className="flex-1">
+                  <TextInput
+                    label="Name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Credential name"
+                    required
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between px-1">
+                  <span className="font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+                    Type: {selectedTypeLabel}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => setCreateStep('type')}
+                    className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                  >
+                    Change
+                  </button>
+                </div>
+                <div data-testid="create-name-vault-row" className="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <div className="flex-1">
+                    <TextInput
+                      label="Name"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      placeholder="Credential name"
+                      required
+                    />
+                  </div>
+                  {vaultOptions.length > 0 && (
+                    <div className="sm:w-48 sm:flex-shrink-0">
+                      <FilterDropdown
+                        options={vaultOptions}
+                        value={vaultId}
+                        onChange={setVaultId}
+                        label="Vault"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Vault selector */}
+            {isEdit && vaultOptions.length > 0 && (
+              <FilterDropdown
+                options={vaultOptions}
+                value={vaultId}
+                onChange={setVaultId}
+                label="Vault"
+              />
+            )}
+
+            {/* Type-specific fields */}
+            {type === 'login' && (
+              <div className="space-y-3">
+                <TextInput
+                  label="Username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  onFocus={() => setShowUsernameSuggestions(true)}
+                  onBlur={() => setTimeout(() => setShowUsernameSuggestions(false), 50)}
+                  placeholder="user@example.com"
+                  list="login-username-suggestions"
+                />
+                {showUsernameSuggestions && usernameSuggestions.length > 0 && (
+                  <datalist id="login-username-suggestions">
+                    {usernameSuggestions.map((suggestion) => (
+                      <option key={suggestion} value={suggestion} />
+                    ))}
+                  </datalist>
+                )}
+
+                <TextInput
+                  label="Website"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="https://example.com"
+                />
+
+                <div className="relative">
+                  <TextInput
+                    label="Password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                      if (isEdit) markSensitiveDirty('password');
+                    }}
+                    onFocus={() => setShowPasswordActions(true)}
+                    onClick={() => setShowPasswordActions(true)}
+                    onBlur={(e) => {
+                      const nextTarget = e.relatedTarget as Node | null;
+                      if (nextTarget && passwordActionsRef.current?.contains(nextTarget)) return;
+                      setShowPasswordActions(false);
+                    }}
+                    placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                    rightElement={
+                      isEdit ? (
+                        <button
+                          type="button"
+                          onClick={() => { void handleRevealField('password'); }}
+                          aria-label="Reveal Password"
+                          className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                        >
+                          {revealingField === 'password' ? <Loader2 size={11} className="animate-spin" /> : <Eye size={12} />}
+                        </button>
+                      ) : undefined
+                    }
+                  />
+                  {showPasswordActions && (
+                    <div
+                      ref={passwordActionsRef}
+                      className="absolute right-0 top-full mt-1 z-20 min-w-[13rem] border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] shadow-[2px_2px_0_rgba(10,10,10,0.08)]"
+                    >
+                      <button
+                        type="button"
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => {
+                          setShowPasswordGen(true);
+                          setShowPasswordActions(false);
+                        }}
+                        className="w-full text-left px-3 py-2 font-mono text-[9px] uppercase tracking-widest text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)]"
+                      >
+                        Generate New Password
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => setTypeAdvancedOpen((prev) => ({ ...prev, login: !prev.login }))}
+                  className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] text-left"
+                >
+                  {typeAdvancedOpen.login ? 'Hide Advanced Fields' : 'Show Advanced Fields'}
+                </button>
+
+                {typeAdvancedOpen.login && (
+                  <div className="space-y-3 border border-[var(--color-border,#d4d4d8)] p-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                    <div>
+                      <div className="flex items-center justify-between mb-1.5 px-1">
+                        <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+                          Notes
+                        </label>
+                        {isEdit && (
+                          <button
+                            type="button"
+                            onClick={() => { void handleRevealField('notes'); }}
+                            aria-label="Reveal Notes"
+                            className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors inline-flex items-center gap-1"
+                          >
+                            {revealingField === 'notes' ? <Loader2 size={9} className="animate-spin" /> : <Eye size={9} />}
+                            Reveal
+                          </button>
+                        )}
+                      </div>
+                      <textarea
+                        className={textareaClassName}
+                        value={loginNotes}
+                        onChange={(e) => {
+                          setLoginNotes(e.target.value);
+                          if (isEdit) markSensitiveDirty('notes');
+                        }}
+                        placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                      />
+                    </div>
+                    <TextInput
+                      label="TOTP Secret (2FA)"
+                      value={totpSecret}
+                      onChange={(e) => setTotpSecret(e.target.value)}
+                      placeholder="Base32 secret (e.g. JBSWY3DPEHPK3PXP)"
+                      type="password"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {type === 'card' && (
+              <div className="space-y-3">
+                <TextInput
+                  label="Cardholder"
+                  value={cardholder}
+                  onChange={(e) => setCardholder(e.target.value)}
+                  placeholder="John Doe"
+                />
+                <TextInput
+                  label="Card Number"
+                  value={cardNumber}
+                  onChange={(e) => {
+                    setCardNumber(e.target.value);
+                    if (isEdit) markSensitiveDirty('number');
+                  }}
+                  placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                />
+                <div className="flex gap-3">
+                  <div className="flex-1">
+                    <TextInput
+                      label="Expiry"
+                      value={expiry}
+                      onChange={(e) => {
+                        setExpiry(e.target.value);
+                        if (isEdit) markSensitiveDirty('expiry');
+                      }}
+                      placeholder="MM/YY"
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <TextInput
+                      label="CVV"
+                      type="password"
+                      value={cvv}
+                      onChange={(e) => {
+                        setCvv(e.target.value);
+                        if (isEdit) markSensitiveDirty('cvv');
+                      }}
+                      placeholder={isEdit ? '\u2022\u2022\u2022\u2022' : ''}
+                    />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setTypeAdvancedOpen((prev) => ({ ...prev, card: !prev.card }))}
+                  className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] text-left"
+                >
+                  {typeAdvancedOpen.card ? 'Hide Advanced Fields' : 'Show Advanced Fields'}
+                </button>
+                {typeAdvancedOpen.card && (
+                  <div className="space-y-3 border border-[var(--color-border,#d4d4d8)] p-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                    <FilterDropdown options={BRAND_OPTIONS} value={brand} onChange={setBrand} label="Brand" />
+                    <TextInput label="Billing ZIP" value={billingZip} onChange={(e) => setBillingZip(e.target.value)} placeholder="12345" />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {type === 'note' && (
+              <div>
+                <div className="flex items-center justify-between mb-1.5 px-1">
+                  <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+                    Content
+                  </label>
+                  {isEdit && (
+                    <button
+                      type="button"
+                      onClick={() => { void handleRevealField('content'); }}
+                      aria-label="Reveal Content"
+                      className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors inline-flex items-center gap-1"
+                    >
+                      {revealingField === 'content' ? <Loader2 size={9} className="animate-spin" /> : <Eye size={9} />}
+                      Reveal
+                    </button>
+                  )}
+                </div>
+                <textarea
+                  className={textareaClassName.replace('h-24', 'h-48')}
+                  value={noteContent}
+                  onChange={(e) => {
+                    setNoteContent(e.target.value);
+                    if (isEdit) markSensitiveDirty('content');
+                  }}
+                  placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                />
+              </div>
+            )}
+
+            {type === 'apikey' && (
+              <div className="space-y-3">
+                <p className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">
+                  Minimal flow: key name + key value. If Name is blank, key name becomes the credential title.
+                </p>
+                <TextInput
+                  label="Key"
+                  value={apiKeyName}
+                  onChange={(e) => setApiKeyName(e.target.value)}
+                  placeholder="Service key name"
+                />
+                <TextInput
+                  label="Value"
+                  type="password"
+                  value={apiKeyValue}
+                  onChange={(e) => {
+                    setApiKeyValue(e.target.value);
+                    if (isEdit) markSensitiveDirty('value');
+                  }}
+                  placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                  rightElement={
+                    isEdit ? (
+                      <button
+                        type="button"
+                        onClick={() => { void handleRevealField('value'); }}
+                        aria-label="Reveal Value"
+                        className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+                      >
+                        {revealingField === 'value' ? <Loader2 size={11} className="animate-spin" /> : <Eye size={12} />}
+                      </button>
+                    ) : undefined
+                  }
+                />
+              </div>
+            )}
+
+            {type === 'oauth2' && (
+              <div className="space-y-3">
+                <TextInput label="Token Endpoint" value={oauth2TokenEndpoint} onChange={(e) => setOauth2TokenEndpoint(e.target.value)} placeholder="https://accounts.google.com/o/oauth2/token" />
+                <TextInput
+                  label="Access Token"
+                  type="password"
+                  value={oauth2AccessToken}
+                  onChange={(e) => {
+                    setOauth2AccessToken(e.target.value);
+                    if (isEdit) markSensitiveDirty('access_token');
+                  }}
+                  placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : 'Optional — will be fetched on first use'}
+                />
+                <TextInput label="Expires At (unix seconds)" type="text" value={oauth2ExpiresAt} onChange={(e) => setOauth2ExpiresAt(e.target.value)} placeholder={String(Math.floor(Date.now() / 1000) + 60 * 60)} />
+
+                <button
+                  type="button"
+                  onClick={() => setTypeAdvancedOpen((prev) => ({ ...prev, oauth2: !prev.oauth2 }))}
+                  className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] text-left"
+                >
+                  {typeAdvancedOpen.oauth2 ? 'Hide Advanced OAuth2 Fields' : 'Show Advanced OAuth2 Fields'}
+                </button>
+
+                {typeAdvancedOpen.oauth2 && (
+                  <div className="space-y-3 border border-[var(--color-border,#d4d4d8)] p-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                    <TextInput
+                      label="Client ID"
+                      value={oauth2ClientId}
+                      onChange={(e) => {
+                        setOauth2ClientId(e.target.value);
+                        if (isEdit) markSensitiveDirty('client_id');
+                      }}
+                      placeholder="your-client-id"
+                    />
+                    <TextInput
+                      label="Client Secret"
+                      type="password"
+                      value={oauth2ClientSecret}
+                      onChange={(e) => {
+                        setOauth2ClientSecret(e.target.value);
+                        if (isEdit) markSensitiveDirty('client_secret');
+                      }}
+                      placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                    />
+                    <TextInput
+                      label="Refresh Token"
+                      type="password"
+                      value={oauth2RefreshToken}
+                      onChange={(e) => {
+                        setOauth2RefreshToken(e.target.value);
+                        if (isEdit) markSensitiveDirty('refresh_token');
+                      }}
+                      placeholder={isEdit ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+                    />
+                    <TextInput label="Scopes" value={oauth2Scopes} onChange={(e) => setOauth2Scopes(e.target.value)} placeholder="read write (space-separated)" />
+                    <FilterDropdown
+                      options={[
+                        { value: 'client_secret_post', label: 'Client Secret (POST body)' },
+                        { value: 'client_secret_basic', label: 'Client Secret (Basic Auth)' },
+                      ]}
+                      value={oauth2AuthMethod}
+                      onChange={setOauth2AuthMethod}
+                      label="Auth Method"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+
+            {type === 'ssh' && (
+              <div className="space-y-3">
+                <TextInput label="Public Key (optional)" value={sshPublicKey} onChange={(e) => setSshPublicKey(e.target.value)} placeholder="ssh-ed25519 AAAA..." />
+                <div>
+                  <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">Private Key</label>
+                  <textarea className={textareaClassName.replace('h-24', 'h-40')} value={sshPrivateKey} onChange={(e) => { setSshPrivateKey(e.target.value); if (isEdit) markSensitiveDirty('private_key'); }} placeholder={isEdit ? '••••••••' : '-----BEGIN OPENSSH PRIVATE KEY-----'} />
+                </div>
+                <TextInput label="Passphrase (optional)" type="password" value={sshPassphrase} onChange={(e) => { setSshPassphrase(e.target.value); if (isEdit) markSensitiveDirty('passphrase'); }} />
+                <div>
+                  <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">Associated Hosts (comma or newline)</label>
+                  <textarea className={textareaClassName} value={sshHostsInput} onChange={(e) => setSshHostsInput(e.target.value)} placeholder="github.com
+prod.example.com" />
+                </div>
+              </div>
+            )}
+
+            {type === 'gpg' && (
+              <div className="space-y-3">
+                <div>
+                  <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">Private Key (armored)</label>
+                  <textarea className={textareaClassName.replace('h-24', 'h-40')} value={gpgPrivateKey} onChange={(e) => { setGpgPrivateKey(e.target.value); if (isEdit) markSensitiveDirty('private_key'); }} placeholder={isEdit ? '••••••••' : '-----BEGIN PGP PRIVATE KEY BLOCK-----'} />
+                </div>
+                <div>
+                  <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">Public Key (optional)</label>
+                  <textarea className={textareaClassName} value={gpgPublicKey} onChange={(e) => setGpgPublicKey(e.target.value)} placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----" />
+                </div>
+                <TextInput label="Key ID (optional)" value={gpgKeyId} onChange={(e) => setGpgKeyId(e.target.value)} />
+                <TextInput label="UID Email (optional)" value={gpgUidEmail} onChange={(e) => setGpgUidEmail(e.target.value)} />
+                <TextInput label="Expires At (optional)" value={gpgExpiresAt} onChange={(e) => setGpgExpiresAt(e.target.value)} placeholder="2027-01-01" />
+              </div>
+            )}
+
+            <button
+              type="button"
+              onClick={() => setShowGlobalAdvanced((prev) => !prev)}
+              className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] text-left"
+            >
+              {showGlobalAdvanced ? 'Hide Global Advanced' : 'Show Global Advanced'}
+            </button>
+
+            {showGlobalAdvanced && (
+              <div className="space-y-4 border border-[var(--color-border,#d4d4d8)] p-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                {/* Tags */}
+                <div>
+                  <TextInput
+                    label="Tags"
+                    value={tagInput}
+                    onChange={(e) => setTagInput(e.target.value)}
+                    onKeyDown={handleTagKeyDown}
+                    placeholder="Add tag and press Enter"
+                  />
+                  {visibleTagSuggestions.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {visibleTagSuggestions.map((suggestedTag) => (
+                        <button
+                          key={suggestedTag}
+                          type="button"
+                          onClick={() => {
+                            if (!tags.includes(suggestedTag)) setTags([...tags, suggestedTag]);
+                            setTagInput('');
+                          }}
+                          className="font-mono text-[9px] px-2 py-0.5 border border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-focus,#0a0a0a)]"
+                        >
+                          + {suggestedTag}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                  {tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-2">
+                      {tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="inline-flex items-center gap-1 bg-[var(--color-accent,#ccff00)]/10 text-[var(--color-text,#0a0a0a)] text-[9px] font-mono px-2 py-0.5"
+                        >
+                          {tag}
+                          <button
+                            type="button"
+                            onClick={() => removeTag(tag)}
+                            className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] ml-0.5"
+                          >
+                            x
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <Toggle size="sm" checked={favorite} onChange={setFavorite} label="Favorite" />
+              </div>
+            )}
+
+            {/* Error */}
+            {error && (
+              <div className="font-mono text-[10px] text-[var(--color-danger,#ef4444)] bg-[var(--color-danger,#ef4444)]/5 border border-[var(--color-danger,#ef4444)]/20 px-3 py-2">
+                {error}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex justify-end gap-2 pt-1">
+              <Button variant="secondary" size="sm" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button variant="primary" size="sm" onClick={handleSave} loading={saving}>
+                Save
+              </Button>
+            </div>
+          </div>
+        )}
+      </Modal>
+
+      {/* Password Generator */}
+      <PasswordGenerator
+        isOpen={showPasswordGen}
+        onClose={() => setShowPasswordGen(false)}
+        onUse={(pw) => {
+          setPassword(pw);
+          if (isEdit) markSensitiveDirty('password');
+          setShowPasswordGen(false);
+        }}
+      />
+    </>
+  );
+};