amliq-dashboard 2.0.0

package/src/components/layout/navItems.ts

@@ -0,0 +1,94 @@
+import {
+  LayoutDashboard, AlertCircle, Search, Settings,
+  BarChart3, FileText, Eye, Package, CreditCard,
+  Briefcase, Shield, UserCheck, Globe, Zap,
+  Users, Activity, Server, ShoppingBag, List,
+  Key, Webhook, Wallet, Database, Play, Clock,
+} from 'lucide-react';
+
+export interface NavSection {
+  title: string;
+  items: NavItem[];
+  minRole?: string;
+}
+
+export interface NavItem {
+  icon: typeof LayoutDashboard;
+  label: string;
+  path: string;
+  minRole?: string;
+}
+
+const ROLE_RANK: Record<string, number> = {
+  viewer: 0, auditor: 1, analyst: 2, admin: 3, superadmin: 4,
+};
+
+export function canAccess(userRole: string, minRole?: string): boolean {
+  if (!minRole) return true;
+  return (ROLE_RANK[userRole] ?? 0) >= (ROLE_RANK[minRole] ?? 99);
+}
+
+export const mainNav: NavSection = {
+  title: 'Main',
+  items: [
+    { icon: LayoutDashboard, label: 'Dashboard', path: '/dashboard' },
+    { icon: AlertCircle, label: 'Alerts', path: '/alerts' },
+    { icon: Search, label: 'Screen', path: '/screen' },
+    { icon: Eye, label: 'Monitoring', path: '/monitoring' },
+    { icon: Package, label: 'Batch Jobs', path: '/batch' },
+  ],
+};
+
+export const complianceNav: NavSection = {
+  title: 'Compliance',
+  items: [
+    { icon: Briefcase, label: 'Cases', path: '/compliance/cases' },
+    { icon: Shield, label: 'Risk Assessment', path: '/compliance/risk' },
+    { icon: UserCheck, label: 'PEP Screening', path: '/compliance/pep' },
+    { icon: Globe, label: 'Adverse Media', path: '/compliance/media' },
+    { icon: Zap, label: 'Transactions', path: '/compliance/txn' },
+    { icon: Wallet, label: 'Crypto Screening', path: '/compliance/crypto' },
+  ],
+};
+
+export const systemNav: NavSection = {
+  title: 'System',
+  items: [
+    { icon: BarChart3, label: 'Analytics', path: '/analytics' },
+    { icon: FileText, label: 'Audit Log', path: '/audit', minRole: 'auditor' },
+    { icon: List, label: 'Sanctions Lists', path: '/lists' },
+    { icon: ShoppingBag, label: 'Marketplace', path: '/lists/marketplace' },
+    { icon: Key, label: 'API Keys', path: '/keys', minRole: 'admin' },
+    { icon: Webhook, label: 'Webhooks', path: '/webhooks', minRole: 'admin' },
+    { icon: Clock, label: 'Task History', path: '/tasks' },
+    { icon: Settings, label: 'Configuration', path: '/config', minRole: 'admin' },
+    { icon: CreditCard, label: 'Billing', path: '/billing', minRole: 'admin' },
+    { icon: Users, label: 'Team', path: '/team', minRole: 'admin' },
+  ],
+};
+
+export const adminNav: NavSection = {
+  title: 'Admin',
+  minRole: 'admin',
+  items: [
+    { icon: Server, label: 'Tenants', path: '/admin/tenants' },
+    { icon: Activity, label: 'System Health', path: '/admin/health' },
+    { icon: Database, label: 'Data Sources', path: '/admin/data-sources' },
+    { icon: Play, label: 'Operations', path: '/admin/operations' },
+    { icon: Clock, label: 'Scheduled Tasks', path: '/admin/tasks' },
+  ],
+};
+
+export const platformNav: NavSection = {
+  title: 'Platform',
+  minRole: 'admin',
+  items: [
+    { icon: Server, label: 'Overview', path: '/platform/overview' },
+    { icon: Users, label: 'Users', path: '/platform/users' },
+    { icon: Activity, label: 'API Keys', path: '/platform/keys' },
+  ],
+};
+
+export const navSections: NavSection[] = [
+  mainNav, complianceNav, systemNav, adminNav, platformNav,
+];

