auramaxx 1.0.0-alpha.4

package/src/components/vault/VaultSidebar.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import React from 'react';
+import { Layers, Key, CreditCard, FileText, Star, Tag, Lock, Plus, Upload, RefreshCw, Terminal, ShieldCheck, Archive, Trash2, Settings } from 'lucide-react';
+import { Button } from '@/components/design-system';
+import { NotificationDrawer } from '@/components/NotificationDrawer';
+import type { HumanAction } from '@/hooks/useAgentActions';
+import type { VaultInfo, VaultFilters, CategoryFilter } from './types';
+
+type VaultSurface = 'credentials' | 'audit' | 'apiKeys';
+
+interface VaultSidebarProps {
+  vaults: VaultInfo[];
+  filters: VaultFilters;
+  categoryCounts: Record<CategoryFilter, number>;
+  tags: string[];
+  favoritesCount: number;
+  onFilterChange: (filters: Partial<VaultFilters>) => void;
+  onLock: () => void;
+  onCreateCredential: () => void;
+  onCreateVault: () => void;
+  onImport: () => void;
+  mode?: 'desktop' | 'tablet' | 'mobile';
+  onNavigate?: () => void;
+  notifications?: HumanAction[];
+  onDismissNotification?: (id: string) => void;
+  pendingActionCount?: number;
+  surface?: VaultSurface;
+  onSurfaceChange?: (surface: VaultSurface) => void;
+  onSettings?: () => void;
+}
+
+const categories: { key: CategoryFilter; label: string; icon: React.FC<{ size: number; className?: string }> }[] = [
+  { key: 'all', label: 'All Items', icon: Layers },
+  { key: 'login', label: 'Logins', icon: Key },
+  { key: 'card', label: 'Cards', icon: CreditCard },
+  { key: 'note', label: 'Notes', icon: FileText },
+  { key: 'oauth2', label: 'OAuth2', icon: RefreshCw },
+  { key: 'ssh', label: 'SSH Keys', icon: Terminal },
+  { key: 'gpg', label: 'GPG Keys', icon: ShieldCheck },
+];
+
+const lifecycleFilters: {
+  key: VaultFilters['lifecycle'];
+  label: string;
+  icon: React.FC<{ size: number; className?: string }>;
+}[] = [
+  { key: 'archive', label: 'Archived', icon: Archive },
+  { key: 'recently_deleted', label: 'Recently Deleted', icon: Trash2 },
+];
+
+export const VaultSidebar: React.FC<VaultSidebarProps> = ({
+  vaults,
+  filters,
+  categoryCounts,
+  tags,
+  favoritesCount,
+  onFilterChange,
+  onLock,
+  onCreateCredential,
+  onCreateVault,
+  onImport,
+  mode = 'desktop',
+  onNavigate,
+  notifications = [],
+  onDismissNotification,
+  pendingActionCount = 0,
+  surface = 'credentials',
+  onSurfaceChange,
+  onSettings,
+}) => {
+  const isCompact = mode === 'tablet';
+  const widthClass = mode === 'tablet' ? 'w-12' : mode === 'mobile' ? 'w-[220px]' : 'w-[200px]';
+  const createDisabled = filters.lifecycle !== 'active';
+
+  const handleFilterAction = (partial: Partial<VaultFilters>) => {
+    onSurfaceChange?.('credentials');
+    onFilterChange(partial);
+    onNavigate?.();
+  };
+
+  const handleCreateCredential = () => {
+    onSurfaceChange?.('credentials');
+    onCreateCredential();
+    onNavigate?.();
+  };
+
+  const handleCreateVault = () => {
+    onSurfaceChange?.('credentials');
+    onCreateVault();
+    onNavigate?.();
+  };
+
+  const handleImport = () => {
+    onSurfaceChange?.('credentials');
+    onImport();
+    onNavigate?.();
+  };
+
+  const handleLock = () => {
+    onLock();
+    onNavigate?.();
+  };
+
+  const handleOpenAudit = () => {
+    onSurfaceChange?.('audit');
+    onNavigate?.();
+  };
+
+  const handleOpenApiKeys = () => {
+    onSurfaceChange?.('apiKeys');
+    onNavigate?.();
+  };
+
+  const handleOpenSettings = () => {
+    onSettings?.();
+    onNavigate?.();
+  };
+
+  return (
+    <div
+      className={`${widthClass} h-full flex flex-col border-r border-[var(--color-border,#d4d4d8)] font-mono relative overflow-hidden`}
+      style={{ background: 'var(--color-surface, #f4f4f2)' }}
+    >
+      {/* Subtle dot texture (matches WalletSidebar) */}
+      <div className="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(var(--color-text,#000)_1px,transparent_1px)] bg-[size:4px_4px]" />
+
+      {/* Header */}
+      <div className={`flex items-center justify-between border-b border-[var(--color-border,#d4d4d8)] relative z-10 ${isCompact ? 'px-2 py-2' : 'px-3 py-3'}`}>
+        <div className={`flex items-center ${isCompact ? 'justify-center w-full' : 'gap-2'}`}>
+          <img src="/logo.webp" alt="Aura" className="w-[10px] h-[10px] object-contain" />
+          {!isCompact && (
+            <span className="text-[10px] font-bold tracking-widest uppercase text-[var(--color-text,#0a0a0a)]">
+              VAULT
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-0.5">
+          {onDismissNotification && (
+            <NotificationDrawer
+              notifications={notifications}
+              onDismiss={onDismissNotification}
+              compact={isCompact}
+            />
+          )}
+          {onSettings && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleOpenSettings}
+              className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+              title="Settings"
+              aria-label="Settings"
+            >
+              <Settings size={10} />
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleImport}
+            className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+            title="Import credentials"
+          >
+            <Upload size={10} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCreateCredential}
+            className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+            title={createDisabled ? 'Click All Vaults to return to Active and create credentials' : 'Create credential'}
+            disabled={createDisabled}
+          >
+            <Plus size={10} />
+          </Button>
+        </div>
+      </div>
+
+      {/* Vault list */}
+      <div className={`border-b border-[var(--color-border,#d4d4d8)] ${isCompact ? 'px-1 py-2' : 'px-2 py-2'}`}>
+        <div className={`flex items-center ${isCompact ? 'gap-1' : 'gap-1.5'}`}>
+          <button
+            onClick={() => handleFilterAction({ vaultId: null, lifecycle: 'active', tag: null })}
+            className={`flex-1 flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+            style={{
+              borderLeft: filters.vaultId === null ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+            }}
+            title="All Vaults (Active)"
+          >
+            {isCompact ? (
+              <Layers size={11} className="text-[var(--color-text-muted,#6b7280)]" />
+            ) : (
+              <span className="text-[9px] tracking-widest uppercase text-[var(--color-text,#0a0a0a)] font-bold">
+                All Vaults
+              </span>
+            )}
+          </button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCreateVault}
+            className={isCompact ? '!px-0 !h-6 !w-6' : '!px-1.5 !h-6'}
+            title="Create vault"
+          >
+            <Plus size={10} />
+          </Button>
+        </div>
+        {vaults.map((vault) => (
+          <button
+            key={vault.id}
+            onClick={() => handleFilterAction({ vaultId: vault.id })}
+            className={`w-full flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+            style={{
+              borderLeft: filters.vaultId === vault.id ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+            }}
+            title={vault.name || (vault.isPrimary ? 'Primary' : `Vault ${vault.id.slice(0, 6)}`)}
+          >
+            {isCompact ? (
+              <div className="flex items-center gap-1">
+                <div className="w-4 h-4 border border-[var(--color-border,#d4d4d8)] rounded-full flex items-center justify-center text-[7px] uppercase text-[var(--color-text-muted,#6b7280)]">
+                  {(vault.name || 'V').slice(0, 1)}
+                </div>
+                {!vault.isUnlocked && (
+                  <Lock size={8} className="text-[var(--color-text-faint,#9ca3af)]" />
+                )}
+              </div>
+            ) : (
+              <>
+                {!vault.isUnlocked && (
+                  <Lock size={9} className="text-[var(--color-text-faint,#9ca3af)] flex-shrink-0" />
+                )}
+                <span className="text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] truncate">
+                  {vault.name || (vault.isPrimary ? 'Primary' : `Vault ${vault.id.slice(0, 6)}`)}
+                </span>
+              </>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Categories */}
+      <div className={`border-b border-[var(--color-border,#d4d4d8)] ${isCompact ? 'px-1 py-2' : 'px-2 py-2'}`}>
+        {categories.map(({ key, label, icon: Icon }) => (
+          <button
+            key={key}
+            onClick={() => handleFilterAction({ category: key })}
+            className={`w-full flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+            style={{
+              borderLeft: filters.category === key ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+            }}
+            title={label}
+          >
+            <Icon size={11} className={filters.category === key ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-muted,#6b7280)]'} />
+            {!isCompact && (
+              <>
+                <span className={`text-[9px] tracking-widest uppercase flex-1 ${filters.category === key ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                  {label}
+                </span>
+                <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)]">
+                  {categoryCounts[key]}
+                </span>
+              </>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Favorites */}
+      <div className={`border-b border-[var(--color-border,#d4d4d8)] ${isCompact ? 'px-1 py-2' : 'px-2 py-2'}`}>
+        <button
+          onClick={() => handleFilterAction({ favoritesOnly: !filters.favoritesOnly })}
+          className={`w-full flex items-center transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)] ${isCompact ? 'justify-center px-1 py-1.5' : 'gap-2 px-2 py-1.5 text-left'}`}
+          style={{
+            borderLeft: filters.favoritesOnly ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+          }}
+          title="Favorites"
+        >
+          <Star
+            size={11}
+            className={filters.favoritesOnly ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-muted,#6b7280)]'}
+            style={filters.favoritesOnly ? { fill: '#facc15', color: '#facc15' } : undefined}
+          />
+          {!isCompact && (
+            <>
+              <span className={`text-[9px] tracking-widest uppercase flex-1 ${filters.favoritesOnly ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                Favorites
+              </span>
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)]">
+                {favoritesCount}
+              </span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Tags */}
+      {!isCompact && tags.length > 0 && (
+        <div className="px-2 py-2 border-b border-[var(--color-border,#d4d4d8)] overflow-y-auto">
+          {tags.map((tag) => (
+            <button
+              key={tag}
+              onClick={() => handleFilterAction({ tag: filters.tag === tag ? null : tag })}
+              className="w-full flex items-center gap-2 px-2 py-1 text-left transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)]"
+              style={{
+                borderLeft: filters.tag === tag ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+              }}
+            >
+              <Tag size={9} className={filters.tag === tag ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-faint,#9ca3af)]'} />
+              <span className={`text-[9px] tracking-widest uppercase truncate ${filters.tag === tag ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                {tag}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Lifecycle */}
+      {!isCompact && (
+        <div className="px-2 py-2 border-b border-[var(--color-border,#d4d4d8)]">
+          {lifecycleFilters.map(({ key, label, icon: Icon }) => (
+            <button
+              key={key}
+              onClick={() => handleFilterAction({ lifecycle: key, tag: null })}
+              className="w-full flex items-center gap-2 px-2 py-1 text-left transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)]"
+              style={{
+                borderLeft: filters.lifecycle === key ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+              }}
+            >
+              <Icon size={9} className={filters.lifecycle === key ? 'text-[var(--color-text,#0a0a0a)]' : 'text-[var(--color-text-faint,#9ca3af)]'} />
+              <span className={`text-[9px] tracking-widest uppercase truncate ${filters.lifecycle === key ? 'text-[var(--color-text,#0a0a0a)] font-bold' : 'text-[var(--color-text-muted,#6b7280)]'}`}>
+                {label}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Bottom */}
+      <div className={`mt-auto border-t border-[var(--color-border,#d4d4d8)] ${isCompact ? 'px-1 py-2' : 'px-3 py-3'}`}>
+        {pendingActionCount > 0 && (
+          <div className={`flex items-center gap-1.5 mb-2 ${isCompact ? 'justify-center' : 'px-1'}`}>
+            <span
+              className="min-w-[16px] h-[16px] flex items-center justify-center px-1 font-mono text-[8px] font-bold"
+              style={{ background: 'var(--color-danger, #ef4444)', color: '#ffffff' }}
+            >
+              {pendingActionCount > 9 ? '9+' : pendingActionCount}
+            </span>
+            {!isCompact && (
+              <span className="font-mono text-[8px] font-bold tracking-widest uppercase text-[var(--color-danger,#ef4444)]">
+                PENDING
+              </span>
+            )}
+          </div>
+        )}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleOpenApiKeys}
+          icon={<Key size={10} />}
+          className={isCompact ? 'w-full !px-0 mb-1.5' : 'w-full mb-1.5'}
+          title="API Keys"
+        >
+          {!isCompact ? 'API KEYS' : undefined}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleLock}
+          icon={<Lock size={10} />}
+          className={isCompact ? 'w-full !px-0' : 'w-full'}
+          title="Lock"
+        >
+          {!isCompact ? 'LOCK' : undefined}
+        </Button>
+        {!isCompact && (
+          <div className="flex items-center gap-2 mt-2 justify-center">
+            <button
+              type="button"
+              onClick={handleOpenAudit}
+              className={`text-[8px] tracking-widest uppercase transition-colors ${
+                surface === 'audit'
+                  ? 'text-[var(--color-text,#0a0a0a)] font-bold'
+                  : 'text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]'
+              }`}
+              aria-current={surface === 'audit' ? 'page' : undefined}
+            >
+              AUDIT
+            </button>
+            <button
+              type="button"
+              onClick={handleOpenApiKeys}
+              className={`text-[8px] tracking-widest uppercase transition-colors ${
+                surface === 'apiKeys'
+                  ? 'text-[var(--color-text,#0a0a0a)] font-bold'
+                  : 'text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)]'
+              }`}
+              aria-current={surface === 'apiKeys' ? 'page' : undefined}
+            >
+              API KEYS
+            </button>
+            <a href="/docs" className="text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">
+              DOCS
+            </a>
+            <a href="/api" className="text-[8px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">
+              API
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/vault/types.ts

@@ -0,0 +1,54 @@
+export interface CredentialMeta {
+  id: string;
+  vaultId: string;
+  type: string;
+  name: string;
+  meta: {
+    url?: string;
+    username?: string;
+    tags?: string[];
+    favorite?: boolean;
+    last4?: string;
+    brand?: string;
+    cardholder?: string;
+    [k: string]: unknown;
+  };
+  createdAt: string;
+  updatedAt: string;
+  archivedAt?: string;
+  deletedAt?: string;
+}
+
+export interface VaultInfo {
+  id: string;
+  name?: string;
+  mode: 'primary' | 'linked' | 'independent';
+  linkedTo?: string;
+  isUnlocked: boolean;
+  isPrimary: boolean;
+  credentialCount: number;
+}
+
+export interface WalletLinkMetaV1 {
+  version: 1;
+  walletAddress: string;
+  chain: string;
+  tier: 'cold' | 'hot';
+  label?: string;
+  source: 'existing' | 'created';
+  linkedAt: string;
+}
+
+export type CredentialType = 'login' | 'card' | 'note' | 'api' | 'apikey' | 'custom' | 'passkey' | 'oauth2' | 'ssh' | 'gpg';
+export type CredentialLifecycleFilter = 'active' | 'archive' | 'recently_deleted';
+
+export type CategoryFilter = 'all' | 'login' | 'card' | 'note' | 'api' | 'apikey' | 'custom' | 'passkey' | 'oauth2' | 'ssh' | 'gpg';
+
+export interface VaultFilters {
+  vaultId: string | null;
+  category: CategoryFilter;
+  tag: string | null;
+  search: string;
+  favoritesOnly: boolean;
+  lifecycle: CredentialLifecycleFilter;
+}