feat: add instructions to connect to any profile

Reviewed-on: #219

BUILDING.md

@@ -1151,28 +1151,28 @@ If you need to build manually or want to understand the individual steps:
 
 - ... and you may have to fix these, especially with pkgx:
 
-   ```bash
-   gem_path=$(which gem)
-   shortened_path="${gem_path:h:h}"
-   export GEM_HOME=$shortened_path
-   export GEM_PATH=$shortened_path
-   ```
+```bash
+gem_path=$(which gem)
+shortened_path="${gem_path:h:h}"
+export GEM_HOME=$shortened_path
+export GEM_PATH=$shortened_path
+```
 
 ##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version;
 
-   ```bash
-   cd ios/App && xcrun agvtool new-version 46 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.1;/g" App.xcodeproj/project.pbxproj && cd -
-   # Unfortunately this edits Info.plist directly.
-   #xcrun agvtool new-marketing-version 0.4.5
-   ```
+```bash
+cd ios/App && xcrun agvtool new-version 47 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.2;/g" App.xcodeproj/project.pbxproj && cd -
+# Unfortunately this edits Info.plist directly.
+#xcrun agvtool new-marketing-version 0.4.5
+```
 
 ##### 2. Build
 
-  Here's prod. Also available: test, dev
+Here's prod. Also available: test, dev
 
-  ```bash
-  npm run build:ios:prod
-  ```
+```bash
+npm run build:ios:prod
+```
 
 3.1. Use Xcode to build and run on simulator or device.
 
@@ -1197,7 +1197,8 @@ If you need to build manually or want to understand the individual steps:
   - It can take 15 minutes for the build to show up in the list of builds.
   - You'll probably have to "Manage" something about encryption, disallowed in France.
   - Then "Save" and "Add to Review" and "Resubmit to App Review".
-- Eventually it'll be "Ready for Distribution" which means
+- Eventually it'll be "Ready for Distribution" which means it's live
+- When finished, bump package.json version
 
 ### Android Build
 
@@ -1315,26 +1316,26 @@ The recommended way to build for Android is using the automated build script:
 
 #### Android Manual Build Process
 
-##### 1. Bump the version in package.json, then here: android/app/build.gradle
+##### 1. Bump the version in package.json, then update these versions & run:
 
-  ```bash
-  perl -p -i -e 's/versionCode .*/versionCode 46/g' android/app/build.gradle
-  perl -p -i -e 's/versionName .*/versionName "1.1.1"/g' android/app/build.gradle
-  ```
+```bash
+perl -p -i -e 's/versionCode .*/versionCode 47/g' android/app/build.gradle
+perl -p -i -e 's/versionName .*/versionName "1.1.2"/g' android/app/build.gradle
+```
 
 ##### 2. Build
 
   Here's prod. Also available: test, dev
 
-  ```bash
-  npm run build:android:prod
-  ```
+```bash
+npm run build:android:prod
+```
 
 ##### 3. Open the project in Android Studio
 
-   ```bash
-   npx cap open android
-   ```
+```bash
+npx cap open android
+```
 
 ##### 4. Use Android Studio to build and run on emulator or device
 
@@ -1379,6 +1380,8 @@ At play.google.com/console:
 - Note that if you add testers, you have to go to "Publishing Overview" and send
   those changes or your (closed) testers won't see it.
 