package/src/components/lists/ListCard.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Card } from '../ui/Card';
+import { Button } from '../ui/Button';
+import { Badge } from '../ui/Badge';
+import { RefreshCw, Shield } from 'lucide-react';
+import type { ListMeta } from '../../api/lists';
+import type { TFunction } from 'i18next';
+
+const NAMES: Record<string, string> = {
+  'ofac-sdn': 'OFAC SDN', 'ofac': 'OFAC SDN',
+  'opensanctions_default': 'OpenSanctions Global',
+  'un': 'UN Security Council', 'un-consolidated': 'UN Consolidated',
+  'eu_fsf': 'EU Financial Sanctions', 'eu-sanctions': 'EU Sanctions',
+  'uk_ofsi': 'UK OFSI', 'gb-fcdo': 'UK FCDO',
+  'ch-seco': 'Swiss SECO', 'il-nbctf': 'Israel NBCTF',
+  'il-mod-terrorists': 'Israeli MoD Terror List',
+  'icij_offshore': 'ICIJ Offshore Leaks',
+  'gleif_lei': 'GLEIF LEI Registry',
+};
+
+interface ListCardProps {
+  list: ListMeta;
+  triggerSync: (id: string) => void;
+  t: TFunction;
+}
+
+export function ListCard({ list, triggerSync, t }: ListCardProps) {
+  const name = NAMES[list.id] ??
+    list.id.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+
+  return (
+    <Card>
+      <div className="flex items-start justify-between mb-md">
+        <div className="flex items-center gap-md">
+          <div className="flex h-9 w-9 items-center justify-center rounded-apple-md bg-apple-blue/10">
+            <Shield className="w-4 h-4 text-apple-blue" />
+          </div>
+          <div>
+            <h3 className="sf-headline">{name}</h3>
+            <p className="sf-caption text-apple-label-tertiary mt-xs">{list.id}</p>
+          </div>
+        </div>
+        <Badge size="sm" color={list.sync_enabled ? 'green' : 'gray'}>
+          {list.sync_enabled ? 'Active' : 'Disabled'}
+        </Badge>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-md">
+        <div>
+          <p className="sf-caption text-apple-label-tertiary">{t('entities')}</p>
+          <p className="sf-body font-semibold">
+            {list.entity_count.toLocaleString()}
+          </p>
+        </div>
+        <div>
+          <p className="sf-caption text-apple-label-tertiary">{t('threshold')}</p>
+          <p className="sf-body font-semibold">
+            {(list.threshold * 100).toFixed(0)}%
+          </p>
+        </div>
+        <div>
+          <p className="sf-caption text-apple-label-tertiary">{t('last_synced')}</p>
+          <p className="sf-body">
+            {list.last_synced && list.last_synced > 0
+              ? new Date(list.last_synced * 1000).toLocaleDateString()
+              : 'Never'}
+          </p>
+        </div>
+        <div className="flex items-end justify-end">
+          <Button variant="secondary" size="sm"
+            onClick={() => triggerSync(list.id)}
+            className="flex items-center gap-xs">
+            <RefreshCw className="w-3 h-3" /> Sync
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/lists/ListMarketplaceCard.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Shield, Globe, Flag, Check, Plus, Clock, RefreshCw, AlertTriangle, Scale } from 'lucide-react';
+import { Badge } from '../ui/Badge';
+
+interface MarketplaceList {
+  id: string; name: string; description: string; region: string;
+  category: string; entity_count: number; update_frequency: string;
+  last_synced: string; enabled: boolean; tier: string;
+}
+
+interface Props {
+  list: MarketplaceList;
+  onToggle: () => void;
+}
+
+function categoryIcon(cat: string) {
+  if (cat === 'pep') return Globe;
+  if (cat === 'law_enforcement') return AlertTriangle;
+  if (cat === 'regulatory') return Scale;
+  if (cat === 'country') return Flag;
+  return Shield;
+}
+
+const regionColor: Record<string, 'blue' | 'green' | 'orange' | 'purple' | 'gray'> = {
+  Global: 'blue', Americas: 'green', Europe: 'purple',
+  'Middle East': 'orange', 'Asia-Pacific': 'blue', Africa: 'green',
+};
+
+export function ListMarketplaceCard({ list, onToggle }: Props) {
+  const Icon = categoryIcon(list.category);
+  const synced = list.last_synced
+    ? new Date(list.last_synced).toLocaleDateString()
+    : 'Not synced';
+
+  return (
+    <div className="card-vibrancy flex flex-col justify-between p-lg hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(0,0,0,0.3)] transition-all duration-200">
+      <div>
+        <div className="flex items-start justify-between mb-md">
+          <div className="flex items-center gap-md">
+            <div className="flex h-10 w-10 items-center justify-center rounded-apple-md bg-apple-bg-tertiary">
+              <Icon className="w-5 h-5 text-apple-blue" aria-hidden="true" />
+            </div>
+            <div>
+              <h3 className="sf-headline">{list.name}</h3>
+              <Badge size="sm" color={regionColor[list.region] ?? 'gray'}>{list.region}</Badge>
+            </div>
+          </div>
+          {list.enabled && <span className="badge-green animate-pulse">&bull; Active</span>}
+        </div>
+        <p className="sf-caption line-clamp-2 mb-md">{list.description}</p>
+        <div className="grid grid-cols-2 gap-sm mb-md">
+          <div className="flex items-center gap-xs sf-caption">
+            <Shield className="w-3 h-3" aria-hidden="true" />
+            {list.entity_count > 0 ? list.entity_count.toLocaleString() : '—'} entities
+          </div>
+          <div className="flex items-center gap-xs sf-caption">
+            <RefreshCw className="w-3 h-3" aria-hidden="true" />
+            {list.update_frequency}
+          </div>
+          <div className="flex items-center gap-xs sf-caption col-span-2">
+            <Clock className="w-3 h-3" aria-hidden="true" />
+            {synced}
+          </div>
+        </div>
+      </div>
+      <button onClick={onToggle}
+        aria-label={list.enabled ? `Disable ${list.name}` : `Enable ${list.name}`}
+        className={`w-full flex items-center justify-center gap-xs rounded-apple-md py-sm text-[13px] font-semibold transition-all cursor-pointer min-h-[36px] ${
+          list.enabled
+            ? 'bg-apple-green/15 text-apple-green hover:bg-apple-red/15 hover:text-apple-red'
+            : 'bg-apple-blue text-white hover:bg-blue-600'
+        }`}>
+        {list.enabled ? <><Check className="w-3 h-3" /> Enabled</> : <><Plus className="w-3 h-3" /> Enable</>}
+      </button>
+    </div>
+  );
+}

package/src/components/screening/CircularConfidence.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface Props {
+  score: number;
+  size?: number;
+}
+
+export function CircularConfidence({ score, size = 56 }: Props) {
+  const radius = (size - 6) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (score / 100) * circumference;
+
+  const strokeColor = score >= 80 ? '#FF453A'
+    : score >= 60 ? '#FF9F0A'
+    : '#30D158';
+
+  return (
+    <div className="relative flex-shrink-0" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="-rotate-90">
+        <circle
+          cx={size / 2} cy={size / 2} r={radius}
+          fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth={3}
+        />
+        <circle
+          cx={size / 2} cy={size / 2} r={radius}
+          fill="none" stroke={strokeColor} strokeWidth={3}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className="transition-all duration-700"
+        />
+      </svg>
+      <span className="absolute inset-0 flex items-center justify-center text-[12px] font-bold text-white">
+        {score.toFixed(0)}%
+      </span>
+    </div>
+  );
+}

package/src/components/screening/LimitReachedBanner.tsx

@@ -0,0 +1,31 @@
+import { useNavigate } from 'react-router-dom'
+import { ArrowUpCircle } from 'lucide-react'
+import { ApiError } from '../../api/client'
+
+interface Props {
+  error: Error
+}
+
+export function LimitReachedBanner({ error }: Props) {
+  const navigate = useNavigate()
+  const code = error instanceof ApiError ? error.code : ''
+  const isFreeTier = code === 'FREE_TIER_EXHAUSTED'
+
+  return (
+    <div className="max-w-md mx-auto mt-lg p-lg rounded-apple-lg border border-amber-500/20 bg-amber-500/5 text-center" role="alert">
+      <ArrowUpCircle className="w-8 h-8 text-amber-400 mx-auto mb-sm" />
+      <p className="text-white font-semibold mb-xs">
+        {isFreeTier ? 'Free tier limit reached' : 'Screening limit reached'}
+      </p>
+      <p className="sf-caption text-apple-label-secondary mb-md">
+        {isFreeTier
+          ? 'You\'ve used all 100 free screenings this month. Subscribe to unlock more.'
+          : 'You\'ve used all screenings on your current plan. Upgrade to continue.'}
+      </p>
+      <button type="button" onClick={() => navigate('/billing')}
+        className="px-6 py-2 bg-apple-blue hover:bg-apple-blue/90 text-white text-sm font-semibold rounded-apple transition-colors cursor-pointer">
+        {isFreeTier ? 'View Plans' : 'Upgrade Plan'}
+      </button>
+    </div>
+  )
+}

package/src/components/screening/ListSelector.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Card } from '../ui/Card'
+import { Button } from '../ui/Button'
+import { Badge } from '../ui/Badge'
+
+const LISTS = [
+  { id: 'OFAC', label: 'OFAC SDN', color: 'red' as const },
+  { id: 'EU', label: 'EU Consolidated', color: 'blue' as const },
+  { id: 'UN', label: 'UN Consolidated', color: 'blue' as const },
+  { id: 'UKOFSI', label: 'UK OFSI', color: 'purple' as const },
+  { id: 'SECO', label: 'SECO', color: 'orange' as const },
+  { id: 'IsraeliMoD', label: 'Israeli MoD', color: 'orange' as const },
+  { id: 'SDFM', label: 'SDFM Ukraine', color: 'orange' as const },
+]
+
+interface ListSelectorProps {
+  selected: string[]
+  onChange: (lists: string[]) => void
+}
+
+export function ListSelector({ selected, onChange }: ListSelectorProps) {
+  const toggle = (id: string) => {
+    onChange(
+      selected.includes(id)
+        ? selected.filter((s) => s !== id)
+        : [...selected, id],
+    )
+  }
+
+  const allSelected = selected.length === LISTS.length
+
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-md">
+        <h3 className="sf-headline">Sanctions Lists</h3>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => onChange(allSelected ? [] : LISTS.map((l) => l.id))}
+        >
+          {allSelected ? 'Clear All' : 'Select All'}
+        </Button>
+      </div>
+      <div className="space-y-sm">
+        {LISTS.map((list) => (
+          <label
+            key={list.id}
+            className="flex items-center gap-md cursor-pointer py-xs"
+          >
+            <input
+              type="checkbox"
+              checked={selected.includes(list.id)}
+              onChange={() => toggle(list.id)}
+              className="accent-apple-blue w-4 h-4"
+            />
+            <Badge color={list.color} size="sm">
+              {list.label}
+            </Badge>
+          </label>
+        ))}
+      </div>
+    </Card>
+  )
+}

