auramaxx 0.0.1

package/src/components/vault/CredentialVault.tsx

@@ -0,0 +1,1662 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Menu, Clock3, Search } from 'lucide-react';
+import { api, Api, getWalletBaseUrl, unlockWallet } from '@/lib/api';
+import { encryptPassword } from '@/lib/crypto';
+import { CREDENTIAL_FIELD_SCHEMA } from '@/lib/credential-field-schema';
+import { Modal, TextInput, Button, Drawer, FilterDropdown } from '@/components/design-system';
+import { VaultSidebar } from './VaultSidebar';
+import { CredentialList } from './CredentialList';
+import { CredentialDetail } from './CredentialDetail';
+import { CredentialEmpty } from './CredentialEmpty';
+import { CredentialForm } from './CredentialForm';
+import { ImportCredentialsModal } from './ImportCredentialsModal';
+import { PasswordGenerator } from './PasswordGenerator';
+import { AuditConsole } from './AuditConsole';
+import { ApiKeysConsole } from './ApiKeysConsole';
+import { useVaultKeyboardShortcuts } from './hooks/useVaultKeyboardShortcuts';
+import { HumanActionBar } from '@/components/HumanActionBar';
+import { useAgentActions } from '@/hooks/useAgentActions';
+import { useWebSocket } from '@/context/WebSocketContext';
+import { useAuth } from '@/context/AuthContext';
+import {
+  WALLET_EVENTS,
+  type WalletEvent,
+  type CredentialAccessedData,
+  type CredentialChangedData,
+} from '@/lib/events';
+import type {
+  CredentialMeta,
+  CredentialLifecycleFilter,
+  CredentialWithLocation,
+  VaultInfo,
+  VaultFilters,
+} from './types';
+
+interface CredentialVaultProps {
+  onLock: () => void;
+  onSettings?: () => void;
+}
+
+type ViewportMode = 'desktop' | 'tablet' | 'mobile';
+type VaultSurface = 'credentials' | 'audit' | 'apiKeys';
+type CreateCredentialStart = 'api-key-form' | 'type-picker';
+type CreatePrefill = {
+  vaultId?: string;
+  tags?: string[];
+  type?: 'login' | 'card' | 'note' | 'plain_note' | 'hot_wallet' | 'apikey' | 'oauth2' | 'ssh' | 'gpg' | 'custom';
+};
+
+type ParsedSearchQuery = {
+  terms: string[];
+  tagFilters: string[];
+  typeFilters: string[];
+  vaultFilters: string[];
+  fieldFilters: Array<{ key: string; value: string }>;
+  lifecycleFilters: Set<CredentialLifecycleFilter>;
+  favoriteOnly: boolean;
+};
+
+const DEFAULT_FILTERS: VaultFilters = {
+  vaultId: null,
+  category: 'all',
+  tag: null,
+  search: '',
+  favoritesOnly: false,
+  lifecycle: 'active',
+};
+
+const VAULT_MODE_OPTIONS: { value: 'linked' | 'independent'; label: string }[] = [
+  { value: 'linked', label: 'Child (inherits parent unlock)' },
+  { value: 'independent', label: 'Independent (separate password)' },
+];
+
+const RECENT_ACCESS_STORAGE_KEY = 'auramaxx_recently_accessed_credentials';
+const LATEST_ACCESS_STORAGE_KEY = 'auramaxx_credentials_latest_access_at';
+const RECENT_ACCESS_MAX = 8;
+const SEARCH_FIELD_PRIORITY = [
+  'username',
+  'url',
+  'content',
+  'key',
+  'value',
+  'cardholder',
+  'brand',
+  'last4',
+  'token_endpoint',
+  'scopes',
+  'fingerprint',
+] as const;
+const LIFECYCLE_TOKEN_MAP: Record<string, CredentialLifecycleFilter> = {
+  active: 'active',
+  archive: 'archive',
+  archived: 'archive',
+  deleted: 'recently_deleted',
+  recently_deleted: 'recently_deleted',
+  recentlydeleted: 'recently_deleted',
+};
+
+const FIELD_ALIAS_TO_CANONICAL = (() => {
+  const lookup = new Map<string, string>();
+  const schemaEntries = Object.values(CREDENTIAL_FIELD_SCHEMA);
+  for (const fields of schemaEntries) {
+    for (const field of fields) {
+      lookup.set(field.key.toLowerCase(), field.key);
+      for (const alias of field.aliases || []) {
+        lookup.set(alias.toLowerCase(), field.key);
+      }
+    }
+  }
+  return lookup;
+})();
+
+const DEFAULT_SEARCH_FIELD_KEYS = (() => {
+  const fromSchema = Array.from(FIELD_ALIAS_TO_CANONICAL.values());
+  const ordered = [...SEARCH_FIELD_PRIORITY, ...fromSchema];
+  const seen = new Set<string>();
+  const unique: string[] = [];
+  for (const key of ordered) {
+    const normalized = key.toLowerCase();
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+    unique.push(key);
+  }
+  return unique.slice(0, 8);
+})();
+
+function getViewportMode(width: number): ViewportMode {
+  if (width < 768) return 'mobile';
+  if (width < 1280) return 'tablet';
+  return 'desktop';
+}
+
+function getVaultParentId(vault: VaultInfo): string | undefined {
+  return vault.parentVaultId || vault.linkedTo;
+}
+
+function collectVaultSubtreeIds(rootVaultId: string, vaults: VaultInfo[]): string[] {
+  const childrenByParent = new Map<string, VaultInfo[]>();
+  for (const vault of vaults) {
+    const parentVaultId = getVaultParentId(vault);
+    if (!parentVaultId) continue;
+    const bucket = childrenByParent.get(parentVaultId) || [];
+    bucket.push(vault);
+    childrenByParent.set(parentVaultId, bucket);
+  }
+
+  const orderedIds: string[] = [];
+  const queue: string[] = [rootVaultId];
+  const visited = new Set<string>();
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    if (visited.has(current)) continue;
+    visited.add(current);
+    orderedIds.push(current);
+    for (const child of childrenByParent.get(current) || []) {
+      queue.push(child.id);
+    }
+  }
+
+  return orderedIds;
+}
+
+function deriveCredentialLifecycle(credential: { location?: CredentialLifecycleFilter; archivedAt?: string; deletedAt?: string }): CredentialLifecycleFilter {
+  if (credential.location) return credential.location;
+  if (credential.deletedAt) return 'recently_deleted';
+  if (credential.archivedAt) return 'archive';
+  return 'active';
+}
+
+function credentialCreatedAtTimestamp(credential: { createdAt?: string }): number {
+  const createdAtMs = credential.createdAt ? Date.parse(credential.createdAt) : Number.NaN;
+  return Number.isFinite(createdAtMs) ? createdAtMs : 0;
+}
+
+function effectiveCredentialAccessTimestamp(
+  credential: { id: string; createdAt?: string },
+  latestAccessById: Record<string, number>,
+): number {
+  const latestAccess = latestAccessById[credential.id];
+  if (typeof latestAccess === 'number' && Number.isFinite(latestAccess) && latestAccess > 0) {
+    return latestAccess;
+  }
+  return credentialCreatedAtTimestamp(credential);
+}
+
+function buildAccessMapForCredentials(
+  credentials: Array<{ id: string; createdAt?: string }>,
+  previous: Record<string, number>,
+): Record<string, number> {
+  const next: Record<string, number> = {};
+  for (const credential of credentials) {
+    const known = previous[credential.id];
+    if (typeof known === 'number' && Number.isFinite(known) && known > 0) {
+      next[credential.id] = known;
+      continue;
+    }
+    next[credential.id] = credentialCreatedAtTimestamp(credential);
+  }
+  return next;
+}
+
+function normalizeToken(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+function toSearchString(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value).toLowerCase();
+  }
+  if (Array.isArray(value)) {
+    return value.map(toSearchString).join(' ');
+  }
+  if (typeof value === 'object') {
+    return Object.values(value as Record<string, unknown>).map(toSearchString).join(' ');
+  }
+  return '';
+}
+
+function normalizeFieldKeyToken(rawKey: string): string {
+  const key = rawKey.trim().toLowerCase().replace(/\s+/g, '_');
+  return FIELD_ALIAS_TO_CANONICAL.get(key) || key;
+}
+
+function parseSearchQuery(raw: string): ParsedSearchQuery {
+  const parsed: ParsedSearchQuery = {
+    terms: [],
+    tagFilters: [],
+    typeFilters: [],
+    vaultFilters: [],
+    fieldFilters: [],
+    lifecycleFilters: new Set<CredentialLifecycleFilter>(),
+    favoriteOnly: false,
+  };
+
+  const tokens = raw
+    .trim()
+    .split(/\s+/)
+    .map((token) => token.trim())
+    .filter(Boolean);
+
+  for (const token of tokens) {
+    const normalized = normalizeToken(token);
+    if (normalized === 'favorite' || normalized === 'favourite' || normalized === 'fav') {
+      parsed.favoriteOnly = true;
+      continue;
+    }
+
+    const lifecycleFromBareToken = LIFECYCLE_TOKEN_MAP[normalized];
+    if (lifecycleFromBareToken) {
+      parsed.lifecycleFilters.add(lifecycleFromBareToken);
+      continue;
+    }
+
+    const separatorIndex = token.indexOf(':');
+    if (separatorIndex <= 0) {
+      parsed.terms.push(normalized);
+      continue;
+    }
+
+    const keyToken = normalizeToken(token.slice(0, separatorIndex));
+    const valueToken = token.slice(separatorIndex + 1).trim();
+    const normalizedValue = normalizeToken(valueToken);
+    if (!normalizedValue) continue;
+
+    if (keyToken === 'tag') {
+      parsed.tagFilters.push(normalizedValue);
+      continue;
+    }
+    if (keyToken === 'type') {
+      parsed.typeFilters.push(normalizedValue);
+      continue;
+    }
+    if (keyToken === 'vault') {
+      parsed.vaultFilters.push(normalizedValue);
+      continue;
+    }
+    if (keyToken === 'lifecycle' || keyToken === 'location') {
+      const lifecycleValue = LIFECYCLE_TOKEN_MAP[normalizedValue];
+      if (lifecycleValue) parsed.lifecycleFilters.add(lifecycleValue);
+      continue;
+    }
+    if (keyToken === 'favorite' || keyToken === 'fav') {
+      parsed.favoriteOnly = !['false', '0', 'no'].includes(normalizedValue);
+      continue;
+    }
+
+    parsed.fieldFilters.push({
+      key: normalizeFieldKeyToken(keyToken),
+      value: normalizedValue,
+    });
+  }
+
+  return parsed;
+}
+
+function credentialMatchesField(credential: CredentialMeta, fieldKey: string, needle: string): boolean {
+  const normalizedFieldKey = normalizeFieldKeyToken(fieldKey);
+  const entries = Object.entries(credential.meta || {});
+  for (const [rawKey, rawValue] of entries) {
+    const key = normalizeFieldKeyToken(rawKey);
+    if (key !== normalizedFieldKey) continue;
+    if (toSearchString(rawValue).includes(needle)) return true;
+  }
+  return false;
+}
+
+export const CredentialVault: React.FC<CredentialVaultProps> = ({
+  onLock,
+  onSettings,
+}) => {
+  const { subscribe } = useWebSocket();
+
+  // Core state
+  const [credentials, setCredentials] = useState<CredentialWithLocation[]>([]);
+  const [vaults, setVaults] = useState<VaultInfo[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [filters, setFilters] = useState<VaultFilters>(DEFAULT_FILTERS);
+  const [loading, setLoading] = useState(true);
+  const [surface, setSurface] = useState<VaultSurface>('credentials');
+  // Persisted "latest accessed" values (updated on click/read).
+  const [latestAccessById, setLatestAccessById] = useState<Record<string, number>>({});
+  // Snapshot used by list ordering so rows do not jump while user is interacting.
+  const [latestAccessByIdForList, setLatestAccessByIdForList] = useState<Record<string, number>>({});
+  const [searchDockOpen, setSearchDockOpen] = useState(false);
+  const [searchDockFocused, setSearchDockFocused] = useState(false);
+
+  // Viewport + mobile interactions
+  const [viewportMode, setViewportMode] = useState<ViewportMode>(() => {
+    if (typeof window === 'undefined') return 'desktop';
+    return getViewportMode(window.innerWidth);
+  });
+  const { clearToken, setToken } = useAuth();
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
+
+  // Modal flags
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [createCredentialStart, setCreateCredentialStart] = useState<CreateCredentialStart>('api-key-form');
+  const [createPrefill, setCreatePrefill] = useState<CreatePrefill | null>(null);
+  const [editCredentialId, setEditCredentialId] = useState<string | null>(null);
+  const [showCreateVault, setShowCreateVault] = useState(false);
+  const [newVaultName, setNewVaultName] = useState('');
+  const [newVaultMode, setNewVaultMode] = useState<'linked' | 'independent'>('independent');
+  const [newVaultParentId, setNewVaultParentId] = useState('');
+  const [newVaultPassword, setNewVaultPassword] = useState('');
+  const [creatingVault, setCreatingVault] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [importTargetVaultId, setImportTargetVaultId] = useState('');
+  const [pendingImportVaultAutoSelect, setPendingImportVaultAutoSelect] = useState(false);
+  const [showGenerator, setShowGenerator] = useState(false);
+  const [unlockVaultTarget, setUnlockVaultTarget] = useState<VaultInfo | null>(null);
+  const [unlockVaultPassword, setUnlockVaultPassword] = useState('');
+  const [unlockingVault, setUnlockingVault] = useState(false);
+  const [unlockVaultError, setUnlockVaultError] = useState<string | null>(null);
+  const [deleteVaultTarget, setDeleteVaultTarget] = useState<VaultInfo | null>(null);
+  const [deletingVault, setDeletingVault] = useState(false);
+  const [deleteVaultError, setDeleteVaultError] = useState<string | null>(null);
+
+  // Agent actions (approvals + notifications)
+  const {
+    requests,
+    notifications,
+    dismissNotification,
+    resolveAction,
+    revokeToken = async () => false,
+    activeTokens = [],
+    inactiveTokens = [],
+    actionLoading,
+  } = useAgentActions({ autoFetch: true });
+
+  // Refs for keyboard navigation
+  const searchRef = useRef<HTMLInputElement>(null);
+  const searchDockRef = useRef<HTMLDivElement>(null);
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchDockCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isMobile = viewportMode === 'mobile';
+  const isTablet = viewportMode === 'tablet';
+
+  // Fetch data
+  const fetchData = useCallback(async () => {
+    try {
+      const [activeRes, archiveRes, deletedRes, vaultRes] = await Promise.all([
+        api.get<{ success: boolean; credentials: CredentialMeta[] }>(Api.Wallet, '/credentials', {
+          location: 'active',
+        }),
+        api.get<{ success: boolean; credentials: CredentialMeta[] }>(Api.Wallet, '/credentials', {
+          location: 'archive',
+        }),
+        api.get<{ success: boolean; credentials: CredentialMeta[] }>(Api.Wallet, '/credentials', {
+          location: 'recently_deleted',
+        }),
+        api.get<{ success: boolean; vaults: VaultInfo[] }>(Api.Wallet, '/vaults/credential'),
+      ]);
+
+      const withLocation = (
+        source: { success: boolean; credentials?: CredentialMeta[] },
+        location: CredentialLifecycleFilter,
+      ): CredentialWithLocation[] => (source.success ? (source.credentials || []).map((credential) => ({
+        ...credential,
+        location,
+      })) : []);
+
+      const mergedCredentials = [
+        ...withLocation(activeRes, 'active'),
+        ...withLocation(archiveRes, 'archive'),
+        ...withLocation(deletedRes, 'recently_deleted'),
+      ];
+      setCredentials(mergedCredentials);
+      setLatestAccessById((previous) => buildAccessMapForCredentials(mergedCredentials, previous));
+      setLatestAccessByIdForList((previous) => buildAccessMapForCredentials(mergedCredentials, previous));
+      if (vaultRes.success) setVaults(vaultRes.vaults);
+    } catch (err) {
+      console.error('[CredentialVault] fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const hydrated: Record<string, number> = {};
+
+      const rawLatestAccess = window.localStorage.getItem(LATEST_ACCESS_STORAGE_KEY);
+      if (rawLatestAccess) {
+        const parsedLatestAccess = JSON.parse(rawLatestAccess);
+        if (parsedLatestAccess && typeof parsedLatestAccess === 'object' && !Array.isArray(parsedLatestAccess)) {
+          for (const [credentialId, value] of Object.entries(parsedLatestAccess as Record<string, unknown>)) {
+            if (typeof value === 'number' && Number.isFinite(value) && value > 0) {
+              hydrated[credentialId] = value;
+            }
+          }
+        }
+      }
+
+      const rawLegacyRecent = window.localStorage.getItem(RECENT_ACCESS_STORAGE_KEY);
+      if (rawLegacyRecent) {
+        const parsedLegacyRecent = JSON.parse(rawLegacyRecent);
+        if (Array.isArray(parsedLegacyRecent)) {
+          const nowMs = Date.now();
+          parsedLegacyRecent
+            .filter((value): value is string => typeof value === 'string')
+            .slice(0, RECENT_ACCESS_MAX)
+            .forEach((credentialId, index) => {
+              if (!hydrated[credentialId]) {
+                hydrated[credentialId] = nowMs - index;
+              }
+            });
+        }
+      }
+
+      setLatestAccessById((previous) => ({ ...previous, ...hydrated }));
+      setLatestAccessByIdForList((previous) => ({ ...previous, ...hydrated }));
+    } catch {
+      // Ignore invalid local storage payloads.
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const sanitizedEntries = Object.entries(latestAccessById).filter(([, value]) => (
+      typeof value === 'number' && Number.isFinite(value) && value > 0
+    ));
+    const persistedLatestAccess = Object.fromEntries(sanitizedEntries);
+    window.localStorage.setItem(LATEST_ACCESS_STORAGE_KEY, JSON.stringify(persistedLatestAccess));
+
+    const orderedIds = sanitizedEntries
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, RECENT_ACCESS_MAX)
+      .map(([credentialId]) => credentialId);
+    window.localStorage.setItem(RECENT_ACCESS_STORAGE_KEY, JSON.stringify(orderedIds));
+  }, [latestAccessById]);
+
+  const pushRecentCredential = useCallback((credentialId: string, accessedAtMs = Date.now()) => {
+    setLatestAccessById((previous) => {
+      const normalizedAccessMs = Number.isFinite(accessedAtMs) && accessedAtMs > 0 ? accessedAtMs : Date.now();
+      if (previous[credentialId] === normalizedAccessMs) return previous;
+      return {
+        ...previous,
+        [credentialId]: normalizedAccessMs,
+      };
+    });
+  }, []);
+
+  const scheduleRealtimeRefresh = useCallback(() => {
+    if (refreshTimerRef.current) return;
+    refreshTimerRef.current = setTimeout(() => {
+      refreshTimerRef.current = null;
+      void fetchData();
+    }, 120);
+  }, [fetchData]);
+
+  useEffect(() => {
+    const unsubscribeChanged = subscribe(WALLET_EVENTS.CREDENTIAL_CHANGED, (event) => {
+      const data = (event as WalletEvent).data as CredentialChangedData;
+      if (!data?.credentialId) return;
+      scheduleRealtimeRefresh();
+    });
+
+    const unsubscribeAccessed = subscribe(WALLET_EVENTS.CREDENTIAL_ACCESSED, (event) => {
+      const data = (event as WalletEvent).data as CredentialAccessedData;
+      if (!data?.credentialId || data.allowed !== true) return;
+      pushRecentCredential(data.credentialId);
+    });
+
+    return () => {
+      unsubscribeChanged();
+      unsubscribeAccessed();
+      if (refreshTimerRef.current) {
+        clearTimeout(refreshTimerRef.current);
+        refreshTimerRef.current = null;
+      }
+      if (searchDockCloseTimerRef.current) {
+        clearTimeout(searchDockCloseTimerRef.current);
+        searchDockCloseTimerRef.current = null;
+      }
+    };
+  }, [scheduleRealtimeRefresh, subscribe, pushRecentCredential]);
+
+  useEffect(() => {
+    if (selectedId && !credentials.some((credential) => credential.id === selectedId)) {
+      setSelectedId(null);
+      setMobileDetailOpen(false);
+    }
+  }, [credentials, selectedId]);
+
+  useEffect(() => {
+    const handleResize = () => setViewportMode(getViewportMode(window.innerWidth));
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile) {
+      setMobileSidebarOpen(false);
+      setMobileDetailOpen(false);
+    }
+  }, [isMobile]);
+
+  useEffect(() => {
+    if (!searchDockOpen) return;
+
+    const handleOutsideClick = (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+      if (searchDockRef.current?.contains(target)) return;
+
+      if (searchDockCloseTimerRef.current) {
+        clearTimeout(searchDockCloseTimerRef.current);
+        searchDockCloseTimerRef.current = null;
+      }
+
+      setSearchDockFocused(false);
+      setSearchDockOpen(false);
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    document.addEventListener('touchstart', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('touchstart', handleOutsideClick);
+    };
+  }, [searchDockOpen]);
+
+  const primaryVaultId = useMemo(
+    () => vaults.find((vault) => vault.isPrimary)?.id || '',
+    [vaults],
+  );
+
+  const parentVaultOptions = useMemo(
+    () =>
+      vaults.map((vault) => ({
+        value: vault.id,
+        label: vault.name || (vault.isPrimary ? 'Primary' : `Vault ${vault.id.slice(0, 6)}`),
+      })),
+    [vaults],
+  );
+
+  useEffect(() => {
+    if (!showCreateVault) return;
+    setNewVaultParentId((current) => {
+      if (current && parentVaultOptions.some((option) => option.value === current)) {
+        return current;
+      }
+      return filters.vaultId || primaryVaultId || parentVaultOptions[0]?.value || '';
+    });
+  }, [filters.vaultId, parentVaultOptions, primaryVaultId, showCreateVault]);
+
+  useEffect(() => {
+    if (vaults.length === 0) {
+      setImportTargetVaultId('primary');
+      return;
+    }
+    const defaultImportVaultId = primaryVaultId || vaults[0].id || 'primary';
+    setImportTargetVaultId((current) => {
+      if (current && vaults.some((vault) => vault.id === current)) {
+        return current;
+      }
+      return defaultImportVaultId;
+    });
+  }, [primaryVaultId, vaults]);
+
+  // Derived data
+  const selectedVaultGroupIds = useMemo<Set<string> | null>(() => {
+    if (!filters.vaultId) return null;
+    const selectedVault = vaults.find((v) => v.id === filters.vaultId);
+    if (!selectedVault) return new Set([filters.vaultId]);
+    return new Set(collectVaultSubtreeIds(selectedVault.id, vaults));
+  }, [filters.vaultId, vaults]);
+
+  const applyVaultGroupFilter = useCallback((items: CredentialMeta[]): CredentialMeta[] => {
+    if (!selectedVaultGroupIds) return items;
+    return items.filter((credential) => selectedVaultGroupIds.has(credential.vaultId));
+  }, [selectedVaultGroupIds]);
+
+  const vaultNameById = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const vault of vaults) {
+      map.set(vault.id, (vault.name || (vault.isPrimary ? 'Primary' : `Vault ${vault.id.slice(0, 6)}`)).toLowerCase());
+    }
+    return map;
+  }, [vaults]);
+
+  const searchState = useMemo(() => {
+    const parsed = parseSearchQuery(filters.search);
+    const lifecycleOverride = parsed.lifecycleFilters.size > 0;
+    const queryTerms = parsed.terms;
+
+    let base = applyVaultGroupFilter(credentials);
+    base = lifecycleOverride
+      ? base.filter((credential) => parsed.lifecycleFilters.has(deriveCredentialLifecycle(credential)))
+      : base.filter((credential) => deriveCredentialLifecycle(credential) === filters.lifecycle);
+
+    if (filters.category !== 'all') {
+      base = base.filter((credential) => credential.type === filters.category);
+    }
+
+    if (filters.favoritesOnly || parsed.favoriteOnly) {
+      base = base.filter((credential) => !!credential.meta.favorite);
+    }
+
+    if (filters.tag) {
+      const sidebarTag = normalizeToken(filters.tag);
+      base = base.filter((credential) => (credential.meta.tags || []).some((tag) => normalizeToken(tag).includes(sidebarTag)));
+    }
+
+    if (parsed.tagFilters.length > 0) {
+      base = base.filter((credential) => {
+        const tags = (credential.meta.tags || []).map((tag) => normalizeToken(tag));
+        return parsed.tagFilters.every((tagFilter) => tags.some((tag) => tag.includes(tagFilter)));
+      });
+    }
+
+    if (parsed.typeFilters.length > 0) {
+      base = base.filter((credential) => parsed.typeFilters.some((typeFilter) => normalizeToken(credential.type).includes(typeFilter)));
+    }
+
+    if (parsed.vaultFilters.length > 0) {
+      base = base.filter((credential) => {
+        const vaultLabel = vaultNameById.get(credential.vaultId) || normalizeToken(credential.vaultId);
+        return parsed.vaultFilters.every((vaultFilter) => (
+          vaultLabel.includes(vaultFilter) || normalizeToken(credential.vaultId).includes(vaultFilter)
+        ));
+      });
+    }
+
+    const preTextFiltered = base;
+    let result = base;
+
+    if (parsed.fieldFilters.length > 0) {
+      result = result.filter((credential) => parsed.fieldFilters.every((filter) => (
+        credentialMatchesField(credential, filter.key, filter.value)
+      )));
+    }
+
+    if (queryTerms.length > 0) {
+      result = result.filter((credential) => {
+        const lifecycle = deriveCredentialLifecycle(credential);
+        const tags = (credential.meta.tags || []).map((tag) => normalizeToken(tag)).join(' ');
+        const vaultLabel = vaultNameById.get(credential.vaultId) || normalizeToken(credential.vaultId);
+        const metaContent = toSearchString(credential.meta);
+        const searchable = [
+          normalizeToken(credential.name),
+          normalizeToken(credential.id),
+          normalizeToken(credential.type),
+          tags,
+          vaultLabel,
+          metaContent,
+        ].join(' ');
+
+        return queryTerms.every((term) => {
+          if (term === 'favorite' || term === 'favourite' || term === 'fav') return !!credential.meta.favorite;
+          const lifecycleFromTerm = LIFECYCLE_TOKEN_MAP[term];
+          if (lifecycleFromTerm) return lifecycle === lifecycleFromTerm;
+          return searchable.includes(term);
+        });
+      });
+    }
+
+    return {
+      parsed,
+      preTextFiltered,
+      results: result,
+    };
+  }, [credentials, filters, applyVaultGroupFilter, vaultNameById]);
+
+  const filteredCredentials = searchState.results;
+
+  const searchFieldSuggestions = useMemo(() => {
+    const rawQuery = filters.search.trim();
+    if (!rawQuery || rawQuery.includes(':')) return [] as string[];
+    if (filteredCredentials.length > 0) return [] as string[];
+
+    const normalizedQuery = normalizeToken(rawQuery);
+    const hasNameMatch = searchState.preTextFiltered.some((credential) => (
+      normalizeToken(credential.name).includes(normalizedQuery)
+    ));
+    if (hasNameMatch) return [] as string[];
+
+    return DEFAULT_SEARCH_FIELD_KEYS.map((fieldKey) => `${fieldKey}:${rawQuery}`);
+  }, [filters.search, filteredCredentials.length, searchState.preTextFiltered]);
+
+  const categoryCounts = useMemo(() => {
+    // Counts apply to vault-group filtered (not category/search filtered) credentials
+    let base = applyVaultGroupFilter(credentials).filter((credential) => deriveCredentialLifecycle(credential) === filters.lifecycle);
+    if (filters.tag) {
+      const tag = filters.tag;
+      base = base.filter((c) => c.meta.tags?.includes(tag));
+    }
+    if (filters.favoritesOnly) {
+      base = base.filter((c) => c.meta.favorite);
+    }
+    return {
+      all: base.length,
+      login: base.filter((c) => c.type === 'login').length,
+      card: base.filter((c) => c.type === 'card').length,
+      note: base.filter((c) => c.type === 'note').length,
+      plain_note: base.filter((c) => c.type === 'plain_note').length,
+      hot_wallet: base.filter((c) => c.type === 'hot_wallet').length,
+      api: base.filter((c) => c.type === 'api').length,
+      apikey: base.filter((c) => c.type === 'apikey').length,
+      custom: base.filter((c) => c.type === 'custom').length,
+      passkey: base.filter((c) => c.type === 'passkey').length,
+      oauth2: base.filter((c) => c.type === 'oauth2').length,
+      ssh: base.filter((c) => c.type === 'ssh').length,
+      gpg: base.filter((c) => c.type === 'gpg').length,
+    };
+  }, [credentials, filters.lifecycle, filters.tag, filters.favoritesOnly, applyVaultGroupFilter]);
+
+  const allTags = useMemo(() => {
+    const tagSet = new Set<string>();
+    applyVaultGroupFilter(credentials)
+      .filter((credential) => deriveCredentialLifecycle(credential) === filters.lifecycle)
+      .forEach((credential) => credential.meta.tags?.forEach((tag) => tagSet.add(tag)));
+    return Array.from(tagSet).sort();
+  }, [credentials, filters.lifecycle, applyVaultGroupFilter]);
+
+  const favoritesCount = useMemo(() => {
+    const base = applyVaultGroupFilter(credentials).filter((credential) => deriveCredentialLifecycle(credential) === filters.lifecycle);
+    return base.filter((c) => c.meta.favorite).length;
+  }, [credentials, filters.lifecycle, applyVaultGroupFilter]);
+
+  const selectedCredential = useMemo(
+    () => credentials.find((c) => c.id === selectedId) || null,
+    [credentials, selectedId],
+  );
+
+  const selectedVaultName = useMemo(() => {
+    if (!selectedCredential) return '';
+    const vault = vaults.find((v) => v.id === selectedCredential.vaultId);
+    if (vault) return vault.name || (vault.isPrimary ? 'Primary' : vault.id.slice(0, 8));
+    return selectedCredential.vaultId === 'primary'
+      ? 'Primary'
+      : selectedCredential.vaultId.slice(0, 8);
+  }, [selectedCredential, vaults]);
+  const selectedCredentialLifecycle = useMemo<CredentialLifecycleFilter>(
+    () => (selectedCredential ? deriveCredentialLifecycle(selectedCredential) : filters.lifecycle),
+    [selectedCredential, filters.lifecycle],
+  );
+
+  const recentlyAccessedCredentials = useMemo(
+    () => [...credentials]
+      .sort((a, b) => (
+        effectiveCredentialAccessTimestamp(b, latestAccessById)
+        - effectiveCredentialAccessTimestamp(a, latestAccessById)
+      ))
+      .slice(0, RECENT_ACCESS_MAX),
+    [credentials, latestAccessById],
+  );
+
+  const closeSearchDockSoon = useCallback((delayMs = 120) => {
+    if (searchDockCloseTimerRef.current) clearTimeout(searchDockCloseTimerRef.current);
+    searchDockCloseTimerRef.current = setTimeout(() => {
+      if (!searchDockFocused) setSearchDockOpen(false);
+      searchDockCloseTimerRef.current = null;
+    }, delayMs);
+  }, [searchDockFocused]);
+
+  const unlockVaultDisplayName = useMemo(() => {
+    if (!unlockVaultTarget) return 'Vault';
+    return unlockVaultTarget.name || (unlockVaultTarget.isPrimary ? 'Primary' : `Vault ${unlockVaultTarget.id.slice(0, 6)}`);
+  }, [unlockVaultTarget]);
+  const deleteVaultDisplayName = useMemo(() => {
+    if (!deleteVaultTarget) return 'Vault';
+    return deleteVaultTarget.name || (deleteVaultTarget.isPrimary ? 'Primary' : `Vault ${deleteVaultTarget.id.slice(0, 6)}`);
+  }, [deleteVaultTarget]);
+
+  const hasActiveFilters = useMemo(
+    () =>
+      filters.vaultId !== null ||
+      filters.category !== 'all' ||
+      filters.tag !== null ||
+      filters.search.trim() !== '' ||
+      filters.favoritesOnly,
+    [filters],
+  );
+
+  // Handlers
+  const handleFilterChange = useCallback((partial: Partial<VaultFilters>) => {
+    setFilters((prev) => ({ ...prev, ...partial }));
+  }, []);
+
+  const clearAllFilters = useCallback(() => {
+    setFilters(DEFAULT_FILTERS);
+  }, []);
+
+  const handleLock = useCallback(async () => {
+    try {
+      await api.post(Api.Wallet, '/lock', {});
+    } catch (err) {
+      console.error('[CredentialVault] lock error:', err);
+    }
+    clearToken();
+    onLock();
+  }, [onLock, clearToken]);
+
+  const handleOpenUnlockVault = useCallback((vault: VaultInfo) => {
+    setUnlockVaultTarget(vault);
+    setUnlockVaultPassword('');
+    setUnlockVaultError(null);
+  }, []);
+
+  const handleCloseUnlockVault = useCallback(() => {
+    setUnlockVaultTarget(null);
+    setUnlockVaultPassword('');
+    setUnlockVaultError(null);
+  }, []);
+
+  const handleUnlockVault = useCallback(async () => {
+    if (!unlockVaultTarget || !unlockVaultPassword) return;
+
+    setUnlockingVault(true);
+    setUnlockVaultError(null);
+    try {
+      const result = await unlockWallet(unlockVaultPassword, unlockVaultTarget.id);
+      if (result.token) {
+        setToken(result.token);
+      }
+      await fetchData();
+      setFilters((prev) => ({
+        ...prev,
+        vaultId: unlockVaultTarget.id,
+        lifecycle: 'active',
+        tag: null,
+      }));
+      handleCloseUnlockVault();
+    } catch (err) {
+      setUnlockVaultError((err as Error).message || 'Failed to unlock vault');
+    } finally {
+      setUnlockingVault(false);
+    }
+  }, [unlockVaultPassword, unlockVaultTarget, setToken, fetchData, handleCloseUnlockVault]);
+
+  const handleLockVault = useCallback(async (vaultId: string) => {
+    try {
+      await api.post(Api.Wallet, `/vaults/credential/${encodeURIComponent(vaultId)}/lock`, {});
+      await fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] lock vault error:', err);
+    }
+  }, [fetchData]);
+
+  const handleOpenDeleteVault = useCallback((vault: VaultInfo) => {
+    setDeleteVaultTarget(vault);
+    setDeleteVaultError(null);
+  }, []);
+
+  const handleCloseDeleteVault = useCallback(() => {
+    if (deletingVault) return;
+    setDeleteVaultTarget(null);
+    setDeleteVaultError(null);
+  }, [deletingVault]);
+
+  const handleDeleteVault = useCallback(async () => {
+    if (!deleteVaultTarget) return;
+
+    setDeletingVault(true);
+    setDeleteVaultError(null);
+    try {
+      await api.delete(Api.Wallet, `/vaults/credential/${encodeURIComponent(deleteVaultTarget.id)}`);
+      setFilters((prev) => (prev.vaultId === deleteVaultTarget.id ? { ...prev, vaultId: null, lifecycle: 'active', tag: null } : prev));
+      if (selectedCredential?.vaultId === deleteVaultTarget.id) {
+        setSelectedId(null);
+        setMobileDetailOpen(false);
+      }
+      await fetchData();
+      setDeleteVaultTarget(null);
+    } catch (err) {
+      setDeleteVaultError((err as Error).message || 'Failed to delete vault');
+    } finally {
+      setDeletingVault(false);
+    }
+  }, [deleteVaultTarget, fetchData, selectedCredential]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedId) return;
+    try {
+      const location = encodeURIComponent(selectedCredentialLifecycle);
+      await api.delete(Api.Wallet, `/credentials/${selectedId}?location=${location}`);
+      setSelectedId(null);
+      setMobileDetailOpen(false);
+      fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] delete error:', err);
+    }
+  }, [selectedId, selectedCredentialLifecycle, fetchData]);
+
+  const handleRestore = useCallback(async () => {
+    if (!selectedId || selectedCredentialLifecycle === 'active') return;
+    try {
+      await api.post(Api.Wallet, `/credentials/${selectedId}/restore`, { from: selectedCredentialLifecycle });
+      setSelectedId(null);
+      setMobileDetailOpen(false);
+      fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] restore error:', err);
+    }
+  }, [selectedId, selectedCredentialLifecycle, fetchData]);
+
+  const handleDuplicate = useCallback(async () => {
+    if (!selectedId) return;
+    try {
+      const res = await api.post<{ success: boolean; credential?: { id: string } }>(Api.Wallet, `/credentials/${selectedId}/duplicate`);
+      await fetchData();
+      if (res.credential) setSelectedId(res.credential.id);
+    } catch (err) {
+      console.error('[CredentialVault] duplicate error:', err);
+    }
+  }, [selectedId, fetchData]);
+
+  const resetCreateVaultDraft = useCallback(() => {
+    setNewVaultName('');
+    setNewVaultMode('independent');
+    setNewVaultParentId('');
+    setNewVaultPassword('');
+  }, []);
+
+  const handleCloseCreateVault = useCallback(() => {
+    setShowCreateVault(false);
+    setPendingImportVaultAutoSelect(false);
+    resetCreateVaultDraft();
+  }, [resetCreateVaultDraft]);
+
+  const handleCreateVault = useCallback(async () => {
+    if (!newVaultName.trim()) return;
+    if (newVaultMode === 'independent' && newVaultPassword.length < 8) return;
+    if (newVaultMode === 'linked' && !newVaultParentId) return;
+
+    setCreatingVault(true);
+    try {
+      const payload: Record<string, unknown> = {
+        name: newVaultName.trim(),
+        mode: newVaultMode,
+      };
+
+      if (newVaultMode === 'linked') {
+        payload.parentVaultId = newVaultParentId;
+      } else {
+        const connectRes = await api.get<{ publicKey: string }>(Api.Wallet, '/auth/connect');
+        payload.encrypted = await encryptPassword(newVaultPassword, connectRes.publicKey);
+      }
+
+      const createResult = await api.post<{ success: boolean; vault?: { id?: string } }>(
+        Api.Wallet,
+        '/vaults/credential',
+        payload,
+      );
+      const createdVaultId = createResult?.vault?.id;
+      if (pendingImportVaultAutoSelect && createdVaultId) {
+        setImportTargetVaultId(createdVaultId);
+      }
+      setShowCreateVault(false);
+      setPendingImportVaultAutoSelect(false);
+      resetCreateVaultDraft();
+      await fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] create vault error:', err);
+    } finally {
+      setCreatingVault(false);
+    }
+  }, [
+    newVaultName,
+    newVaultMode,
+    newVaultParentId,
+    newVaultPassword,
+    pendingImportVaultAutoSelect,
+    fetchData,
+    resetCreateVaultDraft,
+  ]);
+
+  const handleOpenCreateVault = useCallback((parentVaultId?: string) => {
+    if (parentVaultId) {
+      setNewVaultMode('linked');
+      setNewVaultParentId(parentVaultId);
+    } else {
+      setNewVaultMode('independent');
+      setNewVaultParentId('');
+      setNewVaultPassword('');
+    }
+    setShowCreateVault(true);
+  }, []);
+
+  const handleOpenImportModal = useCallback(() => {
+    setImportTargetVaultId(primaryVaultId || vaults[0]?.id || 'primary');
+    setShowImportModal(true);
+  }, [primaryVaultId, vaults]);
+
+  const handleRequestCreateVaultForImport = useCallback(() => {
+    setPendingImportVaultAutoSelect(true);
+    handleOpenCreateVault();
+  }, [handleOpenCreateVault]);
+
+  const handleOpenCreateCredential = useCallback((
+    start: CreateCredentialStart = 'api-key-form',
+    options?: { applyFilters?: boolean; prefillType?: CreatePrefill['type'] },
+  ) => {
+    const nextPrefill: CreatePrefill = {};
+
+    if (filters.vaultId) {
+      nextPrefill.vaultId = filters.vaultId;
+    }
+
+    if (options?.applyFilters) {
+      if (filters.tag) nextPrefill.tags = [filters.tag];
+      if (options.prefillType) {
+        nextPrefill.type = options.prefillType;
+      } else if (filters.category && filters.category !== 'all') {
+        nextPrefill.type = filters.category as CreatePrefill['type'];
+      }
+    } else if (options?.prefillType) {
+      nextPrefill.type = options.prefillType;
+    }
+
+    setEditCredentialId(null);
+    setCreateCredentialStart(start);
+    setCreatePrefill(Object.keys(nextPrefill).length > 0 ? nextPrefill : null);
+    setShowCreateForm(true);
+  }, [filters]);
+
+  const handleFormSaved = useCallback(async (credentialId?: string) => {
+    setShowCreateForm(false);
+    setEditCredentialId(null);
+    setCreatePrefill(null);
+    await fetchData();
+    if (credentialId) {
+      setSelectedId(credentialId);
+      pushRecentCredential(credentialId);
+      if (isMobile) setMobileDetailOpen(true);
+    }
+  }, [fetchData, isMobile, pushRecentCredential]);
+
+  const handleSelectCredential = useCallback(
+    (id: string) => {
+      setSelectedId(id);
+      pushRecentCredential(id);
+      if (isMobile) {
+        setMobileDetailOpen(true);
+      }
+    },
+    [isMobile, pushRecentCredential],
+  );
+
+  const handleApplySearchSuggestion = useCallback((query: string) => {
+    handleFilterChange({ search: query });
+    setSearchDockOpen(false);
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, [handleFilterChange]);
+
+  const handleSelectRecentFromDock = useCallback((credential: CredentialWithLocation) => {
+    handleFilterChange({ search: credential.name });
+    handleSelectCredential(credential.id);
+    setSearchDockOpen(false);
+  }, [handleFilterChange, handleSelectCredential]);
+
+  const quickSearchHints = useMemo(() => {
+    if (filters.search.trim()) return [] as string[];
+    return ['tag:work', 'type:login', 'vault:primary', 'favorite', 'archived', 'recently_deleted'];
+  }, [filters.search]);
+
+  const showSearchDockPanel = (searchDockOpen || searchDockFocused) && filters.search.trim() === '';
+
+  // Keyboard shortcuts
+  useVaultKeyboardShortcuts({
+    filteredCredentials,
+    selectedId,
+    isMobile,
+    searchRef,
+    onCreateCredential: () => handleOpenCreateCredential('api-key-form'),
+    setSelectedId,
+    setMobileDetailOpen,
+  });
+
+  if (loading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center bg-[var(--color-background,#f4f4f5)] relative isolate vault-surface">
+        <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+          <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
+          <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+        </div>
+        <div className="flex flex-col items-center relative z-10">
+          <div className="w-6 h-6 border-2 border-[var(--color-border,#d4d4d8)] border-t-[var(--color-text,#0a0a0a)] animate-spin" />
+          <div className="mt-4 font-mono text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest">
+            LOADING VAULT
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative isolate h-screen w-screen overflow-hidden flex flex-col bg-[var(--color-background,#f4f4f5)] vault-surface">
+      {/* Background — sterile tyvek field (matches /app) */}
+      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+        <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
+        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+        <div className="absolute bottom-[5%] right-[5%] opacity-[0.03] select-none">
+          <div className="text-[12vw] font-black leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">AURAMAXX</div>
+        </div>
+        <div className="absolute top-10 left-[200px] w-24 h-24 border-l-4 border-t-4 border-[var(--color-text,#0a0a0a)] opacity-10">
+          <div className="absolute top-2 left-2 w-3 h-3 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+        <div className="absolute bottom-10 right-10 w-24 h-24 border-r-4 border-b-4 border-[var(--color-text,#0a0a0a)] opacity-10 flex items-end justify-end">
+          <div className="absolute bottom-2 right-2 w-3 h-3 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="relative z-10 flex-1 flex overflow-hidden">
+        {/* Desktop sidebar */}
+        {!isMobile && !isTablet && (
+          <VaultSidebar
+            vaults={vaults}
+            filters={filters}
+            categoryCounts={categoryCounts}
+            tags={allTags}
+            favoritesCount={favoritesCount}
+            onFilterChange={handleFilterChange}
+            onLock={handleLock}
+            onLockVault={handleLockVault}
+            onCreateCredential={(start, prefillType) => handleOpenCreateCredential(
+              start === 'type-picker' ? 'type-picker' : 'api-key-form',
+              prefillType ? { prefillType } : undefined,
+            )}
+            onCreateVault={handleOpenCreateVault}
+            mode="desktop"
+            notifications={notifications}
+            onDismissNotification={dismissNotification}
+            pendingActionCount={notifications.filter((n) => n.status === 'pending' && n.type !== 'notify').length}
+            surface={surface}
+            onSurfaceChange={setSurface}
+            onSettings={onSettings}
+            onDeleteVault={handleOpenDeleteVault}
+          />
+        )}
+
+        {/* Tablet: thin strip with logo + hamburger */}
+        {isTablet && (
+          <div className="h-full w-12 shrink-0 border-r border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#f4f4f2)] flex flex-col items-center pt-3 gap-3 relative z-10">
+            <img src="/logo.webp" alt="Aura" className="w-6 h-6 object-contain" />
+            <button
+              type="button"
+              onClick={() => setMobileSidebarOpen(true)}
+              className="flex items-center justify-center w-7 h-7 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors rounded"
+              aria-label="Open sidebar"
+              title="Open sidebar"
+            >
+              <Menu size={14} />
+            </button>
+          </div>
+        )}
+
+        {surface === 'audit' ? (
+          <div className="flex-1 h-full overflow-hidden">
+            <AuditConsole />
+          </div>
+        ) : surface === 'apiKeys' ? (
+          <div className="flex-1 h-full overflow-hidden">
+            <ApiKeysConsole
+              requests={requests}
+              activeTokens={activeTokens}
+              inactiveTokens={inactiveTokens}
+              actionLoading={actionLoading}
+              onResolveAction={resolveAction}
+              onRevokeToken={revokeToken}
+              vaults={vaults}
+            />
+          </div>
+        ) : (
+          <>
+            {/* Credential list */}
+            <CredentialList
+              credentials={filteredCredentials}
+              latestAccessById={latestAccessByIdForList}
+              selectedId={selectedId}
+              searchQuery={filters.search}
+              onSearchChange={(search) => handleFilterChange({ search })}
+              onSelect={handleSelectCredential}
+              onAdd={() => handleOpenCreateCredential('api-key-form')}
+              onCreateWithFilter={hasActiveFilters ? () => handleOpenCreateCredential('api-key-form', { applyFilters: true }) : undefined}
+              canAdd={filters.lifecycle === 'active'}
+              onImport={handleOpenImportModal}
+              canImport={filters.lifecycle === 'active'}
+              onOpenGenerator={() => setShowGenerator(true)}
+              onClearFilters={clearAllFilters}
+              hasActiveFilters={hasActiveFilters}
+              fieldSearchSuggestions={searchFieldSuggestions}
+              onApplySearchSuggestion={handleApplySearchSuggestion}
+              searchInputRef={searchRef}
+              showSearch={false}
+              className={
+                isMobile
+                  ? 'flex-1 h-full flex flex-col pb-14 min-w-0'
+                  : isTablet
+                    ? 'w-[300px] h-full flex flex-col pb-14 border-r border-[var(--color-border,#d4d4d8)]'
+                    : 'w-[300px] h-full flex flex-col pb-14 border-r border-[var(--color-border,#d4d4d8)]'
+              }
+              leadingAction={
+                isMobile ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    icon={<Menu size={12} />}
+                    onClick={() => setMobileSidebarOpen(true)}
+                    className="!px-1.5 !h-8 !w-8"
+                    aria-label="Open sidebar"
+                    title="Open sidebar"
+                  />
+                ) : undefined
+              }
+            />
+
+              {/* Detail panel (desktop + tablet) */}
+              {!isMobile && (
+                <div className="flex-1 h-full overflow-y-auto pb-14">
+                  {selectedCredential ? (
+                    <CredentialDetail
+                      credential={selectedCredential}
+                      vaultName={selectedVaultName}
+                      lifecycle={selectedCredentialLifecycle}
+                      onEdit={() => setEditCredentialId(selectedCredential.id)}
+                      onDelete={handleDelete}
+                      onRestore={handleRestore}
+                      onDuplicate={handleDuplicate}
+                    />
+                  ) : (
+                    <CredentialEmpty
+                      variant={
+                        filters.lifecycle !== 'active'
+                          ? 'empty-lifecycle'
+                          : credentials.filter((credential) => deriveCredentialLifecycle(credential) === 'active').length === 0
+                            ? 'empty-vault'
+                            : 'no-selection'
+                      }
+                      onAdd={filters.lifecycle === 'active' ? () => handleOpenCreateCredential('api-key-form') : undefined}
+                    />
+                  )}
+                </div>
+              )}
+          </>
+        )}
+
+        {surface === 'credentials' && (
+          <div
+            className={`absolute bottom-0 z-30 border-t border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)]/95 backdrop-blur-sm ${
+              isMobile
+                ? 'left-0 right-0 w-full'
+                : `${isTablet ? 'left-12' : 'left-[200px]'} right-0`
+            }`}
+          >
+            <div className="w-full px-3 py-2.5">
+              <div ref={searchDockRef} className="relative w-full">
+                {showSearchDockPanel && (
+                  <div
+                    data-testid="search-dock-panel"
+                    className="absolute bottom-full left-0 w-full mb-1 bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-mech max-h-56 overflow-y-auto z-20"
+                  >
+                    {recentlyAccessedCredentials.length > 0 && (
+                      <>
+                        <div className="px-3 py-2 font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] border-b border-[var(--color-border-muted,#e5e7eb)] flex items-center gap-1.5">
+                          <Clock3 size={11} />
+                          Recently Accessed
+                        </div>
+                        {recentlyAccessedCredentials.map((credential) => (
+                          <button
+                            key={credential.id}
+                            type="button"
+                            className="w-full text-left px-4 py-2.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] font-mono text-xs border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0"
+                            onMouseDown={(event) => {
+                              event.preventDefault();
+                              handleSelectRecentFromDock(credential);
+                            }}
+                          >
+                            <div className="text-[var(--color-text,#0a0a0a)] truncate">{credential.name}</div>
+                            <div className="text-[9px] uppercase tracking-wider truncate">
+                              {vaultNameById.get(credential.vaultId) || credential.vaultId} · {deriveCredentialLifecycle(credential)}
+                            </div>
+                          </button>
+                        ))}
+                      </>
+                    )}
+
+                    {recentlyAccessedCredentials.length === 0 && (
+                      <div>
+                        <div className="px-3 py-2 font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] border-b border-[var(--color-border-muted,#e5e7eb)]">
+                          Try Structured Search
+                        </div>
+                        {quickSearchHints.map((hint) => (
+                          <button
+                            key={hint}
+                            type="button"
+                            className="w-full text-left px-4 py-2.5 text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] font-mono text-xs border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-2 group/item"
+                            onMouseDown={(event) => {
+                              event.preventDefault();
+                              handleApplySearchSuggestion(hint);
+                            }}
+                          >
+                            <div className="w-1.5 h-1.5 flex-shrink-0 bg-[var(--color-border,#d4d4d8)] group-hover/item:bg-[var(--color-text,#0a0a0a)]" />
+                            <span className="min-w-0 flex-1 truncate">{hint}</span>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <TextInput
+                  compact
+                  leftElement={<Search size={12} />}
+                  placeholder="Search..."
+                  value={filters.search}
+                  onChange={(event) => handleFilterChange({ search: event.target.value })}
+                  inputRef={searchRef}
+                  onFocus={() => {
+                    setSearchDockFocused(true);
+                  }}
+                  onClick={() => {
+                    if (searchDockCloseTimerRef.current) {
+                      clearTimeout(searchDockCloseTimerRef.current);
+                      searchDockCloseTimerRef.current = null;
+                    }
+                    setSearchDockOpen(true);
+                  }}
+                  onBlur={() => {
+                    setSearchDockFocused(false);
+                    closeSearchDockSoon();
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Agent action approval footer */}
+      <HumanActionBar requests={requests} resolveAction={resolveAction} actionLoading={actionLoading} />
+
+      {/* Mobile detail drawer */}
+      {isMobile && (
+        <Drawer
+          isOpen={mobileDetailOpen && selectedCredential != null}
+          onClose={() => setMobileDetailOpen(false)}
+          title={selectedCredential?.name || 'Credential'}
+          subtitle={selectedVaultName || 'Credential_Detail'}
+          width="full"
+        >
+          {selectedCredential ? (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setMobileDetailOpen(false)}
+                className="mb-3"
+              >
+                BACK
+              </Button>
+              <CredentialDetail
+                credential={selectedCredential}
+                vaultName={selectedVaultName}
+                lifecycle={selectedCredentialLifecycle}
+                onEdit={() => setEditCredentialId(selectedCredential.id)}
+                onDelete={handleDelete}
+                onRestore={handleRestore}
+                onDuplicate={handleDuplicate}
+              />
+            </>
+          ) : (
+            <CredentialEmpty
+              variant={
+                filters.lifecycle !== 'active'
+                  ? 'empty-lifecycle'
+                  : credentials.length === 0
+                    ? 'empty-vault'
+                    : 'no-selection'
+              }
+              onAdd={filters.lifecycle === 'active' ? () => handleOpenCreateCredential('api-key-form') : undefined}
+            />
+          )}
+        </Drawer>
+      )}
+
+      {/* Mobile / tablet sidebar overlay */}
+      {(isMobile || isTablet) && mobileSidebarOpen && (
+        <div className="absolute inset-0 z-40">
+          <button
+            type="button"
+            aria-label="Close sidebar"
+            onClick={() => setMobileSidebarOpen(false)}
+            className="absolute inset-0 bg-[var(--color-text,#0a0a0a)]/20"
+          />
+          <div className="absolute left-0 top-0 h-full">
+            <VaultSidebar
+              vaults={vaults}
+              filters={filters}
+              categoryCounts={categoryCounts}
+              tags={allTags}
+              favoritesCount={favoritesCount}
+              onFilterChange={handleFilterChange}
+              onLock={handleLock}
+              onLockVault={handleLockVault}
+              onCreateCredential={(start, prefillType) => handleOpenCreateCredential(
+                start === 'type-picker' ? 'type-picker' : 'api-key-form',
+                prefillType ? { prefillType } : undefined,
+              )}
+              onCreateVault={handleOpenCreateVault}
+              mode="mobile"
+              onNavigate={() => setMobileSidebarOpen(false)}
+              notifications={notifications}
+              onDismissNotification={dismissNotification}
+              pendingActionCount={notifications.filter((n) => n.status === 'pending' && n.type !== 'notify').length}
+              surface={surface}
+              onSurfaceChange={setSurface}
+              onSettings={onSettings}
+              onDeleteVault={handleOpenDeleteVault}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Delete vault modal */}
+      <Modal
+        isOpen={deleteVaultTarget != null}
+        onClose={handleCloseDeleteVault}
+        title={`Delete ${deleteVaultDisplayName}?`}
+        size="sm"
+        footer={(
+          <div className="flex gap-2 justify-end">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCloseDeleteVault}
+              disabled={deletingVault}
+            >
+              CANCEL
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={handleDeleteVault}
+              loading={deletingVault}
+            >
+              DELETE
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-3">
+          <div className="text-[10px] text-[var(--color-text-muted,#6b7280)]">
+            This will permanently delete the vault and its credentials.
+          </div>
+          {deleteVaultError && (
+            <div className="text-[10px] text-[var(--color-danger,#ef4444)] border border-[var(--color-danger,#ef4444)]/30 bg-[var(--color-danger,#ef4444)]/10 px-3 py-2">
+              {deleteVaultError}
+            </div>
+          )}
+        </div>
+      </Modal>
+
+      {/* Unlock vault modal */}
+      <Modal
+        isOpen={unlockVaultTarget != null}
+        onClose={handleCloseUnlockVault}
+        title={`Unlock ${unlockVaultDisplayName}`}
+        size="sm"
+        footer={(
+          <div className="flex gap-2 justify-end">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCloseUnlockVault}
+            >
+              CANCEL
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleUnlockVault}
+              loading={unlockingVault}
+              disabled={!unlockVaultPassword}
+            >
+              UNLOCK
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <TextInput
+            label="Vault Password"
+            type="password"
+            placeholder="Enter vault password"
+            value={unlockVaultPassword}
+            onChange={(e) => setUnlockVaultPassword(e.target.value)}
+            autoFocus
+          />
+          {unlockVaultError && (
+            <div className="text-[10px] text-[var(--color-danger,#ef4444)] border border-[var(--color-danger,#ef4444)]/30 bg-[var(--color-danger,#ef4444)]/10 px-3 py-2">
+              {unlockVaultError}
+            </div>
+          )}
+        </div>
+      </Modal>
+
+      {/* Create / Edit credential modal */}
+      <CredentialForm
+        isOpen={showCreateForm || !!editCredentialId}
+        onClose={() => {
+          setShowCreateForm(false);
+          setEditCredentialId(null);
+          setCreatePrefill(null);
+        }}
+        onSaved={handleFormSaved}
+        editCredentialId={editCredentialId ?? undefined}
+        vaults={vaults}
+        createStartStep={createCredentialStart === 'type-picker' ? 'type' : 'form'}
+        createStartType={createCredentialStart === 'type-picker' ? undefined : 'apikey'}
+        createPrefill={createPrefill ?? undefined}
+      />
+
+      {/* Import credentials modal */}
+      <ImportCredentialsModal
+        isOpen={showImportModal}
+        onClose={() => setShowImportModal(false)}
+        onComplete={fetchData}
+        vaults={vaults}
+        selectedVaultId={importTargetVaultId}
+        onSelectedVaultIdChange={setImportTargetVaultId}
+        onAddVault={handleRequestCreateVaultForImport}
+        walletBaseUrl={getWalletBaseUrl()}
+      />
+
+      {/* Password generator modal */}
+      <PasswordGenerator
+        isOpen={showGenerator}
+        onClose={() => setShowGenerator(false)}
+        onUse={(password) => {
+          setShowGenerator(false);
+          navigator.clipboard.writeText(password).catch(() => {});
+        }}
+      />
+
+      {/* Create vault modal */}
+      <Modal
+        isOpen={showCreateVault}
+        onClose={handleCloseCreateVault}
+        title="New Vault"
+        size="md"
+        footer={(
+          <div className="flex gap-2 justify-end">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCloseCreateVault}
+            >
+              CANCEL
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleCreateVault}
+              loading={creatingVault}
+              disabled={
+                !newVaultName.trim()
+                || (newVaultMode === 'linked' && !newVaultParentId)
+                || (newVaultMode === 'independent' && newVaultPassword.length < 8)
+              }
+            >
+              CREATE
+            </Button>
+          </div>
+        )}
+      >
+        <div className="space-y-4">
+          <TextInput
+            label="Vault Name"
+            placeholder="e.g. Work, Personal"
+            value={newVaultName}
+            onChange={(e) => setNewVaultName(e.target.value)}
+            autoFocus
+          />
+          <FilterDropdown
+            label="Vault Type"
+            options={VAULT_MODE_OPTIONS}
+            value={newVaultMode}
+            onChange={(value) => {
+              const mode = value as 'linked' | 'independent';
+              setNewVaultMode(mode);
+              if (mode !== 'independent') {
+                setNewVaultPassword('');
+              }
+            }}
+            compact
+          />
+          {newVaultMode === 'linked' && (
+            <FilterDropdown
+              label="Parent Vault"
+              options={parentVaultOptions}
+              value={newVaultParentId}
+              onChange={setNewVaultParentId}
+              disabled={parentVaultOptions.length === 0}
+              compact
+            />
+          )}
+          {newVaultMode === 'independent' && (
+            <TextInput
+              label="Vault Password"
+              type="password"
+              placeholder="At least 8 characters"
+              value={newVaultPassword}
+              onChange={(e) => setNewVaultPassword(e.target.value)}
+            />
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+};