+- When finished, bump package.json version
+
 ### Capacitor Operations
 
 ```bash

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [1.1.2] - 2025.11.06
+
+### Fixed
+- Bad page when user follows prompt to backup seed
+
+
 ## [1.1.1] - 2025.11.03
 
 ### Added

android/app/build.gradle

@@ -31,8 +31,8 @@ android {
         applicationId "app.timesafari.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 46
-        versionName "1.1.1"
+        versionCode 47
+        versionName "1.1.2"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

ios/App/App.xcodeproj/project.pbxproj

@@ -403,7 +403,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 46;
+				CURRENT_PROJECT_VERSION = 47;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -413,7 +413,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.1.1;
+				MARKETING_VERSION = 1.1.2;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -430,7 +430,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 46;
+				CURRENT_PROJECT_VERSION = 47;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -440,7 +440,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.1.1;
+				MARKETING_VERSION = 1.1.2;
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "timesafari",
-  "version": "1.1.2-beta",
+  "version": "1.1.3-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "timesafari",
-      "version": "1.1.2-beta",
+      "version": "1.1.3-beta",
       "dependencies": {
         "@capacitor-community/electron": "^5.0.1",
         "@capacitor-community/sqlite": "6.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.2-beta",
+  "version": "1.1.3-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"

scripts/build-android.sh

@@ -436,7 +436,21 @@ fi
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Build Capacitor version with mode
+# Step 4: Run TypeScript type checking for test and production builds
+if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
+    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
+    
+    if ! measure_time npm run type-check; then
+        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
+        exit 2
+    fi
+    
+    log_success "TypeScript type checking completed for $BUILD_MODE mode"
+else
+    log_debug "Skipping TypeScript type checking for development mode"
+fi
+
+# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -445,23 +459,23 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 5: Clean Gradle build
+# Step 6: Clean Gradle build
 safe_execute "Cleaning Gradle build" "cd android && ./gradlew clean && cd .." || exit 4
 
-# Step 6: Build based on type
+# Step 7: Build based on type
 if [ "$BUILD_TYPE" = "debug" ]; then
     safe_execute "Assembling debug build" "cd android && ./gradlew assembleDebug && cd .." || exit 5
 elif [ "$BUILD_TYPE" = "release" ]; then
     safe_execute "Assembling release build" "cd android && ./gradlew assembleRelease && cd .." || exit 5
 fi
 
-# Step 7: Sync with Capacitor
+# Step 8: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync android" || exit 6
 
-# Step 8: Generate assets
+# Step 9: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --android" || exit 7
 
-# Step 9: Build APK/AAB if requested
+# Step 10: Build APK/AAB if requested
 if [ "$BUILD_APK" = true ]; then
     if [ "$BUILD_TYPE" = "debug" ]; then
         safe_execute "Building debug APK" "cd android && ./gradlew assembleDebug && cd .." || exit 5
@@ -474,7 +488,7 @@ if [ "$BUILD_AAB" = true ]; then
     safe_execute "Building AAB" "cd android && ./gradlew bundleRelease && cd .." || exit 5
 fi
 
-# Step 10: Auto-run app if requested
+# Step 11: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     log_step "Auto-running Android app..."
     safe_execute "Launching app" "npx cap run android" || {
@@ -485,7 +499,7 @@ if [ "$AUTO_RUN" = true ]; then
     log_success "Android app launched successfully!"
 fi
 
-# Step 11: Open Android Studio if requested
+# Step 12: Open Android Studio if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Android Studio" "npx cap open android" || exit 8
 fi

scripts/build-ios.sh

@@ -381,7 +381,21 @@ safe_execute "Cleaning iOS build" "clean_ios_build" || exit 1
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Build Capacitor version with mode
+# Step 4: Run TypeScript type checking for test and production builds
+if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
+    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
+    
+    if ! measure_time npm run type-check; then
+        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
+        exit 2
+    fi
+    
+    log_success "TypeScript type checking completed for $BUILD_MODE mode"
+else
+    log_debug "Skipping TypeScript type checking for development mode"
+fi
+
+# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -390,16 +404,16 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 5: Sync with Capacitor
+# Step 6: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync ios" || exit 6
 
-# Step 6: Generate assets
+# Step 7: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --ios" || exit 7
 
-# Step 7: Build iOS app
+# Step 8: Build iOS app
 safe_execute "Building iOS app" "build_ios_app" || exit 5
 
-# Step 8: Build IPA/App if requested
+# Step 9: Build IPA/App if requested
 if [ "$BUILD_IPA" = true ]; then
     log_info "Building IPA package..."
     cd ios/App
@@ -426,12 +440,12 @@ if [ "$BUILD_APP" = true ]; then
     log_success "App bundle built successfully"
 fi
 
-# Step 9: Auto-run app if requested
+# Step 10: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     safe_execute "Auto-running iOS app" "auto_run_ios_app" || exit 9
 fi
 
-# Step 10: Open Xcode if requested
+# Step 11: Open Xcode if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Xcode" "npx cap open ios" || exit 8
 fi

src/constants/contacts.ts

@@ -0,0 +1,29 @@
+/**
+ * Constants for contact-related functionality
+ * Created: 2025-11-16
+ */
+
+/**
+ * Contact method types with user-friendly labels
+ * Used in: ContactEditView.vue, DIDView.vue
+ */
+export const CONTACT_METHOD_TYPES = [
+  { value: "CELL", label: "Mobile" },
+  { value: "EMAIL", label: "Email" },
+  { value: "WHATSAPP", label: "WhatsApp" },
+] as const;
+
+/**
+ * Type for contact method type values
+ */
+export type ContactMethodType = (typeof CONTACT_METHOD_TYPES)[number]["value"];
+
+/**
+ * Helper function to get label for a contact method type
+ * @param type - The contact method type value (e.g., "CELL", "EMAIL")
+ * @returns The user-friendly label or the original type if not found
+ */
+export function getContactMethodLabel(type: string): string {
+  const methodType = CONTACT_METHOD_TYPES.find((m) => m.value === type);
+  return methodType ? methodType.label : type;
+}

src/libs/endorserServer.ts

@@ -1686,7 +1686,10 @@ export async function register(
         "Registration thrown error:",
         errorMessage || JSON.stringify(err),
       );
-      return { error: errorMessage || "Got a server error when registering." };
+      return {
+        error:
+          (errorMessage as string) || "Got a server error when registering.",
+      };
     }
     return { error: "Got a server error when registering." };
   }

src/services/platforms/CapacitorPlatformService.ts

@@ -91,16 +91,92 @@ export class CapacitorPlatformService
     }
 
     try {
-      // Create/Open database
-      this.db = await this.sqlite.createConnection(
-        this.dbName,
-        false,
-        "no-encryption",
-        1,
-        false,
-      );
+      // Try to create/Open database connection
+      try {
+        this.db = await this.sqlite.createConnection(
+          this.dbName,
+          false,
+          "no-encryption",
+          1,
+          false,
+        );
+      } catch (createError: unknown) {
+        // If connection already exists, try to retrieve it or handle gracefully
+        const errorMessage =
+          createError instanceof Error
+            ? createError.message
+            : String(createError);
+        const errorObj =
+          typeof createError === "object" && createError !== null
+            ? (createError as { errorMessage?: string; message?: string })
+            : {};
 
-      await this.db.open();
+        const fullErrorMessage =
+          errorObj.errorMessage || errorObj.message || errorMessage;
+
+        if (fullErrorMessage.includes("already exists")) {
+          logger.debug(
+            "[CapacitorPlatformService] Connection already exists on native side, attempting to retrieve",
+          );
+          // Check if connection exists in JavaScript Map
+          const isConnResult = await this.sqlite.isConnection(
+            this.dbName,
+            false,
+          );
+          if (isConnResult.result) {
+            // Connection exists in Map, retrieve it
+            this.db = await this.sqlite.retrieveConnection(this.dbName, false);
+            logger.debug(
+              "[CapacitorPlatformService] Successfully retrieved existing connection from Map",
+            );
+          } else {
+            // Connection exists on native side but not in JavaScript Map
+            // This can happen when the app is restarted but native connections persist
+            // Try to close the native connection first, then create a new one
+            logger.debug(
+              "[CapacitorPlatformService] Connection exists natively but not in Map, closing and recreating",
+            );
+            try {
+              await this.sqlite.closeConnection(this.dbName, false);
+            } catch (closeError) {
+              // Ignore close errors - connection might not be properly tracked
+              logger.debug(
+                "[CapacitorPlatformService] Error closing connection (may be expected):",
+                closeError,
+              );
+            }
+            // Now try to create the connection again
+            this.db = await this.sqlite.createConnection(
+              this.dbName,
+              false,
+              "no-encryption",
+              1,
+              false,
+            );
+            logger.debug(
+              "[CapacitorPlatformService] Successfully created connection after cleanup",
+            );
+          }
+        } else {
+          // Re-throw if it's a different error
+          throw createError;
+        }
+      }
+
+      // Open the connection if it's not already open
+      try {
+        await this.db.open();
+      } catch (openError: unknown) {
+        const openErrorMessage =
+          openError instanceof Error ? openError.message : String(openError);
+        // If already open, that's fine - continue
+        if (!openErrorMessage.includes("already open")) {
+          throw openError;
+        }
+        logger.debug(
+          "[CapacitorPlatformService] Database connection already open",
+        );
+      }
 
       // Set journal mode to WAL for better performance
       // await this.db.execute("PRAGMA journal_mode=WAL;");

src/views/ContactEditView.vue

@@ -85,22 +85,12 @@
             class="absolute bg-white border border-gray-300 rounded-md mt-1"
           >
             <div
+              v-for="methodType in contactMethodTypes"
+              :key="methodType.value"
               class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'CELL')"
+              @click="setMethodType(index, methodType.value)"
             >
-              CELL
-            </div>
-            <div
-              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'EMAIL')"
-            >
-              EMAIL
-            </div>
-            <div
-              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
-              @click="setMethodType(index, 'WHATSAPP')"
-            >
-              WHATSAPP
+              {{ methodType.label }}
             </div>
           </div>
         </div>
@@ -157,6 +147,7 @@ import {
 } from "../constants/notifications";
 import { Contact, ContactMethod } from "../db/tables/contacts";
 import { AppString } from "../constants/app";
+import { CONTACT_METHOD_TYPES } from "../constants/contacts";
 
 /**
  * Contact Edit View Component
@@ -224,6 +215,8 @@ export default class ContactEditView extends Vue {
 
   /** App string constants */
   AppString = AppString;
+  /** Contact method types for dropdown */
+  contactMethodTypes = CONTACT_METHOD_TYPES;
 
   /**
    * Component lifecycle hook that initializes the contact edit form

src/views/DIDView.vue

@@ -20,12 +20,12 @@
       </button>
 
       <!-- Help button -->
-      <button
+      <router-link
+        :to="{ name: 'help' }"
         class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
-        @click="goToHelp()"
       >
         <font-awesome icon="question" class="block text-center w-[1em]" />
-      </button>
+      </router-link>
     </div>
 
     <!-- Identity Details -->
@@ -42,6 +42,39 @@
             <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </router-link>
         </h2>
+
+        <!-- Notes -->
+        <div v-if="contactFromDid.notes" class="mt-3">
+          <p class="text-sm text-slate-700 whitespace-pre-wrap">
+            {{ contactFromDid.notes }}
+          </p>
+        </div>
+
+        <!-- Contact Methods -->
+        <div v-if="contactFromDid.contactMethods?.length" class="mt-3">
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="(method, index) in contactFromDid.contactMethods"
+              :key="index"
+              class="inline-flex items-center gap-2 text-sm"
+            >
+              <span class="font-semibold text-slate-600"
+                >{{ getContactMethodLabel(method.type) }}:</span
+              >
+              <span class="text-slate-700">{{ method.label }}</span>
+              <span class="text-slate-600">{{ method.value }}</span>
+              <a
+                v-if="method.type === 'CELL'"
+                :href="`sms:${method.value}`"
+                class="ml-2 text-blue-500 hover:text-blue-700"
+                title="Send text message"
+              >
+                <font-awesome icon="message" class="text-base" />
+              </a>
+            </div>
+          </div>
+        </div>
+
         <button class="ml-2 mr-2 mt-4" @click="toggleDidDetails">
           Details
           <font-awesome
@@ -302,6 +335,7 @@ import {
   NOTIFY_CONTACT_INVALID_DID,
 } from "@/constants/notifications";
 import { THAT_UNNAMED_PERSON } from "@/constants/entities";
+import { getContactMethodLabel } from "@/constants/contacts";
 
 /**
  * DIDView Component
@@ -352,6 +386,7 @@ export default class DIDView extends Vue {
   capitalizeAndInsertSpacesBeforeCaps = capitalizeAndInsertSpacesBeforeCaps;
   didInfoForContact = didInfoForContact;
   displayAmount = displayAmount;
+  getContactMethodLabel = getContactMethodLabel;
 
   /**
    * Initializes notification helpers

src/views/UserProfileView.vue

@@ -54,6 +54,121 @@
         </p>
       </div>
 
+      <!-- Nearest Neighbors Section -->
+      <div
+        v-if="
+          profile.issuerDid !== activeDid &&
+          profile.issuerDid !== neighbors?.[0]?.did
+        "
+        class="mt-6"
+      >
+        <h2 class="text-lg font-semibold mb-3">Network Connections</h2>
+
+        <div v-if="loadingNeighbors">
+          <div class="flex justify-center items-center py-8">
+            <font-awesome
+              icon="spinner"
+              class="fa-spin-pulse text-2xl text-slate-400"
+            />
+          </div>
+        </div>
+        <div
+          v-else-if="neighborsError"
+          class="bg-red-50 border border-red-300 rounded-md p-4"
+        >
+          <div class="flex items-start gap-2">
+            <font-awesome
+              icon="exclamation-triangle"
+              class="text-red-500 mt-0.5"
+            />
+            <p class="text-red-700">{{ neighborsError }}</p>
+          </div>
+        </div>
+        <div v-else>
+          <div
+            v-if="neighbors"
+            class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4"
+          >
+            <p class="text-sm text-slate-700 mb-3">
+              The following
+              {{ neighbors.length === 1 ? "user is" : "users are" }}
+              closer to the person who owns this profile.
+            </p>
+            <div class="space-y-2 text-sm">
+              <div class="flex items-start gap-3">
+                <span
+                  class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
+                  >1</span
+                >
+                <p class="text-slate-700 pt-0.5">
+                  <a
+                    class="text-blue-600 hover:text-blue-800 font-medium underline cursor-pointer"
+                    @click="onCopyLinkClick()"
+                  >
+                    Click to copy this profile reference
+                  </a>
+                  to your clipboard
+                </p>
+              </div>
+              <div class="flex items-start gap-3">
+                <span
+                  class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
+                  >2</span
+                >
+                <p class="text-slate-700 pt-0.5">
+                  Contact a user listed below and share the reference to request
+                  an introduction
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <div
+              v-for="neighbor in neighbors"
+              :key="neighbor.did"
+              class="flex items-center justify-between gap-3 bg-slate-50 border border-slate-300 rounded-md p-3"
+            >
+              <router-link
+                :to="{ name: 'did', params: { did: neighbor.did } }"
+                class="flex-1 min-w-0"
+              >
+                <p class="font-medium truncate text-blue-600">
+                  {{ getNeighborDisplayName(neighbor.did) }}
+                </p>
+                <div
+                  v-if="
+                    getNeighborDisplayName(neighbor.did) === '' ||
+                    neighborIsNotInContacts(neighbor.did)
+                  "
+                  class="flex flex-col gap-1 mt-1"
+                >
+                  <p class="text-xs text-slate-600">
+                    This person is connected to you, but they are not in this
+                    device's contacts. Copy this DID link and check on another
+                    device or check with different people.
+                  </p>
+                  <span class="flex items-center gap-1 min-w-0">
+                    <span class="text-xs truncate text-slate-600 min-w-0">
+                      {{ neighbor.did }}
+                    </span>
+                    <button
+                      title="Copy DID Link"
+                      class="text-blue-600 hover:text-blue-800 underline cursor-pointer flex-shrink-0"
+                      @click.prevent="onCopyDidClick(neighbor.did)"
+                    >
+                      <font-awesome icon="copy" class="text-sm" />
+                    </button>
+                  </span>
+                </div>
+              </router-link>
+              <span :class="getRelationBadgeClass(neighbor.relation)">
+                {{ getRelationLabel(neighbor.relation) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- Map for first coordinates -->
       <div v-if="hasFirstLocation" class="mt-4">
         <h2 class="text-lg font-semibold">Location</h2>
@@ -160,8 +275,11 @@ export default class UserProfileView extends Vue {
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   isLoading = true;
+  loadingNeighbors = false;
+  neighborsError = "";
   partnerApiServer = DEFAULT_PARTNER_API_SERVER;
   profile: UserProfile | null = null;
+  neighbors: Array<{ did: string; relation: string }> = [];
 
   // make this function available to the Vue template
   didInfo = didInfo;
@@ -183,8 +301,8 @@ export default class UserProfileView extends Vue {
    */
   async mounted() {
     await this.initializeSettings();
-    await this.loadContacts();
     await this.loadProfile();
+    await this.loadNeighbors();
   }
 
   /**
@@ -199,12 +317,7 @@ export default class UserProfileView extends Vue {
     this.activeDid = activeIdentity.activeDid || "";
 
     this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
-  }
 
-  /**
-   * Loads all contacts from database
-   */
-  private async loadContacts() {
     this.allContacts = await this.$getAllContacts();
     this.allMyDids = await retrieveAccountDids();
   }
@@ -249,23 +362,75 @@ export default class UserProfileView extends Vue {
   }
 
   /**
-   * Copies profile link to clipboard
+   * Loads nearest neighbors from partner API
    *
-   * Creates a deep link to the profile and copies it to the clipboard
-   * Shows success notification when completed
+   * Fetches network connections for the profile and displays them
+   * with appropriate relation labels
+   */
+  async loadNeighbors() {
+    const profileId: string = this.$route.params.id as string;
+    if (!profileId) {
+      return;
+    }
+
+    this.loadingNeighbors = true;
+    this.neighborsError = "";
+    try {
+      const response = await fetch(
+        `${this.partnerApiServer}/api/partner/userProfileNearestNeighbors/${encodeURIComponent(profileId)}`,
+        {
+          method: "GET",
+          headers: await getHeaders(this.activeDid),
+        },
+      );
+
+      if (response.status === 200) {
+        const result = await response.json();
+        this.neighbors = result.data;
+        this.neighborsError = "";
+      } else {
+        logger.warn("Failed to load neighbors:", response.status);
+        this.neighbors = [];
+        this.neighborsError = "Failed to load network connections.";
+      }
+    } catch (error) {
+      logger.error("Error loading neighbors:", error);
+      this.neighbors = [];
+      this.neighborsError =
+        "An error occurred while loading network connections.";
+    } finally {
+      this.loadingNeighbors = false;
+    }
+  }
+
+  /**
+   * Copies a deep link to the profile to the clipboard
    */
   async onCopyLinkClick() {
-    // Use production URL for sharing to avoid localhost issues in development
     const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
     try {
       await copyToClipboard(deepLink);
-      this.notify.copied("profile link", TIMEOUTS.STANDARD);
+      this.notify.copied("Profile link", TIMEOUTS.STANDARD);
     } catch (error) {
       this.$logAndConsole(`Error copying profile link: ${error}`, true);
       this.notify.error("Failed to copy profile link.");
     }
   }
 
+  /**
+   * Copies a deep link to the provided DID to the clipboard
+   */
+  async onCopyDidClick(did: string) {
+    const deepLink = `${APP_SERVER}/deep-link/did/${encodeURIComponent(did)}`;
+    try {
+      await copyToClipboard(deepLink);
+      this.notify.copied("DID link", TIMEOUTS.STANDARD);
+    } catch (error) {
+      this.$logAndConsole(`Error copying DID link: ${error}`, true);
+      this.notify.error("Failed to copy DID link.");
+    }
+  }
+
   /**
    * Computed properties for template logic streamlining
    */
@@ -330,5 +495,64 @@ export default class UserProfileView extends Vue {
   get tileLayerUrl() {
     return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
   }
+
+  /**
+   * Gets display name for a neighbor's DID
+   * Uses didInfo utility to show contact name if available, otherwise DID
+   * @param did - The DID to get display name for
+   * @returns Formatted display name
+   */
+  getNeighborDisplayName(did: string): string {
+    return this.didInfo(did, this.activeDid, this.allMyDids, this.allContacts);
+  }
+
+  neighborIsNotInContacts(did: string) {
+    return !this.allContacts.some((contact) => contact.did === did);
+  }
+
+  noNeighborsAreInContacts() {
+    return this.neighbors.every(
+      (neighbor) =>
+        !this.allContacts.some((contact) => contact.did === neighbor.did),
+    );
+  }
+
+  /**
+   * Gets human-readable label for relation type
+   * @param relation - The relation type from API
+   * @returns Display label for the relation
+   */
+  getRelationLabel(relation: string): string {
+    switch (relation) {
+      case "REGISTERED_BY_YOU":
+        return "Registered by You";
+      case "REGISTERED_YOU":
+        return "Registered You";
+      case "TARGET":
+        return "Yourself";
+      default:
+        return relation;
+    }
+  }
+
+  /**
+   * Gets CSS classes for relation badge styling
+   * @param relation - The relation type from API
+   * @returns CSS class string for badge
+   */
+  getRelationBadgeClass(relation: string): string {
+    const baseClasses =
+      "text-xs font-semibold px-2 py-1 rounded whitespace-nowrap";
+    switch (relation) {
+      case "REGISTERED_BY_YOU":
+        return `${baseClasses} bg-blue-100 text-blue-700`;
+      case "REGISTERED_YOU":
+        return `${baseClasses} bg-green-100 text-green-700`;
+      case "TARGET":
+        return `${baseClasses} bg-purple-100 text-purple-700`;
+      default:
+        return `${baseClasses} bg-slate-100 text-slate-700`;
+    }
+  }
 }
 </script>