package/src/components/screening/MatchDetailHeader.tsx

@@ -0,0 +1,64 @@
+import { Badge } from '../ui/Badge'
+import { ConfidenceScore } from '../data/ConfidenceScore'
+import type { ScreenMatch } from '../../types'
+
+const listColors: Record<string, 'red' | 'blue' | 'purple' | 'orange' | 'green' | 'gray'> = {
+  OFAC: 'red',
+  EU: 'blue',
+  UN: 'purple',
+  UKOFSI: 'orange',
+  SECO: 'green',
+  SDFM: 'gray',
+  NBCTF: 'gray',
+  IsraeliMoD: 'gray',
+}
+
+function getListColor(listId: string): 'red' | 'blue' | 'purple' | 'orange' | 'green' | 'gray' {
+  const upper = listId.toUpperCase()
+  for (const [key, color] of Object.entries(listColors)) {
+    if (upper.startsWith(key.toUpperCase())) return color
+  }
+  return 'gray'
+}
+
+const typeIcons: Record<string, string> = {
+  Individual: '\u{1F464}',
+  Company: '\u{1F3E2}',
+  Vessel: '\u{1F6A2}',
+  Aircraft: '\u{2708}\u{FE0F}',
+}
+
+interface Props {
+  match: ScreenMatch
+}
+
+export function MatchDetailHeader({ match }: Props) {
+  const pct = Math.round(match.confidence * 100)
+  const entityType = match.type ?? match.entity_type ?? 'Individual'
+  const icon = typeIcons[entityType] ?? '\u{1F4CB}'
+
+  return (
+    <div className="flex items-start justify-between gap-md">
+      <div className="flex-1 min-w-0">
+        <h3 className="sf-headline text-lg truncate">{match.entity_name}</h3>
+        <div className="flex flex-wrap gap-sm mt-sm">
+          <Badge color="gray" size="sm">
+            {icon} {entityType}
+          </Badge>
+          <Badge color={getListColor(match.list_id)} size="sm">
+            {match.list_id}
+          </Badge>
+          {match.disposition && (
+            <Badge
+              color={match.disposition === 'AutoEscalate' ? 'red' : 'orange'}
+              size="sm"
+            >
+              {match.disposition}
+            </Badge>
+          )}
+        </div>
+      </div>
+      <ConfidenceScore score={pct} size="md" />
+    </div>
+  )
+}

