auramaxx 0.0.1

package/src/components/NotificationDrawer.tsx

@@ -0,0 +1,387 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Bell, X, Clock } from 'lucide-react';
+import { Drawer, Modal } from '@/components/design-system';
+import type { HumanAction } from '@/hooks/useAgentActions';
+
+interface NotificationDrawerProps {
+  notifications: HumanAction[];
+  onDismiss: (id: string) => void;
+  /** Render only the bell trigger (compact mode for tablet sidebar) */
+  compact?: boolean;
+}
+
+interface NotificationMeta {
+  summary?: string;
+  agentId?: string;
+  limit?: number;
+  requestedLimitExplicit?: boolean;
+  defaultFundLimit?: number;
+  verifiedSummary?: { oneLiner?: string };
+}
+
+function normalizeNotificationId(id: unknown): string {
+  if (typeof id === 'string') return id.trim();
+  if (typeof id === 'number') return String(id);
+  return '';
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+function parseMeta(raw?: string): NotificationMeta {
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed as NotificationMeta : {};
+  } catch {
+    return {};
+  }
+}
+
+function getNotificationSummary(n: HumanAction): string {
+  const meta = parseMeta(n.metadata);
+  if (meta.verifiedSummary?.oneLiner) return meta.verifiedSummary.oneLiner;
+  if (meta.summary) return meta.summary;
+
+  if ((n.type === 'auth' || n.type === 'agent_access') && typeof meta.limit === 'number') {
+    const agent = meta.agentId || 'agent';
+    if (meta.requestedLimitExplicit === false) {
+      return `${agent} requesting access`;
+    }
+    return `${agent} requesting ${meta.limit} ETH access`;
+  }
+
+  return n.type;
+}
+
+function notificationStatusLabel(n: HumanAction): string {
+  if (n.status === 'pending') return 'PENDING';
+  if (n.status === 'approved') return 'APPROVED';
+  if (n.status === 'rejected') return 'REJECTED';
+  if (n.type === 'notify') return 'ALERT';
+  return 'INFO';
+}
+
+function notificationStatusColors(n: HumanAction): { bg: string; fg: string; border: string } {
+  if (n.status === 'pending') {
+    return {
+      bg: 'color-mix(in srgb, var(--color-warning,#ff4d00) 15%, transparent)',
+      fg: 'var(--color-warning,#ff4d00)',
+      border: 'color-mix(in srgb, var(--color-warning,#ff4d00) 35%, transparent)',
+    };
+  }
+  if (n.status === 'approved') {
+    return {
+      bg: 'color-mix(in srgb, var(--color-success,#10b981) 15%, transparent)',
+      fg: 'var(--color-success,#10b981)',
+      border: 'color-mix(in srgb, var(--color-success,#10b981) 35%, transparent)',
+    };
+  }
+  if (n.status === 'rejected') {
+    return {
+      bg: 'color-mix(in srgb, var(--color-danger,#ef4444) 15%, transparent)',
+      fg: 'var(--color-danger,#ef4444)',
+      border: 'color-mix(in srgb, var(--color-danger,#ef4444) 35%, transparent)',
+    };
+  }
+  return {
+    bg: 'var(--color-background-alt,#f4f4f5)',
+    fg: 'var(--color-text-muted,#6b7280)',
+    border: 'var(--color-border,#d4d4d8)',
+  };
+}
+
+export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
+  notifications,
+  onDismiss,
+  compact = false,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [locallyDismissedKeys, setLocallyDismissedKeys] = useState<Set<string>>(new Set());
+  const [selectedNotification, setSelectedNotification] = useState<HumanAction | null>(null);
+
+  const getNotificationKey = (notification: HumanAction): string => {
+    const normalizedId = normalizeNotificationId(notification.id);
+    if (normalizedId) return `id:${normalizedId}`;
+    return `fallback:${notification.type}:${notification.createdAt}:${getNotificationSummary(notification)}`;
+  };
+
+  const visibleNotifications = useMemo(
+    () => notifications.filter((notification) => !locallyDismissedKeys.has(getNotificationKey(notification))),
+    [notifications, locallyDismissedKeys],
+  );
+
+  const pendingBadgeCount = useMemo(
+    () => visibleNotifications.filter((notification) => notification.status === 'pending' && notification.type !== 'notify').length,
+    [visibleNotifications],
+  );
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  return (
+    <>
+      {/* Bell trigger */}
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => setOpen((prev) => !prev)}
+          className={`${compact ? 'p-0' : 'p-1.5'} text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-surface,#ffffff)]/50 transition-colors rounded`}
+          title="Notifications"
+          aria-label="Notifications"
+        >
+          <Bell size={compact ? 10 : 14} />
+        </button>
+        {pendingBadgeCount > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 min-w-[14px] h-[14px] bg-[var(--color-warning,#ff4d00)] text-white font-mono text-[7px] font-bold flex items-center justify-center px-0.5">
+            {pendingBadgeCount > 9 ? '9+' : pendingBadgeCount}
+          </span>
+        )}
+      </div>
+
+      {/* Drawer */}
+      {mounted && createPortal(
+        <>
+          {open && (
+            <button
+              type="button"
+              aria-label="Close notifications"
+              onClick={() => setOpen(false)}
+              className="fixed inset-0 z-30 bg-[var(--color-text,#0a0a0a)]/20"
+            />
+          )}
+          <div className="fixed inset-y-0 right-0 z-40">
+            <Drawer
+              isOpen={open}
+              onClose={() => setOpen(false)}
+              title="NOTIFICATIONS"
+              subtitle="Approvals + alerts"
+              width="sm"
+            >
+              {visibleNotifications.length === 0 ? (
+                <div className="py-8 text-center tyvek-label corner-marks mx-2">
+                  <Bell size={24} className="mx-auto mb-2 text-[var(--color-text-faint,#9ca3af)]" />
+                  <div className="label-specimen text-[var(--color-text-muted,#6b7280)]">NO ALERTS</div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {visibleNotifications.map((n) => {
+                    return (
+                      <div
+                        key={getNotificationKey(n)}
+                        className="w-full text-left flex items-start gap-2 p-3 clip-specimen-sm border-mech bg-[var(--color-surface-alt,#fafafa)] group cursor-pointer corner-marks transition-all hover:shadow-mech-hover"
+                      >
+                        <button
+                          type="button"
+                          onClick={() => setSelectedNotification(n)}
+                          className="flex-1 min-w-0 text-left"
+                          title="View details"
+                        >
+                          <div className="mb-1.5">
+                            <span
+                              className="inline-flex items-center px-1.5 py-0.5 font-mono text-[7px] font-bold tracking-[0.15em] uppercase"
+                              style={{
+                                background: notificationStatusColors(n).bg,
+                                color: notificationStatusColors(n).fg,
+                                border: `1px solid ${notificationStatusColors(n).border}`,
+                              }}
+                            >
+                              {notificationStatusLabel(n)}
+                            </span>
+                          </div>
+                          <div className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)]">
+                            {getNotificationSummary(n)}
+                          </div>
+                          <div className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] flex items-center gap-1 mt-1">
+                            <Clock size={7} />
+                            {timeAgo(n.createdAt)}
+                          </div>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const notificationKey = getNotificationKey(n);
+                            setLocallyDismissedKeys((prev) => {
+                              const next = new Set(prev);
+                              next.add(notificationKey);
+                              return next;
+                            });
+                            const normalizedId = normalizeNotificationId(n.id);
+                            if (normalizedId) {
+                              onDismiss(normalizedId);
+                            }
+                          }}
+                          className="p-1 hover:bg-[var(--color-background-alt,#e5e5e5)] transition-colors shrink-0"
+                          title="Dismiss"
+                        >
+                          <X size={10} className="text-[var(--color-text-muted,#6b7280)]" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </Drawer>
+          </div>
+        </>,
+        document.body,
+      )}
+
+      {/* Detail Modal */}
+      <NotificationDetailModal
+        notification={selectedNotification}
+        onClose={() => setSelectedNotification(null)}
+      />
+    </>
+  );
+};
+
+function NotificationDetailModal({ notification, onClose }: { notification: HumanAction | null; onClose: () => void }) {
+  // Keep a ref to the last notification so content stays visible during exit animation
+  const [lastNotification, setLastNotification] = React.useState<HumanAction | null>(null);
+  React.useEffect(() => {
+    if (notification) setLastNotification(notification);
+  }, [notification]);
+
+  const display = notification || lastNotification;
+  const meta = display ? parseMeta(display.metadata) : {};
+  const summary = display?.humanSummary;
+  const colors = display ? notificationStatusColors(display) : { bg: '', fg: '', border: '' };
+  const agentId = meta.agentId || 'unknown';
+
+  return (
+    <Modal
+      isOpen={!!notification}
+      onClose={onClose}
+      title={summary?.actionLabel || display?.type.toUpperCase() || 'DETAILS'}
+      size="sm"
+    >
+      <div className="space-y-4">
+        {/* Status + Time */}
+        {display && (
+        <div className="flex items-center justify-between">
+          <span
+            className="inline-flex items-center px-1.5 py-0.5 font-mono text-[7px] font-bold tracking-[0.15em] uppercase"
+            style={{
+              background: colors.bg,
+              color: colors.fg,
+              border: `1px solid ${colors.border}`,
+            }}
+          >
+            {notificationStatusLabel(display)}
+          </span>
+          <span className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] flex items-center gap-1">
+            <Clock size={7} />
+            {timeAgo(display.createdAt)}
+          </span>
+        </div>
+        )}
+
+        {/* One-liner */}
+        {summary?.oneLiner && (
+          <div className="text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-wider">
+            {summary.oneLiner}
+          </div>
+        )}
+
+        {/* Details */}
+        <div className="space-y-2">
+          <div className="flex items-baseline justify-between gap-2">
+            <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Agent</span>
+            <span className="text-[10px] text-[var(--color-text,#0a0a0a)] tracking-wider text-right">{agentId}</span>
+          </div>
+          <div className="flex items-baseline justify-between gap-2">
+            <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Type</span>
+            <span className="text-[10px] text-[var(--color-text,#0a0a0a)] font-bold tracking-wider text-right">{display?.type}</span>
+          </div>
+          {summary?.profileLabel && (
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Profile</span>
+              <span className="text-[10px] text-[var(--color-text,#0a0a0a)] tracking-wider text-right">{summary.profileLabel}</span>
+            </div>
+          )}
+          {summary?.riskHint && (
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Risk</span>
+              <span className={`text-[10px] font-bold tracking-wider ${
+                summary.riskHint.toLowerCase().includes('high') ? 'text-[var(--color-danger,#ef4444)]'
+                  : summary.riskHint.toLowerCase().includes('medium') ? 'text-[var(--color-warning,#ff4d00)]'
+                    : 'text-[var(--color-text,#0a0a0a)]'
+              }`}>{summary.riskHint}</span>
+            </div>
+          )}
+          {summary?.expiresIn && (
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Expires</span>
+              <span className="text-[10px] text-[var(--color-text,#0a0a0a)] tracking-wider text-right">{summary.expiresIn}</span>
+            </div>
+          )}
+          {typeof meta.limit === 'number' && (
+            <div className="flex items-baseline justify-between gap-2">
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase">Limit</span>
+              <span className="text-[10px] text-[var(--color-text,#0a0a0a)] font-bold tracking-wider text-right">{meta.limit} ETH</span>
+            </div>
+          )}
+          <div className="text-[7px] text-[var(--color-text-faint,#9ca3af)] tracking-widest break-all">
+            ID: {display?.id}
+          </div>
+        </div>
+
+        {/* Permissions (can) */}
+        {summary?.can && summary.can.length > 0 && (
+          <div className="border-t border-[var(--color-border,#d4d4d8)] pt-3">
+            <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase mb-1.5">Permissions</div>
+            <div className="space-y-1">
+              {summary.can.map((item) => (
+                <div key={item} className="text-[10px] text-[var(--color-text,#0a0a0a)] tracking-wider pl-2 border-l-2 border-[var(--color-border,#d4d4d8)]">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Restrictions (cannot) */}
+        {summary?.cannot && summary.cannot.length > 0 && (
+          <div className="border-t border-[var(--color-border,#d4d4d8)] pt-3">
+            <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase mb-1.5">Restrictions</div>
+            <div className="space-y-1">
+              {summary.cannot.map((item) => (
+                <div key={item} className="text-[10px] text-[var(--color-danger,#ef4444)] tracking-wider pl-2 border-l-2 border-[var(--color-danger,#ef4444)]/30">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Scope */}
+        {summary?.scope && summary.scope.length > 0 && (
+          <div className="border-t border-[var(--color-border,#d4d4d8)] pt-3">
+            <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest uppercase mb-1.5">Scope</div>
+            <div className="space-y-1">
+              {summary.scope.map((item) => (
+                <div key={item} className="text-[10px] text-[var(--color-text,#0a0a0a)] tracking-wider pl-2 border-l-2 border-[var(--color-border,#d4d4d8)]">
+                  {item}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/src/components/PasskeyEnrollmentPrompt.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { KeyRound, Loader2, Check } from 'lucide-react';
+import { Modal, Button } from '@/components/design-system';
+import { api, Api } from '@/lib/api';
+
+type PromptState = 'hidden' | 'prompt' | 'registering' | 'success' | 'error';
+
+const DISMISS_KEY = 'aura:passkey:dismissed';
+
+/** Convert base64url string to ArrayBuffer */
+function base64urlToBuffer(b: string): ArrayBuffer {
+  let s = b.replace(/-/g, '+').replace(/_/g, '/');
+  while (s.length % 4) s += '=';
+  const bin = atob(s);
+  const a = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);
+  return a.buffer;
+}
+
+/** Convert ArrayBuffer to base64url string */
+function bufferToBase64url(b: ArrayBuffer): string {
+  const bytes = new Uint8Array(b);
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+interface PasskeyEnrollmentPromptProps {
+  isUnlocked: boolean;
+}
+
+export function PasskeyEnrollmentPrompt({ isUnlocked }: PasskeyEnrollmentPromptProps) {
+  const [promptState, setPromptState] = useState<PromptState>('hidden');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  // Check eligibility on mount / when unlock state changes
+  useEffect(() => {
+    if (!isUnlocked) return;
+    if (typeof window === 'undefined') return;
+    if (!window.PublicKeyCredential) return;
+    if (localStorage.getItem(DISMISS_KEY) === 'true') return;
+
+    let cancelled = false;
+    (async () => {
+      try {
+        const status = await api.get<{ registered: boolean; count: number }>(
+          Api.Wallet,
+          '/auth/passkey/status',
+        );
+        if (cancelled) return;
+        if (!status.registered) {
+          setPromptState('prompt');
+        }
+      } catch {
+        // Silently ignore — don't block the user
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [isUnlocked]);
+
+  const handleSetUp = useCallback(async () => {
+    setPromptState('registering');
+    setErrorMsg('');
+    try {
+      // 1. Get registration options from server (requires admin token — api helper adds it)
+      const options = await api.post<{
+        challenge: string;
+        rp: { name: string; id: string };
+        user: { id: string; name: string; displayName: string };
+        pubKeyCredParams: Array<{ type: string; alg: number }>;
+        timeout: number;
+        attestation: string;
+        excludeCredentials: Array<{ id: string; transports?: string[] }>;
+        authenticatorSelection: {
+          authenticatorAttachment?: string;
+          residentKey?: string;
+          userVerification?: string;
+        };
+      }>(Api.Wallet, '/auth/passkey/register/options', {});
+
+      // 2. Convert server options for navigator.credentials.create()
+      const publicKey: PublicKeyCredentialCreationOptions = {
+        challenge: base64urlToBuffer(options.challenge),
+        rp: { name: options.rp.name, id: options.rp.id },
+        user: {
+          id: base64urlToBuffer(options.user.id),
+          name: options.user.name,
+          displayName: options.user.displayName,
+        },
+        pubKeyCredParams: options.pubKeyCredParams.map((p) => ({
+          type: p.type as 'public-key',
+          alg: p.alg,
+        })),
+        timeout: options.timeout,
+        attestation: (options.attestation || 'none') as AttestationConveyancePreference,
+        excludeCredentials: (options.excludeCredentials || []).map((c) => ({
+          type: 'public-key' as const,
+          id: base64urlToBuffer(c.id),
+          transports: c.transports as AuthenticatorTransport[] | undefined,
+        })),
+        authenticatorSelection: {
+          authenticatorAttachment: options.authenticatorSelection?.authenticatorAttachment as AuthenticatorAttachment | undefined,
+          residentKey: options.authenticatorSelection?.residentKey as ResidentKeyRequirement | undefined,
+          userVerification: options.authenticatorSelection?.userVerification as UserVerificationRequirement | undefined,
+        },
+      };
+
+      // 3. Call WebAuthn create
+      const credential = await navigator.credentials.create({ publicKey }) as PublicKeyCredential | null;
+      if (!credential) {
+        setPromptState('prompt');
+        return;
+      }
+
+      const response = credential.response as AuthenticatorAttestationResponse;
+
+      // 4. Send credential to server for verification
+      const verifyPayload = {
+        credential: {
+          id: bufferToBase64url(credential.rawId),
+          rawId: bufferToBase64url(credential.rawId),
+          type: credential.type,
+          response: {
+            clientDataJSON: bufferToBase64url(response.clientDataJSON),
+            attestationObject: bufferToBase64url(response.attestationObject),
+            transports: response.getTransports?.() || [],
+          },
+        },
+      };
+
+      const result = await api.post<{ success: boolean; error?: string }>(
+        Api.Wallet,
+        '/auth/passkey/register/verify',
+        verifyPayload,
+      );
+
+      if (result.success) {
+        setPromptState('success');
+        // Auto-dismiss after 2s
+        setTimeout(() => setPromptState('hidden'), 2000);
+      } else {
+        setErrorMsg(result.error || 'Registration failed');
+        setPromptState('error');
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        // User cancelled the WebAuthn prompt
+        setPromptState('prompt');
+        return;
+      }
+      setErrorMsg(err instanceof Error ? err.message : 'Registration failed');
+      setPromptState('error');
+    }
+  }, []);
+
+  const handleNotNow = useCallback(() => {
+    setPromptState('hidden');
+  }, []);
+
+  const handleDontAskAgain = useCallback(() => {
+    localStorage.setItem(DISMISS_KEY, 'true');
+    setPromptState('hidden');
+  }, []);
+
+  const isOpen = promptState !== 'hidden';
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleNotNow}
+      title="Passkey Setup"
+      subtitle="Security"
+      icon={<KeyRound size={16} className="text-[var(--color-accent,#ccff00)]" />}
+      size="sm"
+    >
+      {promptState === 'success' ? (
+        <div className="flex flex-col items-center gap-3 py-4">
+          <div className="w-10 h-10 bg-[var(--color-text,#0a0a0a)] flex items-center justify-center">
+            <Check size={20} className="text-[var(--color-accent,#ccff00)]" />
+          </div>
+          <div className="font-mono text-xs tracking-widest text-[var(--color-text,#0a0a0a)] uppercase">
+            Passkey enabled!
+          </div>
+          <div className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">
+            You can now unlock with Face ID / biometrics.
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="font-mono text-xs text-[var(--color-text,#0a0a0a)] leading-relaxed">
+            Enable Face ID / Passkey to unlock your vault without typing a password.
+          </div>
+
+          {promptState === 'error' && errorMsg && (
+            <div className="p-2 border border-[var(--color-warning,#ff4d00)]/30 bg-[var(--color-warning,#ff4d00)]/5">
+              <div className="font-mono text-[10px] text-[var(--color-warning,#ff4d00)]">
+                {errorMsg}
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-2">
+            <Button
+              variant="primary"
+              size="md"
+              loading={promptState === 'registering'}
+              onClick={handleSetUp}
+              disabled={promptState === 'registering'}
+              icon={<KeyRound size={14} />}
+            >
+              {promptState === 'registering' ? 'REGISTERING...' : 'SET UP'}
+            </Button>
+
+            <div className="flex items-center justify-between pt-1">
+              <button
+                onClick={handleNotNow}
+                className="font-mono text-[10px] tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+              >
+                NOT NOW
+              </button>
+              <button
+                onClick={handleDontAskAgain}
+                className="font-mono text-[10px] tracking-widest text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+              >
+                DON&apos;T ASK AGAIN
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}