feat(meeting): enable selecting all projects in meeting setup

Update loadProjects to fetch all projects instead of only user's projects
by switching from plansByIssuer to plans endpoint.

.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

.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..."

BUILDING.md

@@ -1158,10 +1158,10 @@ If you need to build manually or want to understand the individual steps:
    export GEM_PATH=$shortened_path
    ```
 
-##### 1. Bump the version in package.json, then here
+##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version;
 
    ```bash
-   cd ios/App && xcrun agvtool new-version 40 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.0.7;/g" App.xcodeproj/project.pbxproj && cd -
+   cd ios/App && xcrun agvtool new-version 46 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.1;/g" App.xcodeproj/project.pbxproj && cd -
    # Unfortunately this edits Info.plist directly.
    #xcrun agvtool new-marketing-version 0.4.5
    ```
@@ -1318,8 +1318,8 @@ The recommended way to build for Android is using the automated build script:
 ##### 1. Bump the version in package.json, then here: android/app/build.gradle
 
   ```bash
-  perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
+  perl -p -i -e 's/versionCode .*/versionCode 46/g' android/app/build.gradle
-  perl -p -i -e 's/versionName .*/versionName "1.0.7"/g' android/app/build.gradle
+  perl -p -i -e 's/versionName .*/versionName "1.1.1"/g' android/app/build.gradle
   ```
 
 ##### 2. Build

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [1.1.1] - 2025.11.03
+
+### Added
+- Meeting onboarding via prompts
+- Emojis on gift feed
+- Starred projects with notification
+
+
 ## [1.0.7] - 2025.08.18
 
 ### Fixed

android/app/build.gradle

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

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 -->
     

ios/App/App.xcodeproj/project.pbxproj

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

package-lock.json

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

package.json

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

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-[calc(100vh-3rem)] overflow-y-auto;
 	}
 
 	/* Markdown content styling to restore list elements */

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>

src/components/BulkMembersDialog.vue

@@ -0,0 +1,465 @@
+<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="processSelectedMembers"
+          >
+            {{ 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, register } from "@/libs/endorserServer";
+import { createNotifyHelpers } from "@/utils/notify";
+import { Contact } from "@/db/tables/contacts";
+
+@Component({
+  mixins: [PlatformServiceMixin],
+  emits: ["close"],
+})
+export default class BulkMembersDialog extends Vue {
+  @Prop({ default: "" }) activeDid!: string;
+  @Prop({ default: "" }) apiServer!: string;
+  // isOrganizer: true = organizer mode (admit members), false = member mode (set 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 processSelectedMembers() {
+    try {
+      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
+        this.selectedMembers.includes(member.did),
+      );
+      const notSelectedMembers: MemberData[] = this.membersData.filter(
+        (member) => !this.selectedMembers.includes(member.did),
+      );
+
+      let admittedCount = 0;
+      let contactAddedCount = 0;
+      let errors = 0;
+
+      for (const member of selectedMembers) {
+        try {
+          // Organizer mode: admit and register the member first
+          if (this.isOrganizer) {
+            await this.admitMember(member);
+            await this.registerMember(member);
+            admittedCount++;
+          }
+
+          // If they're not a contact yet, add them as a contact
+          if (!member.isContact) {
+            // Organizer mode: set isRegistered to true, member mode: undefined
+            await this.addAsContact(
+              member,
+              this.isOrganizer ? true : undefined,
+            );
+            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
+          errors++;
+        }
+      }
+
+      // Show success notification
+      if (this.isOrganizer) {
+        if (admittedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Members Admitted Successfully",
+              text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
+            },
+            5000,
+          );
+        }
+        if (errors > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text: "Failed to fully admit some members. Work with them individually below.",
+            },
+            5000,
+          );
+        }
+      } else {
+        // Member mode: show contacts added notification
+        if (contactAddedCount > 0) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Contacts Added Successfully",
+              text: `${contactAddedCount} member${contactAddedCount === 1 ? "" : "s"} added as contact${contactAddedCount === 1 ? "" : "s"}.`,
+            },
+            5000,
+          );
+        }
+      }
+
+      this.close(notSelectedMembers.map((member) => member.did));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `Error ${this.isOrganizer ? "admitting members" : "adding contacts"}:`,
+        error,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Some errors occurred. Work with members individually below.",
+        },
+        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 registerMember(member: MemberData) {
+    try {
+      const contact: Contact = { did: member.did };
+      const result = await register(
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+        contact,
+      );
+      if (result.success) {
+        if (result.embeddedRecordError) {
+          throw new Error(result.embeddedRecordError);
+        }
+        await this.$updateContact(member.did, { registered: true });
+      } else {
+        throw result;
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error registering member:", err);
+      throw err;
+    }
+  }
+
+  async addAsContact(
+    member: { did: string; name: string },
+    isRegistered?: boolean,
+  ) {
+    try {
+      const newContact: Contact = {
+        did: member.did,
+        name: member.name,
+        registered: isRegistered,
+      };
+
+      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() {
+    // isOrganizer: true = admit mode, false = visibility mode
+    const message = this.isOrganizer
+      ? "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>

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>

src/components/EntityGrid.vue

@@ -2,12 +2,55 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <ul :class="gridClasses">
+  <!-- Quick Search -->
+  <div id="QuickSearch" class="mb-4 flex items-center text-sm">
+    <input
+      v-model="searchTerm"
+      type="text"
+      placeholder="Search…"
+      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
+      @input="handleSearchInput"
+      @keydown.enter="performSearch"
+    />
+    <div
+      v-show="isSearching && searchTerm"
+      class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
+    >
+      <font-awesome
+        icon="spinner"
+        class="fa-spin-pulse leading-[1.1]"
+      ></font-awesome>
+    </div>
+    <button
+      :disabled="!searchTerm"
+      class="px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
+      @click="clearSearch"
+    >
+      <font-awesome
+        :icon="searchTerm ? 'times' : 'magnifying-glass'"
+        class="fa-fw"
+      ></font-awesome>
+    </button>
+  </div>
+
+  <div
+    v-if="searchTerm && !isSearching && filteredEntities.length === 0"
+    class="mb-4 text-sm italic text-slate-500 text-center"
+  >
+    “{{ searchTerm }}” doesn't match any
+    {{ entityType === "people" ? "people" : "projects" }}. Try a different
+    search.
+  </div>
+
+  <ul
+    ref="scrollContainer"
+    class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto"
+  >
     <!-- Special entities (You, Unnamed) for people grids -->
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
       <SpecialEntityCard
-        v-if="showYouEntity"
+        v-if="showYouEntity && !searchTerm.trim()"
         entity-type="you"
         label="You"
         icon="hand"
@@ -21,6 +64,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
       <!-- "Unnamed" entity -->
       <SpecialEntityCard
+        v-if="showUnnamedEntity && !searchTerm.trim()"
         entity-type="unnamed"
         :label="unnamedEntityName"
         icon="circle-question"
@@ -38,16 +82,60 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
     <!-- Entity cards (people or projects) -->
     <template v-if="entityType === 'people'">
-      <PersonCard
+      <!-- When showing contacts without search: split into recent and alphabetical -->
-        v-for="person in displayedEntities as Contact[]"
+      <template v-if="!searchTerm.trim()">
-        :key="person.did"
+        <!-- Recently Added Section -->
-        :person="person"
+        <template v-if="recentContacts.length > 0">
-        :conflicted="isPersonConflicted(person.did)"
+          <li
-        :show-time-icon="true"
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
-        :notify="notify"
+          >
-        :conflict-context="conflictContext"
+            Recently Added
-        @person-selected="handlePersonSelected"
+          </li>
-      />
+          <PersonCard
+            v-for="person in recentContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+
+        <!-- Alphabetical Section -->
+        <template v-if="alphabeticalContacts.length > 0">
+          <li
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
+          >
+            Everyone
+          </li>
+          <PersonCard
+            v-for="person in alphabeticalContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+      </template>
+
+      <!-- When searching: show filtered results normally -->
+      <template v-else>
+        <PersonCard
+          v-for="person in displayedEntities as Contact[]"
+          :key="person.did"
+          :person="person"
+          :conflicted="isPersonConflicted(person.did)"
+          :show-time-icon="true"
+          :notify="notify"
+          :conflict-context="conflictContext"
+          @person-selected="handlePersonSelected"
+        />
+      </template>
     </template>
 
     <template v-else-if="entityType === 'projects'">
@@ -63,28 +151,27 @@ projects, and special entities with selection. * * @author Matthew Raymer */
         @project-selected="handleProjectSelected"
       />
     </template>
-
-    <!-- Show All navigation -->
-    <ShowAllCard
-      v-if="shouldShowAll"
-      :entity-type="entityType"
-      :route-name="showAllRoute"
-      :query-params="showAllQueryParams"
-    />
   </ul>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue, Emit, Watch } from "vue-facing-decorator";
+import { useInfiniteScroll } from "@vueuse/core";
 import PersonCard from "./PersonCard.vue";
 import ProjectCard from "./ProjectCard.vue";
 import SpecialEntityCard from "./SpecialEntityCard.vue";
-import ShowAllCard from "./ShowAllCard.vue";
 import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
+/**
+ * Constants for infinite scroll configuration
+ */
+const INITIAL_BATCH_SIZE = 20;
+const INCREMENT_SIZE = 20;
+const RECENT_CONTACTS_COUNT = 3;
+
 /**
  * EntityGrid - Unified grid layout for displaying people or projects
  *
@@ -93,7 +180,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
  * - Special entity integration (You, Unnamed)
  * - Conflict detection integration
  * - Empty state messaging
- * - Show All navigation
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
  * - Template streamlined with computed CSS properties
@@ -104,7 +190,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
     PersonCard,
     ProjectCard,
     SpecialEntityCard,
-    ShowAllCard,
   },
 })
 export default class EntityGrid extends Vue {
@@ -112,14 +197,32 @@ export default class EntityGrid extends Vue {
   @Prop({ required: true })
   entityType!: "people" | "projects";
 
-  /** Array of entities to display */
+  // Search state
+  searchTerm = "";
+  isSearching = false;
+  searchTimeout: NodeJS.Timeout | null = null;
+  filteredEntities: Contact[] | PlanData[] = [];
+
+  // Infinite scroll state
+  displayedCount = INITIAL_BATCH_SIZE;
+  infiniteScrollReset?: () => void;
+  scrollContainer?: HTMLElement;
+
+  /**
+   * Array of entities to display
+   *
+   * IMPORTANT: When passing Contact[] arrays, they must be sorted by date added
+   * (newest first) for the "Recently Added" section to display correctly.
+   * Use $contactsByDateAdded() instead of $getAllContacts() or $contacts().
+   *
+   * The recentContacts computed property assumes contacts are already sorted
+   * by date added and simply takes the first 3. If contacts are sorted
+   * alphabetically or in another order, the wrong contacts will appear in
+   * "Recently Added".
+   */
   @Prop({ required: true })
   entities!: Contact[] | PlanData[];
 
-  /** Maximum number of entities to display */
-  @Prop({ default: 10 })
-  maxItems!: number;
-
   /** Active user's DID */
   @Prop({ required: true })
   activeDid!: string;
@@ -140,18 +243,14 @@ export default class EntityGrid extends Vue {
   @Prop({ default: true })
   showYouEntity!: boolean;
 
+  /** Whether to show the "Unnamed" entity for people grids */
+  @Prop({ default: true })
+  showUnnamedEntity!: boolean;
+
   /** Whether the "You" entity is selectable */
   @Prop({ default: true })
   youSelectable!: boolean;
 
-  /** Route name for "Show All" navigation */
-  @Prop({ default: "" })
-  showAllRoute!: string;
-
-  /** Query parameters for "Show All" navigation */
-  @Prop({ default: () => ({}) })
-  showAllQueryParams!: Record<string, string>;
-
   /** Notification function from parent component */
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
@@ -160,42 +259,31 @@ export default class EntityGrid extends Vue {
   @Prop({ default: "other party" })
   conflictContext!: string;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * Function to determine which entities to display (allows parent control)
    *
    * This function prop allows parent components to customize which entities
-   * are displayed in the grid, enabling advanced filtering, sorting, and
+   * are displayed in the grid, enabling advanced filtering and sorting.
-   * display logic beyond the default simple slice behavior.
+   * Note: Infinite scroll is disabled when this prop is provided.
    *
    * @param entities - The full array of entities (Contact[] or PlanData[])
    * @param entityType - The type of entities being displayed ("people" or "projects")
-   * @param maxItems - The maximum number of items to display (from maxItems prop)
    * @returns Filtered/sorted array of entities to display
    *
    * @example
    * // Custom filtering: only show contacts with profile images
-   * :display-entities-function="(entities, type, max) =>
+   * :display-entities-function="(entities, type) =>
-   *   entities.filter(e => e.profileImageUrl).slice(0, max)"
+   *   entities.filter(e => e.profileImageUrl)"
    *
    * @example
    * // Custom sorting: sort projects by name
-   * :display-entities-function="(entities, type, max) =>
+   * :display-entities-function="(entities, type) =>
-   *   entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)"
+   *   entities.sort((a, b) => a.name.localeCompare(b.name))"
-   *
-   * @example
-   * // Advanced logic: different limits for different entity types
-   * :display-entities-function="(entities, type, max) =>
-   *   type === 'projects' ? entities.slice(0, 5) : entities.slice(0, max)"
    */
   @Prop({ default: null })
   displayEntitiesFunction?: (
     entities: Contact[] | PlanData[],
     entityType: "people" | "projects",
-    maxItems: number,
   ) => Contact[] | PlanData[];
 
   /**
@@ -206,33 +294,63 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Computed CSS classes for the grid layout
+   * Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
+   * When searching, returns filtered results with infinite scroll applied
    */
-  get gridClasses(): string {
+  get displayedEntities(): Contact[] | PlanData[] {
-    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
+    // If searching, return filtered results with infinite scroll
-
+    if (this.searchTerm.trim()) {
-    if (this.entityType === "projects") {
+      return this.filteredEntities.slice(0, this.displayedCount);
-      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
-    } else {
-      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
     }
+
+    // If custom function provided, use it (disables infinite scroll)
+    if (this.displayEntitiesFunction) {
+      return this.displayEntitiesFunction(this.entities, this.entityType);
+    }
+
+    // Default: projects use infinite scroll
+    if (this.entityType === "projects") {
+      return (this.entities as PlanData[]).slice(0, this.displayedCount);
+    }
+
+    // People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
+    return [];
   }
 
   /**
-   * Computed entities to display - uses function prop if provided, otherwise defaults
+   * Get the most recently added contacts (when showing contacts and not searching)
+   *
+   * NOTE: This assumes entities are already sorted by date added (newest first).
+   * See the entities prop documentation for details on using $contactsByDateAdded().
    */
-  get displayedEntities(): Contact[] | PlanData[] {
+  get recentContacts(): Contact[] {
-    if (this.displayEntitiesFunction) {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
-      return this.displayEntitiesFunction(
+      return [];
-        this.entities,
-        this.entityType,
-        this.maxItems,
-      );
     }
+    // Entities are already sorted by date added (newest first)
+    return (this.entities as Contact[]).slice(0, RECENT_CONTACTS_COUNT);
+  }
 
-    // Default implementation for backward compatibility
+  /**
-    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
+   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
-    return this.entities.slice(0, maxDisplay);
+   * Uses infinite scroll to control how many are displayed
+   */
+  get alphabeticalContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
+    }
+    // Skip the first few (recent contacts) and sort the rest alphabetically
+    // Create a copy to avoid mutating the original array
+    const remaining = this.entities as Contact[];
+    const sorted = [...remaining].sort((a: Contact, b: Contact) => {
+      // Sort alphabetically by name, falling back to DID if name is missing
+      const nameA = (a.name || a.did).toLowerCase();
+      const nameB = (b.name || b.did).toLowerCase();
+      return nameA.localeCompare(nameB);
+    });
+    // Apply infinite scroll: show based on displayedCount (minus the recent contacts)
+    const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
+    return sorted.slice(0, toShow);
   }
 
   /**
@@ -246,15 +364,6 @@ export default class EntityGrid extends Vue {
     }
   }
 
-  /**
-   * Whether to show the "Show All" navigation
-   */
-  get shouldShowAll(): boolean {
-    return (
-      !this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
-    );
-  }
-
   /**
    * Whether the "You" entity is conflicted
    */
@@ -328,6 +437,143 @@ export default class EntityGrid extends Vue {
     });
   }
 
+  /**
+   * Handle search input with debouncing
+   */
+  handleSearchInput(): void {
+    // Show spinner immediately when user types
+    this.isSearching = true;
+
+    // Clear existing timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+
+    // Set new timeout for 500ms delay
+    this.searchTimeout = setTimeout(() => {
+      this.performSearch();
+    }, 500);
+  }
+
+  /**
+   * Perform the actual search
+   */
+  async performSearch(): Promise<void> {
+    if (!this.searchTerm.trim()) {
+      this.filteredEntities = [];
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.infiniteScrollReset?.();
+      return;
+    }
+
+    this.isSearching = true;
+
+    try {
+      // Simulate async search (in case we need to add API calls later)
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const searchLower = this.searchTerm.toLowerCase().trim();
+
+      if (this.entityType === "people") {
+        this.filteredEntities = (this.entities as Contact[])
+          .filter((contact: Contact) => {
+            const name = contact.name?.toLowerCase() || "";
+            const did = contact.did.toLowerCase();
+            return name.includes(searchLower) || did.includes(searchLower);
+          })
+          .sort((a: Contact, b: Contact) => {
+            // Sort alphabetically by name, falling back to DID if name is missing
+            const nameA = (a.name || a.did).toLowerCase();
+            const nameB = (b.name || b.did).toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
+      } else {
+        this.filteredEntities = (this.entities as PlanData[])
+          .filter((project: PlanData) => {
+            const name = project.name?.toLowerCase() || "";
+            const handleId = project.handleId.toLowerCase();
+            return name.includes(searchLower) || handleId.includes(searchLower);
+          })
+          .sort((a: PlanData, b: PlanData) => {
+            // Sort alphabetically by name
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+          });
+      }
+
+      // Reset displayed count when search completes
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.infiniteScrollReset?.();
+    } finally {
+      this.isSearching = false;
+    }
+  }
+
+  /**
+   * Clear the search
+   */
+  clearSearch(): void {
+    this.searchTerm = "";
+    this.filteredEntities = [];
+    this.isSearching = false;
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+
+    // Clear any pending timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+  }
+
+  /**
+   * Determine if more entities can be loaded
+   */
+  canLoadMore(): boolean {
+    if (this.displayEntitiesFunction) {
+      // Custom function disables infinite scroll
+      return false;
+    }
+
+    if (this.searchTerm.trim()) {
+      // Search mode: check filtered entities
+      return this.displayedCount < this.filteredEntities.length;
+    }
+
+    if (this.entityType === "projects") {
+      // Projects: check if more available
+      return this.displayedCount < this.entities.length;
+    }
+
+    // People: check if more alphabetical contacts available
+    // Total available = recent + all alphabetical
+    const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.length;
+    return this.displayedCount < totalAvailable;
+  }
+
+  /**
+   * Initialize infinite scroll on mount
+   */
+  mounted(): void {
+    this.$nextTick(() => {
+      const container = this.$refs.scrollContainer as HTMLElement;
+
+      if (container) {
+        const { reset } = useInfiniteScroll(
+          container,
+          () => {
+            // Load more: increment displayedCount
+            this.displayedCount += INCREMENT_SIZE;
+          },
+          {
+            distance: 50, // pixels from bottom
+            canLoadMore: () => this.canLoadMore(),
+          },
+        );
+        this.infiniteScrollReset = reset;
+      }
+    });
+  }
+
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
@@ -340,6 +586,33 @@ export default class EntityGrid extends Vue {
   } {
     return data;
   }
+
+  /**
+   * Watch for changes in search term to reset displayed count
+   */
+  @Watch("searchTerm")
+  onSearchTermChange(): void {
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Watch for changes in entities prop to reset displayed count
+   */
+  @Watch("entities")
+  onEntitiesChange(): void {
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Cleanup timeouts when component is destroyed
+   */
+  beforeUnmount(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  }
 }
 </script>
 

src/components/EntitySelectionStep.vue

@@ -3,10 +3,9 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
 with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
 based on context * - EntityGrid integration for unified entity display * -
 Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
-Show All navigation with context preservation * - Cancel functionality * - Event
+Cancel functionality * - Event delegation for entity selection * - Warning
-delegation for entity selection * - Warning notifications for conflicted
+notifications for conflicted entities * - Template streamlined with computed CSS
-entities * - Template streamlined with computed CSS properties * * @author
+properties * * @author Matthew Raymer */
-Matthew Raymer */
 <template>
   <div id="sectionGiftedGiver">
     <label class="block font-bold mb-4">
@@ -16,18 +15,14 @@ Matthew Raymer */
     <EntityGrid
       :entity-type="shouldShowProjects ? 'projects' : 'people'"
       :entities="shouldShowProjects ? projects : allContacts"
-      :max-items="10"
       :active-did="activeDid"
       :all-my-dids="allMyDids"
       :all-contacts="allContacts"
       :conflict-checker="conflictChecker"
       :show-you-entity="shouldShowYouEntity"
       :you-selectable="youSelectable"
-      :show-all-route="showAllRoute"
-      :show-all-query-params="showAllQueryParams"
       :notify="notify"
       :conflict-context="conflictContext"
-      :hide-show-all="hideShowAll"
       @entity-selected="handleEntitySelected"
     />
 
@@ -68,7 +63,6 @@ interface EntitySelectionEvent {
  * - EntityGrid integration for unified entity display
  * - Conflict detection and prevention
  * - Special entity handling (You, Unnamed)
- * - Show All navigation with context preservation
  * - Cancel functionality
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
@@ -154,10 +148,6 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * CSS classes for the cancel button
    */
@@ -222,59 +212,6 @@ export default class EntitySelectionStep extends Vue {
     return !this.conflictChecker(this.activeDid);
   }
 
-  /**
-   * Route name for "Show All" navigation
-   */
-  get showAllRoute(): string {
-    if (this.shouldShowProjects) {
-      return "discover";
-    } else if (this.allContacts.length > 0) {
-      return "contact-gift";
-    }
-    return "";
-  }
-
-  /**
-   * Query parameters for "Show All" navigation
-   */
-  get showAllQueryParams(): Record<string, string> {
-    const baseParams = {
-      stepType: this.stepType,
-      giverEntityType: this.giverEntityType,
-      recipientEntityType: this.recipientEntityType,
-      // Form field values to preserve
-      description: this.description,
-      amountInput: this.amountInput,
-      unitCode: this.unitCode,
-      offerId: this.offerId,
-      fromProjectId: this.fromProjectId,
-      toProjectId: this.toProjectId,
-      showProjects: this.showProjects.toString(),
-      isFromProjectView: this.isFromProjectView.toString(),
-    };
-
-    if (this.shouldShowProjects) {
-      // For project contexts, still pass entity type information
-      return baseParams;
-    }
-
-    return {
-      ...baseParams,
-      // Always pass both giver and recipient info for context preservation
-      giverProjectId: this.fromProjectId || "",
-      giverProjectName: this.giver?.name || "",
-      giverProjectImage: this.giver?.image || "",
-      giverProjectHandleId: this.giver?.handleId || "",
-      giverDid: this.giverEntityType === "person" ? this.giver?.did || "" : "",
-      recipientProjectId: this.toProjectId || "",
-      recipientProjectName: this.receiver?.name || "",
-      recipientProjectImage: this.receiver?.image || "",
-      recipientProjectHandleId: this.receiver?.handleId || "",
-      recipientDid:
-        this.recipientEntityType === "person" ? this.receiver?.did || "" : "",
-    };
-  }
-
   /**
    * Handle entity selection from EntityGrid
    */

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>

src/components/GiftedDialog.vue

@@ -29,7 +29,6 @@
         :unit-code="unitCode"
         :offer-id="offerId"
         :notify="$notify"
-        :hide-show-all="hideShowAll"
         @entity-selected="handleEntitySelected"
         @cancel="cancel"
       />
@@ -117,7 +116,6 @@ export default class GiftedDialog extends Vue {
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
   @Prop() isFromProjectView = false;
-  @Prop() hideShowAll = false;
   @Prop({ default: "person" }) giverEntityType = "person" as
     | "person"
     | "project";
@@ -233,7 +231,7 @@ export default class GiftedDialog extends Vue {
         apiServer: this.apiServer,
       });
 
-      this.allContacts = await this.$contacts();
+      this.allContacts = await this.$contactsByDateAdded();
 
       this.allMyDids = await retrieveAccountDids();
 

src/components/MeetingProjectDialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <!-- Header -->
+      <h2 class="text-lg font-semibold leading-[1.25] mb-4">Select Project</h2>
+
+      <!-- EntityGrid for projects -->
+      <EntityGrid
+        :entity-type="'projects'"
+        :entities="allProjects"
+        :active-did="activeDid"
+        :all-my-dids="allMyDids"
+        :all-contacts="allContacts"
+        :conflict-checker="() => false"
+        :show-you-entity="false"
+        :show-unnamed-entity="false"
+        :notify="notify"
+        :conflict-context="'project'"
+        @entity-selected="handleEntitySelected"
+      />
+
+      <!-- Cancel Button -->
+      <div class="flex gap-2 mt-4">
+        <button
+          class="block w-full text-center text-md uppercase 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-2 py-2 rounded-md"
+          @click="handleCancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import EntityGrid from "./EntityGrid.vue";
+import { Contact } from "../db/tables/contacts";
+import { PlanData } from "../interfaces/records";
+import { NotificationIface } from "../constants/app";
+
+/**
+ * MeetingProjectDialog - Dialog for selecting a project link for a meeting
+ *
+ * Features:
+ * - EntityGrid integration for project selection
+ * - No special entities (You, Unnamed)
+ * - Immediate assignment on project selection
+ * - Cancel button to close without selection
+ */
+@Component({
+  components: {
+    EntityGrid,
+  },
+})
+export default class MeetingProjectDialog extends Vue {
+  /** Whether the dialog is visible */
+  visible = false;
+
+  /** Array of available projects */
+  @Prop({ required: true })
+  allProjects!: PlanData[];
+
+  /** Active user's DID */
+  @Prop({ required: true })
+  activeDid!: string;
+
+  /** All user's DIDs */
+  @Prop({ required: true })
+  allMyDids!: string[];
+
+  /** All contacts */
+  @Prop({ required: true })
+  allContacts!: Contact[];
+
+  /** Notification function from parent component */
+  @Prop()
+  notify?: (notification: NotificationIface, timeout?: number) => void;
+
+  /**
+   * Handle entity selection from EntityGrid
+   * Immediately assigns the selected project and closes the dialog
+   */
+  handleEntitySelected(event: {
+    type: "person" | "project";
+    data: Contact | PlanData;
+  }) {
+    const project = event.data as PlanData;
+    this.emitAssign(project);
+    this.close();
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.close();
+  }
+
+  /**
+   * Open the dialog
+   */
+  open(): void {
+    this.visible = true;
+  }
+
+  /**
+   * Close the dialog
+   */
+  close(): void {
+    this.visible = false;
+  }
+
+  // Emit methods using @Emit decorator
+
+  @Emit("assign")
+  emitAssign(project: PlanData): PlanData {
+    return project;
+  }
+}
+</script>
+
+<style scoped></style>

src/components/MembersList.vue

@@ -1,183 +1,255 @@
 <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-slate-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 ml-2 ms-1"
+                >
+                  <button
+                    class="btn-add-contact ml-2"
+                    title="Add as contact"
+                    @click="addAsContact(member)"
+                  >
+                    <font-awesome icon="circle-user" />
+                  </button>
+
+                  <button
+                    class="btn-info-contact ml-2"
+                    title="Contact Info"
+                    @click="
+                      informAboutAddingContact(
+                        getContactFor(member.did) !== undefined,
+                      )
+                    "
+                  >
+                    <font-awesome icon="circle-info" />
+                  </button>
+                </div>
+                <div
+                  v-if="getContactFor(member.did) && member.did !== activeDid"
+                  class="flex items-center gap-1.5 ms-1"
+                >
+                  <router-link
+                    :to="{ name: 'contact-edit', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="pen"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                  <router-link
+                    :to="{ name: 'did', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="arrow-up-right-from-square"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                </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"
+      :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 +265,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 +284,7 @@ export default class MembersList extends Vue {
     return message;
   }
 
+  contacts: Array<Contact> = [];
   decryptedMembers: DecryptedMember[] = [];
   firstName = "";
   isLoading = true;
@@ -219,7 +294,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 +320,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 +367,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 +412,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 +505,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 +596,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 +609,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 +723,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 +772,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>

src/components/PersonCard.vue

@@ -3,30 +3,25 @@ GiftedDialog.vue to handle person entity display * with selection states and
 conflict detection. * * @author Matthew Raymer */
 <template>
   <li :class="cardClasses" @click="handleClick">
-    <div class="relative w-fit mx-auto">
+    <div>
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+        class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
       />
       <font-awesome
         v-else
         icon="circle-question"
-        class="text-slate-400 text-5xl mb-1"
+        class="text-slate-400 text-5xl mb-1 shrink-0"
       />
-
-      <!-- Time icon overlay for contacts -->
-      <div
-        v-if="person.did && showTimeIcon"
-        class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
-      >
-        <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
-      </div>
     </div>
 
-    <h3 :class="nameClasses">
+    <div class="overflow-hidden">
-      {{ displayName }}
+      <h3 :class="nameClasses">
-    </h3>
+        {{ displayName }}
+      </h3>
+      <p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
+    </div>
   </li>
 </template>
 
@@ -81,29 +76,32 @@ export default class PersonCard extends Vue {
    * Computed CSS classes for the card
    */
   get cardClasses(): string {
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
+
     if (!this.selectable || this.conflicted) {
-      return "opacity-50 cursor-not-allowed";
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
-    return "cursor-pointer hover:bg-slate-50";
+
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the person name
    */
   get nameClasses(): string {
-    const baseClasses =
+    const baseNameClasses = "text-sm font-semibold truncate";
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
-      return `${baseClasses} text-slate-400`;
+      return `${baseNameClasses} text-slate-500`;
     }
 
     // Add italic styling for entities without set names
     if (!this.person.name) {
-      return `${baseClasses} italic text-slate-500`;
+      return `${baseNameClasses} italic text-slate-500`;
     }
 
-    return baseClasses;
+    return baseNameClasses;
   }
 
   /**

src/components/ProjectCard.vue

@@ -2,25 +2,26 @@
 GiftedDialog.vue to handle project entity display * with selection states and
 issuer information. * * @author Matthew Raymer */
 <template>
-  <li class="cursor-pointer" @click="handleClick">
+  <li
-    <div class="relative w-fit mx-auto">
+    class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
-      <ProjectIcon
+    @click="handleClick"
-        :entity-id="project.handleId"
+  >
-        :icon-size="48"
+    <ProjectIcon
-        :image-url="project.image"
+      :entity-id="project.handleId"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+      :icon-size="30"
-      />
+      :image-url="project.image"
-    </div>
+      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+    />
 
-    <h3
+    <div class="overflow-hidden">
-      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+      <h3 class="text-sm font-semibold truncate">
-    >
+        {{ project.name || unnamedProject }}
-      {{ project.name || unnamedProject }}
+      </h3>
-    </h3>
 
-    <div class="text-xs text-slate-500 truncate">
+      <div class="text-xs text-slate-500 truncate">
-      <font-awesome icon="user" class="fa-fw text-slate-400" />
+        <font-awesome icon="user" class="text-slate-400" />
-      {{ issuerDisplayName }}
+        {{ issuerDisplayName }}
+      </div>
     </div>
   </li>
 </template>

src/components/ProjectRepresentativeDialog.vue

@@ -0,0 +1,117 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <!-- Header -->
+      <h2 class="text-lg font-semibold leading-[1.25] mb-4">
+        Select Representative
+      </h2>
+
+      <!-- EntityGrid for contacts -->
+      <EntityGrid
+        :entity-type="'people'"
+        :entities="allContacts"
+        :active-did="activeDid"
+        :all-my-dids="allMyDids"
+        :all-contacts="allContacts"
+        :conflict-checker="() => false"
+        :show-you-entity="false"
+        :show-unnamed-entity="false"
+        :notify="notify"
+        :conflict-context="'representative'"
+        @entity-selected="handleEntitySelected"
+      />
+
+      <!-- Cancel Button -->
+      <div class="flex gap-2 mt-4">
+        <button
+          class="block w-full text-center text-md uppercase 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-2 py-2 rounded-md"
+          @click="handleCancel"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import EntityGrid from "./EntityGrid.vue";
+import { Contact } from "../db/tables/contacts";
+import { NotificationIface } from "../constants/app";
+
+/**
+ * ProjectRepresentativeDialog - Dialog for selecting an authorized representative
+ *
+ * Features:
+ * - EntityGrid integration for contact selection
+ * - No special entities (You, Unnamed)
+ * - Immediate assignment on contact selection
+ * - Cancel button to close without selection
+ */
+@Component({
+  components: {
+    EntityGrid,
+  },
+})
+export default class ProjectRepresentativeDialog extends Vue {
+  /** Whether the dialog is visible */
+  visible = false;
+
+  /** Array of available contacts */
+  @Prop({ required: true })
+  allContacts!: Contact[];
+
+  /** Active user's DID */
+  @Prop({ required: true })
+  activeDid!: string;
+
+  /** All user's DIDs */
+  @Prop({ required: true })
+  allMyDids!: string[];
+
+  /** Notification function from parent component */
+  @Prop()
+  notify?: (notification: NotificationIface, timeout?: number) => void;
+
+  /**
+   * Handle entity selection from EntityGrid
+   * Immediately assigns the selected contact and closes the dialog
+   */
+  handleEntitySelected(event: { type: "person" | "project"; data: Contact }) {
+    const contact = event.data as Contact;
+    this.emitAssign(contact);
+    this.close();
+  }
+
+  /**
+   * Handle cancel button click
+   */
+  handleCancel(): void {
+    this.close();
+  }
+
+  /**
+   * Open the dialog
+   */
+  open(): void {
+    this.visible = true;
+  }
+
+  /**
+   * Close the dialog
+   */
+  close(): void {
+    this.visible = false;
+  }
+
+  // Emit methods using @Emit decorator
+
+  @Emit("assign")
+  emitAssign(contact: Contact): Contact {
+    return contact;
+  }
+}
+</script>
+
+<style scoped></style>

src/components/ShowAllCard.vue

@@ -1,66 +0,0 @@
-/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
-GiftedDialog.vue to handle "Show All" navigation * for both people and projects
-entity types. * * @author Matthew Raymer */
-<template>
-  <li class="cursor-pointer">
-    <router-link :to="navigationRoute" class="block text-center">
-      <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-      <h3
-        class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
-      >
-        Show All
-      </h3>
-    </router-link>
-  </li>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import { RouteLocationRaw } from "vue-router";
-
-/**
- * ShowAllCard - Displays "Show All" navigation for entity grids
- *
- * Features:
- * - Provides navigation to full entity listings
- * - Supports different routes based on entity type
- * - Maintains context through query parameters
- * - Consistent visual styling with other cards
- */
-@Component({ name: "ShowAllCard" })
-export default class ShowAllCard extends Vue {
-  /** Type of entities being shown */
-  @Prop({ required: true })
-  entityType!: "people" | "projects";
-
-  /** Route name to navigate to */
-  @Prop({ required: true })
-  routeName!: string;
-
-  /** Query parameters to pass to the route */
-  @Prop({ default: () => ({}) })
-  queryParams!: Record<string, string>;
-
-  /**
-   * Computed navigation route with query parameters
-   */
-  get navigationRoute(): RouteLocationRaw {
-    return {
-      name: this.routeName,
-      query: this.queryParams,
-    };
-  }
-}
-</script>
-
-<style scoped>
-/* Ensure router-link styling is consistent */
-a {
-  text-decoration: none;
-}
-
-a:hover .fa-circle-right {
-  transform: scale(1.1);
-  transition: transform 0.2s ease;
-}
-</style>

src/components/SpecialEntityCard.vue

@@ -63,23 +63,24 @@ export default class SpecialEntityCard extends Vue {
   conflictContext!: string;
 
   /**
-   * Computed CSS classes for the card container
+   * Computed CSS classes for the card
    */
   get cardClasses(): string {
-    const baseClasses = "block";
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
 
     if (!this.selectable || this.conflicted) {
-      return `${baseClasses} cursor-not-allowed opacity-50`;
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
 
-    return `${baseClasses} cursor-pointer`;
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the icon
    */
   get iconClasses(): string {
-    const baseClasses = "text-5xl mb-1";
+    const baseClasses = "text-[2rem]";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;
@@ -101,7 +102,7 @@ export default class SpecialEntityCard extends Vue {
    */
   get nameClasses(): string {
     const baseClasses =
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
+      "text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;

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
 }

src/constants/notifications.ts

@@ -510,14 +510,6 @@ export const NOTIFY_REGISTER_CONTACT = {
   text: "Do you want to register them?",
 };
 
-// Used in: ContactsView.vue (showOnboardMeetingDialog method - complex modal for onboarding meeting)
-export const NOTIFY_ONBOARDING_MEETING = {
-  title: "Onboarding Meeting",
-  text: "Would you like to start a new meeting?",
-  yesText: "Start New Meeting",
-  noText: "Join Existing Meeting",
-};
-
 // TestView.vue specific constants
 // Used in: TestView.vue (executeSql method - SQL error handling)
 export const NOTIFY_SQL_ERROR = {

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",
       );

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 {

src/interfaces/common.ts

@@ -70,18 +70,11 @@ export interface AxiosErrorResponse {
   [key: string]: unknown;
 }
 
-export interface UserInfo {
-  did: string;
-  name: string;
-  publicEncKey: string;
-  registered: boolean;
-  profileImageUrl?: string;
-  nextPublicEncKeyHash?: string;
-}
-
 export interface CreateAndSubmitClaimResult {
   success: boolean;
+  embeddedRecordError?: string;
   error?: string;
+  claimId?: string;
   handleId?: string;
 }
 

src/interfaces/index.ts

@@ -1,36 +1,7 @@
-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";
+export * from "./user";

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;

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;
+  };
+}

src/libs/endorserServer.ts

@@ -42,9 +42,6 @@ import {
   PlanActionClaim,
   RegisterActionClaim,
   TenureClaim,
-} from "../interfaces/claims";
-
-import {
   GenericCredWrapper,
   GenericVerifiableCredential,
   AxiosErrorResponse,
@@ -55,14 +52,12 @@ import {
   QuantitativeValue,
   KeyMetaWithPrivate,
   KeyMetaMaybeWithPrivate,
-} from "../interfaces/common";
-import {
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
   PlanSummaryAndPreviousClaim,
   PlanSummaryRecord,
-} from "../interfaces/records";
+} from "../interfaces";
-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 +625,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 +697,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 +709,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 +719,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 +1217,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)}`;
@@ -1661,30 +1657,35 @@ export async function register(
       message?: string;
     }>(url, { jwtEncoded: vcJwt });
 
