auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialDetail.tsx

@@ -0,0 +1,455 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Button, ConfirmationPopover } from '@/components/design-system';
+import { api, Api } from '@/lib/api';
+import { CredentialField } from './CredentialField';
+import { TOTPDisplay } from './TOTPDisplay';
+import { LargeTypeModal } from './LargeTypeModal';
+import { CredentialShareModal } from './CredentialShareModal';
+import { CredentialWalletWidget } from './CredentialWalletWidget';
+import type { CredentialMeta, CredentialLifecycleFilter, WalletLinkMetaV1 } from './types';
+
+interface CredentialDetailProps {
+  credential: CredentialMeta;
+  vaultName: string;
+  lifecycle: CredentialLifecycleFilter;
+  onEdit: () => void;
+  onDelete: () => void;
+  onRestore: () => void;
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+export const CredentialDetail: React.FC<CredentialDetailProps> = ({
+  credential,
+  vaultName,
+  lifecycle,
+  onEdit,
+  onDelete,
+  onRestore,
+}) => {
+  const [largeTypeValue, setLargeTypeValue] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [reauthMessage, setReauthMessage] = useState<string | null>(null);
+  const [reauthLoading, setReauthLoading] = useState(false);
+  const deleteAnchorRef = useRef<HTMLDivElement>(null);
+
+  const handleShowLargeType = (value: string) => {
+    setLargeTypeValue(value);
+  };
+
+  useEffect(() => {
+    setReauthMessage(null);
+    setReauthLoading(false);
+  }, [credential.id]);
+
+  const handleReauth = useCallback(async () => {
+    setReauthLoading(true);
+    setReauthMessage(null);
+    try {
+      const res = await api.post<{
+        success: boolean;
+        message: string;
+        authorization_endpoint: string | null;
+        token_endpoint: string | null;
+        needs_reauth: boolean;
+        reauth_reason: string | null;
+      }>(Api.Wallet, `/credentials/${credential.id}/reauth`);
+
+      setReauthMessage(
+        res.message
+        || `Re-auth info loaded. ${res.authorization_endpoint ? `Authorization: ${res.authorization_endpoint}` : 'Update credential manually after new tokens.'}`,
+      );
+    } catch (err) {
+      setReauthMessage(err instanceof Error ? err.message : 'Failed to start re-auth');
+    } finally {
+      setReauthLoading(false);
+    }
+  }, [credential.id]);
+
+  const typeLabelMap: Record<string, string> = {
+    login: 'Login',
+    card: 'Card',
+    note: 'Note',
+    apikey: 'API Key',
+    oauth2: 'OAuth2',
+    ssh: 'SSH Key',
+    gpg: 'GPG Key',
+  };
+  const typeLabel = typeLabelMap[credential.type] || credential.type.charAt(0).toUpperCase() + credential.type.slice(1);
+  const walletLink = (credential.meta.walletLink as WalletLinkMetaV1 | undefined);
+  const isActiveLifecycle = lifecycle === 'active';
+
+  const deleteButtonLabel = isActiveLifecycle
+    ? 'ARCHIVE'
+    : lifecycle === 'archive'
+      ? 'DELETE'
+      : 'PURGE';
+  const deleteConfirmLabel = lifecycle === 'recently_deleted' ? 'PURGE' : 'CONFIRM';
+  const deleteMessage = isActiveLifecycle
+    ? 'This credential will be moved to Archive.'
+    : lifecycle === 'archive'
+      ? 'This credential will be moved to Recently Deleted.'
+      : 'This credential will be permanently deleted now.';
+  const restoreLabel = lifecycle === 'archive' ? 'RESTORE' : 'RESTORE TO ARCHIVE';
+
+  return (
+    <div className="p-6 overflow-y-auto h-full flex flex-col">
+      {/* Header */}
+      <div className="mb-6">
+        <h2 className="font-mono font-bold text-lg text-[var(--color-text,#0a0a0a)]">
+          {credential.name}
+        </h2>
+        <div className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mt-1">
+          {typeLabel} &middot; {vaultName}
+        </div>
+      </div>
+
+      {/* Fields */}
+      <div className="flex-1 space-y-0.5">
+        {credential.type === 'login' && (
+          <>
+            <CredentialField
+              label="URL"
+              value={credential.meta.url}
+              credentialId={credential.id}
+              fieldKey="url"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Username"
+              value={credential.meta.username}
+              credentialId={credential.id}
+              fieldKey="username"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Password"
+              credentialId={credential.id}
+              fieldKey="password"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            {isActiveLifecycle && <TOTPDisplay credentialId={credential.id} />}
+            <CredentialField
+              label="Notes"
+              credentialId={credential.id}
+              fieldKey="notes"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+          </>
+        )}
+
+        {credential.type === 'card' && (
+          <>
+            <CredentialField
+              label="Cardholder"
+              value={credential.meta.cardholder}
+              credentialId={credential.id}
+              fieldKey="cardholder"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Brand"
+              value={credential.meta.brand}
+              credentialId={credential.id}
+              fieldKey="brand"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Number"
+              credentialId={credential.id}
+              fieldKey="number"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Expiry"
+              credentialId={credential.id}
+              fieldKey="expiry"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="CVV"
+              credentialId={credential.id}
+              fieldKey="cvv"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Billing ZIP"
+              value={credential.meta.billing_zip as string | undefined}
+              credentialId={credential.id}
+              fieldKey="billing_zip"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Notes"
+              credentialId={credential.id}
+              fieldKey="notes"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+          </>
+        )}
+
+        {credential.type === 'note' && (
+          <CredentialField
+            label="Content"
+            credentialId={credential.id}
+            fieldKey="content"
+            isSensitive={true}
+            onShowLargeType={handleShowLargeType}
+            sensitiveInteractionMode="markdown-hover-copy"
+          />
+        )}
+
+        {credential.type === 'apikey' && (
+          <>
+            <CredentialField
+              label="Key"
+              value={credential.meta.key as string | undefined}
+              credentialId={credential.id}
+              fieldKey="key"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Value"
+              credentialId={credential.id}
+              fieldKey="value"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+          </>
+        )}
+
+
+        {credential.type === 'ssh' && (
+          <>
+            <CredentialField label="Fingerprint" value={credential.meta.fingerprint as string | undefined} credentialId={credential.id} fieldKey="fingerprint" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Key Type" value={credential.meta.key_type as string | undefined} credentialId={credential.id} fieldKey="key_type" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Hosts" value={Array.isArray(credential.meta.hosts) ? (credential.meta.hosts as string[]).join(', ') : undefined} credentialId={credential.id} fieldKey="hosts" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Public Key" value={credential.meta.public_key as string | undefined} credentialId={credential.id} fieldKey="public_key" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Private Key" credentialId={credential.id} fieldKey="private_key" isSensitive={true} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Passphrase" credentialId={credential.id} fieldKey="passphrase" isSensitive={true} onShowLargeType={handleShowLargeType} />
+          </>
+        )}
+
+        {credential.type === 'gpg' && (
+          <>
+            <CredentialField label="Fingerprint" value={credential.meta.fingerprint as string | undefined} credentialId={credential.id} fieldKey="fingerprint" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Key ID" value={credential.meta.key_id as string | undefined} credentialId={credential.id} fieldKey="key_id" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="UID Email" value={credential.meta.uid_email as string | undefined} credentialId={credential.id} fieldKey="uid_email" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Expires At" value={credential.meta.expires_at as string | undefined} credentialId={credential.id} fieldKey="expires_at" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Public Key" value={credential.meta.public_key as string | undefined} credentialId={credential.id} fieldKey="public_key" isSensitive={false} onShowLargeType={handleShowLargeType} />
+            <CredentialField label="Private Key" credentialId={credential.id} fieldKey="private_key" isSensitive={true} onShowLargeType={handleShowLargeType} />
+          </>
+        )}
+        {credential.type === 'oauth2' && (
+          <>
+            <CredentialField
+              label="Token Endpoint"
+              value={credential.meta.token_endpoint as string | undefined}
+              credentialId={credential.id}
+              fieldKey="token_endpoint"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Scopes"
+              value={credential.meta.scopes as string | undefined}
+              credentialId={credential.id}
+              fieldKey="scopes"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Auth Method"
+              value={credential.meta.auth_method as string | undefined}
+              credentialId={credential.id}
+              fieldKey="auth_method"
+              isSensitive={false}
+              onShowLargeType={handleShowLargeType}
+            />
+            {credential.meta.needs_reauth && (
+              <div className="px-2 py-2 my-1 border border-red-500/30 bg-red-500/10 text-red-400 font-mono text-[10px]">
+                ⚠️ Re-authentication required
+                {!!credential.meta.reauth_reason && (
+                  <span className="block text-[9px] text-red-400/70 mt-0.5">
+                    {String(credential.meta.reauth_reason as string)}
+                  </span>
+                )}
+                <button
+                  className="mt-1 px-2 py-0.5 bg-red-500/20 hover:bg-red-500/30 text-red-300 text-[9px] font-bold uppercase tracking-wider disabled:opacity-50"
+                  onClick={handleReauth}
+                  disabled={reauthLoading}
+                >
+                  {reauthLoading ? 'Loading…' : 'Re-authenticate'}
+                </button>
+                {reauthMessage && (
+                  <div className="mt-1 text-[9px] text-red-300/90 break-words">
+                    {reauthMessage}
+                  </div>
+                )}
+              </div>
+            )}
+            {credential.meta.last_refreshed && (
+              <div className="px-1 py-1">
+                <span className="font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+                  Last Refreshed:{' '}
+                </span>
+                <span className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">
+                  {new Date(String(credential.meta.last_refreshed)).toLocaleString()}
+                </span>
+              </div>
+            )}
+            {(() => {
+              const expiresAt = credential.meta.expires_at as number | null | undefined;
+              const now = Math.floor(Date.now() / 1000);
+              const isExpired = !expiresAt || now >= expiresAt;
+              const expiryLabel = !expiresAt
+                ? 'No token yet'
+                : isExpired
+                  ? 'Expired — will auto-refresh on next read'
+                  : `Valid for ${Math.floor((expiresAt - now) / 60)}m`;
+              return (
+                <div className="px-1 py-2">
+                  <span className="font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+                    Token Status:{' '}
+                  </span>
+                  <span
+                    className="font-mono text-[10px] font-bold"
+                    style={{ color: isExpired ? '#ef4444' : '#22c55e' }}
+                  >
+                    {expiryLabel}
+                  </span>
+                </div>
+              );
+            })()}
+            <CredentialField
+              label="Access Token"
+              credentialId={credential.id}
+              fieldKey="access_token"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Refresh Token"
+              credentialId={credential.id}
+              fieldKey="refresh_token"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Client ID"
+              credentialId={credential.id}
+              fieldKey="client_id"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+            <CredentialField
+              label="Client Secret"
+              credentialId={credential.id}
+              fieldKey="client_secret"
+              isSensitive={true}
+              onShowLargeType={handleShowLargeType}
+            />
+          </>
+        )}
+      </div>
+
+      {walletLink && <CredentialWalletWidget walletLink={walletLink} />}
+
+      {/* Tags */}
+      {credential.meta.tags && credential.meta.tags.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-1.5">
+          {credential.meta.tags.map((tag) => (
+            <span
+              key={tag}
+              className="inline-block font-mono text-[9px] px-2 py-0.5 bg-[var(--color-accent,#ccff00)]/10 text-[var(--color-text-muted,#6b7280)]"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Metadata footer */}
+      <div className="mt-4 pt-3 border-t border-[var(--color-border,#d4d4d8)]">
+        <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] space-y-0.5">
+          <div>Created {formatDate(credential.createdAt)}</div>
+          <div>Updated {formatDate(credential.updatedAt)}</div>
+          {credential.archivedAt && <div>Archived {formatDate(credential.archivedAt)}</div>}
+          {credential.deletedAt && <div>Deleted {formatDate(credential.deletedAt)}</div>}
+          <div>Vault: {vaultName}</div>
+        </div>
+      </div>
+
+      {/* Actions bar */}
+      <div className="mt-4 flex gap-2">
+        {isActiveLifecycle && (
+          <Button variant="secondary" size="sm" onClick={() => setShareOpen(true)}>
+            SHARE
+          </Button>
+        )}
+        {isActiveLifecycle && (
+          <Button variant="secondary" size="sm" onClick={onEdit}>
+            EDIT
+          </Button>
+        )}
+        {!isActiveLifecycle && (
+          <Button variant="secondary" size="sm" onClick={onRestore}>
+            {restoreLabel}
+          </Button>
+        )}
+        <div ref={deleteAnchorRef} className="relative">
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => setDeleteOpen(true)}
+          >
+            {deleteButtonLabel}
+          </Button>
+          <ConfirmationPopover
+            isOpen={deleteOpen}
+            onClose={() => setDeleteOpen(false)}
+            onConfirm={() => {
+              setDeleteOpen(false);
+              onDelete();
+            }}
+            message={deleteMessage}
+            confirmLabel={deleteConfirmLabel}
+            anchorEl={deleteAnchorRef.current}
+          />
+        </div>
+      </div>
+
+      {/* Large type modal */}
+      <LargeTypeModal
+        isOpen={largeTypeValue != null}
+        onClose={() => setLargeTypeValue(null)}
+        value={largeTypeValue ?? ''}
+      />
+
+      <CredentialShareModal
+        isOpen={shareOpen}
+        onClose={() => setShareOpen(false)}
+        credentialId={credential.id}
+        credentialName={credential.name}
+      />
+    </div>
+  );
+};

package/src/components/vault/CredentialEmpty.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import { ShieldCheck, Plus } from 'lucide-react';
+import { Button } from '@/components/design-system';
+
+interface CredentialEmptyProps {
+  variant: 'no-selection' | 'empty-vault' | 'empty-lifecycle';
+  onAdd?: () => void;
+}
+
+export const CredentialEmpty: React.FC<CredentialEmptyProps> = ({ variant, onAdd }) => {
+  if (variant === 'no-selection') {
+    return (
+      <div className="flex-1 flex items-center justify-center h-full">
+        <div className="text-center">
+          <ShieldCheck size={32} className="mx-auto mb-3 text-[var(--color-text-faint,#9ca3af)]" />
+          <div className="font-mono text-[11px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)]">
+            Select a credential from the list
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'empty-lifecycle') {
+    return (
+      <div className="flex-1 flex items-center justify-center h-full">
+        <div className="text-center">
+          <ShieldCheck size={32} className="mx-auto mb-3 text-[var(--color-text-faint,#9ca3af)]" />
+          <div className="font-mono text-[11px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-1">
+            No credentials in this section
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center h-full">
+      <div className="text-center">
+        <ShieldCheck size={32} className="mx-auto mb-3 text-[var(--color-text-faint,#9ca3af)]" />
+        <div className="font-mono text-[11px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] mb-1">
+          Your vault is empty
+        </div>
+        <div className="font-mono text-[9px] text-[var(--color-text-faint,#9ca3af)] mb-4">
+          Create your first credential
+        </div>
+        <Button size="sm" onClick={onAdd} icon={<Plus size={10} />}>
+          ADD
+        </Button>
+      </div>
+    </div>
+  );
+};