package/src/components/screening/MatchEntityInfo.tsx

@@ -0,0 +1,56 @@
+import { Badge } from '../ui/Badge'
+import type { ScreenMatch } from '../../types'
+
+interface Props {
+  match: ScreenMatch
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-baseline gap-sm">
+      <span className="sf-caption text-white/40 w-24 shrink-0">{label}</span>
+      <span className="sf-body text-white/90 truncate">{value}</span>
+    </div>
+  )
+}
+
+export function MatchEntityInfo({ match }: Props) {
+  const hasGiven = match.given_name && match.given_name.trim()
+  const hasFamily = match.family_name && match.family_name.trim()
+  const hasDob = match.date_of_birth && match.date_of_birth.trim()
+  const hasNationalities = match.nationalities && match.nationalities.length > 0
+  const originalScript = match.original_script
+    ?? (match.metadata?.original_script as string | undefined)
+  const hasOriginal = originalScript && originalScript.trim()
+
+  const hasAnyInfo = hasGiven || hasFamily || hasDob || hasNationalities || hasOriginal
+  if (!hasAnyInfo) return null
+
+  return (
+    <div className="space-y-xs">
+      {(hasGiven || hasFamily) && (
+        <InfoRow
+          label="Name"
+          value={[match.given_name, match.family_name].filter(Boolean).join(' ')}
+        />
+      )}
+      {hasDob && <InfoRow label="Date of Birth" value={match.date_of_birth!} />}
+      {hasOriginal && (
+        <div className="flex items-baseline gap-sm">
+          <span className="sf-caption text-white/40 w-24 shrink-0">Script</span>
+          <span className="sf-body text-white/50 italic truncate">
+            {originalScript}
+          </span>
+        </div>
+      )}
+      {hasNationalities && (
+        <div className="flex items-center gap-sm flex-wrap">
+          <span className="sf-caption text-white/40 w-24 shrink-0">Nationality</span>
+          {match.nationalities!.map((nat) => (
+            <Badge key={nat} color="gray" size="sm">{nat}</Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/screening/MatchEvidenceBars.tsx

@@ -0,0 +1,65 @@
+import type { LayerEvidence } from '../../types'
+
+interface Props {
+  layers: LayerEvidence[]
+}
+
+function barColor(pct: number): string {
+  if (pct >= 80) return 'bg-apple-red'
+  if (pct >= 50) return 'bg-apple-orange'
+  return 'bg-apple-green'
+}
+
+function gradientColor(pct: number): string {
+  if (pct >= 80) return 'from-apple-red to-apple-orange'
+  if (pct >= 50) return 'from-apple-orange to-apple-yellow'
+  return 'from-apple-green to-apple-teal'
+}
+
+function EvidenceBar({ layer }: { layer: LayerEvidence }) {
+  const pct = Math.round(layer.score * 100)
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-xs">
+        <span className="sf-caption font-semibold text-white/80">
+          {layer.layer}
+        </span>
+        <span className="sf-caption text-white/50">
+          {layer.algorithm} — {pct}%
+        </span>
+      </div>
+      <div className="h-1.5 bg-white/[0.06] rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full bg-gradient-to-r ${gradientColor(pct)} transition-all duration-500`}
+          style={{ width: `${pct}%` }}
+          role="progressbar"
+          aria-valuenow={pct}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={`${layer.layer} score`}
+        />
+      </div>
+      {layer.matched && (
+        <p className="sf-caption text-white/30 mt-xs truncate">
+          Matched: &ldquo;{layer.matched}&rdquo;
+        </p>
+      )}
+    </div>
+  )
+}
+
+export function MatchEvidenceBars({ layers }: Props) {
+  if (!layers || layers.length === 0) return null
+
+  return (
+    <div className="space-y-md">
+      <h4 className="sf-caption font-semibold text-white/50 uppercase tracking-wider">
+        Evidence Layers
+      </h4>
+      {layers.map((layer, i) => (
+        <EvidenceBar key={`${layer.layer}-${i}`} layer={layer} />
+      ))}
+    </div>
+  )
+}

package/src/components/screening/MatchMetadata.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react'
+import { Badge } from '../ui/Badge'
+
+interface Props {
+  metadata?: Record<string, unknown>
+}
+
+function MetadataRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-baseline gap-sm py-xs">
+      <span className="sf-caption text-white/40 w-32 shrink-0 capitalize">
+        {label.replace(/_/g, ' ')}
+      </span>
+      <span className="sf-caption text-white/70 break-words min-w-0">
+        {value}
+      </span>
+    </div>
+  )
+}
+
+function renderValue(value: unknown): string {
+  if (value === null || value === undefined) return '-'
+  if (Array.isArray(value)) return value.join(', ')
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+function extractArrayField(metadata: Record<string, unknown>, key: string): string[] {
+  const val = metadata[key]
+  if (Array.isArray(val)) return val.map(String)
+  if (typeof val === 'string' && val.trim()) return [val]
+  return []
+}
+
+export function MatchMetadata({ metadata }: Props) {
+  const [expanded, setExpanded] = useState(false)
+  if (!metadata || Object.keys(metadata).length === 0) return null
+
+  const aliases = extractArrayField(metadata, 'aliases')
+  const programs = extractArrayField(metadata, 'programs')
+  const addresses = extractArrayField(metadata, 'addresses')
+  const ids = extractArrayField(metadata, 'identifiers')
+
+  const otherKeys = Object.keys(metadata).filter(
+    (k) => !['aliases', 'programs', 'addresses', 'identifiers', 'original_script'].includes(k)
+  )
+
+  const hasContent = aliases.length > 0 || programs.length > 0 ||
+    addresses.length > 0 || ids.length > 0 || otherKeys.length > 0
+
+  if (!hasContent) return null
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between cursor-pointer group"
+      >
+        <h4 className="sf-caption font-semibold text-white/50 uppercase tracking-wider">
+          Metadata
+        </h4>
+        <span className="sf-caption text-white/30 group-hover:text-white/50 transition-colors">
+          {expanded ? 'Hide' : 'Show'}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="mt-md space-y-sm animate-fade-in">
+          {aliases.length > 0 && (
+            <div className="flex flex-wrap items-center gap-sm">
+              <span className="sf-caption text-white/40 w-32 shrink-0">Aliases</span>
+              {aliases.map((a) => <Badge key={a} color="gray" size="sm">{a}</Badge>)}
+            </div>
+          )}
+          {programs.length > 0 && (
+            <div className="flex flex-wrap items-center gap-sm">
+              <span className="sf-caption text-white/40 w-32 shrink-0">Programs</span>
+              {programs.map((p) => <Badge key={p} color="blue" size="sm">{p}</Badge>)}
+            </div>
+          )}
+          {addresses.length > 0 && addresses.map((a, i) => (
+            <MetadataRow key={`addr-${i}`} label="Address" value={a} />
+          ))}
+          {ids.length > 0 && ids.map((id, i) => (
+            <MetadataRow key={`id-${i}`} label="ID" value={id} />
+          ))}
+          {otherKeys.map((k) => (
+            <MetadataRow key={k} label={k} value={renderValue(metadata[k])} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}