auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialVault.tsx

@@ -0,0 +1,754 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Menu } from 'lucide-react';
+import { useAuth } from '@/context/AuthContext';
+import { api, Api, getWalletBaseUrl } from '@/lib/api';
+import { encryptPassword } from '@/lib/crypto';
+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 { HumanActionBar } from '@/components/HumanActionBar';
+import { useAgentActions } from '@/hooks/useAgentActions';
+import { useWebSocket } from '@/context/WebSocketContext';
+import { WALLET_EVENTS, type WalletEvent, type CredentialChangedData } from '@/lib/events';
+import type { CredentialMeta, VaultInfo, VaultFilters } from './types';
+
+interface CredentialVaultProps {
+  onLock: () => void;
+  onSettings?: () => void;
+}
+
+type ViewportMode = 'desktop' | 'tablet' | 'mobile';
+type VaultSurface = 'credentials' | 'audit' | 'apiKeys';
+
+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: 'Linked (primary unlock)' },
+  { value: 'independent', label: 'Independent (separate password)' },
+];
+
+function getViewportMode(width: number): ViewportMode {
+  if (width < 768) return 'mobile';
+  if (width < 1024) return 'tablet';
+  return 'desktop';
+}
+
+export const CredentialVault: React.FC<CredentialVaultProps> = ({ onLock, onSettings }) => {
+  const { clearToken } = useAuth();
+  const { subscribe } = useWebSocket();
+
+  // Core state
+  const [credentials, setCredentials] = useState<CredentialMeta[]>([]);
+  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');
+
+  // Viewport + mobile interactions
+  const [viewportMode, setViewportMode] = useState<ViewportMode>(() => {
+    if (typeof window === 'undefined') return 'desktop';
+    return getViewportMode(window.innerWidth);
+  });
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
+
+  // Modal flags
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [editCredentialId, setEditCredentialId] = useState<string | null>(null);
+  const [showCreateVault, setShowCreateVault] = useState(false);
+  const [newVaultName, setNewVaultName] = useState('');
+  const [newVaultMode, setNewVaultMode] = useState<'linked' | 'independent'>('linked');
+  const [newVaultPassword, setNewVaultPassword] = useState('');
+  const [creatingVault, setCreatingVault] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [showGenerator, setShowGenerator] = useState(false);
+
+  // 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 refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isMobile = viewportMode === 'mobile';
+  const isTablet = viewportMode === 'tablet';
+
+  // Fetch data
+  const fetchData = useCallback(async () => {
+    try {
+      const [credRes, vaultRes] = await Promise.all([
+        api.get<{ success: boolean; credentials: CredentialMeta[] }>(Api.Wallet, '/credentials', {
+          location: filters.lifecycle,
+        }),
+        api.get<{ success: boolean; vaults: VaultInfo[] }>(Api.Wallet, '/vaults/credential'),
+      ]);
+      if (credRes.success) setCredentials(credRes.credentials);
+      if (vaultRes.success) setVaults(vaultRes.vaults);
+    } catch (err) {
+      console.error('[CredentialVault] fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters.lifecycle]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const scheduleRealtimeRefresh = useCallback(() => {
+    if (refreshTimerRef.current) return;
+    refreshTimerRef.current = setTimeout(() => {
+      refreshTimerRef.current = null;
+      void fetchData();
+    }, 120);
+  }, [fetchData]);
+
+  useEffect(() => {
+    const unsubscribe = subscribe(WALLET_EVENTS.CREDENTIAL_CHANGED, (event) => {
+      const data = (event as WalletEvent).data as CredentialChangedData;
+      if (!data?.credentialId) return;
+      scheduleRealtimeRefresh();
+    });
+
+    return () => {
+      unsubscribe();
+      if (refreshTimerRef.current) {
+        clearTimeout(refreshTimerRef.current);
+        refreshTimerRef.current = null;
+      }
+    };
+  }, [scheduleRealtimeRefresh, subscribe]);
+
+  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]);
+
+  // 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]);
+    if (selectedVault.mode === 'independent') return new Set([selectedVault.id]);
+
+    const rootId = selectedVault.mode === 'linked'
+      ? (selectedVault.linkedTo || selectedVault.id)
+      : selectedVault.id;
+    const linkedGroup = vaults
+      .filter((v) => v.id === rootId || (v.mode === 'linked' && v.linkedTo === rootId))
+      .map((v) => v.id);
+    return new Set(linkedGroup.length > 0 ? linkedGroup : [selectedVault.id]);
+  }, [filters.vaultId, vaults]);
+
+  const applyVaultGroupFilter = useCallback((items: CredentialMeta[]): CredentialMeta[] => {
+    if (!selectedVaultGroupIds) return items;
+    return items.filter((credential) => selectedVaultGroupIds.has(credential.vaultId));
+  }, [selectedVaultGroupIds]);
+
+  const filteredCredentials = useMemo(() => {
+    let result = applyVaultGroupFilter(credentials);
+
+    // Category filter
+    if (filters.category !== 'all') {
+      result = result.filter((c) => c.type === filters.category);
+    }
+
+    // Favorites
+    if (filters.favoritesOnly) {
+      result = result.filter((c) => c.meta.favorite);
+    }
+
+    // Tag filter
+    if (filters.tag) {
+      const tag = filters.tag;
+      result = result.filter((c) => c.meta.tags?.includes(tag));
+    }
+
+    // Search
+    if (filters.search) {
+      const q = filters.search.toLowerCase();
+      result = result.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          c.meta.url?.toLowerCase().includes(q) ||
+          c.meta.username?.toLowerCase().includes(q) ||
+          c.meta.tags?.some((t) => t.toLowerCase().includes(q)) ||
+          c.type.toLowerCase().includes(q),
+      );
+    }
+
+    return result;
+  }, [credentials, filters, applyVaultGroupFilter]);
+
+  const categoryCounts = useMemo(() => {
+    // Counts apply to vault-group filtered (not category/search filtered) credentials
+    let base = applyVaultGroupFilter(credentials);
+    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,
+      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.tag, filters.favoritesOnly, applyVaultGroupFilter]);
+
+  const allTags = useMemo(() => {
+    const tagSet = new Set<string>();
+    credentials.forEach((c) => c.meta.tags?.forEach((t) => tagSet.add(t)));
+    return Array.from(tagSet).sort();
+  }, [credentials]);
+
+  const favoritesCount = useMemo(() => {
+    const base = applyVaultGroupFilter(credentials);
+    return base.filter((c) => c.meta.favorite).length;
+  }, [credentials, 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 importVaultId = filters.vaultId || (vaults.find((v) => v.isPrimary)?.id ?? 'primary');
+  const importVaultName = useMemo(() => {
+    if (filters.vaultId) {
+      const v = vaults.find((vault) => vault.id === filters.vaultId);
+      if (v) return v.name || (v.isPrimary ? 'Primary' : v.id.slice(0, 8));
+    }
+    const primary = vaults.find((v) => v.isPrimary);
+    return primary?.name || 'Primary';
+  }, [filters.vaultId, vaults]);
+
+  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(() => {
+    clearToken();
+    onLock();
+  }, [clearToken, onLock]);
+
+  const handleDelete = useCallback(async () => {
+    if (!selectedId) return;
+    try {
+      const location = encodeURIComponent(filters.lifecycle);
+      await api.delete(Api.Wallet, `/credentials/${selectedId}?location=${location}`);
+      setSelectedId(null);
+      setMobileDetailOpen(false);
+      fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] delete error:', err);
+    }
+  }, [selectedId, filters.lifecycle, fetchData]);
+
+  const handleRestore = useCallback(async () => {
+    if (!selectedId || filters.lifecycle === 'active') return;
+    try {
+      await api.post(Api.Wallet, `/credentials/${selectedId}/restore`, { from: filters.lifecycle });
+      setSelectedId(null);
+      setMobileDetailOpen(false);
+      fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] restore error:', err);
+    }
+  }, [selectedId, filters.lifecycle, fetchData]);
+
+  const handleCreateVault = useCallback(async () => {
+    if (!newVaultName.trim()) return;
+    if (newVaultMode === 'independent' && newVaultPassword.length < 8) return;
+
+    setCreatingVault(true);
+    try {
+      const payload: Record<string, unknown> = {
+        name: newVaultName.trim(),
+        mode: newVaultMode,
+      };
+
+      if (newVaultMode === 'independent') {
+        const connectRes = await api.get<{ publicKey: string }>(Api.Wallet, '/auth/connect');
+        payload.encrypted = await encryptPassword(newVaultPassword, connectRes.publicKey);
+      }
+
+      await api.post(Api.Wallet, '/vaults/credential', payload);
+      setNewVaultName('');
+      setNewVaultMode('linked');
+      setNewVaultPassword('');
+      setShowCreateVault(false);
+      fetchData();
+    } catch (err) {
+      console.error('[CredentialVault] create vault error:', err);
+    } finally {
+      setCreatingVault(false);
+    }
+  }, [newVaultName, newVaultMode, newVaultPassword, fetchData]);
+
+  const handleFormSaved = useCallback(() => {
+    setShowCreateForm(false);
+    setEditCredentialId(null);
+    fetchData();
+  }, [fetchData]);
+
+  const handleSelectCredential = useCallback(
+    (id: string) => {
+      setSelectedId(id);
+      if (isMobile) {
+        setMobileDetailOpen(true);
+      }
+    },
+    [isMobile],
+  );
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept when typing in inputs (unless it's our shortcuts)
+      const target = e.target as HTMLElement;
+      const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
+
+      // Cmd+K or / → focus search
+      if ((e.metaKey && e.key === 'k') || (!isInput && e.key === '/')) {
+        e.preventDefault();
+        searchRef.current?.focus();
+        return;
+      }
+
+      // Cmd+N → new credential
+      if (e.metaKey && e.key === 'n') {
+        e.preventDefault();
+        setShowCreateForm(true);
+        return;
+      }
+
+      // Arrow navigation in list (only when not in input)
+      if (!isInput && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.preventDefault();
+        const currentIndex = filteredCredentials.findIndex((c) => c.id === selectedId);
+        if (e.key === 'ArrowDown') {
+          const next = currentIndex + 1;
+          if (next < filteredCredentials.length) {
+            setSelectedId(filteredCredentials[next].id);
+          }
+        } else {
+          const prev = currentIndex - 1;
+          if (prev >= 0) {
+            setSelectedId(filteredCredentials[prev].id);
+          }
+        }
+      }
+
+      // Enter → select first item if none selected; on mobile this opens detail
+      if (!isInput && e.key === 'Enter' && filteredCredentials.length > 0) {
+        e.preventDefault();
+        const nextId = selectedId ?? filteredCredentials[0].id;
+        setSelectedId(nextId);
+        if (isMobile) {
+          setMobileDetailOpen(true);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [filteredCredentials, selectedId, isMobile]);
+
+  if (loading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center bg-[var(--color-background,#f4f4f5)] relative">
+        <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border-muted,#e5e5e5)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border-muted,#e5e5e5)_1px,transparent_1px)] 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 h-screen w-screen overflow-hidden flex flex-col bg-[var(--color-background,#f4f4f5)]">
+      {/* Background — sterile tyvek field (matches /app) */}
+      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border-muted,#e5e5e5)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border-muted,#e5e5e5)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-30" />
+        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+        <div className="absolute top-[5%] left-[30%] opacity-[0.03] select-none">
+          <div className="text-[15vw] font-black leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter">AURA</div>
+        </div>
+        <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">VAULT</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="flex-1 flex overflow-hidden">
+        {/* Desktop / tablet sidebar */}
+        {!isMobile && (
+          <VaultSidebar
+            vaults={vaults}
+            filters={filters}
+            categoryCounts={categoryCounts}
+            tags={allTags}
+            favoritesCount={favoritesCount}
+            onFilterChange={handleFilterChange}
+            onLock={handleLock}
+            onCreateCredential={() => setShowCreateForm(true)}
+            onCreateVault={() => setShowCreateVault(true)}
+            onImport={() => setShowImportModal(true)}
+            mode={isTablet ? 'tablet' : 'desktop'}
+            notifications={notifications}
+            onDismissNotification={dismissNotification}
+            pendingActionCount={requests.filter(r => r.status === 'pending' && r.type !== 'notify').length}
+            surface={surface}
+            onSurfaceChange={setSurface}
+            onSettings={onSettings}
+          />
+        )}
+
+        {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}
+            />
+          </div>
+        ) : (
+          <>
+            {/* Credential list */}
+            <CredentialList
+              credentials={filteredCredentials}
+              selectedId={selectedId}
+              searchQuery={filters.search}
+              onSearchChange={(search) => handleFilterChange({ search })}
+              onSelect={handleSelectCredential}
+              onAdd={() => setShowCreateForm(true)}
+              canAdd={filters.lifecycle === 'active'}
+              onOpenGenerator={() => setShowGenerator(true)}
+              onClearFilters={clearAllFilters}
+              hasActiveFilters={hasActiveFilters}
+              searchInputRef={searchRef}
+              className={
+                isMobile
+                  ? 'flex-1 h-full flex flex-col'
+                  : isTablet
+                    ? 'w-[320px] h-full flex flex-col border-r border-[var(--color-border,#d4d4d8)]'
+                    : 'w-[300px] h-full flex flex-col 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-hidden">
+                {selectedCredential ? (
+                  <CredentialDetail
+                    credential={selectedCredential}
+                    vaultName={selectedVaultName}
+                    lifecycle={filters.lifecycle}
+                    onEdit={() => setEditCredentialId(selectedCredential.id)}
+                    onDelete={handleDelete}
+                    onRestore={handleRestore}
+                  />
+                ) : (
+                  <CredentialEmpty
+                    variant={
+                      filters.lifecycle !== 'active'
+                        ? 'empty-lifecycle'
+                        : credentials.length === 0
+                          ? 'empty-vault'
+                          : 'no-selection'
+                    }
+                    onAdd={filters.lifecycle === 'active' ? () => setShowCreateForm(true) : undefined}
+                  />
+                )}
+              </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={filters.lifecycle}
+                onEdit={() => setEditCredentialId(selectedCredential.id)}
+                onDelete={handleDelete}
+                onRestore={handleRestore}
+              />
+            </>
+          ) : (
+            <CredentialEmpty
+              variant={
+                filters.lifecycle !== 'active'
+                  ? 'empty-lifecycle'
+                  : credentials.length === 0
+                    ? 'empty-vault'
+                    : 'no-selection'
+              }
+              onAdd={filters.lifecycle === 'active' ? () => setShowCreateForm(true) : undefined}
+            />
+          )}
+        </Drawer>
+      )}
+
+      {/* Mobile sidebar overlay */}
+      {isMobile && 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}
+              onCreateCredential={() => setShowCreateForm(true)}
+              onCreateVault={() => setShowCreateVault(true)}
+              onImport={() => setShowImportModal(true)}
+              mode="mobile"
+              onNavigate={() => setMobileSidebarOpen(false)}
+              notifications={notifications}
+              onDismissNotification={dismissNotification}
+              pendingActionCount={requests.filter(r => r.status === 'pending' && r.type !== 'notify').length}
+              surface={surface}
+              onSurfaceChange={setSurface}
+              onSettings={onSettings}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Create / Edit credential modal */}
+      <CredentialForm
+        isOpen={showCreateForm || !!editCredentialId}
+        onClose={() => {
+          setShowCreateForm(false);
+          setEditCredentialId(null);
+        }}
+        onSaved={handleFormSaved}
+        editCredentialId={editCredentialId ?? undefined}
+        vaults={vaults}
+      />
+
+      {/* Import credentials modal */}
+      <ImportCredentialsModal
+        isOpen={showImportModal}
+        onClose={() => setShowImportModal(false)}
+        onComplete={fetchData}
+        vaultId={importVaultId}
+        vaultName={importVaultName}
+        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={() => {
+          setShowCreateVault(false);
+          setNewVaultMode('linked');
+          setNewVaultPassword('');
+        }}
+        title="New Vault"
+        subtitle="Credential_Vault"
+        size="sm"
+        contentClassName="overflow-visible"
+      >
+        <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="Mode"
+            options={VAULT_MODE_OPTIONS}
+            value={newVaultMode}
+            onChange={(value) => {
+              const mode = value as 'linked' | 'independent';
+              setNewVaultMode(mode);
+              if (mode !== 'independent') setNewVaultPassword('');
+            }}
+            compact
+          />
+          {newVaultMode === 'independent' && (
+            <TextInput
+              label="Vault Password"
+              type="password"
+              placeholder="At least 8 characters"
+              value={newVaultPassword}
+              onChange={(e) => setNewVaultPassword(e.target.value)}
+            />
+          )}
+          <div className="flex gap-2 justify-end">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setShowCreateVault(false);
+                setNewVaultMode('linked');
+                setNewVaultPassword('');
+              }}
+            >
+              CANCEL
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleCreateVault}
+              loading={creatingVault}
+              disabled={!newVaultName.trim() || (newVaultMode === 'independent' && newVaultPassword.length < 8)}
+            >
+              CREATE
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};