From 84b00fa1c5094b57ec37d2209f7f105a1171ef82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:15:26 +0100
Subject: [PATCH 01/14] feat: add credential metadata display component with
 basic structure

- Created new React component for displaying credential metadata
- Added expandable accordion interface for credential details
- Implemented accessibility features with ARIA attributes
- Added responsive design with Tailwind CSS styling
---
 .../credential-metadata-display.tsx           | 218 ++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 frontend/src/components/credential-metadata-display.tsx

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
new file mode 100644
index 00000000..70642dbf
--- /dev/null
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Info, Calendar, Clock, Building2, Tag, ChevronDown, ChevronUp } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAccessibility } from '@/contexts/AccessibilityContext';
+
+interface CredentialMetadata {
+  id: string;
+  name: string;
+  type: string;
+  issuer: string;
+  issuerName: string;
+  issuedAt: string;
+  updatedAt: string;
+  expiresAt?: string;
+  status: 'active' | 'expired' | 'revoked';
+  description?: string;
+}
+
+interface CredentialMetadataDisplayProps {
+  credentials: CredentialMetadata[];
+}
+
+export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDisplayProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const { announceToScreenReader } = useAccessibility();
+
+  const handleToggleExpand = useCallback(
+    (id: string) => {
+      const newExpandedId = expandedId === id ? null : id;
+      setExpandedId(newExpandedId);
+      announceToScreenReader(
+        newExpandedId ? 'Expanded credential details' : 'Collapsed credential details'
+      );
+    },
+    [expandedId, announceToScreenReader]
+  );
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatDateTime = (dateString: string) => {
+    return new Date(dateString).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'expired':
+        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'revoked':
+        return 'bg-red-500/20 text-red-400 border-red-500/30';
+      default:
+        return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+  };
+
+  return (
+    <div role="region" aria-labelledby="metadata-heading">
+      <h2 id="metadata-heading" className="text-2xl font-bold text-white mb-6">
+        Credential Metadata
+      </h2>
+
+      <div className="space-y-4" role="list" aria-label="Credential metadata list">
+        <AnimatePresence mode="popLayout">
+          {credentials.length === 0 ? (
+            <motion.div
+              key="empty"
+              className="text-center py-8 text-green-200"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              role="status"
+            >
+              <Info className="w-12 h-12 mx-auto mb-4 opacity-50" aria-hidden="true" />
+              <p>No credentials to display</p>
+            </motion.div>
+          ) : (
+            credentials.map((credential, index) => (
+              <motion.div
+                key={credential.id}
+                className="bg-white/10 rounded-lg overflow-hidden"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ delay: index * 0.05, type: 'spring', stiffness: 300, damping: 25 }}
+                layout
+                role="listitem"
+                aria-label={`${credential.name} credential from ${credential.issuerName}`}
+              >
+                {/* Header */}
+                <div
+                  className="p-4 flex items-center justify-between cursor-pointer hover:bg-white/5 transition-colors"
+                  onClick={() => handleToggleExpand(credential.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleToggleExpand(credential.id);
+                    }
+                  }}
+                  tabIndex={0}
+                  role="button"
+                  aria-expanded={expandedId === credential.id}
+                  aria-controls={`metadata-details-${credential.id}`}
+                >
+                  <div className="flex items-center gap-4">
+                    <Info className="w-6 h-6 text-green-400" aria-hidden="true" />
+                    <div>
+                      <p className="text-white font-medium">{credential.name}</p>
+                      <div className="flex items-center gap-2 mt-1">
+                        <span className="text-green-200 text-sm">{credential.type}</span>
+                        <span className="text-green-400">·</span>
+                        <span className={`text-xs px-2 py-0.5 rounded border ${getStatusColor(credential.status)}`}>
+                          {credential.status.charAt(0).toUpperCase() + credential.status.slice(1)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  {expandedId === credential.id ? (
+                    <ChevronUp className="w-5 h-5 text-green-400" aria-hidden="true" />
+                  ) : (
+                    <ChevronDown className="w-5 h-5 text-green-400" aria-hidden="true" />
+                  )}
+                </div>
+
+                {/* Details */}
+                <AnimatePresence>
+                  {expandedId === credential.id && (
+                    <motion.div
+                      id={`metadata-details-${credential.id}`}
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: 'auto', opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="border-t border-green-400/20"
+                    >
+                      <div className="p-4 space-y-3">
+                        {/* Issuer Info */}
+                        <div className="flex items-start gap-3">
+                          <Building2 className="w-5 h-5 text-green-400 mt-0.5" aria-hidden="true" />
+                          <div>
+                            <p className="text-green-200 text-sm">Issuer</p>
+                            <p className="text-white">{credential.issuerName}</p>
+                            <p className="text-green-300 text-xs font-mono mt-1 break-all">
+                              {credential.issuer}
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Credential Type */}
+                        <div className="flex items-start gap-3">
+                          <Tag className="w-5 h-5 text-green-400 mt-0.5" aria-hidden="true" />
+                          <div>
+                            <p className="text-green-200 text-sm">Type</p>
+                            <p className="text-white">{credential.type}</p>
+                          </div>
+                        </div>
+
+                        {/* Dates */}
+                        <div className="flex items-start gap-3">
+                          <Calendar className="w-5 h-5 text-green-400 mt-0.5" aria-hidden="true" />
+                          <div>
+                            <p className="text-green-200 text-sm">Issued Date</p>
+                            <p className="text-white">{formatDate(credential.issuedAt)}</p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-start gap-3">
+                          <Clock className="w-5 h-5 text-green-400 mt-0.5" aria-hidden="true" />
+                          <div>
+                            <p className="text-green-200 text-sm">Last Updated</p>
+                            <p className="text-white">{formatDateTime(credential.updatedAt)}</p>
+                          </div>
+                        </div>
+
+                        {/* Expiry if present */}
+                        {credential.expiresAt && (
+                          <div className="flex items-start gap-3">
+                            <Calendar className="w-5 h-5 text-yellow-400 mt-0.5" aria-hidden="true" />
+                            <div>
+                              <p className="text-green-200 text-sm">Expires</p>
+                              <p className="text-white">{formatDate(credential.expiresAt)}</p>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Description if present */}
+                        {credential.description && (
+                          <div className="mt-3 pt-3 border-t border-green-400/20">
+                            <p className="text-green-200 text-sm mb-1">Description</p>
+                            <p className="text-green-100 text-sm">{credential.description}</p>
+                          </div>
+                        )}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.div>
+            ))
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

From 35d659becc70e17831cbd80da4f1fe0a2bf45846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:16:09 +0100
Subject: [PATCH 02/14] feat: enhance metadata display with summary and
 relative time

- Added credential status summary section (active/expired/revoked counts)
- Implemented relative time formatting for dates
- Added status indicators with color-coded badges
- Improved visual hierarchy with summary section
---
 .../credential-metadata-display.tsx           | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index 70642dbf..dc57baaf 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -37,6 +37,10 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     [expandedId, announceToScreenReader]
   );
 
+  const activeCount = credentials.filter((c) => c.status === 'active').length;
+  const expiredCount = credentials.filter((c) => c.status === 'expired').length;
+  const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -55,6 +59,20 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     });
   };
 
