feat: add a link to connect to someone who is closer to any user profile target

chore: fixing missing import for safeStringify
Merge pull request 'feat: meeting members admission dialog' (#210 ) from meeting-members-admission-dialog into master
2025-11-03 08:10:15 -07:00 · 2025-11-02 02:21:32 +00:00 · 2025-10-30 09:58:17 -04:00 · 2025-10-30 21:55:48 +08:00 · 2025-10-30 16:11:45 +08:00 · 2025-10-29 18:21:32 +08:00
37 changed files with 2048 additions and 607 deletions
--- a/.cursor/rules/development/development_guide.mdc
+++ b/.cursor/rules/development/development_guide.mdc
@@ -2,7 +2,7 @@
 globs: **/src/**/*
 alwaysApply: false
 ---
-✅ use system date command to timestamp all interactions with accurate date and
+✅ use system date command to timestamp all documentation with accurate date and
  time
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -9,6 +9,10 @@ echo "🔍 Running pre-commit hooks..."
 # Run lint-fix first
 echo "📝 Running lint-fix..."
 # Capture git status before lint-fix to detect changes
 git_status_before=$(git status --porcelain)
 npm run lint-fix || {
    echo
    echo "❌ Linting failed. Please fix the issues and try again."
@@ -18,6 +22,36 @@ npm run lint-fix || {
    exit 1
 }
 # Check if lint-fix made any changes
 git_status_after=$(git status --porcelain)
 if [ "$git_status_before" != "$git_status_after" ]; then
    echo
    echo "⚠️  lint-fix made changes to your files!"
    echo "📋 Changes detected:"
    git diff --name-only
    echo
    echo "❓ What would you like to do?"
    echo "   [c] Continue commit without the new changes"
    echo "   [a] Abort commit (recommended - review and stage the changes)"
    echo
    printf "Choose [c/a]: "
    # The `< /dev/tty` is necessary to make read work in git's non-interactive shell
    read choice < /dev/tty
    case $choice in
        [Cc]* )
            echo "✅ Continuing commit without lint-fix changes..."
            sleep 3
            ;;
        [Aa]* | * )
            echo "🛑 Commit aborted. Please review the changes made by lint-fix."
            echo "💡 You can stage the changes with 'git add .' and commit again."
            exit 1
            ;;
    esac
 fi
 # Then run Build Architecture Guard
 #echo "🏗️  Running Build Architecture Guard..."
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
    <!-- CORS headers removed to allow images from any domain -->
@@ -13,4 +13,4 @@
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-</html>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "timesafari",
-      "version": "1.1.0-beta",
+      "version": "1.1.1-beta",
      "dependencies": {
        "@capacitor-community/electron": "^5.0.1",
        "@capacitor-community/sqlite": "6.0.2",
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -7,6 +7,24 @@
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
    /* Fix iOS viewport height changes when keyboard appears/disappears */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better mobile support */
        overflow: hidden; /* Disable all scrolling on html and body */
        position: fixed; /* Force fixed positioning to prevent viewport changes */
        width: 100%;
        top: 0;
        left: 0;
    }
    #app {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
 }
@layer components {
@@ -20,7 +38,7 @@
 	}
 	.dialog {
-		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[90%] overflow-y-auto;
 	}
 	/* Markdown content styling to restore list elements */
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -77,9 +77,86 @@
        </a>
      </div>
      <!-- Emoji Section -->
      <div
        v-if="hasEmojis || isRegistered"
        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
      >
        <div class="flex items-center justify-between gap-1">
          <!-- Existing Emojis Display -->
          <div v-if="hasEmojis" class="flex flex-wrap gap-1">
            <button
              v-for="(count, emoji) in record.emojiCount"
              :key="emoji"
              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
              :class="{
                'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :title="
                loadingEmojis
                  ? 'Loading...'
                  : !emojisOnActivity?.isResolved
                    ? 'Click to load your emojis'
                    : isUserEmojiWithoutLoading(emoji)
                      ? 'Click to remove your emoji'
                      : 'Click to add this emoji'
              "
              :disabled="!isRegistered"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-xs">
                <font-awesome icon="spinner" class="fa-spin" />
              </div>
              <span v-else class="text-sm leading-none">{{ emoji }}</span>
              <span class="text-xs text-slate-600 font-medium leading-none">{{
                count
              }}</span>
            </button>
          </div>
          <!-- Add Emoji Button -->
          <button
            v-if="isRegistered"
            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
            @click="toggleEmojiPicker"
          >
            <span class="px-2 text-sm leading-none">{{
              showEmojiPicker ? "x" : "😊"
            }}</span>
          </button>
        </div>
        <!-- Emoji Picker (placeholder for now) -->
        <div
          v-if="showEmojiPicker"
          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
        >
          <!-- Temporary emoji buttons for testing -->
          <div class="flex flex-wrap gap-3 mt-1">
            <button
              v-for="emoji in QUICK_EMOJIS"
              :key="emoji"
              class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
              :class="{
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :disabled="loadingEmojis"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
              <span v-else>{{ emoji }}</span>
            </button>
          </div>
        </div>
      </div>
      <!-- Description -->
      <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
          <vue-markdown
            :source="truncatedDescription"
            class="markdown-content"
@@ -88,7 +165,7 @@
      </p>
      <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
+        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
      >
        <!-- Source -->
        <div