-    if (resp.data?.success?.handleId) {
+    if (resp.data?.success?.embeddedRecordError) {
-      return { success: true };
-    } else if (resp.data?.success?.embeddedRecordError) {
       let message =
         "There was some problem with the registration and so it may not be complete.";
       if (typeof resp.data.success.embeddedRecordError === "string") {
         message += " " + resp.data.success.embeddedRecordError;
       }
       return { error: message };
+    } else if (resp.data?.success?.handleId) {
+      return { success: true };
     } else {
-      logger.error("Registration error:", JSON.stringify(resp.data));
+      logger.error("Registration non-thrown error:", JSON.stringify(resp.data));
-      return { error: "Got a server error when registering." };
+      return {
+        error:
+          (resp.data?.error as { message?: string })?.message ||
+          (resp.data?.error as string) ||
+          "Got a server error when registering.",
+      };
     }
   } catch (error: unknown) {
     if (error && typeof error === "object") {
       const err = error as AxiosErrorResponse;
       const errorMessage =
-        err.message ||
+        err.response?.data?.error?.message ||
-        (err.response?.data &&
+        err.response?.data?.error ||
-        typeof err.response.data === "object" &&
+        err.message;
-        "message" in err.response.data
+      logger.error(
-          ? (err.response.data as { message: string }).message
+        "Registration thrown error:",
-          : undefined);
+        errorMessage || JSON.stringify(err),
-      logger.error("Registration error:", errorMessage || JSON.stringify(err));
+      );
       return { error: errorMessage || "Got a server error when registering." };
     }
     return { error: "Got a server error when registering." };

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,

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;
+  }
+}

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>;
+}

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;
-  }
 }

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;
-  }
 }

