auramaxx 0.0.1

package/src/components/vault/CredentialList.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Search, Plus, KeyRound, Upload } from 'lucide-react';
+import { Button, TextInput } from '@/components/design-system';
+import { CredentialRow } from './CredentialRow';
+import type { CredentialMeta } from './types';
+
+interface CredentialListProps {
+  credentials: CredentialMeta[];
+  latestAccessById?: Record<string, number>;
+  selectedId: string | null;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelect: (id: string) => void;
+  onAdd: () => void;
+  canAdd?: boolean;
+  onImport?: () => void;
+  canImport?: boolean;
+  onOpenGenerator?: () => void;
+  canGenerate?: boolean;
+  onClearFilters?: () => void;
+  onCreateWithFilter?: () => void;
+  hasActiveFilters?: boolean;
+  showSearch?: boolean;
+  fieldSearchSuggestions?: string[];
+  onApplySearchSuggestion?: (query: string) => void;
+  searchInputRef?: React.Ref<HTMLInputElement>;
+  className?: string;
+  leadingAction?: React.ReactNode;
+}
+
+const normalize = (value: string) => value.trim().toLowerCase();
+const createdTs = (credential: CredentialMeta) => {
+  const created = Date.parse(credential.createdAt);
+  if (Number.isFinite(created)) return created;
+  return 0;
+};
+
+const effectiveAccessTs = (credential: CredentialMeta, latestAccessById?: Record<string, number>) => {
+  const known = latestAccessById?.[credential.id];
+  if (typeof known === 'number' && Number.isFinite(known) && known > 0) return known;
+  return createdTs(credential);
+};
+
+const searchRank = (credential: CredentialMeta, query: string) => {
+  const q = normalize(query);
+  if (!q) return 0;
+  const name = normalize(credential.name);
+  const username = normalize(String(credential.meta.username || ''));
+  const url = normalize(String(credential.meta.url || ''));
+  if (name === q) return 3;
+  if (name.startsWith(q) || username.startsWith(q) || url.startsWith(q)) return 2;
+  if (name.includes(q) || username.includes(q) || url.includes(q)) return 1;
+  return 0;
+};
+
+export const CredentialList: React.FC<CredentialListProps> = ({
+  credentials,
+  latestAccessById,
+  selectedId,
+  searchQuery,
+  onSearchChange,
+  onSelect,
+  onAdd,
+  canAdd = true,
+  onImport,
+  canImport = true,
+  onOpenGenerator,
+  canGenerate = true,
+  onClearFilters,
+  onCreateWithFilter,
+  hasActiveFilters = false,
+  showSearch = true,
+  fieldSearchSuggestions = [],
+  onApplySearchSuggestion,
+  searchInputRef,
+  className = 'w-[300px] h-full flex flex-col border-r border-[var(--color-credential-array-border,#8d8d95)]',
+  leadingAction,
+}) => {
+  const sorted = useMemo(() => {
+    return [...credentials].sort((a, b) => {
+      const aAccessTs = effectiveAccessTs(a, latestAccessById);
+      const bAccessTs = effectiveAccessTs(b, latestAccessById);
+      if (bAccessTs !== aAccessTs) return bAccessTs - aAccessTs;
+
+      const aRank = searchRank(a, searchQuery);
+      const bRank = searchRank(b, searchQuery);
+      if (bRank !== aRank) return bRank - aRank;
+
+      const aFav = a.meta.favorite ? 1 : 0;
+      const bFav = b.meta.favorite ? 1 : 0;
+      if (bFav !== aFav) return bFav - aFav;
+
+      const aName = normalize(a.name);
+      const bName = normalize(b.name);
+      const lexical = aName.localeCompare(bName);
+      if (lexical !== 0) return lexical;
+
+      return a.id.localeCompare(b.id);
+    });
+  }, [credentials, latestAccessById, searchQuery]);
+
+  return (
+    <div className={className} style={{ fontSize: 'var(--font-size-sm)' }}>
+      {/* Pinned header */}
+      <div
+        className={`border-b border-[var(--color-credential-array-border,#8d8d95)] ${showSearch ? 'flex items-center' : ''}`}
+        style={{ gap: 'var(--space-sm)', padding: 'var(--space-md)' }}
+      >
+        {showSearch ? (
+          <>
+            {leadingAction}
+            <div className="flex-1">
+              <TextInput
+                compact
+                leftElement={<Search size={12} />}
+                placeholder="Search..."
+                value={searchQuery}
+                onChange={(e) => onSearchChange(e.target.value)}
+                inputRef={searchInputRef}
+              />
+            </div>
+            {onOpenGenerator && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onOpenGenerator}
+                icon={<KeyRound size={10} />}
+                disabled={!canGenerate}
+                title="Generate password"
+                aria-label="Generate password"
+              >
+                GEN
+              </Button>
+            )}
+            {onImport && (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onImport}
+                icon={<Upload size={10} />}
+                disabled={!canImport}
+                title={canImport ? 'Import credentials' : 'Switch to Active to import credentials'}
+                aria-label="Import credentials"
+              >
+                IMPORT
+              </Button>
+            )}
+            <Button
+              size="sm"
+              onClick={onAdd}
+              icon={<Plus size={10} />}
+              disabled={!canAdd}
+              title={canAdd ? 'Create credential' : 'Switch to Active to create credentials'}
+            >
+              ADD
+            </Button>
+          </>
+        ) : (
+          <div className="w-full space-y-2">
+            {leadingAction && <div className="flex">{leadingAction}</div>}
+            <div className="flex w-full items-center gap-2 overflow-hidden">
+              {onOpenGenerator && (
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={onOpenGenerator}
+                  icon={<KeyRound size={10} />}
+                  disabled={!canGenerate}
+                  title="Generate password"
+                  aria-label="Generate password"
+                  className="flex-1 min-w-0"
+                >
+                  GEN
+                </Button>
+              )}
+              {onImport && (
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={onImport}
+                  icon={<Upload size={10} />}
+                  disabled={!canImport}
+                  title={canImport ? 'Import credentials' : 'Switch to Active to import credentials'}
+                  aria-label="Import credentials"
+                  className="flex-1 min-w-0"
+                >
+                  IMPORT
+                </Button>
+              )}
+              <Button
+                size="sm"
+                onClick={onAdd}
+                icon={<Plus size={10} />}
+                disabled={!canAdd}
+                title={canAdd ? 'Create credential' : 'Switch to Active to create credentials'}
+                className="flex-1 min-w-0"
+              >
+                ADD
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Scrollable list */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        {sorted.length === 0 ? (
+          <div className="flex items-center justify-center h-full px-4">
+            <div className="text-center tyvek-label corner-marks p-6">
+              <span className="label-specimen text-[var(--color-text-muted,#6b7280)] block">
+              {hasActiveFilters ? 'NO SPECIMENS MATCH' : 'NO SPECIMENS FOUND'}
+              </span>
+              {fieldSearchSuggestions.length > 0 && onApplySearchSuggestion && (
+                <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
+                  {fieldSearchSuggestions.map((suggestion) => (
+                    <button
+                      key={suggestion}
+                      type="button"
+                      className="font-mono text-[9px] px-2 py-1 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)] text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:border-[var(--color-border-focus,#0a0a0a)]"
+                      onClick={() => onApplySearchSuggestion(suggestion)}
+                      title={`Search by ${suggestion}`}
+                    >
+                      {suggestion}
+                    </button>
+                  ))}
+                </div>
+              )}
+              {hasActiveFilters && onClearFilters && (
+                <div className="mt-3 flex flex-col items-center gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={onClearFilters}
+                  >
+                    CLEAR FILTERS
+                  </Button>
+                  {onCreateWithFilter && (
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={onCreateWithFilter}
+                    >
+                      CREATE WITH FILTER
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          sorted.map((credential) => (
+            <CredentialRow
+              key={credential.id}
+              credential={credential}
+              selected={credential.id === selectedId}
+              onClick={() => onSelect(credential.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/vault/CredentialRow.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import React from 'react';
+import { Key, CreditCard, FileText, Star, RefreshCw, Terminal, ShieldCheck, Wallet } from 'lucide-react';
+import type { CredentialMeta } from './types';
+
+interface CredentialRowProps {
+  credential: CredentialMeta;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const typeIcons: Record<string, React.FC<{ size: number; className?: string }>> = {
+  login: Key,
+  card: CreditCard,
+  note: FileText,
+  hot_wallet: Wallet,
+  plain_note: FileText,
+  apikey: Key,
+  oauth2: RefreshCw,
+  ssh: Terminal,
+  gpg: ShieldCheck,
+};
+
+function getSubtitle(credential: CredentialMeta): string {
+  switch (credential.type) {
+    case 'login':
+      return credential.meta.username || credential.meta.url || '';
+    case 'card':
+      return credential.meta.last4 ? `\u2022\u2022\u2022\u2022 ${credential.meta.last4}` : '';
+    case 'note':
+      return 'Secure Note';
+    case 'hot_wallet':
+      return (credential.meta.address as string) || (credential.meta.chain as string) || 'Hot Wallet';
+    case 'plain_note':
+      return (credential.meta.content as string) || (credential.meta.value as string) || 'Plain Note';
+    case 'apikey':
+      return (credential.meta.key as string) || 'API Key';
+    case 'oauth2':
+      return (credential.meta.scopes as string) || 'OAuth2';
+    case 'ssh':
+      return (credential.meta.fingerprint as string) || (credential.meta.key_type as string) || 'SSH Key';
+    case 'gpg':
+      return (credential.meta.key_id as string) || (credential.meta.uid_email as string) || 'GPG Key';
+    default:
+      return '';
+  }
+}
+
+function getOAuth2ExpiryBadge(credential: CredentialMeta): { label: string; color: string; background: string } | null {
+  if (credential.type !== 'oauth2') return null;
+  const expiresAt = credential.meta.expires_at as number | null | undefined;
+  if (!expiresAt) {
+    return {
+      label: 'No token',
+      color: 'var(--color-text-muted,#6b7280)',
+      background: 'var(--color-background-alt,#f4f4f5)',
+    };
+  }
+  const now = Math.floor(Date.now() / 1000);
+  if (now >= expiresAt) {
+    return {
+      label: 'Expired',
+      color: 'var(--color-danger,#ef4444)',
+      background: 'color-mix(in srgb, var(--color-danger,#ef4444) 12%, transparent)',
+    };
+  }
+  const remaining = expiresAt - now;
+  if (remaining < 300) {
+    return {
+      label: '<5m',
+      color: 'var(--color-warning,#ff4d00)',
+      background: 'color-mix(in srgb, var(--color-warning,#ff4d00) 12%, transparent)',
+    };
+  }
+  return {
+    label: remaining < 3600 ? `${Math.floor(remaining / 60)}m` : `${Math.floor(remaining / 3600)}h`,
+    color: 'var(--color-success,#00c853)',
+    background: 'color-mix(in srgb, var(--color-success,#00c853) 12%, transparent)',
+  };
+}
+
+export const CredentialRow: React.FC<CredentialRowProps> = ({ credential, selected, onClick }) => {
+  const Icon = typeIcons[credential.type] || FileText;
+  const subtitle = getSubtitle(credential);
+  const isFavorite = credential.meta.favorite;
+
+  return (
+    <div
+      onClick={onClick}
+      className={`flex items-center cursor-pointer border-b border-[var(--color-credential-array-border,#8d8d95)] transition-all hover:bg-[var(--color-background-alt,#f4f4f5)] hover:shadow-mech-hover ${selected ? 'corner-marks' : ''}`}
+      style={{
+        gap: 'var(--space-sm)',
+        padding: 'var(--space-sm) var(--space-md)',
+        borderLeft: selected ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+        background: selected ? 'var(--color-background-alt, #f4f4f5)' : undefined,
+      }}
+    >
+      <Icon size={14} className="text-[var(--color-text-muted,#6b7280)] flex-shrink-0" />
+      <div className="flex-1 min-w-0">
+        <div className="font-mono text-[11px] font-bold text-[var(--color-text,#0a0a0a)] truncate">
+          {credential.name}
+        </div>
+        {subtitle && (
+          <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] truncate">
+            {subtitle}
+          </div>
+        )}
+      </div>
+      {(() => {
+        const badge = getOAuth2ExpiryBadge(credential);
+        return badge ? (
+          <span
+            className="flex-shrink-0 font-mono text-[8px] font-bold px-1.5 py-0.5 rounded-sm"
+            style={{ color: badge.color, background: badge.background, borderRadius: 'var(--radius-sm)' }}
+          >
+            {badge.label}
+          </span>
+        ) : null;
+      })()}
+      {isFavorite && (
+        <Star
+          size={10}
+          className="flex-shrink-0"
+          style={{ fill: 'var(--color-accent,#ccff00)', color: 'var(--color-accent,#ccff00)' }}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/vault/CredentialShareModal.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Check, Copy, Link2 } from 'lucide-react';
+import { Button, FilterDropdown, Modal, TextInput } from '@/components/design-system';
+import { api, Api } from '@/lib/api';
+
+interface CredentialShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  credentialId: string;
+  credentialName: string;
+}
+
+type ExpiryPreset = '15m' | '1h' | '24h' | '7d' | '30d';
+type AccessMode = 'anyone' | 'password';
+
+const EXPIRY_OPTIONS: { value: ExpiryPreset; label: string }[] = [
+  { value: '15m', label: '15 Minutes' },
+  { value: '1h', label: '1 Hour' },
+  { value: '24h', label: '24 Hours' },
+  { value: '7d', label: '7 Days' },
+  { value: '30d', label: '30 Days' },
+];
+
+const ACCESS_OPTIONS: { value: AccessMode; label: string }[] = [
+  { value: 'anyone', label: 'Anyone with link' },
+  { value: 'password', label: 'Set password' },
+];
+
+export const CredentialShareModal: React.FC<CredentialShareModalProps> = ({
+  isOpen,
+  onClose,
+  credentialId,
+  credentialName,
+}) => {
+  const [expiresAfter, setExpiresAfter] = useState<ExpiryPreset>('24h');
+  const [accessMode, setAccessMode] = useState<AccessMode>('anyone');
+  const [sharePassword, setSharePassword] = useState('');
+  const [oneTimeOnly, setOneTimeOnly] = useState(false);
+
+  const [gistCopied, setGistCopied] = useState(false);
+  const [gistGenerating, setGistGenerating] = useState(false);
+  const [gistError, setGistError] = useState<string | null>(null);
+  const [gistLink, setGistLink] = useState('');
+
+  const [linkCopied, setLinkCopied] = useState(false);
+  const [linkGenerating, setLinkGenerating] = useState(false);
+  const [linkError, setLinkError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setGistError(null);
+    setGistCopied(false);
+    setGistLink('');
+    setLinkError(null);
+    setLinkCopied(false);
+  }, [isOpen]);
+
+  const resolveSharePageUrl = (token: string): string => `${window.location.origin}/share/${token}`;
+
+  const validateOptions = (): string | null => {
+    if (accessMode === 'password' && !sharePassword.trim()) {
+      return 'Password is required when access mode is Set password';
+    }
+    return null;
+  };
+
+  const handleCopySecretGist = async () => {
+    setGistError(null);
+    const validationError = validateOptions();
+    if (validationError) {
+      setGistError(validationError);
+      return;
+    }
+
+    try {
+      setGistGenerating(true);
+      setGistCopied(false);
+      const res = await api.post<{
+        success: boolean;
+        gist: {
+          url: string;
+          marker: string;
+          identifier: string;
+          title: string;
+        };
+        share: {
+          token: string;
+          credentialId: string;
+          expiresAt: number;
+          accessMode: AccessMode;
+          oneTimeOnly: boolean;
+        };
+        link: string;
+      }>(Api.Wallet, '/credential-shares/gist', {
+        credentialId,
+        expiresAfter,
+        accessMode,
+        oneTimeOnly,
+        shareBaseUrl: window.location.origin,
+        ...(accessMode === 'password' ? { password: sharePassword } : {}),
+      });
+
+      setGistLink(res.gist.url);
+      await navigator.clipboard.writeText(res.gist.url);
+      setGistCopied(true);
+      setTimeout(() => setGistCopied(false), 2000);
+    } catch {
+      setGistError(
+        `Failed to create secret gist. Check "gh auth status" in terminal. If needed, run "gh auth login".`,
+      );
+    } finally {
+      setGistGenerating(false);
+    }
+  };
+
+  const handleCopyShareLink = async () => {
+    setLinkError(null);
+    const validationError = validateOptions();
+    if (validationError) {
+      setLinkError(validationError);
+      return;
+    }
+
+    try {
+      setLinkGenerating(true);
+      const res = await api.post<{
+        success: boolean;
+        share: {
+          token: string;
+          credentialId: string;
+          expiresAt: number;
+          accessMode: AccessMode;
+          oneTimeOnly: boolean;
+        };
+      }>(Api.Wallet, '/credential-shares', {
+        credentialId,
+        expiresAfter,
+        accessMode,
+        oneTimeOnly,
+        ...(accessMode === 'password' ? { password: sharePassword } : {}),
+      });
+
+      const link = resolveSharePageUrl(res.share.token);
+      await navigator.clipboard.writeText(link);
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch (err) {
+      setLinkError(err instanceof Error ? err.message : 'Failed to generate share link');
+    } finally {
+      setLinkGenerating(false);
+    }
+  };
+
+  const handleClose = () => {
+    setGistError(null);
+    setGistCopied(false);
+    setGistGenerating(false);
+    setGistLink('');
+    setLinkError(null);
+    setLinkCopied(false);
+    setLinkGenerating(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={`Sharing ${credentialName}`}
+      icon={<Link2 size={16} className="text-[var(--color-text,#0a0a0a)]" />}
+      size="md"
+      footer={(
+        <div className="flex items-center justify-end gap-2">
+          <Button variant="secondary" size="sm" onClick={handleClose}>
+            CLOSE
+          </Button>
+        </div>
+      )}
+    >
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)]">
+            GitHub Gist (Recommended)
+          </div>
+          <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)]">
+            Check <span className="text-[var(--color-text,#0a0a0a)]">`gh auth status`</span> first; run <span className="text-[var(--color-text,#0a0a0a)]">`gh auth login`</span> only if needed.
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            {gistLink ? (
+              <a
+                href={gistLink}
+                target="_blank"
+                rel="noreferrer"
+                className="flex-1 min-w-0 font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] truncate hover:underline"
+                title={gistLink}
+              >
+                {gistLink}
+              </a>
+            ) : (
+              <div className="flex-1 min-w-0 font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] truncate">
+                Click SHARE GIST to generate a link.
+              </div>
+            )}
+            <Button variant="primary" size="sm" onClick={handleCopySecretGist} loading={gistGenerating}>
+              {gistCopied ? <Check size={10} /> : <Copy size={10} />}
+              {gistCopied ? 'COPIED' : 'SHARE GIST'}
+            </Button>
+          </div>
+          {gistError && (
+            <div className="font-mono text-[9px] text-[var(--color-danger,#ef4444)]">
+              {gistError}
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-3">
+          <div className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)]">
+            Share Link (Local)
+          </div>
+          <FilterDropdown
+            label="Link Expires After"
+            options={EXPIRY_OPTIONS}
+            value={expiresAfter}
+            onChange={(value) => setExpiresAfter(value as ExpiryPreset)}
+            compact
+          />
+          <FilterDropdown
+            label="Available To"
+            options={ACCESS_OPTIONS}
+            value={accessMode}
+            onChange={(value) => setAccessMode(value as AccessMode)}
+            compact
+          />
+          {accessMode === 'password' && (
+            <TextInput
+              label="Share Password"
+              type="password"
+              value={sharePassword}
+              onChange={(e) => setSharePassword(e.target.value)}
+              placeholder="Enter password"
+              compact
+            />
+          )}
+          <div className="flex items-center justify-between gap-2">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={oneTimeOnly}
+                onChange={(e) => setOneTimeOnly(e.target.checked)}
+                className="accent-[var(--color-accent,#ccff00)]"
+              />
+              <span className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)]">
+                Can only be viewed one time
+              </span>
+            </label>
+            <Button variant="primary" size="sm" onClick={handleCopyShareLink} loading={linkGenerating}>
+              {linkCopied ? <Check size={10} /> : <Copy size={10} />}
+              {linkCopied ? 'COPIED' : 'COPY LINK'}
+            </Button>
+          </div>
+          {linkError && (
+            <div className="font-mono text-[9px] text-[var(--color-danger,#ef4444)]">
+              {linkError}
+            </div>
+          )}
+        </div>
+
+      </div>
+    </Modal>
+  );
+};