@@ -251,17 +328,24 @@
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from "@/interfaces/give";
+import VueMarkdown from "vue-markdown-render";
 import { logger } from "../utils/logger";
 import {
  createAndSubmitClaim,
  getHeaders,
  isHiddenDid,
 } from "../libs/endorserServer";
 import EntityIcon from "./EntityIcon.vue";
 import { isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
+import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
 import {
  NOTIFY_PERSON_HIDDEN,
  NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
-import { TIMEOUTS } from "@/utils/notify";
+import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
-import VueMarkdown from "vue-markdown-render";
+import { GiveRecordWithContactInfo } from "@/interfaces/give";
 import { PromiseTracker } from "@/libs/util";
@Component({
  components: {
@@ -271,15 +355,24 @@ import VueMarkdown from "vue-markdown-render";
  },
 })
 export default class ActivityListItem extends Vue {
  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
  @Prop() record!: GiveRecordWithContactInfo;
  @Prop() lastViewedClaimId?: string;
  @Prop() isRegistered!: boolean;
  @Prop() activeDid!: string;
  @Prop() apiServer!: string;
  isHiddenDid = isHiddenDid;
  notify!: ReturnType<typeof createNotifyHelpers>;
  $notify!: NotifyFunction;
  // Emoji-related data
  showEmojiPicker = false;
  loadingEmojis = false; // Track if emojis are currently loading
  emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
@@ -343,5 +436,186 @@ export default class ActivityListItem extends Vue {
      day: "numeric",
    });
  }
  // Emoji-related computed properties and methods
  get hasEmojis(): boolean {
    return Object.keys(this.record.emojiCount).length > 0;
  }
  triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
    if (!this.emojisOnActivity) {
      const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
        (async () => {
          this.axios
            .get(
              `${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
              { headers: await getHeaders(this.activeDid) },
            )
            .then((response) => {
              const userEmojiRecords = response.data.data.filter(
                (e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
              );
              resolve(userEmojiRecords);
            })
            .catch((error) => {
              logger.error("Error loading user emojis:", error);
              resolve([]);
            });
        })();
      });
      this.emojisOnActivity = new PromiseTracker(promise);
    }
    return this.emojisOnActivity;
  }
  /**
   *
   * @param emoji - The emoji to check.
   * @returns True if the emoji is in the user's emojis, false otherwise.
   *
   * @note This method is quick and synchronous, and can check resolved emojis
   * without triggering a server request. Returns false if emojis haven't been loaded yet.
   */
  isUserEmojiWithoutLoading(emoji: string): boolean {
    if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
      return this.emojisOnActivity.value.some(
        (record) => record.text === emoji,
      );
    }
    return false;
  }
  async toggleEmojiPicker() {
    this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
    this.showEmojiPicker = !this.showEmojiPicker;
  }
  async toggleThisEmoji(emoji: string) {
    // Start loading indicator
    this.loadingEmojis = true;
    this.showEmojiPicker = false; // always close the picker when an emoji is clicked
    try {
      this.triggerUserEmojiLoad(); // trigger just in case
      const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen
      const userHasEmoji: boolean = userEmojiList.some(
        (record) => record.text === emoji,
      );
      if (userHasEmoji) {
        this.$notify(
          {
            group: "modal",
            type: "confirm",
            title: "Remove Emoji",
            text: `Do you want to remove your ${emoji} ?`,
            yesText: "Remove",
            onYes: async () => {
              await this.removeEmoji(emoji);
            },
          },
          TIMEOUTS.MODAL,
        );
      } else {
        // User doesn't have this emoji, add it
        await this.submitEmoji(emoji);
      }
    } finally {
      // Remove loading indicator
      this.loadingEmojis = false;
    }
  }
  async submitEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        this.record.emojiCount[emoji] =
          (this.record.emojiCount[emoji] || 0) + 1;
        // Create a new emoji record (we'll get the actual jwtId from the server response later)
        const newEmojiRecord: EmojiSummaryRecord = {
          issuerDid: this.activeDid,
          jwtId: claim.claimId || "",
          text: emoji,
          parentHandleId: this.record.jwtId,
        };
        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve([...currentEmojis, newEmojiRecord]),
        );
      } else {
        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error submitting emoji:", error);
      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
    }
  }
  async removeEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
        if (newCount === 0) {
          delete this.record.emojiCount[emoji];
        } else {
          this.record.emojiCount[emoji] = newCount;
        }
        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve(
            currentEmojis.filter(
              (record) =>
                record.issuerDid === this.activeDid && record.text !== emoji,
            ),
          ),
        );
      } else {
        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error removing emoji:", error);
      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
    }
  }
 }
 </script>
--- a/src/components/BulkMembersDialog.vue
+++ b/src/components/BulkMembersDialog.vue
@@ -0,0 +1,459 @@
 <template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <div class="text-slate-900 text-center">
        <h3 class="text-lg font-semibold leading-[1.25] mb-2">
          {{ title }}
        </h3>
        <p class="text-sm mb-4">
          {{ description }}
        </p>
        <!-- Member Selection Table -->
        <div class="mb-4">
          <table
            class="w-full border-collapse border border-slate-300 text-sm text-start"
          >
            <!-- Select All Header -->
            <thead v-if="membersData && membersData.length > 0">
              <tr class="bg-slate-100 font-medium">
                <th class="border border-slate-300 px-3 py-2">
                  <label class="flex items-center gap-2">
                    <input
                      type="checkbox"
                      :checked="isAllSelected"
                      :indeterminate="isIndeterminate"
                      @change="toggleSelectAll"
                    />
                    Select All
                  </label>
                </th>
              </tr>
            </thead>
            <tbody>
              <!-- Empty State -->
              <tr v-if="!membersData || membersData.length === 0">
                <td
                  class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
                >
                  {{ emptyStateText }}
                </td>
              </tr>
              <!-- Member Rows -->
              <tr
                v-for="member in membersData || []"
                :key="member.member.memberId"
              >
                <td class="border border-slate-300 px-3 py-2">
                  <div class="flex items-center justify-between gap-2">
                    <label class="flex items-center gap-2">
                      <input
                        type="checkbox"
                        :checked="isMemberSelected(member.did)"
                        @change="toggleMemberSelection(member.did)"
                      />
                      <div class="">
                        <div class="text-sm font-semibold">
                          {{ member.name || SOMEONE_UNNAMED }}
                        </div>
                        <div
                          class="flex items-center gap-0.5 text-xs text-slate-500"
                        >
                          <span class="font-semibold sm:hidden">DID:</span>
                          <span
                            class="w-[35vw] sm:w-auto truncate text-left"
                            style="direction: rtl"
                            >{{ member.did }}</span
                          >
                        </div>
                      </div>
                    </label>
                    <!-- Contact indicator - only show if they are already a contact -->
                    <font-awesome
                      v-if="member.isContact"
                      icon="user-circle"
                      class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
                      @click="showContactInfo"
                    />
                  </div>
                </td>
              </tr>
            </tbody>
            <!-- Select All Footer -->
            <tfoot v-if="membersData && membersData.length > 0">
              <tr class="bg-slate-100 font-medium">
                <th class="border border-slate-300 px-3 py-2">
                  <label class="flex items-center gap-2">
                    <input
                      type="checkbox"
                      :checked="isAllSelected"
                      :indeterminate="isIndeterminate"
                      @change="toggleSelectAll"
                    />
                    Select All
                  </label>
                </th>
              </tr>
            </tfoot>
          </table>
        </div>
        <!-- Action Buttons -->
        <div class="space-y-2">
          <!-- Main Action Button -->
          <button
            v-if="membersData && membersData.length > 0"
            :disabled="!hasSelectedMembers"
            :class="[
              'block w-full text-center text-md font-bold uppercase px-2 py-2 rounded-md',
              hasSelectedMembers
                ? 'bg-blue-600 text-white cursor-pointer'
                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
            ]"
            @click="handleMainAction"
          >
            {{ buttonText }}
          </button>
          <!-- Cancel Button -->
          <button
            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
            @click="cancel"
          >
            Maybe Later
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import { MemberData } from "@/interfaces";
 import { setVisibilityUtil, getHeaders } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
@Component({
  mixins: [PlatformServiceMixin],
  emits: ["close"],
 })
 export default class BulkMembersDialog extends Vue {
  @Prop({ default: "" }) activeDid!: string;
  @Prop({ default: "" }) apiServer!: string;
  @Prop({ required: true }) dialogType!: "admit" | "visibility";
  @Prop({ required: true }) isOrganizer!: boolean;
  // Vue notification system
  $notify!: (
    notification: { group: string; type: string; title: string; text: string },
    timeout?: number,
  ) => void;
  // Notification system
  notify!: ReturnType<typeof createNotifyHelpers>;
  // Component state
  membersData: MemberData[] = [];
  selectedMembers: string[] = [];
  visible = false;
  // Constants
  // In Vue templates, imported constants need to be explicitly made available to the template
  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
  get hasSelectedMembers() {
    return this.selectedMembers.length > 0;
  }
  get isAllSelected() {
    if (!this.membersData || this.membersData.length === 0) return false;
    return this.membersData.every((member) =>
      this.selectedMembers.includes(member.did),
    );
  }
  get isIndeterminate() {
    if (!this.membersData || this.membersData.length === 0) return false;
    const selectedCount = this.membersData.filter((member) =>
      this.selectedMembers.includes(member.did),
    ).length;
    return selectedCount > 0 && selectedCount < this.membersData.length;
  }
  get title() {
    return this.isOrganizer
      ? "Admit Pending Members"
      : "Add Members to Contacts";
  }
  get description() {
    return this.isOrganizer
      ? "Would you like to admit these members to the meeting and add them to your contacts?"
      : "Would you like to add these members to your contacts?";
  }
  get buttonText() {
    return this.isOrganizer ? "Admit + Add to Contacts" : "Add to Contacts";
  }
  get emptyStateText() {
    return this.isOrganizer
      ? "No pending members to admit"
      : "No members are not in your contacts";
  }
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
  open(members: MemberData[]) {
    this.visible = true;
    this.membersData = members;
    // Select all by default
    this.selectedMembers = this.membersData.map((member) => member.did);
  }
  close(notSelectedMemberDids: string[]) {
    this.visible = false;
    this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids });
  }
  cancel() {
    this.close(this.membersData.map((member) => member.did));
  }
  toggleSelectAll() {
    if (!this.membersData || this.membersData.length === 0) return;
    if (this.isAllSelected) {
      // Deselect all
      this.selectedMembers = [];
    } else {
      // Select all
      this.selectedMembers = this.membersData.map((member) => member.did);
    }
  }
  toggleMemberSelection(memberDid: string) {
    const index = this.selectedMembers.indexOf(memberDid);
    if (index > -1) {
      this.selectedMembers.splice(index, 1);
    } else {
      this.selectedMembers.push(memberDid);
    }
  }
  isMemberSelected(memberDid: string) {
    return this.selectedMembers.includes(memberDid);
  }
  async handleMainAction() {
    if (this.dialogType === "admit") {
      await this.admitWithVisibility();
    } else {
      await this.addContactWithVisibility();
    }
  }
  async admitWithVisibility() {
    try {
      const selectedMembers = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
      const notSelectedMembers = this.membersData.filter(
        (member) => !this.selectedMembers.includes(member.did),
      );
      let admittedCount = 0;
      let contactAddedCount = 0;
      for (const member of selectedMembers) {
        try {
          // First, admit the member
          await this.admitMember(member);
          admittedCount++;
          // If they're not a contact yet, add them as a contact
          if (!member.isContact) {
            await this.addAsContact(member);
            contactAddedCount++;
          }
          // Set their seesMe to true
          await this.updateContactVisibility(member.did, true);
        } catch (error) {
          // eslint-disable-next-line no-console
          console.error(`Error processing member ${member.did}:`, error);
          // Continue with other members even if one fails
        }
      }
      // Show success notification
      this.$notify(
        {
          group: "alert",
          type: "success",
          title: "Members Admitted Successfully",
          text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
        },
        10000,
      );
      this.close(notSelectedMembers.map((member) => member.did));
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error("Error admitting members:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Failed to admit some members. Please try again.",
        },
        5000,
      );
    }
  }
  async addContactWithVisibility() {
    try {
      const selectedMembers = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
      const notSelectedMembers = this.membersData.filter(
        (member) => !this.selectedMembers.includes(member.did),
      );
      let contactsAddedCount = 0;
      for (const member of selectedMembers) {
        try {
          // If they're not a contact yet, add them as a contact first
          if (!member.isContact) {
            await this.addAsContact(member);
            contactsAddedCount++;
          }
          // Set their seesMe to true
          await this.updateContactVisibility(member.did, true);
        } catch (error) {
          // eslint-disable-next-line no-console
          console.error(`Error processing member ${member.did}:`, error);
          // Continue with other members even if one fails
        }
      }
      // Show success notification
      this.$notify(
        {
          group: "alert",
          type: "success",
          title: "Contacts Added Successfully",
          text: `${contactsAddedCount} member${contactsAddedCount === 1 ? "" : "s"} added as contact${contactsAddedCount === 1 ? "" : "s"}.`,
        },
        5000,
      );
      this.close(notSelectedMembers.map((member) => member.did));
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error("Error adding contacts:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Failed to add some members as contacts. Please try again.",
        },
        5000,
      );
    }
  }
  async admitMember(member: {
    did: string;
    name: string;
    member: { memberId: string };
  }) {
    try {
      const headers = await getHeaders(this.activeDid);
      await this.axios.put(
        `${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`,
        { admitted: true },
        { headers },
      );
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error admitting member:", err);
      throw err;
    }
  }
  async addAsContact(member: { did: string; name: string }) {
    try {
      const newContact = {
        did: member.did,
        name: member.name,
      };
      await this.$insertContact(newContact);
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error adding contact:", err);
      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
        // Contact already exists, continue
      } else {
        throw err; // Re-throw if it's not a duplicate error
      }
    }
  }
  async updateContactVisibility(did: string, seesMe: boolean) {
    try {
      // Get the contact object
      const contact = await this.$getContact(did);
      if (!contact) {
        throw new Error(`Contact not found for DID: ${did}`);
      }
      // Use the proper API to set visibility on the server
      const result = await setVisibilityUtil(
        this.activeDid,
        this.apiServer,
        this.axios,
        contact,
        seesMe,
      );
      if (!result.success) {
        throw new Error(result.error || "Failed to set visibility");
      }
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error updating contact visibility:", err);
      throw err;
    }
  }
  showContactInfo() {
    const message =
      this.dialogType === "admit"
        ? "This user is already your contact, but they are not yet admitted to the meeting."
        : "This user is already your contact, but your activities are not visible to them yet.";
    this.$notify(
      {
        group: "alert",
        type: "info",
        title: "Contact Info",
        text: message,
      },
      5000,
    );
  }
 }
 </script>
--- a/src/components/ContactListItem.vue
+++ b/src/components/ContactListItem.vue
@@ -46,7 +46,7 @@
            <span class="text-xs truncate">{{ contact.did }}</span>
          </div>
-          <div class="text-sm">
+          <div class="text-sm truncate">
            {{ contact.notes }}
          </div>
        </div>
--- a/src/components/FeedFilters.vue
+++ b/src/components/FeedFilters.vue
@@ -211,8 +211,6 @@ export default class FeedFilters extends Vue {
 }
 </script>
-<style>
+<style scoped>
-#dialogFeedFilters.dialog-overlay {
+/* Component-specific styles if needed */
  overflow: scroll;
 }
 </style>
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -1,183 +1,235 @@
 <template>
-  <div class="space-y-4">
+  <div>
-    <!-- Loading State -->
+    <div class="space-y-4">
-    <div
+      <!-- Loading State -->
-      v-if="isLoading"
+      <div
-      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+        v-if="isLoading"
-    >
+        class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
-      <font-awesome icon="spinner" class="fa-spin-pulse" />
+      >
-    </div>
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
    <!-- Members List -->
    <div v-else>
      <div class="text-center text-red-600 py-4">
        {{ decryptionErrorMessage() }}
      </div>
-      <div v-if="missingMyself" class="py-4 text-red-600">
+      <!-- Members List -->
        You are not currently admitted by the organizer.
      </div>
      <div v-if="!firstName" class="py-4 text-red-600">
        Your name is not set, so others may not recognize you. Reload this page
        to set it.
      </div>
-      <div>
+      <div v-else>
-        <span
+        <div class="text-center text-red-600 my-4">
-          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
+          {{ decryptionErrorMessage() }}
-          class="inline-flex items-center flex-wrap"
+        </div>
-        >
+
-          <span class="inline-flex items-center">
+        <div v-if="missingMyself" class="py-4 text-red-600">
-            &bull; Click
+          You are not currently admitted by the organizer.
-            <span
+        </div>
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+        <div v-if="!firstName" class="py-4 text-red-600">
-            >
+          Your name is not set, so others may not recognize you. Reload this
-              <font-awesome icon="plus" class="text-sm" />
+          page to set it.
-            </span>
+        </div>
-            /
+
-            <span
+        <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+          <li
-            >
+            v-if="
-              <font-awesome icon="minus" class="text-sm" />
+              membersToShow().length > 0 && showOrganizerTools && isOrganizer
-            </span>
+            "
            to add/remove them to/from the meeting.
          </span>
        </span>
      </div>
      <div>
        <span
          v-if="membersToShow().length > 0"
          class="inline-flex items-center"
        >
          &bull; Click
          <span
            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
          >
-            <font-awesome icon="circle-user" class="text-xl" />
+            Click
-          </span>
+            <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
-          to add them to your contacts.
+            /
-        </span>
+            <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
-      </div>
+            to add/remove them to/from the meeting.
          </li>
          <li
            v-if="
              membersToShow().length > 0 && getNonContactMembers().length > 0
            "
          >
            Click
            <font-awesome icon="circle-user" class="text-green-600 text-sm" />
            to add them to your contacts.
          </li>
        </ul>
-      <div class="flex justify-center">
+        <div class="flex justify-between">
-        <!-- 
+          <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
-        <button
+          <button
-          class="btn-action-refresh"
+            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          title="Refresh members list"
+            title="Refresh members list now"
-          @click="fetchMembers"
+            @click="refreshData(false)"
-        >
+          >
-          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-        </button>
+            Refresh
-      </div>
+            <span class="text-xs">({{ countdownTimer }}s)</span>
-      <div
+          </button>
        v-for="member in membersToShow()"
        :key="member.member.memberId"
        class="mt-2 p-4 bg-gray-50 rounded-lg"
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <h3 class="text-lg font-medium">
              {{ member.name || unnamedMember }}
            </h3>
            <div
              v-if="!getContactFor(member.did) && member.did !== activeDid"
              class="flex justify-end"
            >
              <button
                class="btn-add-contact"
                title="Add as contact"
                @click="addAsContact(member)"
              >
                <font-awesome icon="circle-user" class="text-xl" />
              </button>
            </div>
            <button
              v-if="member.did !== activeDid"
              class="btn-info-contact"
              title="Contact info"
              @click="
                informAboutAddingContact(
                  getContactFor(member.did) !== undefined,
                )
              "
            >
              <font-awesome icon="circle-info" class="text-base" />
            </button>
          </div>
          <div class="flex">
            <span
              v-if="
                showOrganizerTools && isOrganizer && member.did !== activeDid
              "
              class="flex items-center"
            >
              <button
                class="btn-admission"
                :title="
                  member.member.admitted ? 'Remove member' : 'Admit member'
                "
                @click="checkWhetherContactBeforeAdmitting(member)"
              >
                <font-awesome
                  :icon="member.member.admitted ? 'minus' : 'plus'"
                  class="text-sm"
                />
              </button>
              <button
                class="btn-info-admission"
                title="Admission info"
                @click="informAboutAdmission()"
              >
                <font-awesome icon="circle-info" class="text-base" />
              </button>
            </span>
          </div>
        </div>
-        <p class="text-sm text-gray-600 truncate">
+        <ul
-          {{ member.did }}
+          v-if="membersToShow().length > 0"
          class="border-t border-slate-300 my-2"
        >
          <li
            v-for="member in membersToShow()"
            :key="member.member.memberId"
            :class="[
              'border-b px-2 sm:px-3 py-1.5',
              {
                'bg-blue-50 border-t border-blue-300 -mt-[1px]':
                  !member.member.admitted &&
                  (isOrganizer || member.did === activeDid),
              },
              { 'border-slate-300': member.member.admitted },
            ]"
          >
            <div class="flex items-center gap-2 justify-between">
              <div class="flex items-center gap-1 overflow-hidden">
                <h3
                  :class="[
                    'font-semibold truncate',
                    {
                      'text-slate-500':
                        !member.member.admitted &&
                        (isOrganizer || member.did === activeDid),
                    },
                  ]"
                >
                  <font-awesome
                    v-if="member.member.memberId === members[0]?.memberId"
                    icon="crown"
                    class="fa-fw text-amber-400"
                  />
                  <font-awesome
                    v-if="member.did === activeDid"
                    icon="hand"
                    class="fa-fw text-blue-500"
                  />
                  <font-awesome
                    v-if="
                      !member.member.admitted &&
                      (isOrganizer || member.did === activeDid)
                    "
                    icon="hourglass-half"
                    class="fa-fw text-slate-400"
                  />
                  {{ member.name || unnamedMember }}
                </h3>
                <div
                  v-if="!getContactFor(member.did) && member.did !== activeDid"
                  class="flex items-center gap-1.5 ms-1"
                >
                  <button
                    class="btn-add-contact"
                    title="Add as contact"
                    @click="addAsContact(member)"
                  >
                    <font-awesome icon="circle-user" />
                  </button>
                  <button
                    class="btn-info-contact"
                    title="Contact Info"
                    @click="
                      informAboutAddingContact(
                        getContactFor(member.did) !== undefined,
                      )
                    "
                  >
                    <font-awesome icon="circle-info" />
                  </button>
                </div>
              </div>
              <span
                v-if="
                  showOrganizerTools && isOrganizer && member.did !== activeDid
                "
                class="flex items-center gap-1.5"
              >
                <button
                  :class="
                    member.member.admitted
                      ? 'btn-admission-remove'
                      : 'btn-admission-add'
                  "
                  :title="
                    member.member.admitted ? 'Remove member' : 'Admit member'
                  "
                  @click="checkWhetherContactBeforeAdmitting(member)"
                >
                  <font-awesome
                    :icon="
                      member.member.admitted ? 'circle-minus' : 'circle-plus'
                    "
                  />
                </button>
                <button
                  class="btn-info-admission"
                  title="Admission Info"
                  @click="informAboutAdmission()"
                >
                  <font-awesome icon="circle-info" />
                </button>
              </span>
            </div>
            <p class="text-xs text-gray-600 truncate">
              {{ member.did }}
            </p>
          </li>
        </ul>
        <div v-if="membersToShow().length > 0" class="flex justify-between">
          <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
          <button
            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
            title="Refresh members list now"
            @click="refreshData(false)"
          >
            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
            Refresh
            <span class="text-xs">({{ countdownTimer }}s)</span>
          </button>
        </div>
        <p v-if="members.length === 0" class="text-gray-500 py-4">
          No members have joined this meeting yet
        </p>
      </div>
      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
        <button
          class="btn-action-refresh"
          title="Refresh members list"
          @click="fetchMembers"
        >
          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
        </button>
      </div>
      <p v-if="members.length === 0" class="text-gray-500 py-4">
        No members have joined this meeting yet
      </p>
    </div>
    <!-- Bulk Members Dialog for both admitting and setting visibility -->
    <BulkMembersDialog
      ref="bulkMembersDialog"
      :active-did="activeDid"
      :api-server="apiServer"
      :dialog-type="isOrganizer ? 'admit' : 'visibility'"
      :is-organizer="isOrganizer"
      @close="closeBulkMembersDialogCallback"
    />
  </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
-import {
+import { NotificationIface } from "@/constants/app";
  errorStringForLog,
  getHeaders,
  register,
  serverMessageForUser,
 } from "../libs/endorserServer";
 import { decryptMessage } from "../libs/crypto";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import { NotificationIface } from "../constants/app";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import {
  NOTIFY_ADD_CONTACT_FIRST,
  NOTIFY_CONTINUE_WITHOUT_ADDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import {
  errorStringForLog,
  getHeaders,
  register,
  serverMessageForUser,
 } from "@/libs/endorserServer";
 import { decryptMessage } from "@/libs/crypto";
 import { Contact } from "@/db/tables/contacts";
 import { MemberData } from "@/interfaces";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import BulkMembersDialog from "./BulkMembersDialog.vue";
 interface Member {
  admitted: boolean;
@@ -193,13 +245,15 @@ interface DecryptedMember {
 }
@Component({
  components: {
    BulkMembersDialog,
  },
  mixins: [PlatformServiceMixin],
 })
 export default class MembersList extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  notify!: ReturnType<typeof createNotifyHelpers>;
  libsUtil = libsUtil;
  @Prop({ required: true }) password!: string;
  @Prop({ default: false }) showOrganizerTools!: boolean;
@@ -210,6 +264,7 @@ export default class MembersList extends Vue {
    return message;
  }
  contacts: Array<Contact> = [];
  decryptedMembers: DecryptedMember[] = [];
  firstName = "";
  isLoading = true;
@@ -219,7 +274,12 @@ export default class MembersList extends Vue {
  missingMyself = false;
  activeDid = "";
  apiServer = "";
-  contacts: Array<Contact> = [];
+
  // Auto-refresh functionality
  countdownTimer = 10;
  autoRefreshInterval: NodeJS.Timeout | null = null;
  lastRefreshTime = 0;
  previousMemberDidsIgnored: string[] = [];
  /**
   * Get the unnamed member constant
@@ -240,8 +300,8 @@ export default class MembersList extends Vue {
    this.apiServer = settings.apiServer || "";
    this.firstName = settings.firstName || "";
-    await this.fetchMembers();
+
-    await this.loadContacts();
+    this.refreshData();
  }
  async fetchMembers() {
@@ -287,7 +347,10 @@ export default class MembersList extends Vue {
        const content = JSON.parse(decryptedContent);
        this.decryptedMembers.push({
-          member: member,
+          member: {
            ...member,
            admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
          },
          name: content.name,
          did: content.did,
          isRegistered: !!content.isRegistered,
@@ -329,22 +392,81 @@ export default class MembersList extends Vue {
  }
  membersToShow(): DecryptedMember[] {
    let members: DecryptedMember[] = [];
    if (this.isOrganizer) {
      if (this.showOrganizerTools) {
-        return this.decryptedMembers;
+        members = this.decryptedMembers;
      } else {
-        return this.decryptedMembers.filter(
+        members = this.decryptedMembers.filter(
          (member: DecryptedMember) => member.member.admitted,
        );
      }
    } else {
      // non-organizers only get visible members from server, plus themselves
      // Check if current user is already in the decrypted members list
      if (
        !this.decryptedMembers.find((member) => member.did === this.activeDid)
      ) {
        // this is a stub for this user just in case they are waiting to get in
        // which is especially useful so they can see their own DID
        const currentUser: DecryptedMember = {
          member: {
            admitted: false,
            content: "{}",
            memberId: -1,
          },
          name: this.firstName,
          did: this.activeDid,
          isRegistered: false,
        };
        members = [currentUser, ...this.decryptedMembers];
      } else {
        members = this.decryptedMembers;
      }
    }
-    // non-organizers only get visible members from server
+
-    return this.decryptedMembers;
+    // Sort members according to priority:
    // 1. Organizer at the top
    // 2. Current user next
    // 3. Non-admitted members next
    // 4. Everyone else after
    return members.sort((a, b) => {
      // Check if either member is the organizer (first member in original list)
      const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
      const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
      // Check if either member is the current user
      const aIsCurrentUser = a.did === this.activeDid;
      const bIsCurrentUser = b.did === this.activeDid;
      // Organizer always comes first
      if (aIsOrganizer && !bIsOrganizer) return -1;
      if (!aIsOrganizer && bIsOrganizer) return 1;
      // If both are organizers, maintain original order
      if (aIsOrganizer && bIsOrganizer) return 0;
      // Current user comes second (after organizer)
      if (aIsCurrentUser && !bIsCurrentUser && !bIsOrganizer) return -1;
      if (!aIsCurrentUser && bIsCurrentUser && !aIsOrganizer) return 1;
      // If both are current users, maintain original order
      if (aIsCurrentUser && bIsCurrentUser) return 0;
      // Non-admitted members come before admitted members
      if (!a.member.admitted && b.member.admitted) return -1;
      if (a.member.admitted && !b.member.admitted) return 1;
      // If admission status is the same, maintain original order
      return 0;
    });
  }
  informAboutAdmission() {
    this.notify.info(
-      "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      "This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
      TIMEOUTS.VERY_LONG,
    );
  }
@@ -363,18 +485,85 @@ export default class MembersList extends Vue {
    }
  }
  async loadContacts() {
    this.contacts = await this.$getAllContacts();
  }
  getContactFor(did: string): Contact | undefined {
    return this.contacts.find((contact) => contact.did === did);
  }
  getPendingMembersToAdmit(): MemberData[] {
    return this.decryptedMembers
      .filter(
        (member) => member.did !== this.activeDid && !member.member.admitted,
      )
      .map(this.convertDecryptedMemberToMemberData);
  }
  getNonContactMembers(): MemberData[] {
    return this.decryptedMembers
      .filter(
        (member) =>
          member.did !== this.activeDid && !this.getContactFor(member.did),
      )
      .map(this.convertDecryptedMemberToMemberData);
  }
  convertDecryptedMemberToMemberData(
    decryptedMember: DecryptedMember,
  ): MemberData {
    return {
      did: decryptedMember.did,
      name: decryptedMember.name,
      isContact: !!this.getContactFor(decryptedMember.did),
      member: {
        memberId: decryptedMember.member.memberId.toString(),
      },
    };
  }
  /**
   * Show the bulk members dialog if conditions are met
   * (admit pending members for organizers, add to contacts for non-organizers)
   */
  async refreshData(bypassPromptIfAllWereIgnored = true) {
    // Force refresh both contacts and members
    this.contacts = await this.$getAllContacts();
    await this.fetchMembers();
    const pendingMembers = this.isOrganizer
      ? this.getPendingMembersToAdmit()
      : this.getNonContactMembers();
    if (pendingMembers.length === 0) {
      this.startAutoRefresh();
      return;
    }
    if (bypassPromptIfAllWereIgnored) {
      // only show if there are members that have not been ignored
      const pendingMembersNotIgnored = pendingMembers.filter(
        (member) => !this.previousMemberDidsIgnored.includes(member.did),
      );
      if (pendingMembersNotIgnored.length === 0) {
        this.startAutoRefresh();
        // everyone waiting has been ignored
        return;
      }
    }
    this.stopAutoRefresh();
    (this.$refs.bulkMembersDialog as BulkMembersDialog).open(pendingMembers);
  }
  // Bulk Members Dialog methods
  async closeBulkMembersDialogCallback(
    result: { notSelectedMemberDids: string[] } | undefined,
  ) {
    this.previousMemberDidsIgnored = result?.notSelectedMemberDids || [];
    await this.refreshData();
  }
  checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
    const contact = this.getContactFor(decrMember.did);
    if (!decrMember.member.admitted && !contact) {
-      // If not a contact, show confirmation dialog
+      // If not a contact, stop auto-refresh and show confirmation dialog
      this.stopAutoRefresh();
      this.$notify(
        {
          group: "modal",
@@ -387,6 +576,7 @@ export default class MembersList extends Vue {
            await this.addAsContact(decrMember);
            // After adding as contact, proceed with admission
            await this.toggleAdmission(decrMember);
            this.startAutoRefresh();
          },
          onNo: async () => {
            // If they choose not to add as contact, show second confirmation
@@ -399,14 +589,19 @@ export default class MembersList extends Vue {
                yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText,
                onYes: async () => {
                  await this.toggleAdmission(decrMember);
                  this.startAutoRefresh();
                },
                onCancel: async () => {
                  // Do nothing, effectively canceling the operation
                  this.startAutoRefresh();
                },
              },
              TIMEOUTS.MODAL,
            );
          },
          onCancel: async () => {
            this.startAutoRefresh();
          },
        },
        TIMEOUTS.MODAL,
      );
@@ -508,6 +703,41 @@ export default class MembersList extends Vue {
      this.notify.error(message, TIMEOUTS.LONG);
    }
  }
  startAutoRefresh() {
    this.stopAutoRefresh();
    this.lastRefreshTime = Date.now();
    this.countdownTimer = 10;
    this.autoRefreshInterval = setInterval(() => {
      const now = Date.now();
      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
      if (timeSinceLastRefresh >= 10) {
        // Time to refresh
        this.refreshData();
        this.lastRefreshTime = now;
        this.countdownTimer = 10;
      } else {
        // Update countdown
        this.countdownTimer = Math.max(
          0,
          Math.round(10 - timeSinceLastRefresh),
        );
      }
    }, 1000); // Update every second
  }
  stopAutoRefresh() {
    if (this.autoRefreshInterval) {
      clearInterval(this.autoRefreshInterval);
      this.autoRefreshInterval = null;
    }
  }
  beforeDestroy() {
    this.stopAutoRefresh();
  }
 }
 </script>
@@ -522,29 +752,26 @@ export default class MembersList extends Vue {
 .btn-add-contact {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+  @apply text-lg text-green-600 hover:text-green-800 
    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
    transition-colors;
 }
 .btn-info-contact {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
    transition-colors;
 }
 .btn-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
    transition-colors;
 }
 .btn-info-contact,
 .btn-info-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply text-slate-400 hover:text-slate-600 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
 }
 .btn-admission-add {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply text-lg text-blue-500 hover:text-blue-700 
    transition-colors;
 }
 .btn-admission-remove {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply text-lg text-rose-500 hover:text-rose-700 
    transition-colors;
 }
 </style>
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -59,7 +59,7 @@ export const PASSKEYS_ENABLED =
 export interface NotificationIface {
  group: string; // "alert" | "modal"
  type: string; // "toast" | "info" | "success" | "warning" | "danger"
-  title: string;
+  title?: string;
  text?: string;
  callback?: (success: boolean) => Promise<void>; // if this triggered an action
  noText?: string;
@@ -68,4 +68,11 @@ export interface NotificationIface {
  onYes?: () => Promise<void>;
  promptToStopAsking?: boolean;
  yesText?: string;
  membersData?: Array<{
    member: { admitted: boolean; content: string; memberId: number };
    name: string;
    did: string;
    isContact: boolean;
    contact?: { did: string; name?: string; seesMe?: boolean };
  }>; // For passing member data to visibility dialog
 }
--- a/src/db-sql/migration.ts
+++ b/src/db-sql/migration.ts
@@ -234,32 +234,20 @@ export async function runMigrations<T>(
  sqlQuery: (sql: string, params?: unknown[]) => Promise<T>,
  extractMigrationNames: (result: T) => Set<string>,
 ): Promise<void> {
-  // Only log migration start in development
+  logger.debug("[Migration] Starting database migrations");
  const isDevelopment = process.env.VITE_PLATFORM === "development";
  if (isDevelopment) {
    logger.debug("[Migration] Starting database migrations");
  }
  for (const migration of MIGRATIONS) {
-    if (isDevelopment) {
+    logger.debug("[Migration] Registering migration:", migration.name);
      logger.debug("[Migration] Registering migration:", migration.name);
    }
    registerMigration(migration);
  }
-  if (isDevelopment) {
+  logger.debug("[Migration] Running migration service");
    logger.debug("[Migration] Running migration service");
  }
  await runMigrationsService(sqlExec, sqlQuery, extractMigrationNames);
-  if (isDevelopment) {
+  logger.debug("[Migration] Database migrations completed");
    logger.debug("[Migration] Database migrations completed");
  }
  // Bootstrapping: Ensure active account is selected after migrations
-  if (isDevelopment) {
+  logger.debug("[Migration] Running bootstrapping hooks");
    logger.debug("[Migration] Running bootstrapping hooks");
  }
  try {
    // Check if we have accounts but no active selection
    const accountsResult = await sqlQuery("SELECT COUNT(*) FROM accounts");
@@ -274,18 +262,14 @@ export async function runMigrations<T>(
      activeDid = (extractSingleValue(activeResult) as string) || null;
    } catch (error) {
      // Table doesn't exist - migration 004 may not have run yet
-      if (isDevelopment) {
+      logger.debug(
-        logger.debug(
+        "[Migration] active_identity table not found - migration may not have run",
-          "[Migration] active_identity table not found - migration may not have run",
+      );
        );
      }
      activeDid = null;
    }
    if (accountsCount > 0 && (!activeDid || activeDid === "")) {
-      if (isDevelopment) {
+      logger.debug("[Migration] Auto-selecting first account as active");
        logger.debug("[Migration] Auto-selecting first account as active");
      }
      const firstAccountResult = await sqlQuery(
        "SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1",
      );
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -14,6 +14,13 @@ export interface AgreeActionClaim extends ClaimObject {
  object: Record<string, unknown>;
 }
 export interface EmojiClaim extends ClaimObject {
  // default context is "https://endorser.ch"
  "@type": "Emoji";
  text: string;
  parentItem: { lastClaimId: string };
 }
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {
--- a/src/interfaces/common.ts
+++ b/src/interfaces/common.ts
@@ -81,7 +81,9 @@ export interface UserInfo {
 export interface CreateAndSubmitClaimResult {
  success: boolean;
  embeddedRecordError?: string;
  error?: string;
  claimId?: string;
  handleId?: string;
 }
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,36 +1,6 @@
-export type {
+export * from "./claims";
  // From common.ts
  CreateAndSubmitClaimResult,
  GenericCredWrapper,
  GenericVerifiableCredential,
  KeyMeta,
  // Exclude types that are also exported from other files
  // GiveVerifiableCredential,
  // OfferVerifiableCredential,
  // RegisterVerifiableCredential,
  // PlanSummaryRecord,
  // UserInfo,
 } from "./common";
 export type {
  // From claims.ts
  GiveActionClaim,
  OfferClaim,
  RegisterActionClaim,
 } from "./claims";
 export type {
  // From records.ts
  PlanSummaryRecord,
 } from "./records";
 export type {
  // From user.ts
  UserInfo,
 } from "./user";
 export * from "./limits";
 export * from "./deepLinks";
 export * from "./common";
 export * from "./claims-result";
 export * from "./common";
 export * from "./deepLinks";
 export * from "./limits";
 export * from "./records";
--- a/src/interfaces/records.ts
+++ b/src/interfaces/records.ts
@@ -1,14 +1,26 @@
 import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
 import { GenericCredWrapper } from "./common";
 export interface EmojiSummaryRecord {
  issuerDid: string;
  jwtId: string;
  text: string;
  parentHandleId: string;
 }
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]: PropertyKey | undefined | GiveActionClaim;
+  [x: string]:
    | PropertyKey
    | undefined
    | GiveActionClaim
    | Record<string, number>;
  type?: string;
  agentDid: string;
  amount: number;
  amountConfirmed: number;
  description: string;
  emojiCount: Record<string, number>; // Map of emoji character to count
  fullClaim: GiveActionClaim;
  fulfillsHandleId: string;
  fulfillsPlanHandleId?: string;
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -6,3 +6,12 @@ export interface UserInfo {
  profileImageUrl?: string;
  nextPublicEncKeyHash?: string;
 }
 export interface MemberData {
  did: string;
  name: string;
  isContact: boolean;
  member: {
    memberId: string;
  };
 }
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -62,7 +62,7 @@ import {
  PlanSummaryAndPreviousClaim,
  PlanSummaryRecord,
 } from "../interfaces/records";
-import { logger } from "../utils/logger";
+import { logger, safeStringify } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
@@ -630,11 +630,7 @@ async function performPlanRequest(
      return cred;
    } else {
-      // Use debug level for development to reduce console noise
+      logger.debug(
      const isDevelopment = process.env.VITE_PLATFORM === "development";
      const log = isDevelopment ? logger.debug : logger.log;
      log(
        "[Plan Loading] ⚠️ Plan cache is empty for handle",
        handleId,
        " Got data:",
@@ -706,7 +702,7 @@ export function serverMessageForUser(error: unknown): string | undefined {
 export function errorStringForLog(error: unknown) {
  let stringifiedError = "" + error;
  try {
-    stringifiedError = JSON.stringify(error);
+    stringifiedError = safeStringify(error);
  } catch (e) {
    // can happen with Dexie, eg:
    // TypeError: Converting circular structure to JSON
@@ -718,7 +714,7 @@ export function errorStringForLog(error: unknown) {
  if (error && typeof error === "object" && "response" in error) {
    const err = error as AxiosErrorResponse;
-    const errorResponseText = JSON.stringify(err.response);
+    const errorResponseText = safeStringify(err.response);
    // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
    if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
      // add error.response stuff
@@ -728,7 +724,7 @@ export function errorStringForLog(error: unknown) {
        R.equals(err.config, err.response.config)
      ) {
        // but exclude "config" because it's already in there
-        const newErrorResponseText = JSON.stringify(
+        const newErrorResponseText = safeStringify(
          R.omit(["config"] as never[], err.response),
        );
        fullError +=
@@ -1226,7 +1222,12 @@ export async function createAndSubmitClaim(
      timestamp: new Date().toISOString(),
    });
-    return { success: true, handleId: response.data?.handleId };
+    return {
      success: true,
      claimId: response.data?.claimId,
      handleId: response.data?.handleId,
      embeddedRecordError: response.data?.embeddedRecordError,
    };
  } catch (error: unknown) {
    // Enhanced error logging with comprehensive context
    const requestId = `claim_error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
--- a/src/libs/fontawesome.ts
+++ b/src/libs/fontawesome.ts
@@ -29,6 +29,7 @@ import {
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleMinus,
  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
@@ -37,6 +38,7 @@ import {
  faCoins,
  faComment,
  faCopy,
  faCrown,
  faDollar,
  faDownload,
  faEllipsis,
@@ -58,6 +60,7 @@ import {
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHourglassHalf,
  faHouseChimney,
  faImage,
  faImagePortrait,
@@ -123,6 +126,7 @@ library.add(
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleMinus,
  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
@@ -131,6 +135,7 @@ library.add(
  faCoins,
  faComment,
  faCopy,
  faCrown,
  faDollar,
  faDownload,
  faEllipsis,
@@ -152,6 +157,7 @@ library.add(
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHourglassHalf,
  faHouseChimney,
  faImage,
  faImagePortrait,
--- a/src/libs/partnerServer.ts
+++ b/src/libs/partnerServer.ts
@@ -5,5 +5,6 @@ export interface UserProfile {
  locLat2?: number;
  locLon2?: number;
  issuerDid: string;
  issuerDidVisibleToDids?: Array<string>;
  rowId?: string; // set on profile retrieved from server
 }
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -988,11 +988,6 @@ export async function importFromMnemonic(
 ): Promise<void> {
  const mne: string = mnemonic.trim().toLowerCase();
  // Check if this is Test User #0
  const TEST_USER_0_MNEMONIC =
    "rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage";
  const isTestUser0 = mne === TEST_USER_0_MNEMONIC;
  // Derive address and keys from mnemonic
  const [address, privateHex, publicHex] = deriveAddress(mne, derivationPath);
@@ -1007,90 +1002,6 @@ export async function importFromMnemonic(
  // Save the new identity
  await saveNewIdentity(newId, mne, derivationPath);
  // Set up Test User #0 specific settings
  if (isTestUser0) {
    // Set up Test User #0 specific settings with enhanced error handling
    const platformService = await getPlatformService();
    try {
      // First, ensure the DID-specific settings record exists
      await platformService.insertNewDidIntoSettings(newId.did);
      // Then update with Test User #0 specific settings
      await platformService.updateDidSpecificSettings(newId.did, {
        firstName: "User Zero",
        isRegistered: true,
      });
      // Verify the settings were saved correctly
      const verificationResult = await platformService.dbQuery(
        "SELECT firstName, isRegistered FROM settings WHERE accountDid = ?",
        [newId.did],
      );
      if (verificationResult?.values?.length) {
        const settings = verificationResult.values[0];
        const firstName = settings[0];
        const isRegistered = settings[1];
        logger.debug(
          "[importFromMnemonic] Test User #0 settings verification",
          {
            did: newId.did,
            firstName,
            isRegistered,
            expectedFirstName: "User Zero",
            expectedIsRegistered: true,
          },
        );
        // If settings weren't saved correctly, try individual updates
        if (firstName !== "User Zero" || isRegistered !== 1) {
          logger.warn(
            "[importFromMnemonic] Test User #0 settings not saved correctly, retrying with individual updates",
          );
          await platformService.dbExec(
            "UPDATE settings SET firstName = ? WHERE accountDid = ?",
            ["User Zero", newId.did],
          );
          await platformService.dbExec(
            "UPDATE settings SET isRegistered = ? WHERE accountDid = ?",
            [1, newId.did],
          );
          // Verify again
          const retryResult = await platformService.dbQuery(
            "SELECT firstName, isRegistered FROM settings WHERE accountDid = ?",
            [newId.did],
          );
          if (retryResult?.values?.length) {
            const retrySettings = retryResult.values[0];
            logger.debug(
              "[importFromMnemonic] Test User #0 settings after retry",
              {
                firstName: retrySettings[0],
                isRegistered: retrySettings[1],
              },
            );
          }
        }
      } else {
        logger.error(
          "[importFromMnemonic] Failed to verify Test User #0 settings - no record found",
        );
      }
    } catch (error) {
      logger.error(
        "[importFromMnemonic] Error setting up Test User #0 settings:",
        error,
      );
      // Don't throw - allow the import to continue even if settings fail
    }
  }
 }
 /**
@@ -1147,3 +1058,29 @@ export async function checkForDuplicateAccount(
  return (existingAccount?.values?.length ?? 0) > 0;
 }
 export class PromiseTracker<T> {
  private _promise: Promise<T>;
  private _resolved = false;
  private _value: T | undefined;
  constructor(promise: Promise<T>) {
    this._promise = promise.then((value) => {
      this._resolved = true;
      this._value = value;
      return value;
    });
  }
  get isResolved(): boolean {
    return this._resolved;
  }
  get value(): T | undefined {
    return this._value;
  }
  get promise(): Promise<T> {
    return this._promise;
  }
 }
--- a/src/services/platforms/BaseDatabaseService.ts
+++ b/src/services/platforms/BaseDatabaseService.ts
@@ -0,0 +1,297 @@
 /**
 * @fileoverview Base Database Service for Platform Services
 * @author Matthew Raymer
 *
 * This abstract base class provides common database operations that are
 * identical across all platform implementations. It eliminates code
 * duplication and ensures consistency in database operations.
 *
 * Key Features:
 * - Common database utility methods
 * - Consistent settings management
 * - Active identity management
 * - Abstract methods for platform-specific database operations
 *
 * Architecture:
 * - Abstract base class with common implementations
 * - Platform services extend this class
 * - Platform-specific database operations remain abstract
 *
 * @since 1.1.1-beta
 */
 import { logger } from "../../utils/logger";
 import { QueryExecResult } from "@/interfaces/database";
 /**
 * Abstract base class for platform-specific database services.
 *
 * This class provides common database operations that are identical
 * across all platform implementations (Web, Capacitor, Electron).
 * Platform-specific services extend this class and implement the
 * abstract database operation methods.
 *
 * Common Operations:
 * - Settings management (update, retrieve, insert)
 * - Active identity management
 * - Database utility methods
 *
 * @abstract
 * @example
 * ```typescript
 * export class WebPlatformService extends BaseDatabaseService {
 *   async dbQuery(sql: string, params?: unknown[]): Promise<QueryExecResult> {
 *     // Web-specific implementation
 *   }
 * }
 * ```
 */
 export abstract class BaseDatabaseService {
  /**
   * Generate an INSERT statement for a model object.
   *
   * Creates a parameterized INSERT statement with placeholders for
   * all properties in the model object. This ensures safe SQL
   * execution and prevents SQL injection.
   *
   * @param model - Object containing the data to insert
   * @param tableName - Name of the target table
   * @returns Object containing the SQL statement and parameters
   *
   * @example
   * ```typescript
   * const { sql, params } = this.generateInsertStatement(
   *   { name: 'John', age: 30 },
   *   'users'
   * );
   * // sql: "INSERT INTO users (name, age) VALUES (?, ?)"
   * // params: ['John', 30]
   * ```
   */
  generateInsertStatement(
    model: Record<string, unknown>,
    tableName: string,
  ): { sql: string; params: unknown[] } {
    const keys = Object.keys(model);
    const placeholders = keys.map(() => "?").join(", ");
    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
    const params = keys.map((key) => model[key]);
    return { sql, params };
  }
  /**
   * Update default settings for the currently active account.
   *
   * Retrieves the active DID from the active_identity table and updates
   * the corresponding settings record. This ensures settings are always
   * updated for the correct account.
   *
   * @param settings - Object containing the settings to update
   * @returns Promise that resolves when settings are updated
   *
   * @throws {Error} If no active DID is found or database operation fails
   *
   * @example
   * ```typescript
   * await this.updateDefaultSettings({
   *   theme: 'dark',
   *   notifications: true
   * });
   * ```
   */
  async updateDefaultSettings(
    settings: Record<string, unknown>,
  ): Promise<void> {
    // Get current active DID and update that identity's settings
    const activeIdentity = await this.getActiveIdentity();
    const activeDid = activeIdentity.activeDid;
    if (!activeDid) {
      logger.warn(
        "[BaseDatabaseService] No active DID found, cannot update default settings",
      );
      return;
    }
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
    const params = [...keys.map((key) => settings[key]), activeDid];
    await this.dbExec(sql, params);
  }
  /**
   * Update the active DID in the active_identity table.
   *
   * Sets the active DID and updates the lastUpdated timestamp.
   * This is used when switching between different accounts/identities.
   *
   * @param did - The DID to set as active
   * @returns Promise that resolves when the update is complete
   *
   * @example
   * ```typescript
   * await this.updateActiveDid('did:example:123');
   * ```
   */
  async updateActiveDid(did: string): Promise<void> {
    await this.dbExec(
      "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
      [did],
    );
  }
  /**
   * Get the currently active DID from the active_identity table.
   *
   * Retrieves the active DID that represents the currently selected
   * account/identity. This is used throughout the application to
   * ensure operations are performed on the correct account.
   *
   * @returns Promise resolving to object containing the active DID
   *
   * @example
   * ```typescript
   * const { activeDid } = await this.getActiveIdentity();
   * console.log('Current active DID:', activeDid);
   * ```
   */
  async getActiveIdentity(): Promise<{ activeDid: string }> {
    const result = (await this.dbQuery(
      "SELECT activeDid FROM active_identity WHERE id = 1",
    )) as QueryExecResult;
    return {
      activeDid: (result?.values?.[0]?.[0] as string) || "",
    };
  }
  /**
   * Insert a new DID into the settings table with default values.
   *
   * Creates a new settings record for a DID with default configuration
   * values. Uses INSERT OR REPLACE to handle cases where settings
   * already exist for the DID.
   *
   * @param did - The DID to create settings for
   * @returns Promise that resolves when settings are created
   *
   * @example
   * ```typescript
   * await this.insertNewDidIntoSettings('did:example:123');
   * ```
   */
  async insertNewDidIntoSettings(did: string): Promise<void> {
    // Import constants dynamically to avoid circular dependencies
    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
      await import("@/constants/app");
    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
    // This prevents duplicate accountDid entries and ensures data integrity
    await this.dbExec(
      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
    );
  }
  /**
   * Update settings for a specific DID.
   *
   * Updates settings for a particular DID rather than the active one.
   * This is useful for bulk operations or when managing multiple accounts.
   *
   * @param did - The DID to update settings for
   * @param settings - Object containing the settings to update
   * @returns Promise that resolves when settings are updated
   *
   * @example
   * ```typescript
   * await this.updateDidSpecificSettings('did:example:123', {
   *   theme: 'light',
   *   notifications: false
   * });
   * ```
   */
  async updateDidSpecificSettings(
    did: string,
    settings: Record<string, unknown>,
  ): Promise<void> {
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
    const params = [...keys.map((key) => settings[key]), did];
    await this.dbExec(sql, params);
  }
  /**
   * Retrieve settings for the currently active account.
   *
   * Gets the active DID and retrieves all settings for that account.
   * Excludes the 'id' column from the returned settings object.
   *
   * @returns Promise resolving to settings object or null if no active DID
   *
   * @example
   * ```typescript
   * const settings = await this.retrieveSettingsForActiveAccount();
   * if (settings) {
   *   console.log('Theme:', settings.theme);
   *   console.log('Notifications:', settings.notifications);
   * }
   * ```
   */
  async retrieveSettingsForActiveAccount(): Promise<Record<
    string,
    unknown
  > | null> {
    // Get current active DID from active_identity table
    const activeIdentity = await this.getActiveIdentity();
    const activeDid = activeIdentity.activeDid;
    if (!activeDid) {
      return null;
    }
    const result = (await this.dbQuery(
      "SELECT * FROM settings WHERE accountDid = ?",
      [activeDid],
    )) as QueryExecResult;
    if (result?.values?.[0]) {
      // Convert the row to an object
      const row = result.values[0];
      const columns = result.columns || [];
      const settings: Record<string, unknown> = {};
      columns.forEach((column: string, index: number) => {
        if (column !== "id") {
          // Exclude the id column
          settings[column] = row[index];
        }
      });
      return settings;
    }
    return null;
  }
  // Abstract methods that must be implemented by platform-specific services
  /**
   * Execute a database query (SELECT operations).
   *
   * @abstract
   * @param sql - SQL query string
   * @param params - Optional parameters for prepared statements
   * @returns Promise resolving to query results
   */
  abstract dbQuery(sql: string, params?: unknown[]): Promise<unknown>;
  /**
   * Execute a database statement (INSERT, UPDATE, DELETE operations).
   *
   * @abstract
   * @param sql - SQL statement string
   * @param params - Optional parameters for prepared statements
   * @returns Promise resolving to execution results
   */
  abstract dbExec(sql: string, params?: unknown[]): Promise<unknown>;
 }
--- a/src/services/platforms/CapacitorPlatformService.ts
+++ b/src/services/platforms/CapacitorPlatformService.ts
@@ -22,6 +22,7 @@ import {
  PlatformCapabilities,
 } from "../PlatformService";
 import { logger } from "../../utils/logger";
 import { BaseDatabaseService } from "./BaseDatabaseService";
 interface QueuedOperation {
  type: "run" | "query" | "rawQuery";
@@ -39,7 +40,10 @@ interface QueuedOperation {
 * - Platform-specific features
 * - SQLite database operations
 */
-export class CapacitorPlatformService implements PlatformService {
+export class CapacitorPlatformService
  extends BaseDatabaseService
  implements PlatformService
 {
  /** Current camera direction */
  private currentDirection: CameraDirection = CameraDirection.Rear;
@@ -52,6 +56,7 @@ export class CapacitorPlatformService implements PlatformService {
  private isProcessingQueue: boolean = false;
  constructor() {
    super();
    this.sqlite = new SQLiteConnection(CapacitorSQLite);
  }
@@ -1328,79 +1333,8 @@ export class CapacitorPlatformService implements PlatformService {
  // --- PWA/Web-only methods (no-op for Capacitor) ---
  public registerServiceWorker(): void {}
-  // Database utility methods
+  // Database utility methods - inherited from BaseDatabaseService
-  generateInsertStatement(
+  // generateInsertStatement, updateDefaultSettings, updateActiveDid,
-    model: Record<string, unknown>,
+  // getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
-    tableName: string,
+  // retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
  ): { sql: string; params: unknown[] } {
    const keys = Object.keys(model);
    const placeholders = keys.map(() => "?").join(", ");
    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
    const params = keys.map((key) => model[key]);
    return { sql, params };
  }
  async updateDefaultSettings(
    settings: Record<string, unknown>,
  ): Promise<void> {
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE id = 1`;
    const params = keys.map((key) => settings[key]);
    await this.dbExec(sql, params);
  }
  async updateActiveDid(did: string): Promise<void> {
    await this.dbExec(
      "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
      [did],
    );
  }
  async insertNewDidIntoSettings(did: string): Promise<void> {
    // Import constants dynamically to avoid circular dependencies
    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
      await import("@/constants/app");
    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
    // This prevents duplicate accountDid entries and ensures data integrity
    await this.dbExec(
      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
    );
  }
  async updateDidSpecificSettings(
    did: string,
    settings: Record<string, unknown>,
  ): Promise<void> {
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
    const params = [...keys.map((key) => settings[key]), did];
    await this.dbExec(sql, params);
  }
  async retrieveSettingsForActiveAccount(): Promise<Record<
    string,
    unknown
  > | null> {
    const result = await this.dbQuery("SELECT * FROM settings WHERE id = 1");
    if (result?.values?.[0]) {
      // Convert the row to an object
      const row = result.values[0];
      const columns = result.columns || [];
      const settings: Record<string, unknown> = {};
      columns.forEach((column, index) => {
        if (column !== "id") {
          // Exclude the id column
          settings[column] = row[index];
        }
      });
      return settings;
    }
    return null;
  }
 }
--- a/src/services/platforms/WebPlatformService.ts
+++ b/src/services/platforms/WebPlatformService.ts
@@ -5,6 +5,7 @@ import {
 } from "../PlatformService";
 import { logger } from "../../utils/logger";
 import { QueryExecResult } from "@/interfaces/database";
 import { BaseDatabaseService } from "./BaseDatabaseService";
 // Dynamic import of initBackend to prevent worker context errors
 import type {
  WorkerRequest,
@@ -29,7 +30,10 @@ import type {
 * Note: File system operations are not available in the web platform
 * due to browser security restrictions. These methods throw appropriate errors.
 */
-export class WebPlatformService implements PlatformService {
+export class WebPlatformService
  extends BaseDatabaseService
  implements PlatformService
 {
  private static instanceCount = 0; // Debug counter
  private worker: Worker | null = null;
  private workerReady = false;
@@ -46,17 +50,16 @@ export class WebPlatformService implements PlatformService {
  private readonly messageTimeout = 30000; // 30 seconds
  constructor() {
    super();
    WebPlatformService.instanceCount++;
-    // Use debug level logging for development mode to reduce console noise
+    logger.debug("[WebPlatformService] Initializing web platform service");
    const isDevelopment = process.env.VITE_PLATFORM === "development";
    const log = isDevelopment ? logger.debug : logger.log;
    log("[WebPlatformService] Initializing web platform service");
    // Only initialize SharedArrayBuffer setup for web platforms
    if (this.isWorker()) {
-      log("[WebPlatformService] Skipping initBackend call in worker context");
+      logger.debug(
        "[WebPlatformService] Skipping initBackend call in worker context",
      );
      return;
    }
@@ -670,105 +673,8 @@ export class WebPlatformService implements PlatformService {
    // SharedArrayBuffer initialization is handled by initBackend call in initializeWorker
  }
-  // Database utility methods
+  // Database utility methods - inherited from BaseDatabaseService
-  generateInsertStatement(
+  // generateInsertStatement, updateDefaultSettings, updateActiveDid,
-    model: Record<string, unknown>,
+  // getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
-    tableName: string,
+  // retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
  ): { sql: string; params: unknown[] } {
    const keys = Object.keys(model);
    const placeholders = keys.map(() => "?").join(", ");
    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
    const params = keys.map((key) => model[key]);
    return { sql, params };
  }
  async updateDefaultSettings(
    settings: Record<string, unknown>,
  ): Promise<void> {
    // Get current active DID and update that identity's settings
    const activeIdentity = await this.getActiveIdentity();
    const activeDid = activeIdentity.activeDid;
    if (!activeDid) {
      logger.warn(
        "[WebPlatformService] No active DID found, cannot update default settings",
      );
      return;
    }
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
    const params = [...keys.map((key) => settings[key]), activeDid];
    await this.dbExec(sql, params);
  }
  async updateActiveDid(did: string): Promise<void> {
    await this.dbExec(
      "INSERT OR REPLACE INTO active_identity (id, activeDid, lastUpdated) VALUES (1, ?, ?)",
      [did, new Date().toISOString()],
    );
  }
  async getActiveIdentity(): Promise<{ activeDid: string }> {
    const result = await this.dbQuery(
      "SELECT activeDid FROM active_identity WHERE id = 1",
    );
    return {
      activeDid: (result?.values?.[0]?.[0] as string) || "",
    };
  }
  async insertNewDidIntoSettings(did: string): Promise<void> {
    // Import constants dynamically to avoid circular dependencies
    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
      await import("@/constants/app");
    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
    // This prevents duplicate accountDid entries and ensures data integrity
    await this.dbExec(
      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
    );
  }
  async updateDidSpecificSettings(
    did: string,
    settings: Record<string, unknown>,
  ): Promise<void> {
    const keys = Object.keys(settings);
    const setClause = keys.map((key) => `${key} = ?`).join(", ");
    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
    const params = [...keys.map((key) => settings[key]), did];
    // Log update operation for debugging
    logger.debug(
      "[WebPlatformService] updateDidSpecificSettings",
      sql,
      JSON.stringify(params, null, 2),
    );
    await this.dbExec(sql, params);
  }
  async retrieveSettingsForActiveAccount(): Promise<Record<
    string,
    unknown
  > | null> {
    const result = await this.dbQuery("SELECT * FROM settings WHERE id = 1");
    if (result?.values?.[0]) {
      // Convert the row to an object
      const row = result.values[0];
      const columns = result.columns || [];
      const settings: Record<string, unknown> = {};
      columns.forEach((column, index) => {
        if (column !== "id") {
          // Exclude the id column
          settings[column] = row[index];
        }
      });
      return settings;
    }
    return null;
  }
 }
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1488,18 +1488,21 @@ export default class AccountViewView extends Vue {
          status?: number;
        };
      };
-      logger.error("[Server Limits] Error retrieving limits:", {
+      logger.warn(
-        error: error instanceof Error ? error.message : String(error),
+        "[Server Limits] Error retrieving limits, expected for unregistered users:",
-        did: did,
+        {
-        apiServer: this.apiServer,
+          error: error instanceof Error ? error.message : String(error),
-        imageServer: this.DEFAULT_IMAGE_API_SERVER,
+          did: did,
-        partnerApiServer: this.partnerApiServer,
+          apiServer: this.apiServer,
-        errorCode: axiosError?.response?.data?.error?.code,
+          imageServer: this.DEFAULT_IMAGE_API_SERVER,
-        errorMessage: axiosError?.response?.data?.error?.message,
+          partnerApiServer: this.partnerApiServer,
-        httpStatus: axiosError?.response?.status,
+          errorCode: axiosError?.response?.data?.error?.code,
-        needsUserMigration: true,
+          errorMessage: axiosError?.response?.data?.error?.message,
-        timestamp: new Date().toISOString(),
+          httpStatus: axiosError?.response?.status,
-      });
+          needsUserMigration: true,
          timestamp: new Date().toISOString(),
        },
      );
      // this.notify.error(this.limitsMessage, TIMEOUTS.STANDARD);
    } finally {
@@ -2168,7 +2171,7 @@ export default class AccountViewView extends Vue {
      const headers = await getHeaders(did);
      const response = await this.axios.delete(
-        `${this.partnerApiServer}/api/partner/userProfile/${did}`,
+        `${this.partnerApiServer}/api/partner/userProfile`,
        { headers },
      );
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -88,19 +88,25 @@
              </button>
            </div>
          </div>
-          <div class="text-sm">
+          <div class="text-sm overflow-hidden">
-            <div data-testId="description">
+            <div
-              <font-awesome icon="message" class="fa-fw text-slate-400" />
+              data-testId="description"
              class="flex items-start gap-2 overflow-hidden"
            >
              <font-awesome
                icon="message"
                class="fa-fw text-slate-400 flex-shrink-0 mt-1"
              />
              <vue-markdown
                :source="claimDescription"
-                class="markdown-content"
+                class="markdown-content flex-1 min-w-0"
              />
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="user" class="fa-fw text-slate-400" />
              {{ didInfo(veriClaim.issuer) }}
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              Recorded
              {{ formattedIssueDate }}
@@ -548,7 +554,7 @@ import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
-import { GenericVerifiableCredential } from "../interfaces";
+import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -664,6 +670,10 @@ export default class ClaimView extends Vue {
      return giveClaim.description || "";
    }
    if (this.veriClaim.claimType === "Emoji") {
      return (claim as EmojiClaim).text || "";
    }
    // Fallback for other claim types
    return (claim as { description?: string })?.description || "";
  }
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -34,7 +34,7 @@
      class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
    >
      <div>
-        <h2 class="text-xl font-semibold">
+        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
          {{ contactFromDid?.name || "(no name)" }}
          <router-link
            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -282,8 +282,8 @@
                />
              </div>
-              <div class="grow">
+              <div class="grow overflow-hidden">
-                <h2 class="text-base font-semibold">
+                <h2 class="text-base font-semibold truncate">
                  {{ project.name || unnamedProject }}
                </h2>
                <div class="text-sm">
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -245,6 +245,7 @@ Raymer * @version 1.0.0 */
            :last-viewed-claim-id="feedLastViewedClaimId"
            :is-registered="isRegistered"
            :active-did="activeDid"
            :api-server="apiServer"
            @load-claim="onClickLoadClaim"
            @view-image="openImageViewer"
          />
@@ -705,7 +706,7 @@ export default class HomeView extends Vue {
          };
          logger.warn(
-            "[HomeView Settings Trace] ⚠️ Registration check failed",
+            "[HomeView Settings Trace] ⚠️ Registration check failed, expected for unregistered users.",
            {
              error: errorMessage,
              did: this.activeDid,
@@ -1264,6 +1265,7 @@ export default class HomeView extends Vue {
      provider,
      fulfillsPlan,
      providedByPlan,
      record.emojiCount,
    );
  }
@@ -1487,12 +1489,14 @@ export default class HomeView extends Vue {
    provider: Provider | undefined,
    fulfillsPlan?: FulfillsPlan,
    providedByPlan?: ProvidedByPlan,
    emojiCount?: Record<string, number>,
  ): GiveRecordWithContactInfo {
    return {
      ...record,
      jwtId: record.jwtId,
      fullClaim: record.fullClaim,
      description: record.description || "",
      emojiCount: emojiCount || {},
      handleId: record.handleId,
      issuerDid: record.issuerDid,
      fulfillsPlanHandleId: record.fulfillsPlanHandleId,
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -60,7 +60,9 @@
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
-                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2
                2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1
                1 0 011 1v4a1 1 0 001 1m-6 0h6"
              ></path>
            </svg>
            Go Home
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -77,7 +77,7 @@
        v-if="meetings.length === 0 && !isRegistered"
        class="text-center text-gray-500 py-8"
      >
-        No onboarding meetings available
+        No onboarding meetings are available
      </p>
    </div>
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -77,6 +77,7 @@ import {
 } from "../libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "../libs/util";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { NotificationIface } from "../constants/app";
@Component({
  components: {
@@ -97,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
  projectLink = "";
  $route!: RouteLocationNormalizedLoaded;
  $router!: Router;
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  userNameDialog!: InstanceType<typeof UserNameDialog>;
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -230,26 +230,28 @@
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
+        <h2 class="font-bold">Meeting Members</h2>
      </div>
      <div class="mt-4">
        &bull; Page for Members
        <span
          class="ml-4 cursor-pointer text-blue-600"
          title="Click to copy link for members"
          @click="copyMembersLinkToClipboard"
        >
          <font-awesome icon="link" />
        </span>
        <a
          v-if="!!currentMeeting.password"
          :href="onboardMeetingMembersLink()"
          class="ml-4 text-blue-600"
          target="_blank"
        >
          <font-awesome icon="external-link" />
        </a>
      </div>
      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
        <li>
          Page for Members:
          <span
            class="ml-4 cursor-pointer text-blue-600"
            title="Click to copy link for members"
            @click="copyMembersLinkToClipboard"
          >
            <font-awesome icon="link" />
          </span>
          <a
            v-if="!!currentMeeting.password"
            :href="onboardMeetingMembersLink()"
            class="ml-4 text-blue-600"
            target="_blank"
          >
            <font-awesome icon="external-link" />
          </a>
        </li>
      </ul>
      <MembersList
        :password="currentMeeting.password || ''"
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -28,7 +28,7 @@
          <font-awesome icon="question" class="block text-center w-[1em]" />
        </router-link>
      </div>
-      <h2 class="text-center text-lg font-normal">
+      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
        {{ name }}
        <button
          v-if="activeDid === issuer || activeDid === agentDid"
@@ -157,7 +157,7 @@
        </div>
        <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
            <vue-markdown
              :source="truncatedDesc"
              class="mb-4 markdown-content"
@@ -169,7 +169,7 @@
              >... Read More</a
            >
          </div>
-          <div v-else>
+          <div v-else class="overflow-hidden text-ellipsis">
            <vue-markdown :source="description" class="mb-4 markdown-content" />
            <a
              v-if="description.length >= truncateLength"
@@ -308,7 +308,10 @@
                />{{ offer.amount }}
              </span>
            </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
+            <div
              v-if="offer.objectDescription"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ offer.objectDescription }}
            </div>
@@ -450,7 +453,10 @@
                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                {{ give.issuedAt?.substring(0, 10) }}
              </div>
-              <div v-if="give.description" class="text-slate-500">
+              <div
                v-if="give.description"
                class="text-slate-500 overflow-hidden text-ellipsis"
              >
                <font-awesome icon="comment" class="fa-fw text-slate-400" />
                {{ give.description }}
              </div>
@@ -557,7 +563,10 @@
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              {{ give.issuedAt?.substring(0, 10) }}
            </div>
-            <div v-if="give.description" class="text-slate-500">
+            <div
              v-if="give.description"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ give.description }}
            </div>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -118,8 +118,8 @@
              />
            </div>
-            <div>
+            <div class="overflow-hidden">
-              <div>
+              <div class="text-sm truncate">
                To
                {{
                  offer.fulfillsPlanHandleId
@@ -132,7 +132,7 @@
                      )
                }}
              </div>
-              <div>
+              <div class="truncate">
                {{ offer.objectDescription }}
              </div>
@@ -254,7 +254,7 @@
            </div>
            <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">
+              <h2 class="text-base font-semibold truncate">
                {{ project.name || unnamedProject }}
              </h2>
              <div class="text-sm truncate">
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -54,6 +54,161 @@
        </p>
      </div>
      <!-- Issuer Information Section -->
      <div v-if="profile" class="mt-6">
        <div
          v-if="issuerContact"
          class="bg-blue-50 border border-blue-200 rounded-lg p-4"
        >
          <h3 class="text-lg font-semibold text-blue-800 mb-2">
            <font-awesome icon="user-check" class="fa-fw mr-2" />
            Contact Information
          </h3>
          <p class="text-sm text-blue-700 mb-3">
            {{ issuerContact.name || "Contact" }} is in your contacts.
          </p>
          <div
            v-if="
              issuerContact.contactMethods &&
              issuerContact.contactMethods.length > 0
            "
            class="space-y-2"
          >
            <h4 class="font-medium text-blue-800">Contact Methods:</h4>
            <div
              v-for="method in issuerContact.contactMethods"
              :key="method.label"
              class="flex items-center text-sm"
            >
              <span class="font-medium text-blue-700 w-20"
                >{{ method.label }}:</span
              >
              <span class="text-blue-600">{{ method.value }}</span>
              <span class="text-xs text-blue-500 ml-2"
                >({{ method.type }})</span
              >
            </div>
          </div>
        </div>
        <div
          v-else
          class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"
        >
          <h3 class="text-lg font-semibold text-yellow-800 mb-2">
            <font-awesome icon="user-plus" class="fa-fw mr-2" />
            Not in Contacts
          </h3>
          <p class="text-sm text-yellow-700 mb-3">
            This person has been connected but they're not in your contacts on
            this device.
          </p>
          <button
            class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center"
            @click="toggleConnectInstructions"
          >
            <font-awesome icon="link" class="fa-fw mr-1" />
            Connect Me...
            <font-awesome
              :icon="showConnectInstructions ? 'chevron-up' : 'chevron-down'"
              class="fa-fw ml-1"
            />
          </button>
          <!-- Expandable Instructions -->
          <div
            v-if="showConnectInstructions"
            class="mt-4 p-4 bg-white border border-yellow-300 rounded-md"
          >
            <h4 class="font-medium text-gray-800 mb-3">How to Connect:</h4>
            <!-- Copy Profile Link Instructions -->
            <div class="mb-4">
              <p class="text-sm text-gray-700 mb-2">
                1. Copy a deep link to this profile and send it to someone in
                your network:
              </p>
              <button
                class="bg-blue-500 hover:bg-blue-600 text-white text-sm px-3 py-1 rounded flex items-center"
                @click="onCopyLinkClick()"
              >
                <font-awesome icon="copy" class="fa-fw mr-1" />
                Copy Profile Link
              </button>
            </div>
            <!-- Contact List -->
            <div class="mb-4">
              <p class="text-sm text-gray-700 mb-2">
                2. Send the link to one of these people:
              </p>
              <!-- Contacts from issuerDidVisibleToDids -->
              <div v-if="visibleToContacts.length > 0" class="mb-3">
                <h5 class="text-xs font-medium text-gray-600 mb-2">
                  People who can see this profile:
                </h5>
                <div class="space-y-1">
                  <div
                    v-for="contact in visibleToContacts"
                    :key="contact.did"
                    class="flex items-center text-sm bg-gray-50 p-2 rounded"
                  >
                    <font-awesome
                      icon="user"
                      class="fa-fw text-gray-500 mr-2"
                    />
                    <span class="font-medium">{{
                      contact.name || "Unnamed Contact"
                    }}</span>
                    <span class="text-xs text-gray-500 ml-2"
                      >({{ contact.did.substring(0, 20) }}...)</span
                    >
                  </div>
                </div>
              </div>
              <!-- Nearest Neighbors -->
              <div v-if="nearestNeighbors.length > 0" class="mb-3">
                <h5 class="text-xs font-medium text-gray-600 mb-2">
                  <span v-if="visibleToContacts.length > 0"
                    >Other nearby people:</span
                  >
                  <span v-else>Nearby people:</span>
                </h5>
                <div class="space-y-1">
                  <div
                    v-for="neighbor in nearestNeighbors"
                    :key="neighbor.issuerDid"
                    class="flex items-center text-sm bg-gray-50 p-2 rounded"
                  >
                    <font-awesome
                      icon="user"
                      class="fa-fw text-gray-500 mr-2"
                    />
                    <span class="font-medium">{{
                      neighborDisplayName(neighbor)
                    }}</span>
                    <span class="text-xs text-gray-500 ml-2"
                      >({{ neighbor.issuerDid.substring(0, 20) }}...)</span
                    >
                  </div>
                </div>
              </div>
              <!-- Loading state for nearest neighbors -->
              <div
                v-if="loadingNearestNeighbors"
                class="text-sm text-gray-500 flex items-center"
              >
                <font-awesome icon="spinner" class="fa-spin fa-fw mr-2" />
                Loading nearby people...
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Map for first coordinates -->
      <div v-if="hasFirstLocation" class="mt-4">
        <h2 class="text-lg font-semibold">Location</h2>
@@ -113,7 +268,12 @@ import {
  APP_SERVER,
 } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
-import { didInfo, getHeaders } from "../libs/endorserServer";
+import {
  didInfo,
  getHeaders,
  isHiddenDid,
  contactForDid,
 } from "../libs/endorserServer";
 import { UserProfile } from "../libs/partnerServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
@@ -162,9 +322,13 @@ export default class UserProfileView extends Vue {
  isLoading = true;
  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
  profile: UserProfile | null = null;
  showConnectInstructions = false;
  nearestNeighbors: Array<UserProfile> = [];
  loadingNearestNeighbors = false;
  // make this function available to the Vue template
  didInfo = didInfo;
  isHiddenDid = isHiddenDid;
  /** Production share domain for deep links */
  APP_SERVER = APP_SERVER;
@@ -266,6 +430,63 @@ export default class UserProfileView extends Vue {
    }
  }
  /**
   * Loads nearest neighbors from the partner API
   * Called when the Connect Me section is expanded
   */
  async loadNearestNeighbors() {
    if (!this.profile?.issuerDid || this.loadingNearestNeighbors) return;
    this.loadingNearestNeighbors = true;
    try {
      const response = await fetch(
        `${this.partnerApiServer}/api/partner/userProfileNearestNeighbors?issuerDid=${encodeURIComponent(this.profile.issuerDid)}`,
        {
          method: "GET",
          headers: await getHeaders(this.activeDid),
        },
      );
      if (response.status === 200) {
        const result = await response.json();
        this.nearestNeighbors = result.data || [];
      } else {
        logger.warn("Failed to load nearest neighbors:", response.status);
      }
    } catch (error) {
      logger.error("Error loading nearest neighbors:", error);
    } finally {
      this.loadingNearestNeighbors = false;
    }
  }
  /**
   * Gets display name for a neighbor profile
   * @param neighbor UserProfile object
   * @returns Display name for the neighbor
   */
  neighborDisplayName(neighbor: UserProfile) {
    return this.didInfo(
      neighbor.issuerDid,
      this.activeDid,
      this.allMyDids,
      this.allContacts,
    );
  }
  /**
   * Toggles the Connect Me instructions and loads nearest neighbors if needed
   */
  async toggleConnectInstructions() {
    this.showConnectInstructions = !this.showConnectInstructions;
    // Load nearest neighbors when expanding for the first time
    if (this.showConnectInstructions && this.nearestNeighbors.length === 0) {
      await this.loadNearestNeighbors();
    }
  }
  /**
   * Computed properties for template logic streamlining
   */
@@ -283,6 +504,27 @@ export default class UserProfileView extends Vue {
    );
  }
  /**
   * Gets the contact information for the profile issuer
   * @returns Contact object if issuer is in contacts, undefined otherwise
   */
  get issuerContact() {
    if (!this.profile?.issuerDid) return undefined;
    return contactForDid(this.profile.issuerDid, this.allContacts);
  }
  /**
   * Gets contacts that are in the issuerDidVisibleToDids list
   * @returns Array of contacts who can see this profile
   */
  get visibleToContacts() {
    if (!this.profile?.issuerDidVisibleToDids) return [];
    return this.profile.issuerDidVisibleToDids
      .map((did) => contactForDid(did, this.allContacts))
      .filter((contact): contact is Contact => contact !== undefined);
  }
  /**
   * Checks if the profile has first location coordinates
   * @returns True if both latitude and longitude are available
--- a/test-playwright/testUtils.ts
+++ b/test-playwright/testUtils.ts
@@ -49,6 +49,10 @@ export async function importUserFromAccount(page: Page, id?: string): Promise<st
  await page.getByRole("button", { name: "Import" }).click();
  // PHASE 1 FIX: Wait for registration status to settle
  // This ensures that components have the correct isRegistered status
  await waitForRegistrationStatusToSettle(page);
  return userZeroData.did;
 }
@@ -69,6 +73,11 @@ export async function importUser(page: Page, id?: string): Promise<string> {
  await expect(
    page.locator("#sectionUsageLimits").getByText("Checking")
  ).toBeHidden();
  // PHASE 1 FIX: Wait for registration check to complete and update UI elements
  // This ensures that components like InviteOneView have the correct isRegistered status
  await waitForRegistrationStatusToSettle(page);
  return did;
 }
@@ -337,3 +346,78 @@ export function getElementWaitTimeout(): number {
 export function getPageLoadTimeout(): number {
  return getAdaptiveTimeout(30000, 1.4);
 }
 /**
 * PHASE 1 FIX: Wait for registration status to settle
 * 
 * This function addresses the timing issue where:
 * 1. User imports identity → Database shows isRegistered: false
 * 2. HomeView loads → Starts async registration check
 * 3. Other views load → Use cached isRegistered: false
 * 4. Async check completes → Updates database to isRegistered: true
 * 5. But other views don't re-check → Plus buttons don't appear
 * 
 * This function waits for the async registration check to complete
 * without interfering with test navigation.
 */
 export async function waitForRegistrationStatusToSettle(page: Page): Promise<void> {
  try {
    // Wait for the initial registration check to complete
    // This is indicated by the "Checking" text disappearing from usage limits
    await expect(
      page.locator("#sectionUsageLimits").getByText("Checking")
    ).toBeHidden({ timeout: 15000 });
    // Before navigating back to the page, we'll trigger a registration check
    // by navigating to home and waiting for the registration process to complete
    const currentUrl = page.url();
    // Navigate to home to trigger the registration check
    await page.goto('./');
    await page.waitForLoadState('networkidle');
    // Wait for the registration check to complete by monitoring the usage limits section
    // This ensures the async registration check has finished
    await page.waitForFunction(() => {
      const usageLimits = document.querySelector('#sectionUsageLimits');
      if (!usageLimits) return true; // No usage limits section, assume ready
      // Check if the "Checking..." spinner is gone
      const checkingSpinner = usageLimits.querySelector('.fa-spin');
      if (checkingSpinner) return false; // Still loading
      // Check if we have actual content (not just the spinner)
      const hasContent = usageLimits.querySelector('p') || usageLimits.querySelector('button');
      return hasContent !== null; // Has actual content, not just spinner
    }, { timeout: 10000 });
    // Also navigate to account page to ensure activeDid is set and usage limits are loaded
    await page.goto('./account');
    await page.waitForLoadState('networkidle');
    // Wait for the usage limits section to be visible and loaded
    await page.waitForFunction(() => {
      const usageLimits = document.querySelector('#sectionUsageLimits');
      if (!usageLimits) return false; // Section should exist on account page
      // Check if the "Checking..." spinner is gone
      const checkingSpinner = usageLimits.querySelector('.fa-spin');
      if (checkingSpinner) return false; // Still loading
      // Check if we have actual content (not just the spinner)
      const hasContent = usageLimits.querySelector('p') || usageLimits.querySelector('button');
      return hasContent !== null; // Has actual content, not just spinner
    }, { timeout: 15000 });
    // Navigate back to the original page if it wasn't home
    if (!currentUrl.includes('/')) {
      await page.goto(currentUrl);
      await page.waitForLoadState('networkidle');
    }
  } catch (error) {
    // Registration status check timed out, continuing anyway
    // This may indicate the user is not registered or there's a server issue
  }
 }