src/test/EntityGridFunctionPropTest.vue

@@ -19,7 +19,6 @@
       <EntityGrid
         entity-type="people"
         :entities="people"
-        :max-items="5"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -39,7 +38,6 @@
       <EntityGrid
         entity-type="projects"
         :entities="projects"
-        :max-items="3"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -152,11 +150,8 @@ export default class EntityGridFunctionPropTest extends Vue {
   customPeopleFunction = (
     entities: Contact[],
     _entityType: string,
-    maxItems: number,
   ): Contact[] => {
-    return entities
+    return entities.filter((person) => person.profileImageUrl);
-      .filter((person) => person.profileImageUrl)
-      .slice(0, maxItems);
   };
 
   /**
@@ -165,7 +160,6 @@ export default class EntityGridFunctionPropTest extends Vue {
   customProjectsFunction = (
     entities: PlanData[],
     _entityType: string,
-    _maxItems: number,
   ): PlanData[] => {
     return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
   };
@@ -200,16 +194,16 @@ export default class EntityGridFunctionPropTest extends Vue {
    */
   get displayedPeopleCount(): number {
     if (this.useCustomFunction) {
-      return this.customPeopleFunction(this.people, "people", 5).length;
+      return this.customPeopleFunction(this.people, "people").length;
     }
-    return Math.min(5, this.people.length);
+    return Math.min(10, this.people.length); // Initial batch size for infinite scroll
   }
 
   get displayedProjectsCount(): number {
     if (this.useCustomFunction) {
-      return this.customProjectsFunction(this.projects, "projects", 3).length;
+      return this.customProjectsFunction(this.projects, "projects").length;
     }
-    return Math.min(7, this.projects.length);
+    return Math.min(10, this.projects.length); // Initial batch size for infinite scroll
   }
 }
 </script>

