add first stab at showing how the contact is visible in my network

src/views/ClaimView.vue

@@ -236,6 +236,35 @@
 
     <div>
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">Visible Details</h2>
+      <div v-if="Object.keys(veriClaimDidsVisible).length > 0">
+        Some of the details are not visible to you but they are visible to some
+        of your contacts. If you'd like an introduction, share the information
+        with them and ask them to connect you.
+        <div
+          v-for="(visibleDidPath, index) of Object.keys(veriClaimDidsVisible)"
+          :key="index"
+          class="list-disc flex justify-start p-2"
+        >
+          <div class="text-sm p-4">
+            {{ visibleDidPath }}
+          </div>
+          <div class="p-4">
+            <ul>
+              <li
+                v-for="(visDid, idx2) of veriClaimDidsVisible[visibleDidPath]"
+                :key="idx2"
+                class="list-disc"
+              >
+                <div class="text-sm">
+                  {{ didInfo(visDid) }}
+                  {{ veriClaim.publicUrls?.[visDid] || "" }}
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
         >{{ veriClaimDump }}</pre
@@ -325,6 +354,7 @@ export default class ClaimView extends Vue {
   showIdCopy = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
+  veriClaimDidsVisible = {};
 
   yaml = yaml;
   libsUtil = libsUtil;
@@ -421,13 +451,13 @@ export default class ClaimView extends Vue {
   }
 
   // Isn't there a better way to make this available to the template?
-  didInfo(
-    did: string,
-    activeDid: string,
-    dids: Array<string>,
-    contacts: Array<Contact>,
-  ) {
-    return serverUtil.didInfo(did, activeDid, dids, contacts);
+  didInfo(did: string) {
+    return serverUtil.didInfo(
+      did,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
   }
 
   async loadClaim(claimId: string, identity: IIdentifier) {
@@ -440,6 +470,9 @@ export default class ClaimView extends Vue {
       if (resp.status === 200) {
         this.veriClaim = resp.data;
         this.veriClaimDump = yaml.dump(this.veriClaim);
+        this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
+          this.veriClaim,
+        );
       } else {
         // actually, axios typically throws an error so we never get here
         console.error("Error getting claim:", resp);