+  const getRelativeTime = (dateString: string) => {
+    const now = new Date();
+    const date = new Date(dateString);
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) return 'Today';
+    if (diffDays === 1) return 'Yesterday';
+    if (diffDays < 7) return `${diffDays} days ago`;
+    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+    return `${Math.floor(diffDays / 365)} years ago`;
+  };
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'active':
@@ -74,6 +92,36 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
         Credential Metadata
       </h2>
 
+      {/* Summary Section */}
+      {credentials.length > 0 && (
+        <div className="bg-white/5 rounded-lg p-4 mb-6">
+          <div className="flex items-center gap-6 text-sm">
+            <div className="flex items-center gap-2">
+              <span className="text-green-200">Total:</span>
+              <span className="text-white font-medium">{credentials.length}</span>
+            </div>
+            {activeCount > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                <span className="text-green-200">{activeCount} Active</span>
+              </div>
+            )}
+            {expiredCount > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-yellow-500"></span>
+                <span className="text-green-200">{expiredCount} Expired</span>
+              </div>
+            )}
+            {revokedCount > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-red-500"></span>
+                <span className="text-green-200">{revokedCount} Revoked</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       <div className="space-y-4" role="list" aria-label="Credential metadata list">
         <AnimatePresence mode="popLayout">
           {credentials.length === 0 ? (

From 54b61d817e1b9090c30fd9aa67de1f2ecbc95dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:17:12 +0100
Subject: [PATCH 03/14] feat: add search and filter functionality for
 credentials

- Implemented search by credential name, issuer, and type
- Added status filter dropdown (active/expired/revoked)
- Created real-time filtering with useMemo for performance
- Added search input with icon and filter controls
---
 .../credential-metadata-display.tsx           | 54 +++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index dc57baaf..ff818cb4 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useCallback } from 'react';
-import { Info, Calendar, Clock, Building2, Tag, ChevronDown, ChevronUp } from 'lucide-react';
+import { useState, useCallback, useMemo } from 'react';
+import { Info, Calendar, Clock, Building2, Tag, ChevronDown, ChevronUp, Search, Filter } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useAccessibility } from '@/contexts/AccessibilityContext';
 
@@ -24,8 +24,21 @@ interface CredentialMetadataDisplayProps {
 
 export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDisplayProps) {
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'expired' | 'revoked'>('all');
   const { announceToScreenReader } = useAccessibility();
 
+  const filteredCredentials = useMemo(() => {
+    return credentials.filter((credential) => {
+      const matchesSearch =
+        credential.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        credential.issuerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        credential.type.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesStatus = statusFilter === 'all' || credential.status === statusFilter;
+      return matchesSearch && matchesStatus;
+    });
+  }, [credentials, searchQuery, statusFilter]);
+
   const handleToggleExpand = useCallback(
     (id: string) => {
       const newExpandedId = expandedId === id ? null : id;
@@ -122,9 +135,42 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
         </div>
       )}
 
+      {/* Search and Filter */}
+      {credentials.length > 0 && (
+        <div className="bg-white/5 rounded-lg p-4 mb-6">
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-green-400" aria-hidden="true" />
+              <input
+                type="text"
+                placeholder="Search credentials..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full bg-white/10 border border-green-400/30 rounded-lg pl-10 pr-4 py-2 text-white placeholder-green-300 focus:outline-none focus:border-green-400"
+                aria-label="Search credentials"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Filter className="w-4 h-4 text-green-400" aria-hidden="true" />
+              <select
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value as 'all' | 'active' | 'expired' | 'revoked')}
+                className="bg-white/10 border border-green-400/30 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-green-400"
+                aria-label="Filter by status"
+              >
+                <option value="all">All Status</option>
+                <option value="active">Active</option>
+                <option value="expired">Expired</option>
+                <option value="revoked">Revoked</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="space-y-4" role="list" aria-label="Credential metadata list">
         <AnimatePresence mode="popLayout">
-          {credentials.length === 0 ? (
+          {filteredCredentials.length === 0 ? (
             <motion.div
               key="empty"
               className="text-center py-8 text-green-200"
@@ -137,7 +183,7 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
               <p>No credentials to display</p>
             </motion.div>
           ) : (
-            credentials.map((credential, index) => (
+            filteredCredentials.map((credential, index) => (
               <motion.div
                 key={credential.id}
                 className="bg-white/10 rounded-lg overflow-hidden"

From bdff4a0c69848c58839e2b4e7dc955025ae199cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:17:40 +0100
Subject: [PATCH 04/14] feat: improve credential header with inline metadata
 preview

- Added inline preview of key metadata (type, issuer, date)
- Improved header layout with better visual hierarchy
- Added relative time display in header
- Enhanced readability with icon-labeled metadata fields
---
 .../credential-metadata-display.tsx           | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index ff818cb4..a830f2a2 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -212,15 +212,27 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                 >
                   <div className="flex items-center gap-4">
                     <Info className="w-6 h-6 text-green-400" aria-hidden="true" />
-                    <div>
-                      <p className="text-white font-medium">{credential.name}</p>
-                      <div className="flex items-center gap-2 mt-1">
-                        <span className="text-green-200 text-sm">{credential.type}</span>
-                        <span className="text-green-400">·</span>
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3">
+                        <p className="text-white font-medium">{credential.name}</p>
                         <span className={`text-xs px-2 py-0.5 rounded border ${getStatusColor(credential.status)}`}>
                           {credential.status.charAt(0).toUpperCase() + credential.status.slice(1)}
                         </span>
                       </div>
+                      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-green-200">
+                        <span className="flex items-center gap-1">
+                          <Tag className="w-3 h-3" aria-hidden="true" />
+                          {credential.type}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <Building2 className="w-3 h-3" aria-hidden="true" />
+                          {credential.issuerName}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <Calendar className="w-3 h-3" aria-hidden="true" />
+                          {getRelativeTime(credential.issuedAt)}
+                        </span>
+                      </div>
                     </div>
                   </div>
                   {expandedId === credential.id ? (

From 2e4522a339b4a4b86c9f1b3789b6fbefdef62e64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:18:27 +0100
Subject: [PATCH 05/14] feat: add bulk selection and export functionality

- Implemented select all/deselect all checkbox
- Added individual credential selection
- Created bulk export to JSON functionality
- Added selected count display and export button
---
 .../credential-metadata-display.tsx           | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index a830f2a2..6e178220 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -26,6 +26,7 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'expired' | 'revoked'>('all');
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const { announceToScreenReader } = useAccessibility();
 
   const filteredCredentials = useMemo(() => {
@@ -50,6 +51,42 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     [expandedId, announceToScreenReader]
   );
 
+  const handleSelectAll = useCallback(() => {
+    if (selectedIds.size === filteredCredentials.length) {
+      setSelectedIds(new Set());
+      announceToScreenReader('Deselected all credentials');
+    } else {
+      setSelectedIds(new Set(filteredCredentials.map((c) => c.id)));
+      announceToScreenReader(`Selected ${filteredCredentials.length} credentials`);
+    }
+  }, [filteredCredentials, selectedIds.size, announceToScreenReader]);
+
+  const handleSelectCredential = useCallback(
+    (id: string) => {
+      const newSelected = new Set(selectedIds);
+      if (newSelected.has(id)) {
+        newSelected.delete(id);
+      } else {
+        newSelected.add(id);
+      }
+      setSelectedIds(newSelected);
+    },
+    [selectedIds]
+  );
+
+  const handleBulkExport = useCallback(() => {
+    const selectedCredentials = filteredCredentials.filter((c) => selectedIds.has(c.id));
+    const exportData = JSON.stringify(selectedCredentials, null, 2);
+    const blob = new Blob([exportData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `credentials-metadata-${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    announceToScreenReader(`Exported ${selectedIds.size} credentials`);
+  }, [filteredCredentials, selectedIds, announceToScreenReader]);
+
   const activeCount = credentials.filter((c) => c.status === 'active').length;
   const expiredCount = credentials.filter((c) => c.status === 'expired').length;
   const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
@@ -168,6 +205,38 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
         </div>
       )}
 
+      {/* Bulk Actions */}
+      {filteredCredentials.length > 0 && (
+        <div className="flex items-center justify-between mb-4 px-2">
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={selectedIds.size === filteredCredentials.length && filteredCredentials.length > 0}
+                onChange={handleSelectAll}
+                className="w-4 h-4 rounded border-green-400 text-green-600 focus:ring-green-500 bg-white/10"
+                aria-label="Select all credentials"
+              />
+              <span className="text-green-200 text-sm">
+                {selectedIds.size > 0 ? `${selectedIds.size} selected` : 'Select all'}
+              </span>
+            </label>
+          </div>
+          {selectedIds.size > 0 && (
+            <motion.button
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm transition-colors"
+              onClick={handleBulkExport}
+              aria-label={`Export ${selectedIds.size} selected credentials`}
+            >
+              <Info className="w-4 h-4" aria-hidden="true" />
+              Export Selected
+            </motion.button>
+          )}
+        </div>
+      )}
+
       <div className="space-y-4" role="list" aria-label="Credential metadata list">
         <AnimatePresence mode="popLayout">
           {filteredCredentials.length === 0 ? (
@@ -211,6 +280,14 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                   aria-controls={`metadata-details-${credential.id}`}
                 >
                   <div className="flex items-center gap-4">
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(credential.id)}
+                      onChange={() => handleSelectCredential(credential.id)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-4 h-4 rounded border-green-400 text-green-600 focus:ring-green-500 bg-white/10"
+                      aria-label={`Select ${credential.name}`}
+                    />
                     <Info className="w-6 h-6 text-green-400" aria-hidden="true" />
                     <div className="flex-1">
                       <div className="flex items-center gap-3">

From 88b96bdd0755d5c932d9d25574a8a8c605c2361f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:19:42 +0100
Subject: [PATCH 06/14] feat: enhance summary with statistics grid and issuer
 tracking

- Added grid layout for credential statistics
- Display unique issuer and type counts
- Improved visual hierarchy with color-coded statistics
- Added breakdown of expired and revoked credentials
---
 .../credential-metadata-display.tsx           | 57 ++++++++++++-------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index 6e178220..9d748578 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -91,6 +91,9 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
   const expiredCount = credentials.filter((c) => c.status === 'expired').length;
   const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
 
+  const uniqueIssuers = new Set(credentials.map((c) => c.issuer)).size;
+  const uniqueTypes = new Set(credentials.map((c) => c.type)).size;
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -145,30 +148,40 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
       {/* Summary Section */}
       {credentials.length > 0 && (
         <div className="bg-white/5 rounded-lg p-4 mb-6">
-          <div className="flex items-center gap-6 text-sm">
-            <div className="flex items-center gap-2">
-              <span className="text-green-200">Total:</span>
-              <span className="text-white font-medium">{credentials.length}</span>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-white">{credentials.length}</div>
+              <div className="text-green-200 text-sm">Total Credentials</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-400">{activeCount}</div>
+              <div className="text-green-200 text-sm">Active</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-400">{uniqueIssuers}</div>
+              <div className="text-green-200 text-sm">Unique Issuers</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-purple-400">{uniqueTypes}</div>
+              <div className="text-green-200 text-sm">Credential Types</div>
             </div>
-            {activeCount > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                <span className="text-green-200">{activeCount} Active</span>
-              </div>
-            )}
-            {expiredCount > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-yellow-500"></span>
-                <span className="text-green-200">{expiredCount} Expired</span>
-              </div>
-            )}
-            {revokedCount > 0 && (
-              <div className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-red-500"></span>
-                <span className="text-green-200">{revokedCount} Revoked</span>
-              </div>
-            )}
           </div>
+          {(expiredCount > 0 || revokedCount > 0) && (
+            <div className="mt-4 pt-4 border-t border-green-400/20 flex items-center gap-4 text-sm">
+              {expiredCount > 0 && (
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-yellow-500"></span>
+                  <span className="text-green-200">{expiredCount} Expired</span>
+                </div>
+              )}
+              {revokedCount > 0 && (
+                <div className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-red-500"></span>
+                  <span className="text-green-200">{revokedCount} Revoked</span>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
 

From 0af74498b8735f53753e1d45c2b47c963b5482c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:21:00 +0100
Subject: [PATCH 07/14] feat: add validation status and technical metadata
 fields

- Added version, schema, and proof type fields
- Implemented validation status indicator with color coding
- Added technical details grid for advanced metadata
- Enhanced credential details with signature algorithm info
---
 .../credential-metadata-display.tsx           | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index 9d748578..bd3fd7a0 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -16,6 +16,10 @@ interface CredentialMetadata {
   expiresAt?: string;
   status: 'active' | 'expired' | 'revoked';
   description?: string;
+  version?: string;
+  schema?: string;
+  proofType?: string;
+  signatureAlgorithm?: string;
 }
 
 interface CredentialMetadataDisplayProps {
@@ -400,6 +404,55 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                             <p className="text-green-100 text-sm">{credential.description}</p>
                           </div>
                         )}
+
+                        {/* Technical Details */}
+                        {(credential.version || credential.schema || credential.proofType) && (
+                          <div className="mt-3 pt-3 border-t border-green-400/20">
+                            <p className="text-green-200 text-sm mb-2">Technical Details</p>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
+                              {credential.version && (
+                                <div>
+                                  <span className="text-green-300">Version:</span>
+                                  <span className="text-white ml-2">{credential.version}</span>
+                                </div>
+                              )}
+                              {credential.schema && (
+                                <div>
+                                  <span className="text-green-300">Schema:</span>
+                                  <span className="text-white ml-2 font-mono text-xs break-all">{credential.schema}</span>
+                                </div>
+                              )}
+                              {credential.proofType && (
+                                <div>
+                                  <span className="text-green-300">Proof Type:</span>
+                                  <span className="text-white ml-2">{credential.proofType}</span>
+                                </div>
+                              )}
+                              {credential.signatureAlgorithm && (
+                                <div>
+                                  <span className="text-green-300">Algorithm:</span>
+                                  <span className="text-white ml-2">{credential.signatureAlgorithm}</span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Validation Status */}
+                        <div className="mt-3 pt-3 border-t border-green-400/20">
+                          <p className="text-green-200 text-sm mb-2">Validation Status</p>
+                          <div className="flex items-center gap-2">
+                            <span className={`w-2 h-2 rounded-full ${
+                              credential.status === 'active' ? 'bg-green-500' : 
+                              credential.status === 'expired' ? 'bg-yellow-500' : 'bg-red-500'
+                            }`}></span>
+                            <span className="text-white text-sm">
+                              {credential.status === 'active' ? 'Valid and verified' :
+                               credential.status === 'expired' ? 'Expired - requires renewal' :
+                               'Revoked - contact issuer'}
+                            </span>
+                          </div>
+                        </div>
                       </div>
                     </motion.div>
                   )}

From c5dc4941d213e402af08d80c3149763ceac09084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:22:46 +0100
Subject: [PATCH 08/14] feat: add credential comparison feature

- Implemented compare mode toggle
- Added side-by-side comparison panel
- Highlight differences between credentials in yellow
- Limited to 2 credentials for comparison
---
 .../credential-metadata-display.tsx           | 118 +++++++++++++++---
 1 file changed, 104 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index bd3fd7a0..e629c0a4 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -31,6 +31,7 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'expired' | 'revoked'>('all');
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [compareMode, setCompareMode] = useState(false);
   const { announceToScreenReader } = useAccessibility();
 
   const filteredCredentials = useMemo(() => {
@@ -67,6 +68,10 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
 
   const handleSelectCredential = useCallback(
     (id: string) => {
+      if (compareMode && selectedIds.size >= 2) {
+        announceToScreenReader('Maximum 2 credentials can be compared at once');
+        return;
+      }
       const newSelected = new Set(selectedIds);
       if (newSelected.has(id)) {
         newSelected.delete(id);
@@ -75,9 +80,31 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
       }
       setSelectedIds(newSelected);
     },
-    [selectedIds]
+    [selectedIds, compareMode, announceToScreenReader]
   );
 
+  const handleToggleCompareMode = useCallback(() => {
+    setCompareMode((prev) => !prev);
+    setSelectedIds(new Set());
+    announceToScreenReader(compareMode ? 'Exited compare mode' : 'Entered compare mode - select 2 credentials to compare');
+  }, [compareMode, announceToScreenReader]);
+
+  const compareCredentials = useMemo(() => {
+    if (selectedIds.size !== 2) return null;
+    const selected = credentials.filter((c) => selectedIds.has(c.id));
+    if (selected.length !== 2) return null;
+
+    const [cred1, cred2] = selected;
+    const differences: string[] = [];
+
+    if (cred1.type !== cred2.type) differences.push('type');
+    if (cred1.issuer !== cred2.issuer) differences.push('issuer');
+    if (cred1.issuedAt !== cred2.issuedAt) differences.push('issuedAt');
+    if (cred1.status !== cred2.status) differences.push('status');
+
+    return { credentials: selected, differences };
+  }, [selectedIds, credentials]);
+
   const handleBulkExport = useCallback(() => {
     const selectedCredentials = filteredCredentials.filter((c) => selectedIds.has(c.id));
     const exportData = JSON.stringify(selectedCredentials, null, 2);
@@ -226,20 +253,33 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
       {filteredCredentials.length > 0 && (
         <div className="flex items-center justify-between mb-4 px-2">
           <div className="flex items-center gap-3">
-            <label className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={selectedIds.size === filteredCredentials.length && filteredCredentials.length > 0}
-                onChange={handleSelectAll}
-                className="w-4 h-4 rounded border-green-400 text-green-600 focus:ring-green-500 bg-white/10"
-                aria-label="Select all credentials"
-              />
-              <span className="text-green-200 text-sm">
-                {selectedIds.size > 0 ? `${selectedIds.size} selected` : 'Select all'}
-              </span>
-            </label>
+            {!compareMode && (
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={selectedIds.size === filteredCredentials.length && filteredCredentials.length > 0}
+                  onChange={handleSelectAll}
+                  className="w-4 h-4 rounded border-green-400 text-green-600 focus:ring-green-500 bg-white/10"
+                  aria-label="Select all credentials"
+                />
+                <span className="text-green-200 text-sm">
+                  {selectedIds.size > 0 ? `${selectedIds.size} selected` : 'Select all'}
+                </span>
+              </label>
+            )}
+            <button
+              onClick={handleToggleCompareMode}
+              className={`px-3 py-1 rounded text-sm transition-colors ${
+                compareMode
+                  ? 'bg-green-600 text-white'
+                  : 'bg-white/10 text-green-200 hover:bg-white/20'
+              }`}
+              aria-label={compareMode ? 'Exit compare mode' : 'Enter compare mode'}
+            >
+              {compareMode ? 'Exit Compare' : 'Compare'}
+            </button>
           </div>
-          {selectedIds.size > 0 && (
+          {selectedIds.size > 0 && !compareMode && (
             <motion.button
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
@@ -254,6 +294,56 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
         </div>
       )}
 
+      {/* Comparison Panel */}
+      <AnimatePresence>
+        {compareMode && compareCredentials && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="bg-white/5 rounded-lg p-4 mb-6 overflow-hidden"
+          >
+            <h3 className="text-lg font-semibold text-white mb-4">Credential Comparison</h3>
+            <div className="grid grid-cols-2 gap-4">
+              {compareCredentials.credentials.map((cred, index) => (
+                <div key={cred.id} className="bg-white/10 rounded-lg p-3">
+                  <p className="text-white font-medium mb-2">{cred.name}</p>
+                  <div className="space-y-1 text-sm">
+                    <p className={compareCredentials.differences.includes('type') ? 'text-yellow-400' : 'text-green-200'}>
+                      Type: {cred.type}
+                    </p>
+                    <p className={compareCredentials.differences.includes('issuer') ? 'text-yellow-400' : 'text-green-200'}>
+                      Issuer: {cred.issuerName}
+                    </p>
+                    <p className={compareCredentials.differences.includes('status') ? 'text-yellow-400' : 'text-green-200'}>
+                      Status: {cred.status}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {compareCredentials.differences.length > 0 && (
+              <div className="mt-4 pt-3 border-t border-green-400/20">
+                <p className="text-yellow-400 text-sm">
+                  Differences found in: {compareCredentials.differences.join(', ')}
+                </p>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Compare Mode Instructions */}
+      {compareMode && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3 mb-4 text-blue-200 text-sm"
+        >
+          Select 2 credentials to compare their metadata side by side.
+        </motion.div>
+      )}
+
       <div className="space-y-4" role="list" aria-label="Credential metadata list">
         <AnimatePresence mode="popLayout">
           {filteredCredentials.length === 0 ? (

From 4a17545dc390bc8d84af50ea6360b9cace61b9d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:23:39 +0100
Subject: [PATCH 09/14] feat: add metadata history tracking for credentials

- Added MetadataHistoryItem interface for tracking changes
- Implemented scrollable history section in credential details
- Display old and new values with strikethrough formatting
- Show timestamp and performer for each change
---
 .../credential-metadata-display.tsx           | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index e629c0a4..b2a1ea93 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -20,6 +20,16 @@ interface CredentialMetadata {
   schema?: string;
   proofType?: string;
   signatureAlgorithm?: string;
+  history?: MetadataHistoryItem[];
+}
+
+interface MetadataHistoryItem {
+  timestamp: string;
+  action: string;
+  field: string;
+  oldValue?: string;
+  newValue?: string;
+  performedBy: string;
 }
 
 interface CredentialMetadataDisplayProps {
@@ -543,6 +553,31 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                             </span>
                           </div>
                         </div>
+
+                        {/* Metadata History */}
+                        {credential.history && credential.history.length > 0 && (
+                          <div className="mt-3 pt-3 border-t border-green-400/20">
+                            <p className="text-green-200 text-sm mb-2">Change History</p>
+                            <div className="space-y-2 max-h-32 overflow-y-auto">
+                              {credential.history.map((item, idx) => (
+                                <div key={idx} className="text-xs bg-white/5 rounded p-2">
+                                  <div className="flex items-center justify-between">
+                                    <span className="text-green-300">{item.action}</span>
+                                    <span className="text-green-400">{formatDateTime(item.timestamp)}</span>
+                                  </div>
+                                  <p className="text-green-100 mt-1">
+                                    {item.field}: {item.oldValue && (
+                                      <span className="line-through text-green-400">{item.oldValue}</span>
+                                    )}
+                                    {item.oldValue && ' → '}
+                                    <span className="text-white">{item.newValue}</span>
+                                  </p>
+                                  <p className="text-green-400 mt-0.5">by {item.performedBy}</p>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
                       </div>
                     </motion.div>
                   )}

From 7db9e293042b9eb9f16683f5da694b3a0cc01910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:24:33 +0100
Subject: [PATCH 10/14] feat: add metadata validation and schema support

- Implemented credential validation with error and warning tracking
- Added validation status badge (valid/invalid) to credential headers
- Validate required fields: name, type, issuer, dates
- Check expiration status for credentials with expiry dates
---
 .../credential-metadata-display.tsx           | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index b2a1ea93..cda24bc4 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -128,6 +128,26 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     announceToScreenReader(`Exported ${selectedIds.size} credentials`);
   }, [filteredCredentials, selectedIds, announceToScreenReader]);
 
+  const validateCredential = useCallback((credential: CredentialMetadata) => {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    if (!credential.name) errors.push('Missing credential name');
+    if (!credential.type) errors.push('Missing credential type');
+    if (!credential.issuer) errors.push('Missing issuer information');
+    if (!credential.issuedAt) errors.push('Missing issuance date');
+    if (!credential.updatedAt) warnings.push('Missing last update timestamp');
+
+    if (credential.expiresAt) {
+      const expiryDate = new Date(credential.expiresAt);
+      if (expiryDate < new Date()) {
+        warnings.push('Credential has expired');
+      }
+    }
+
+    return { errors, warnings, isValid: errors.length === 0 };
+  }, []);
+
   const activeCount = credentials.filter((c) => c.status === 'active').length;
   const expiredCount = credentials.filter((c) => c.status === 'expired').length;
   const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
@@ -412,6 +432,18 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                         <span className={`text-xs px-2 py-0.5 rounded border ${getStatusColor(credential.status)}`}>
                           {credential.status.charAt(0).toUpperCase() + credential.status.slice(1)}
                         </span>
+                        {(() => {
+                          const validation = validateCredential(credential);
+                          return validation.isValid ? (
+                            <span className="text-xs px-2 py-0.5 rounded border bg-green-500/20 text-green-400 border-green-500/30">
+                              Valid
+                            </span>
+                          ) : (
+                            <span className="text-xs px-2 py-0.5 rounded border bg-red-500/20 text-red-400 border-red-500/30">
+                              Invalid
+                            </span>
+                          );
+                        })()}
                       </div>
                       <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-green-200">
                         <span className="flex items-center gap-1">

From a18fad6137b67871e5bb7af35b565c1a18dd83ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:25:41 +0100
Subject: [PATCH 11/14] feat: add multiple export formats (JSON, CSV, XML)

- Implemented CSV export with proper escaping
- Added XML export with structured format
- Created format selector buttons with different colors
- Updated export handler to support multiple formats
---
 .../credential-metadata-display.tsx           | 84 +++++++++++++++----
 1 file changed, 69 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index cda24bc4..fb332118 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -115,17 +115,51 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     return { credentials: selected, differences };
   }, [selectedIds, credentials]);
 
-  const handleBulkExport = useCallback(() => {
+  const handleBulkExport = useCallback((format: 'json' | 'csv' | 'xml' = 'json') => {
     const selectedCredentials = filteredCredentials.filter((c) => selectedIds.has(c.id));
-    const exportData = JSON.stringify(selectedCredentials, null, 2);
-    const blob = new Blob([exportData], { type: 'application/json' });
+    let exportData: string;
+    let mimeType: string;
+    let fileExtension: string;
+
+    switch (format) {
+      case 'csv':
+        const headers = ['id', 'name', 'type', 'issuer', 'issuerName', 'issuedAt', 'updatedAt', 'status'];
+        const rows = selectedCredentials.map((c) => 
+          headers.map((h) => `"${String(c[h as keyof CredentialMetadata] || '').replace(/"/g, '""')}"`).join(',')
+        );
+        exportData = [headers.join(','), ...rows].join('\n');
+        mimeType = 'text/csv';
+        fileExtension = 'csv';
+        break;
+      case 'xml':
+        exportData = '<?xml version="1.0" encoding="UTF-8"?>\n<credentials>\n';
+        selectedCredentials.forEach((c) => {
+          exportData += `  <credential>\n`;
+          Object.entries(c).forEach(([key, value]) => {
+            if (value !== undefined && key !== 'history') {
+              exportData += `    <${key}>${String(value).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</${key}>\n`;
+            }
+          });
+          exportData += `  </credential>\n`;
+        });
+        exportData += '</credentials>';
+        mimeType = 'application/xml';
+        fileExtension = 'xml';
+        break;
+      default:
+        exportData = JSON.stringify(selectedCredentials, null, 2);
+        mimeType = 'application/json';
+        fileExtension = 'json';
+    }
+
+    const blob = new Blob([exportData], { type: mimeType });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `credentials-metadata-${new Date().toISOString().split('T')[0]}.json`;
+    a.download = `credentials-metadata-${new Date().toISOString().split('T')[0]}.${fileExtension}`;
     a.click();
     URL.revokeObjectURL(url);
-    announceToScreenReader(`Exported ${selectedIds.size} credentials`);
+    announceToScreenReader(`Exported ${selectedIds.size} credentials as ${format.toUpperCase()}`);
   }, [filteredCredentials, selectedIds, announceToScreenReader]);
 
   const validateCredential = useCallback((credential: CredentialMetadata) => {
@@ -310,16 +344,36 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
             </button>
           </div>
           {selectedIds.size > 0 && !compareMode && (
-            <motion.button
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm transition-colors"
-              onClick={handleBulkExport}
-              aria-label={`Export ${selectedIds.size} selected credentials`}
-            >
-              <Info className="w-4 h-4" aria-hidden="true" />
-              Export Selected
-            </motion.button>
+            <div className="flex items-center gap-2">
+              <motion.button
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm transition-colors"
+                onClick={() => handleBulkExport('json')}
+                aria-label={`Export ${selectedIds.size} selected credentials as JSON`}
+              >
+                <Info className="w-4 h-4" aria-hidden="true" />
+                JSON
+              </motion.button>
+              <motion.button
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm transition-colors"
+                onClick={() => handleBulkExport('csv')}
+                aria-label={`Export ${selectedIds.size} selected credentials as CSV`}
+              >
+                CSV
+              </motion.button>
+              <motion.button
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm transition-colors"
+                onClick={() => handleBulkExport('xml')}
+                aria-label={`Export ${selectedIds.size} selected credentials as XML`}
+              >
+                XML
+              </motion.button>
+            </div>
           )}
         </div>
       )}

From 5c1c8d8788124903e941503da8e0c047eaa5a5d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:27:43 +0100
Subject: [PATCH 12/14] feat: add refresh functionality with loading states

- Implemented refresh button with spinning animation
- Added last updated timestamp display
- Created loading state for refresh operation
- Added screen reader announcements for refresh status
---
 .../credential-metadata-display.tsx           | 57 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index fb332118..44fc207a 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -42,6 +42,8 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
   const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'expired' | 'revoked'>('all');
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [compareMode, setCompareMode] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [lastRefresh, setLastRefresh] = useState<Date | null>(null);
   const { announceToScreenReader } = useAccessibility();
 
   const filteredCredentials = useMemo(() => {
@@ -182,6 +184,18 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     return { errors, warnings, isValid: errors.length === 0 };
   }, []);
 
+  const handleRefresh = useCallback(() => {
+    setIsRefreshing(true);
+    announceToScreenReader('Refreshing credential metadata...');
+    
+    // Simulate refresh delay
+    setTimeout(() => {
+      setIsRefreshing(false);
+      setLastRefresh(new Date());
+      announceToScreenReader('Credential metadata refreshed');
+    }, 1500);
+  }, [announceToScreenReader]);
+
   const activeCount = credentials.filter((c) => c.status === 'active').length;
   const expiredCount = credentials.filter((c) => c.status === 'expired').length;
   const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
@@ -236,9 +250,46 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
 
   return (
     <div role="region" aria-labelledby="metadata-heading">
-      <h2 id="metadata-heading" className="text-2xl font-bold text-white mb-6">
-        Credential Metadata
-      </h2>
+      <div className="flex items-center justify-between mb-6">
+        <h2 id="metadata-heading" className="text-2xl font-bold text-white">
+          Credential Metadata
+        </h2>
+        <div className="flex items-center gap-3">
+          {lastRefresh && (
+            <span className="text-green-300 text-sm">
+              Last updated: {formatDateTime(lastRefresh.toISOString())}
+            </span>
+          )}
+          <motion.button
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
+              isRefreshing
+                ? 'bg-green-600/50 text-white/70 cursor-not-allowed'
+                : 'bg-green-600 hover:bg-green-700 text-white'
+            }`}
+            animate={isRefreshing ? { rotate: 360 } : {}}
+            transition={isRefreshing ? { duration: 1, repeat: Infinity, ease: 'linear' } : {}}
+            aria-label={isRefreshing ? 'Refreshing metadata' : 'Refresh metadata'}
+          >
+            <svg
+              className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+            {isRefreshing ? 'Refreshing...' : 'Refresh'}
+          </motion.button>
+        </div>
+      </div>
 
       {/* Summary Section */}
       {credentials.length > 0 && (

From 2d339e7922c81f3c173027232fb8d26b215f893a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:36:16 +0100
Subject: [PATCH 13/14] feat: add clipboard copy and toast notifications

- Implemented copy metadata to clipboard functionality
- Added toast notification system for user feedback
- Created copy button with hover animations
- Formatted metadata text for easy reading
---
 .../credential-metadata-display.tsx           | 79 +++++++++++++++++--
 1 file changed, 74 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index 44fc207a..9eca12bd 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -44,6 +44,10 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
   const [compareMode, setCompareMode] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [lastRefresh, setLastRefresh] = useState<Date | null>(null);
+  const [toast, setToast] = useState<{ show: boolean; title: string; description?: string }>({
+    show: false,
+    title: '',
+  });
   const { announceToScreenReader } = useAccessibility();
 
   const filteredCredentials = useMemo(() => {
@@ -196,6 +200,33 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
     }, 1500);
   }, [announceToScreenReader]);
 
+  const handleCopyToClipboard = useCallback(async (credential: CredentialMetadata) => {
+    const metadataText = [
+      `Name: ${credential.name}`,
+      `Type: ${credential.type}`,
+      `Issuer: ${credential.issuerName}`,
+      `Issuer ID: ${credential.issuer}`,
+      `Issued: ${formatDate(credential.issuedAt)}`,
+      `Updated: ${formatDateTime(credential.updatedAt)}`,
+      `Status: ${credential.status}`,
+      credential.expiresAt ? `Expires: ${formatDate(credential.expiresAt)}` : '',
+      credential.description ? `Description: ${credential.description}` : '',
+    ].filter(Boolean).join('\n');
+
+    try {
+      await navigator.clipboard.writeText(metadataText);
+      announceToScreenReader('Metadata copied to clipboard');
+      setToast({
+        show: true,
+        title: 'Copied to Clipboard',
+        description: 'Credential metadata has been copied',
+      });
+      setTimeout(() => setToast((t) => ({ ...t, show: false })), 2000);
+    } catch {
+      announceToScreenReader('Failed to copy to clipboard');
+    }
+  }, [formatDate, formatDateTime, announceToScreenReader]);
+
   const activeCount = credentials.filter((c) => c.status === 'active').length;
   const expiredCount = credentials.filter((c) => c.status === 'expired').length;
   const revokedCount = credentials.filter((c) => c.status === 'revoked').length;
@@ -566,11 +597,27 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
                       </div>
                     </div>
                   </div>
-                  {expandedId === credential.id ? (
-                    <ChevronUp className="w-5 h-5 text-green-400" aria-hidden="true" />
-                  ) : (
-                    <ChevronDown className="w-5 h-5 text-green-400" aria-hidden="true" />
-                  )}
+                  <div className="flex items-center gap-2">
+                    <motion.button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleCopyToClipboard(credential);
+                      }}
+                      className="p-1.5 rounded hover:bg-white/10 transition-colors"
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.9 }}
+                      aria-label={`Copy ${credential.name} metadata to clipboard`}
+                    >
+                      <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      </svg>
+                    </motion.button>
+                    {expandedId === credential.id ? (
+                      <ChevronUp className="w-5 h-5 text-green-400" aria-hidden="true" />
+                    ) : (
+                      <ChevronDown className="w-5 h-5 text-green-400" aria-hidden="true" />
+                    )}
+                  </div>
                 </div>
 
                 {/* Details */}
@@ -724,6 +771,28 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
           )}
         </AnimatePresence>
       </div>
+
+      {/* Toast Notification */}
+      <AnimatePresence>
+        {toast.show && (
+          <motion.div
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 50 }}
+            className="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 z-50"
+            role="alert"
+            aria-live="polite"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            <div>
+              <p className="font-medium">{toast.title}</p>
+              {toast.description && <p className="text-sm text-green-100">{toast.description}</p>}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }

From 604c4ccf25cfe907b68dac3f27b2bdd7363d979d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CWilfred007=E2=80=9D?=
 <“adzerwilfred007@gmail.com”>
Date: Tue, 21 Jul 2026 18:37:50 +0100
Subject: [PATCH 14/14] feat: enhance search with field-specific filtering

- Added search across description, version, and issuer ID fields
- Implemented clear search button
- Added results count display showing filtered vs total
- Improved search placeholder text with field examples
---
 .../credential-metadata-display.tsx           | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/credential-metadata-display.tsx b/frontend/src/components/credential-metadata-display.tsx
index 9eca12bd..421cf3c9 100644
--- a/frontend/src/components/credential-metadata-display.tsx
+++ b/frontend/src/components/credential-metadata-display.tsx
@@ -52,10 +52,14 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
 
   const filteredCredentials = useMemo(() => {
     return credentials.filter((credential) => {
+      const query = searchQuery.toLowerCase();
       const matchesSearch =
-        credential.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        credential.issuerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        credential.type.toLowerCase().includes(searchQuery.toLowerCase());
+        credential.name.toLowerCase().includes(query) ||
+        credential.issuerName.toLowerCase().includes(query) ||
+        credential.type.toLowerCase().includes(query) ||
+        credential.issuer.toLowerCase().includes(query) ||
+        (credential.description && credential.description.toLowerCase().includes(query)) ||
+        (credential.version && credential.version.toLowerCase().includes(query));
       const matchesStatus = statusFilter === 'all' || credential.status === statusFilter;
       return matchesSearch && matchesStatus;
     });
@@ -370,12 +374,21 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-green-400" aria-hidden="true" />
               <input
                 type="text"
-                placeholder="Search credentials..."
+                placeholder="Search by name, issuer, type, or description..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="w-full bg-white/10 border border-green-400/30 rounded-lg pl-10 pr-4 py-2 text-white placeholder-green-300 focus:outline-none focus:border-green-400"
                 aria-label="Search credentials"
               />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-green-400 hover:text-green-300"
+                  aria-label="Clear search"
+                >
+                  ×
+                </button>
+              )}
             </div>
             <div className="flex items-center gap-2">
               <Filter className="w-4 h-4 text-green-400" aria-hidden="true" />
@@ -392,6 +405,13 @@ export function CredentialMetadataDisplay({ credentials }: CredentialMetadataDis
               </select>
             </div>
           </div>
+          {(searchQuery || statusFilter !== 'all') && (
+            <div className="mt-3 text-sm text-green-200">
+              Showing {filteredCredentials.length} of {credentials.length} credentials
+              {searchQuery && ` matching "${searchQuery}"`}
+              {statusFilter !== 'all' && ` with status "${statusFilter}"`}
+            </div>
+          )}
         </div>
       )}