src/utils/PlatformServiceMixin.ts

@@ -970,6 +970,20 @@ export const PlatformServiceMixin = {
       return this.$normalizeContacts(rawContacts);
     },
 
+    /**
+     * Load all contacts sorted by when they were added (by ID)
+     * Always fetches fresh data from database for consistency
+     * Handles JSON string/object duality for contactMethods field
+     * @returns Promise<Contact[]> Array of normalized contact objects sorted by addition date (newest first)
+     */
+    async $contactsByDateAdded(): Promise<Contact[]> {
+      const rawContacts = (await this.$query(
+        "SELECT * FROM contacts ORDER BY id DESC",
+      )) as ContactMaybeWithJsonStrings[];
+
+      return this.$normalizeContacts(rawContacts);
+    },
+
     /**
      * Ultra-concise shortcut for getting number of contacts
      * @returns Promise<number> Total number of contacts
@@ -2057,6 +2071,7 @@ declare module "@vue/runtime-core" {
 
     // Specialized shortcuts - contacts cached, settings fresh
     $contacts(): Promise<Contact[]>;
+    $contactsByDateAdded(): Promise<Contact[]>;
     $contactCount(): Promise<number>;
     $settings(defaults?: Settings): Promise<Settings>;
     $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;

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 {

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 || "";
   }

src/views/ContactEditView.vue

@@ -346,9 +346,7 @@ export default class ContactEditView extends Vue {
 
     // Notify success and redirect
     this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD);
-    (this.$router as Router).push({
+    this.$router.back();
-      path: "/did/" + encodeURIComponent(this.contact?.did || ""),
-    });
   }
 }
 </script>

src/views/ContactsView.vue

@@ -171,9 +171,11 @@ import {
   CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
   CONTACT_URL_PATH_ENDORSER_CH_OLD,
 } from "../libs/endorserServer";
-import { GiveSummaryRecord } from "@/interfaces/records";
+import {
-import { UserInfo } from "@/interfaces/common";
+  GiveSummaryRecord,
-import { VerifiableCredential } from "@/interfaces/claims-result";
+  UserInfo,
+  VerifiableCredential,
+} from "@/interfaces";
 import * as libsUtil from "../libs/util";
 import {
   generateSaveAndActivateIdentity,

src/views/DIDView.vue

@@ -12,20 +12,20 @@
       </h1>
 
       <!-- Back -->
-      <router-link
+      <button
         class="order-first text-lg text-center leading-none p-1"
-        :to="{ name: 'contacts' }"
+        @click="goBack()"
       >
         <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </router-link>
+      </button>
 
       <!-- Help button -->
-      <router-link
+      <button
-        :to="{ name: 'help' }"
         class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        @click="goToHelp()"
       >
         <font-awesome icon="question" class="block text-center w-[1em]" />
-      </router-link>
+      </button>
     </div>
 
     <!-- Identity Details -->
@@ -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 } }"
@@ -476,7 +476,7 @@ export default class DIDView extends Vue {
    * Navigation helper methods
    */
   goBack() {
-    this.$router.go(-1);
+    this.$router.back();
   }
 
   /**

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">

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,

src/views/NewEditProjectView.vue

@@ -60,12 +60,60 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <input
+    <!-- Authorized Representative Selection -->
-      v-model="agentDid"
+    <div class="w-full flex items-stretch my-4">
-      type="text"
+      <div
-      placeholder="Other Authorized Representative"
+        class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
-      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
+        @click="openRepresentativeDialog"
+      >
+        <div>
+          <EntityIcon
+            v-if="selectedRepresentative"
+            :contact="selectedRepresentative"
+            class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+          />
+          <font-awesome v-else icon="user" class="text-slate-400" />
+        </div>
+        <div class="overflow-hidden">
+          <div
+            :class="{
+              'text-sm font-semibold': selectedRepresentative,
+              'text-slate-400': !selectedRepresentative,
+            }"
+            class="truncate"
+          >
+            {{
+              selectedRepresentative
+                ? selectedRepresentative.name || AppString.NO_CONTACT_NAME
+                : "Assign Authorized Representative…"
+            }}
+          </div>
+          <div
+            v-if="selectedRepresentative"
+            class="text-xs text-slate-500 truncate"
+          >
+            {{ agentDid }}
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="selectedRepresentative"
+        class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
+        @click="unsetRepresentative"
+      >
+        <font-awesome icon="trash-can" />
+      </button>
+    </div>
+
+    <ProjectRepresentativeDialog
+      ref="representativeDialog"
+      :all-contacts="allContacts"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :notify="$notify"
+      @assign="handleRepresentativeAssigned"
     />
+
     <div class="mb-4">
       <p v-if="shouldShowOwnershipWarning">
         <span class="text-red-500">Beware!</span>
@@ -232,9 +280,12 @@ import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { LeafletMouseEvent } from "leaflet";
 
+import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
+import ProjectRepresentativeDialog from "../components/ProjectRepresentativeDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import {
+  AppString,
   DEFAULT_IMAGE_API_SERVER,
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
@@ -268,6 +319,7 @@ import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
 } from "../libs/util";
+import { Contact } from "../db/tables/contacts";
 
 import {
   EventTemplate,
@@ -323,7 +375,15 @@ import { logger } from "../utils/logger";
  */
 
 @Component({
-  components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
+  components: {
+    EntityIcon,
+    ImageMethodDialog,
+    ProjectRepresentativeDialog,
+    LMap,
+    LMarker,
+    LTileLayer,
+    QuickNav,
+  },
   mixins: [PlatformServiceMixin],
 })
 export default class NewEditProjectView extends Vue {
@@ -334,6 +394,9 @@ export default class NewEditProjectView extends Vue {
   // Notification helpers
   private notify!: ReturnType<typeof createNotifyHelpers>;
 
+  // Constants
+  AppString = AppString;
+
   /**
    * Display error notification to user
    * Provides consistent error messaging with 5-second timeout
@@ -346,6 +409,8 @@ export default class NewEditProjectView extends Vue {
   // Component state properties
   activeDid = "";
   agentDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
   apiServer = "";
   endDateInput?: string;
   endTimeInput?: string;
@@ -392,16 +457,24 @@ export default class NewEditProjectView extends Vue {
     const activeIdentity = await (this as any).$getActiveIdentity();
     this.activeDid = activeIdentity.activeDid || "";
 
+    // Get all user's DIDs
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allMyDids = await (this as any).$getAllAccountDids();
+
+    // Load contacts sorted by date added (newest first) for consistent "Recently Added" display
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allContacts = await (this as any).$contactsByDateAdded();
+
     this.apiServer = settings.apiServer || "";
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
 
     this.projectId = (this.$route.query["projectId"] as string) || "";
 
-    if (this.projectId) {
+    if (this.isSavedProject()) {
       if (this.numAccounts === 0) {
         this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message);
       } else {
-        this.loadProject(this.activeDid);
+        this.loadProject(this.activeDid, this.projectId);
       }
     }
   }
@@ -411,11 +484,9 @@ export default class NewEditProjectView extends Vue {
    * Retrieves project information from the API and populates form fields
    * @param userDid - User's decentralized identifier
    */
-  async loadProject(userDid: string) {
+  async loadProject(userDid: string, projectId: string) {
     const url =
-      this.apiServer +
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
     const headers = await getHeaders(userDid);
 
     try {
@@ -432,6 +503,12 @@ export default class NewEditProjectView extends Vue {
         }
         if (this.fullClaim?.agent?.identifier) {
           this.agentDid = this.fullClaim.agent.identifier;
+          if (this.activeDid !== this.projectIssuerDid) {
+            this.agentDid = this.projectIssuerDid;
+            this.notify.warning(
+              "You were previously the agent, so the agent has been set to the previous owner. You can change it.",
+            );
+          }
         }
         if (this.fullClaim.startTime) {
           const localDateTime = DateTime.fromISO(
@@ -536,7 +613,7 @@ export default class NewEditProjectView extends Vue {
   private async saveProject() {
     // Make a claim
     const vcClaim: PlanActionClaim = this.fullClaim;
-    if (this.projectId) {
+    if (this.isSavedProject()) {
       vcClaim.lastClaimId = this.lastClaimJwtId;
     }
     if (this.agentDid) {
@@ -870,6 +947,10 @@ export default class NewEditProjectView extends Vue {
     this.longitude = event.latlng.lng;
   }
 
+  private isSavedProject(): boolean {
+    return !!this.projectId;
+  }
+
   /**
    * Computed property for character count display
    * Shows current description length and maximum character limit
@@ -885,6 +966,7 @@ export default class NewEditProjectView extends Vue {
    */
   get shouldShowOwnershipWarning(): boolean {
     return (
+      this.isSavedProject() &&
       this.activeDid !== this.projectIssuerDid &&
       this.agentDid !== this.projectIssuerDid
     );
@@ -961,5 +1043,37 @@ export default class NewEditProjectView extends Vue {
   get shouldShowSpinner(): boolean {
     return !this.isHiddenSpinner;
   }
+
+  /**
+   * Computed property for selected representative contact
+   * Derives the contact from agentDid by finding it in allContacts
+   */
+  get selectedRepresentative(): Contact | null {
+    if (!this.agentDid) {
+      return null;
+    }
+    return this.allContacts.find((c) => c.did === this.agentDid) || null;
+  }
+
+  /**
+   * Open the representative selection dialog
+   */
+  openRepresentativeDialog(): void {
+    (this.$refs.representativeDialog as ProjectRepresentativeDialog).open();
+  }
+
+  /**
+   * Handle representative assignment from dialog
+   */
+  handleRepresentativeAssigned(contact: Contact): void {
+    this.agentDid = contact.did;
+  }
+
+  /**
+   * Unset the representative and revert to initial state
+   */
+  unsetRepresentative(): void {
+    this.agentDid = "";
+  }
 }
 </script>

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

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>
 

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>;
 

src/views/OnboardMeetingSetupView.vue

@@ -186,16 +186,59 @@
         <div>
           <label
             for="projectLink"
-            class="block text-sm font-medium text-gray-700"
+            class="block text-sm font-medium text-gray-700 mb-1"
             >Project Link</label
           >
-          <input
+          <div class="w-full flex items-stretch">
-            id="projectLink"
+            <div
-            v-model="newOrUpdatedMeetingInputs.projectLink"
+              class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
-            type="text"
+              @click="openProjectLinkDialog"
-            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            >
-            placeholder="Project ID"
+              <div>
-          />
+                <ProjectIcon
+                  v-if="selectedProject"
+                  :entity-id="selectedProject.handleId"
+                  :icon-size="30"
+                  :image-url="selectedProject.image"
+                  class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+                />
+                <font-awesome
+                  v-else
+                  icon="folder-open"
+                  class="text-slate-400"
+                />
+              </div>
+              <div class="overflow-hidden">
+                <div
+                  :class="{
+                    'text-sm font-semibold': selectedProject,
+                    'text-slate-400': !selectedProject,
+                  }"
+                  class="truncate"
+                >
+                  {{
+                    selectedProject
+                      ? selectedProject.name || "Unnamed Project"
+                      : "Select Project…"
+                  }}
+                </div>
+                <div
+                  v-if="selectedProject"
+                  class="text-xs text-slate-500 truncate"
+                >
+                  <font-awesome icon="user" class="text-slate-400" />
+                  {{ selectedProjectIssuerName }}
+                </div>
+              </div>
+            </div>
+            <button
+              v-if="selectedProject"
+              class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
+              @click="unsetProjectLink"
+            >
+              <font-awesome icon="trash-can" />
+            </button>
+          </div>
         </div>
 
         <button
@@ -224,32 +267,44 @@
       </form>
     </div>
 
+    <MeetingProjectDialog
+      ref="meetingProjectDialog"
+      :all-projects="allProjects"
+      :active-did="activeDid"
+      :all-my-dids="allMyDids"
+      :all-contacts="allContacts"
+      :notify="$notify"
+      @assign="handleProjectLinkAssigned"
+    />
+
     <!-- Members Section -->
     <div
       v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
       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 || ''"
@@ -290,10 +345,13 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
 import MembersList from "../components/MembersList.vue";
+import MeetingProjectDialog from "../components/MeetingProjectDialog.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
 import {
   errorStringForLog,
   getHeaders,
   serverMessageForUser,
+  didInfo,
 } from "../libs/endorserServer";
 import { encryptMessage } from "../libs/crypto";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
@@ -307,6 +365,8 @@ import {
   NOTIFY_MEETING_DELETED,
   NOTIFY_MEETING_LINK_COPIED,
 } from "@/constants/notifications";
+import { PlanData } from "../interfaces/records";
+import { Contact } from "../db/tables/contacts";
 interface ServerMeeting {
   groupId: number; // from the server
   name: string; // to & from the server
@@ -329,6 +389,8 @@ interface MeetingSetupInputs {
     QuickNav,
     TopMessage,
     MembersList,
+    MeetingProjectDialog,
+    ProjectIcon,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -352,6 +414,9 @@ export default class OnboardMeetingView extends Vue {
   isRegistered = false;
   showDeleteConfirm = false;
   fullName = "";
+  allProjects: PlanData[] = [];
+  allContacts: Contact[] = [];
+  allMyDids: string[] = [];
   get minDateTime() {
     const now = new Date();
     now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
@@ -368,6 +433,15 @@ export default class OnboardMeetingView extends Vue {
     this.fullName = settings?.firstName || "";
     this.isRegistered = !!settings?.isRegistered;
 
+    // Load contacts and DIDs for dialog
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allContacts = await (this as any).$contactsByDateAdded();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.allMyDids = await (this as any).$getAllAccountDids();
+
+    // Load projects
+    await this.loadProjects();
+
     await this.fetchCurrentMeeting();
     this.isLoading = false;
   }
@@ -471,6 +545,7 @@ export default class OnboardMeetingView extends Vue {
         );
         return;
       }
+      const password: string = this.newOrUpdatedMeetingInputs.password;
 
       // create content with user's name & DID encrypted with password
       const content = {
@@ -480,7 +555,7 @@ export default class OnboardMeetingView extends Vue {
       };
       const encryptedContent = await encryptMessage(
         JSON.stringify(content),
-        this.newOrUpdatedMeetingInputs.password,
+        password,
       );
 
       const headers = await getHeaders(this.activeDid);
@@ -503,6 +578,11 @@ export default class OnboardMeetingView extends Vue {
 
         this.newOrUpdatedMeetingInputs = null;
         this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
+        // redirect to the same page with the password parameter set
+        this.$router.push({
+          name: "onboard-meeting-setup",
+          query: { password: password },
+        });
       } else {
         throw { response: response };
       }
@@ -702,5 +782,97 @@ export default class OnboardMeetingView extends Vue {
       this.notify.error("Failed to copy meeting link to clipboard.");
     }
   }
+
+  /**
+   * Load projects from the API
+   */
+  async loadProjects() {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const url = `${this.apiServer}/api/v2/report/plans`;
+      const resp = await this.axios.get(url, { headers });
+
+      if (resp.status === 200 && resp.data.data) {
+        this.allProjects = resp.data.data.map(
+          (plan: {
+            name: string;
+            description: string;
+            image?: string;
+            handleId: string;
+            issuerDid: string;
+          }) => ({
+            name: plan.name,
+            description: plan.description,
+            image: plan.image,
+            handleId: plan.handleId,
+            issuerDid: plan.issuerDid,
+          }),
+        );
+      }
+    } catch (error) {
+      this.$logAndConsole(
+        "Error loading projects: " + errorStringForLog(error),
+        true,
+      );
+      // Don't show error to user - just leave projects empty
+      this.allProjects = [];
+    }
+  }
+
+  /**
+   * Computed property for selected project
+   * Derives the project from projectLink by finding it in allProjects
+   */
+  get selectedProject(): PlanData | null {
+    if (!this.newOrUpdatedMeetingInputs?.projectLink) {
+      return null;
+    }
+    return (
+      this.allProjects.find(
+        (p) => p.handleId === this.newOrUpdatedMeetingInputs?.projectLink,
+      ) || null
+    );
+  }
+
+  /**
+   * Computed property for selected project issuer display name
+   * Uses didInfo to format the issuer name similar to ProjectCard
+   */
+  get selectedProjectIssuerName(): string {
+    if (!this.selectedProject) {
+      return "";
+    }
+    return didInfo(
+      this.selectedProject.issuerDid,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
+  }
+
+  /**
+   * Open the project link selection dialog
+   */
+  openProjectLinkDialog(): void {
+    (this.$refs.meetingProjectDialog as MeetingProjectDialog).open();
+  }
+
+  /**
+   * Handle project assignment from dialog
+   */
+  handleProjectLinkAssigned(project: PlanData): void {
+    if (this.newOrUpdatedMeetingInputs) {
+      this.newOrUpdatedMeetingInputs.projectLink = project.handleId;
+    }
+  }
+
+  /**
+   * Unset the project link and revert to initial state
+   */
+  unsetProjectLink(): void {
+    if (this.newOrUpdatedMeetingInputs) {
+      this.newOrUpdatedMeetingInputs.projectLink = "";
+    }
+  }
 }
 </script>

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>

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">

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
+  }
+}