|  | @ -246,22 +246,23 @@ | 
			
		
	
		
		
			
				
					|  |  |       <div v-if="comparison" class="space-y-6"> |  |  |       <div v-if="comparison" class="space-y-6"> | 
			
		
	
		
		
			
				
					|  |  |         <!-- Summary Cards --> |  |  |         <!-- Summary Cards --> | 
			
		
	
		
		
			
				
					|  |  |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6"> |  |  |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6"> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |           <!-- Accounts Summary (moved first) --> | 
			
		
	
		
		
			
				
					|  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> |  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="p-5"> |  |  |             <div class="p-5"> | 
			
		
	
		
		
			
				
					|  |  |               <div class="flex items-center"> |  |  |               <div class="flex items-center"> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="flex-shrink-0"> |  |  |                 <div class="flex-shrink-0"> | 
			
		
	
		
		
			
				
					|  |  |                   <IconRenderer |  |  |                   <IconRenderer | 
			
		
	
		
		
			
				
					
					|  |  |                     icon-name="chart" |  |  |                     icon-name="lock" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     svg-class="h-6 w-6 text-blue-600" |  |  |                     svg-class="h-6 w-6 text-orange-600" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                   /> |  |  |                   /> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="ml-5 w-0 flex-1"> |  |  |                 <div class="ml-5 w-0 flex-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <dl> |  |  |                   <dl> | 
			
		
	
		
		
			
				
					|  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> |  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> | 
			
		
	
		
		
			
				
					
					|  |  |                       Dexie Contacts |  |  |                       Dexie Accounts | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dt> |  |  |                     </dt> | 
			
		
	
		
		
			
				
					|  |  |                     <dd class="text-lg font-medium text-gray-900"> |  |  |                     <dd class="text-lg font-medium text-gray-900"> | 
			
		
	
		
		
			
				
					
					|  |  |                       {{ comparison.dexieContacts.length }} |  |  |                       {{ comparison.dexieAccounts.length }} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dd> |  |  |                     </dd> | 
			
		
	
		
		
			
				
					|  |  |                   </dl> |  |  |                   </dl> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
	
		
		
			
				
					|  | @ -275,16 +276,16 @@ | 
			
		
	
		
		
			
				
					|  |  |                 <div class="flex-shrink-0"> |  |  |                 <div class="flex-shrink-0"> | 
			
		
	
		
		
			
				
					|  |  |                   <IconRenderer |  |  |                   <IconRenderer | 
			
		
	
		
		
			
				
					|  |  |                     icon-name="check" |  |  |                     icon-name="check" | 
			
		
	
		
		
			
				
					
					|  |  |                     svg-class="h-6 w-6 text-green-600" |  |  |                     svg-class="h-6 w-6 text-teal-600" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   /> |  |  |                   /> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="ml-5 w-0 flex-1"> |  |  |                 <div class="ml-5 w-0 flex-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <dl> |  |  |                   <dl> | 
			
		
	
		
		
			
				
					|  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> |  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> | 
			
		
	
		
		
			
				
					
					|  |  |                       SQLite Contacts |  |  |                       SQLite Accounts | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dt> |  |  |                     </dt> | 
			
		
	
		
		
			
				
					|  |  |                     <dd class="text-lg font-medium text-gray-900"> |  |  |                     <dd class="text-lg font-medium text-gray-900"> | 
			
		
	
		
		
			
				
					
					|  |  |                       {{ comparison.sqliteContacts.length }} |  |  |                       {{ comparison.sqliteAccounts.length }} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dd> |  |  |                     </dd> | 
			
		
	
		
		
			
				
					|  |  |                   </dl> |  |  |                   </dl> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
	
		
		
			
				
					|  | @ -292,6 +293,7 @@ | 
			
		
	
		
		
			
				
					|  |  |             </div> |  |  |             </div> | 
			
		
	
		
		
			
				
					|  |  |           </div> |  |  |           </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  |           <!-- Settings Summary (second) --> | 
			
		
	
		
		
			
				
					|  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> |  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="p-5"> |  |  |             <div class="p-5"> | 
			
		
	
		
		
			
				
					|  |  |               <div class="flex items-center"> |  |  |               <div class="flex items-center"> | 
			
		
	
	
		
		
			
				
					|  | @ -338,22 +340,23 @@ | 
			
		
	
		
		
			
				
					|  |  |             </div> |  |  |             </div> | 
			
		
	
		
		
			
				
					|  |  |           </div> |  |  |           </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  |           <!-- Contacts Summary (last) --> | 
			
		
	
		
		
			
				
					|  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> |  |  |           <div class="bg-white overflow-hidden shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="p-5"> |  |  |             <div class="p-5"> | 
			
		
	
		
		
			
				
					|  |  |               <div class="flex items-center"> |  |  |               <div class="flex items-center"> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="flex-shrink-0"> |  |  |                 <div class="flex-shrink-0"> | 
			
		
	
		
		
			
				
					|  |  |                   <IconRenderer |  |  |                   <IconRenderer | 
			
		
	
		
		
			
				
					
					|  |  |                     icon-name="lock" |  |  |                     icon-name="chart" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     svg-class="h-6 w-6 text-orange-600" |  |  |                     svg-class="h-6 w-6 text-blue-600" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                   /> |  |  |                   /> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="ml-5 w-0 flex-1"> |  |  |                 <div class="ml-5 w-0 flex-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <dl> |  |  |                   <dl> | 
			
		
	
		
		
			
				
					|  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> |  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> | 
			
		
	
		
		
			
				
					
					|  |  |                       Dexie Accounts |  |  |                       Dexie Contacts | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dt> |  |  |                     </dt> | 
			
		
	
		
		
			
				
					|  |  |                     <dd class="text-lg font-medium text-gray-900"> |  |  |                     <dd class="text-lg font-medium text-gray-900"> | 
			
		
	
		
		
			
				
					
					|  |  |                       {{ comparison.dexieAccounts.length }} |  |  |                       {{ comparison.dexieContacts.length }} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dd> |  |  |                     </dd> | 
			
		
	
		
		
			
				
					|  |  |                   </dl> |  |  |                   </dl> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
	
		
		
			
				
					|  | @ -367,16 +370,16 @@ | 
			
		
	
		
		
			
				
					|  |  |                 <div class="flex-shrink-0"> |  |  |                 <div class="flex-shrink-0"> | 
			
		
	
		
		
			
				
					|  |  |                   <IconRenderer |  |  |                   <IconRenderer | 
			
		
	
		
		
			
				
					|  |  |                     icon-name="check" |  |  |                     icon-name="check" | 
			
		
	
		
		
			
				
					
					|  |  |                     svg-class="h-6 w-6 text-teal-600" |  |  |                     svg-class="h-6 w-6 text-green-600" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   /> |  |  |                   /> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="ml-5 w-0 flex-1"> |  |  |                 <div class="ml-5 w-0 flex-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <dl> |  |  |                   <dl> | 
			
		
	
		
		
			
				
					|  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> |  |  |                     <dt class="text-sm font-medium text-gray-500 truncate"> | 
			
		
	
		
		
			
				
					
					|  |  |                       SQLite Accounts |  |  |                       SQLite Contacts | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dt> |  |  |                     </dt> | 
			
		
	
		
		
			
				
					|  |  |                     <dd class="text-lg font-medium text-gray-900"> |  |  |                     <dd class="text-lg font-medium text-gray-900"> | 
			
		
	
		
		
			
				
					
					|  |  |                       {{ comparison.sqliteAccounts.length }} |  |  |                       {{ comparison.sqliteContacts.length }} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                     </dd> |  |  |                     </dd> | 
			
		
	
		
		
			
				
					|  |  |                   </dl> |  |  |                   </dl> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
	
		
		
			
				
					|  | @ -387,11 +390,11 @@ | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |         <!-- Differences Section --> |  |  |         <!-- Differences Section --> | 
			
		
	
		
		
			
				
					|  |  |         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |  |  |         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | 
			
		
	
		
		
			
				
					
					|  |  |           <!-- Contacts Differences --> |  |  |           <!-- Account Differences (moved first) --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |           <div class="bg-white shadow rounded-lg"> |  |  |           <div class="bg-white shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="px-4 py-5 sm:p-6"> |  |  |             <div class="px-4 py-5 sm:p-6"> | 
			
		
	
		
		
			
				
					|  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | 
			
		
	
		
		
			
				
					
					|  |  |                 Contact Differences |  |  |                 Account Differences | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               </h3> |  |  |               </h3> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |               <div class="space-y-4"> |  |  |               <div class="space-y-4"> | 
			
		
	
	
		
		
			
				
					|  | @ -406,7 +409,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                     <span class="text-sm font-medium text-blue-900">Added</span> |  |  |                     <span class="text-sm font-medium text-blue-900">Added</span> | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-blue-900">{{ |  |  |                   <span class="text-sm font-bold text-blue-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.contacts.added.length |  |  |                     comparison.differences.accounts.added.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
	
		
		
			
				
					|  | @ -423,7 +426,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                     > |  |  |                     > | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-yellow-900">{{ |  |  |                   <span class="text-sm font-bold text-yellow-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.contacts.modified.length |  |  |                     comparison.differences.accounts.modified.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
	
		
		
			
				
					|  | @ -440,77 +443,83 @@ | 
			
		
	
		
		
			
				
					|  |  |                     > |  |  |                     > | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-red-900">{{ |  |  |                   <span class="text-sm font-bold text-red-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.contacts.missing.length |  |  |                     comparison.differences.accounts.missing.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Contact Details --> |  |  |               <!-- Account Details --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.contacts.added.length > 0" |  |  |                 v-if="comparison.differences.accounts.added.length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Added Contacts ({{ comparison.differences.contacts.added.length }}): |  |  |                   Added Accounts ({{ comparison.differences.accounts.added.length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="contact in comparison.differences.contacts.added" |  |  |                     v-for="account in comparison.differences.accounts.added" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="contact.did" |  |  |                     :key="account.id" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> |  |  |                     <div class="font-medium">ID: {{ account.id }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ contact.did }}</div> |  |  |                     <div class="text-gray-500">{{ account.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> |  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Modified Contacts --> |  |  |               <!-- Modified Accounts --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.contacts.modified.length > 0" |  |  |                 v-if="comparison.differences.accounts.modified.length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Modified Contacts ({{ comparison.differences.contacts.modified.length }}): |  |  |                   Modified Accounts ({{ comparison.differences.accounts.modified.length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="contact in comparison.differences.contacts.modified" |  |  |                     v-for="account in comparison.differences.accounts.modified" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="contact.did" |  |  |                     :key="account.id" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> |  |  |                     <div class="font-medium">ID: {{ account.id }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ contact.did }}</div> |  |  |                     <div class="text-gray-500">{{ account.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> |  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Missing Contacts --> |  |  |               <!-- Missing Accounts --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0" |  |  |                 v-if="comparison.differences.accounts.missing.filter(a => a.did).length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}): |  |  |                   Missing Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)" |  |  |                     v-for="account in comparison.differences.accounts.missing.filter(a => a.did)" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="contact.did" |  |  |                     :key="account.id" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> |  |  |                     <div class="font-medium">ID: {{ account.id }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ contact.did }}</div> |  |  |                     <div class="text-gray-500">{{ account.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> |  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  |             </div> |  |  |             </div> | 
			
		
	
		
		
			
				
					|  |  |           </div> |  |  |           </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |           <!-- Settings Differences --> |  |  |           <!-- Settings Differences (second) --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |           <div class="bg-white shadow rounded-lg"> |  |  |           <div class="bg-white shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="px-4 py-5 sm:p-6"> |  |  |             <div class="px-4 py-5 sm:p-6"> | 
			
		
	
		
		
			
				
					|  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | 
			
		
	
	
		
		
			
				
					|  | @ -633,11 +642,11 @@ | 
			
		
	
		
		
			
				
					|  |  |             </div> |  |  |             </div> | 
			
		
	
		
		
			
				
					|  |  |           </div> |  |  |           </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |           <!-- Account Differences --> |  |  |           <!-- Contacts Differences (last) --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |           <div class="bg-white shadow rounded-lg"> |  |  |           <div class="bg-white shadow rounded-lg"> | 
			
		
	
		
		
			
				
					|  |  |             <div class="px-4 py-5 sm:p-6"> |  |  |             <div class="px-4 py-5 sm:p-6"> | 
			
		
	
		
		
			
				
					|  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |  |  |               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | 
			
		
	
		
		
			
				
					
					|  |  |                 Account Differences |  |  |                 Contact Differences | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               </h3> |  |  |               </h3> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |               <div class="space-y-4"> |  |  |               <div class="space-y-4"> | 
			
		
	
	
		
		
			
				
					|  | @ -652,7 +661,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                     <span class="text-sm font-medium text-blue-900">Added</span> |  |  |                     <span class="text-sm font-medium text-blue-900">Added</span> | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-blue-900">{{ |  |  |                   <span class="text-sm font-bold text-blue-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.accounts.added.length |  |  |                     comparison.differences.contacts.added.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
	
		
		
			
				
					|  | @ -669,7 +678,7 @@ | 
			
		
	
		
		
			
				
					|  |  |                     > |  |  |                     > | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-yellow-900">{{ |  |  |                   <span class="text-sm font-bold text-yellow-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.accounts.modified.length |  |  |                     comparison.differences.contacts.modified.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
	
		
		
			
				
					|  | @ -686,76 +695,70 @@ | 
			
		
	
		
		
			
				
					|  |  |                     > |  |  |                     > | 
			
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                   <span class="text-sm font-bold text-red-900">{{ |  |  |                   <span class="text-sm font-bold text-red-900">{{ | 
			
		
	
		
		
			
				
					
					|  |  |                     comparison.differences.accounts.missing.length |  |  |                     comparison.differences.contacts.missing.length | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                   }}</span> |  |  |                   }}</span> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Account Details --> |  |  |               <!-- Contact Details --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.accounts.added.length > 0" |  |  |                 v-if="comparison.differences.contacts.added.length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Added Accounts ({{ comparison.differences.accounts.added.length }}): |  |  |                   Added Contacts ({{ comparison.differences.contacts.added.length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="account in comparison.differences.accounts.added" |  |  |                     v-for="contact in comparison.differences.contacts.added" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="account.id" |  |  |                     :key="contact.did" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">ID: {{ account.id }}</div> |  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ account.did }}</div> |  |  |                     <div class="text-gray-500">{{ contact.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> |  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> | 
			
				
				
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Modified Accounts --> |  |  |               <!-- Modified Contacts --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.accounts.modified.length > 0" |  |  |                 v-if="comparison.differences.contacts.modified.length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Modified Accounts ({{ comparison.differences.accounts.modified.length }}): |  |  |                   Modified Contacts ({{ comparison.differences.contacts.modified.length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="account in comparison.differences.accounts.modified" |  |  |                     v-for="contact in comparison.differences.contacts.modified" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="account.id" |  |  |                     :key="contact.did" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">ID: {{ account.id }}</div> |  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ account.did }}</div> |  |  |                     <div class="text-gray-500">{{ contact.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> |  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> | 
			
				
				
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |               <!-- Missing Accounts --> |  |  |               <!-- Missing Contacts --> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |               <div |  |  |               <div | 
			
		
	
		
		
			
				
					
					|  |  |                 v-if="comparison.differences.accounts.missing.filter(a => a.did).length > 0" |  |  |                 v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0" | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 class="mt-4" |  |  |                 class="mt-4" | 
			
		
	
		
		
			
				
					|  |  |               > |  |  |               > | 
			
		
	
		
		
			
				
					|  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> |  |  |                 <h4 class="text-sm font-medium text-gray-900 mb-2"> | 
			
		
	
		
		
			
				
					
					|  |  |                   Missing Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}): |  |  |                   Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}): | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |                 </h4> |  |  |                 </h4> | 
			
		
	
		
		
			
				
					|  |  |                 <div class="space-y-1"> |  |  |                 <div class="space-y-1"> | 
			
		
	
		
		
			
				
					|  |  |                   <div |  |  |                   <div | 
			
		
	
		
		
			
				
					
					|  |  |                     v-for="account in comparison.differences.accounts.missing.filter(a => a.did)" |  |  |                     v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)" | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     :key="account.id" |  |  |                     :key="contact.did" | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" |  |  |                     class="text-xs text-gray-600 bg-gray-50 p-2 rounded" | 
			
		
	
		
		
			
				
					|  |  |                   > |  |  |                   > | 
			
		
	
		
		
			
				
					
					|  |  |                     <div class="font-medium">ID: {{ account.id }}</div> |  |  |                     <div class="font-medium">{{ contact.name || '<empty>' }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-500">{{ account.did }}</div> |  |  |                     <div class="text-gray-500">{{ contact.did }}</div> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |                     <div class="text-gray-400">Created: {{ account.dateCreated }}</div> |  |  |                     <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> | 
			
				
				
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
			
				
					|  |  |                     <div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div> |  |  |  | 
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |                   </div> |  |  |                   </div> | 
			
		
	
		
		
			
				
					|  |  |                 </div> |  |  |                 </div> | 
			
		
	
		
		
			
				
					|  |  |               </div> |  |  |               </div> | 
			
		
	
	
		
		
			
				
					|  | 
 |