fix: link from DID page to Help

Reviewed-on: #219

BUILDING.md

@@ -1156,9 +1156,6 @@ gem_path=$(which gem)
 shortened_path="${gem_path:h:h}"
 export GEM_HOME=$shortened_path
 export GEM_PATH=$shortened_path
-
-cd ios/App
-pod install
 ```
 
 ##### 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;

android/app/build.gradle

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

src/components/EntityGrid.vue

@@ -108,7 +108,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
           <li
             class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
           >
-            Everyone Else
+            Everyone
           </li>
           <PersonCard
             v-for="person in alphabeticalContacts"
@@ -208,7 +208,18 @@ export default class EntityGrid extends Vue {
   infiniteScrollReset?: () => void;
   scrollContainer?: HTMLElement;
 
-  /** Array of entities to display */
+  /**
+   * 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[];
 
@@ -307,14 +318,17 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Get the 3 most recently added contacts (when showing contacts and not searching)
+   * 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 recentContacts(): Contact[] {
     if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
     // Entities are already sorted by date added (newest first)
-    return (this.entities as Contact[]).slice(0, 3);
+    return (this.entities as Contact[]).slice(0, RECENT_CONTACTS_COUNT);
   }
 
   /**
@@ -325,16 +339,16 @@ export default class EntityGrid extends Vue {
     if (this.entityType !== "people" || this.searchTerm.trim()) {
       return [];
     }
-    // Skip the first 3 (recent contacts) and sort the rest alphabetically
+    // 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[]).slice(RECENT_CONTACTS_COUNT);
+    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 3 recent)
+    // 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);
   }
@@ -531,9 +545,8 @@ export default class EntityGrid extends Vue {
     }
 
     // People: check if more alphabetical contacts available
-    // Total available = 3 recent + all alphabetical
-    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
-    const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
+    // Total available = recent + all alphabetical
+    const totalAvailable = RECENT_CONTACTS_COUNT + this.entities.length;
     return this.displayedCount < totalAvailable;
   }
 

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/services/AbsurdSqlDatabaseService.ts

@@ -21,8 +21,14 @@ import IndexedDBBackend from "absurd-sql/dist/indexeddb-backend";
 import { runMigrations } from "../db-sql/migration";
 import type { DatabaseService, QueryExecResult } from "../interfaces/database";
 import { logger } from "@/utils/logger";
-import { OperationQueue, QueueExecutor } from "./platforms/OperationQueue";
-import { QueuedOperation } from "./platforms/types";
+
+interface QueuedOperation {
+  type: "run" | "query";
+  sql: string;
+  params: unknown[];
+  resolve: (value: unknown) => void;
+  reject: (reason: unknown) => void;
+}
 
 interface AbsurdSqlDatabase {
   exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
@@ -37,7 +43,8 @@ class AbsurdSqlDatabaseService implements DatabaseService {
   private db: AbsurdSqlDatabase | null;
   private initialized: boolean;
   private initializationPromise: Promise<void> | null = null;
-  private operationQueue = new OperationQueue<AbsurdSqlDatabase>();
+  private operationQueue: Array<QueuedOperation> = [];
+  private isProcessingQueue: boolean = false;
 
   private constructor() {
     this.db = null;
@@ -154,30 +161,42 @@ class AbsurdSqlDatabaseService implements DatabaseService {
     this.processQueue();
   }
 
-  /**
-   * Create executor adapter for AbsurdSQL API
-   */
-  private createExecutor(): QueueExecutor<AbsurdSqlDatabase> {
-    return {
-      executeRun: async (db, sql, params) => {
-        return await db.run(sql, params);
-      },
-      executeQuery: async (db, sql, params) => {
-        return await db.exec(sql, params);
-      },
-    };
-  }
-
   private async processQueue(): Promise<void> {
-    if (!this.initialized || !this.db) {
+    if (this.isProcessingQueue || !this.initialized || !this.db) {
       return;
     }
 
-    await this.operationQueue.processQueue(
-      this.db,
-      this.createExecutor(),
-      "AbsurdSqlDatabaseService",
-    );
+    this.isProcessingQueue = true;
+
+    while (this.operationQueue.length > 0) {
+      const operation = this.operationQueue.shift();
+      if (!operation) continue;
+
+      try {
+        let result: unknown;
+        switch (operation.type) {
+          case "run":
+            result = await this.db.run(operation.sql, operation.params);
+            break;
+          case "query":
+            result = await this.db.exec(operation.sql, operation.params);
+            break;
+        }
+        operation.resolve(result);
+      } catch (error) {
+        logger.error(
+          "Error while processing SQL queue:",
+          error,
+          " ... for sql:",
+          operation.sql,
+          " ... with params:",
+          operation.params,
+        );
+        operation.reject(error);
+      }
+    }
+
+    this.isProcessingQueue = false;
   }
 
   private async queueOperation<R>(
@@ -185,24 +204,21 @@ class AbsurdSqlDatabaseService implements DatabaseService {
     sql: string,
     params: unknown[] = [],
   ): Promise<R> {
-    const operation: QueuedOperation = {
-      type,
-      sql,
-      params,
-      resolve: (_value: unknown) => {
-        // No-op, will be wrapped by OperationQueue
-      },
-      reject: () => {
-        // No-op, will be wrapped by OperationQueue
-      },
-    };
+    return new Promise<R>((resolve, reject) => {
+      const operation: QueuedOperation = {
+        type,
+        sql,
+        params,
+        resolve: (value: unknown) => resolve(value as R),
+        reject,
+      };
+      this.operationQueue.push(operation);
 
-    return this.operationQueue.queueOperation<R>(
-      operation,
-      this.initialized,
-      this.db,
-      () => this.processQueue(),
-    );
+      // If we're already initialized, start processing the queue
+      if (this.initialized && this.db) {
+        this.processQueue();
+      }
+    });
   }
 
   private async waitForInitialization(): Promise<void> {

src/services/PlatformServiceFactory.ts

@@ -4,144 +4,76 @@ import { CapacitorPlatformService } from "./platforms/CapacitorPlatformService";
 import { ElectronPlatformService } from "./platforms/ElectronPlatformService";
 
 /**
- * HMR-safe global singleton storage for PlatformService
+ * Factory class for creating platform-specific service implementations.
+ * Implements the Singleton pattern to ensure only one instance of PlatformService exists.
  *
- * Uses multiple fallbacks to ensure persistence across module reloads:
- * 1. globalThis (standard, works in most environments)
- * 2. window (browser fallback)
- * 3. self (web worker fallback)
- */
-declare global {
-  // eslint-disable-next-line no-var
-  var __PLATFORM_SERVICE_SINGLETON__: PlatformService | undefined;
-}
-
-/**
- * Get the global object for singleton storage
- * Uses multiple fallbacks to ensure compatibility
- */
-function getGlobal(): typeof globalThis {
-  if (typeof globalThis !== "undefined") return globalThis;
-  if (typeof window !== "undefined") return window as typeof globalThis;
-  if (typeof self !== "undefined") return self as typeof globalThis;
-  // Fallback for Node.js environments
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return {} as any;
-}
-
-/**
- * Factory function to create platform-specific service implementation
- *
- * Uses console.log instead of logger to avoid circular dependency
- * (logger imports PlatformServiceFactory)
- */
-function create(): PlatformService {
-  const which = import.meta.env?.VITE_PLATFORM ?? "web";
-
-  if (which === "capacitor") return new CapacitorPlatformService();
-  if (which === "electron") return new ElectronPlatformService();
-  return new WebPlatformService();
-}
-
-/**
- * Get or create the HMR-safe singleton instance of PlatformService
- *
- * Uses lazy initialization to avoid circular dependency issues at module load time.
- */
-function getPlatformSvc(): PlatformService {
-  const global = getGlobal();
-
-  const exists = global.__PLATFORM_SERVICE_SINGLETON__ !== undefined;
-
-  if (!exists) {
-    global.__PLATFORM_SERVICE_SINGLETON__ = create();
-    // Verify it was stored
-    if (!global.__PLATFORM_SERVICE_SINGLETON__) {
-      // eslint-disable-next-line no-console
-      console.error(
-        "[PlatformServiceFactory] ERROR: Singleton creation failed - storage returned undefined",
-      );
-    }
-  }
-
-  // Type guard: ensure singleton exists (should never be undefined at this point)
-  const singleton = global.__PLATFORM_SERVICE_SINGLETON__;
-  if (!singleton) {
-    // eslint-disable-next-line no-console
-    console.error(
-      "[PlatformServiceFactory] CRITICAL: Singleton is undefined after creation/retrieval",
-    );
-    // Fallback: create a new one
-    global.__PLATFORM_SERVICE_SINGLETON__ = create();
-    return global.__PLATFORM_SERVICE_SINGLETON__;
-  }
-
-  return singleton;
-}
-
-/**
- * HMR-safe singleton instance of PlatformService
- *
- * This is the ONLY way to access PlatformService throughout the application.
- * Do not create new instances of platform services directly.
- *
- * Uses lazy initialization via Proxy to avoid circular dependency issues at module load time.
+ * The factory determines which platform implementation to use based on the VITE_PLATFORM
+ * environment variable. Supported platforms are:
+ * - capacitor: Mobile platform using Capacitor
+ * - electron: Desktop platform using Electron with Capacitor
+ * - web: Default web platform (fallback)
  *
  * @example
  * ```typescript
- * import { PlatformSvc } from "./services/PlatformServiceFactory";
- * await PlatformSvc.takePicture();
+ * const platformService = PlatformServiceFactory.getInstance();
+ * await platformService.takePicture();
  * ```
  */
-export const PlatformSvc = new Proxy({} as PlatformService, {
-  get(_target, prop) {
-    const svc = getPlatformSvc();
-    const value = (svc as unknown as Record<string, unknown>)[prop as string];
-    // Bind methods to maintain 'this' context
-    if (typeof value === "function") {
-      return value.bind(svc);
-    }
-    return value;
-  },
-});
-
-// Preserve singleton across Vite HMR
-if (import.meta?.hot) {
-  import.meta.hot.accept(() => {
-    // Don't recreate on HMR - keep existing instance
-    const global = getGlobal();
-    if (!global.__PLATFORM_SERVICE_SINGLETON__) {
-      // Restore singleton if it was lost during HMR
-      global.__PLATFORM_SERVICE_SINGLETON__ = getPlatformSvc();
-    }
-  });
-  import.meta.hot.dispose(() => {
-    // Don't delete - keep the global instance
-    // The singleton will persist in globalThis/window/self
-  });
-}
-
-/**
- * Legacy factory class for backward compatibility
- * @deprecated Use `PlatformSvc` directly instead
- */
 export class PlatformServiceFactory {
+  private static instance: PlatformService | null = null;
+  private static callCount = 0; // Debug counter
+  private static creationLogged = false; // Only log creation once
+
   /**
-   * Gets the singleton instance of PlatformService.
-   * @deprecated Use `PlatformSvc` directly instead
+   * Gets or creates the singleton instance of PlatformService.
+   * Creates the appropriate platform-specific implementation based on environment.
+   *
+   * @returns {PlatformService} The singleton instance of PlatformService
    */
   public static getInstance(): PlatformService {
-    return PlatformSvc;
+    PlatformServiceFactory.callCount++;
+
+    if (PlatformServiceFactory.instance) {
+      // Normal case - return existing instance silently
+      return PlatformServiceFactory.instance;
+    }
+
+    // Only log when actually creating the instance
+    const platform = process.env.VITE_PLATFORM || "web";
+
+    if (!PlatformServiceFactory.creationLogged) {
+      // Use console for critical startup message to avoid circular dependency
+      // eslint-disable-next-line no-console
+      console.log(
+        `[PlatformServiceFactory] Creating singleton instance for platform: ${platform}`,
+      );
+      PlatformServiceFactory.creationLogged = true;
+    }
+
+    switch (platform) {
+      case "capacitor":
+        PlatformServiceFactory.instance = new CapacitorPlatformService();
+        break;
+      case "electron":
+        // Use a specialized electron service that extends CapacitorPlatformService
+        PlatformServiceFactory.instance = new ElectronPlatformService();
+        break;
+      case "web":
+      default:
+        PlatformServiceFactory.instance = new WebPlatformService();
+        break;
+    }
+
+    return PlatformServiceFactory.instance;
   }
 
   /**
    * Debug method to check singleton usage stats
    */
   public static getStats(): { callCount: number; instanceExists: boolean } {
-    const global = getGlobal();
     return {
-      callCount: 0, // Deprecated - no longer tracking
-      instanceExists: global.__PLATFORM_SERVICE_SINGLETON__ !== undefined,
+      callCount: PlatformServiceFactory.callCount,
+      instanceExists: PlatformServiceFactory.instance !== null,
     };
   }
 }

src/services/platforms/OperationQueue.ts

@@ -1,135 +0,0 @@
-/**
- * Shared operation queue handler for database services
- *
- * Provides a reusable queue mechanism for database operations that need to
- * wait for initialization before execution.
- */
-
-import { QueuedOperation } from "./types";
-import { logger } from "../../utils/logger";
-
-export interface QueueExecutor<TDb> {
-  executeRun(db: TDb, sql: string, params: unknown[]): Promise<unknown>;
-  executeQuery(db: TDb, sql: string, params: unknown[]): Promise<unknown>;
-  executeRawQuery?(db: TDb, sql: string, params: unknown[]): Promise<unknown>;
-}
-
-export class OperationQueue<TDb> {
-  private operationQueue: Array<QueuedOperation> = [];
-  private isProcessingQueue: boolean = false;
-
-  /**
-   * Process queued operations
-   */
-  async processQueue(
-    db: TDb,
-    executor: QueueExecutor<TDb>,
-    serviceName: string,
-  ): Promise<void> {
-    if (this.isProcessingQueue || !db) {
-      return;
-    }
-
-    this.isProcessingQueue = true;
-
-    while (this.operationQueue.length > 0) {
-      const operation = this.operationQueue.shift();
-      if (!operation) continue;
-
-      try {
-        let result: unknown;
-        switch (operation.type) {
-          case "run":
-            result = await executor.executeRun(
-              db,
-              operation.sql,
-              operation.params,
-            );
-            break;
-          case "query":
-            result = await executor.executeQuery(
-              db,
-              operation.sql,
-              operation.params,
-            );
-            break;
-          case "rawQuery":
-            if (executor.executeRawQuery) {
-              result = await executor.executeRawQuery(
-                db,
-                operation.sql,
-                operation.params,
-              );
-            } else {
-              // Fallback to query if rawQuery not supported
-              result = await executor.executeQuery(
-                db,
-                operation.sql,
-                operation.params,
-              );
-            }
-            break;
-        }
-        operation.resolve(result);
-      } catch (error) {
-        logger.error(
-          `[${serviceName}] Error while processing SQL queue:`,
-          error,
-        );
-        logger.error(
-          `[${serviceName}] Failed operation - Type: ${operation.type}, SQL: ${operation.sql}`,
-        );
-        logger.error(
-          `[${serviceName}] Failed operation - Params:`,
-          operation.params,
-        );
-        operation.reject(error);
-      }
-    }
-
-    this.isProcessingQueue = false;
-  }
-
-  /**
-   * Queue an operation for later execution
-   *
-   * @param operation - Pre-constructed operation object (allows platform-specific parameter conversion)
-   * @param initialized - Whether the database is initialized
-   * @param db - Database connection (if available)
-   * @param onQueue - Callback to trigger queue processing
-   */
-  queueOperation<R>(
-    operation: QueuedOperation,
-    initialized: boolean,
-    db: TDb | null,
-    onQueue: () => void,
-  ): Promise<R> {
-    return new Promise<R>((resolve, reject) => {
-      // Wrap the operation's resolve/reject to match our Promise
-      const wrappedOperation: QueuedOperation = {
-        ...operation,
-        resolve: (value: unknown) => {
-          operation.resolve(value);
-          resolve(value as R);
-        },
-        reject: (reason: unknown) => {
-          operation.reject(reason);
-          reject(reason);
-        },
-      };
-      this.operationQueue.push(wrappedOperation);
-
-      // If already initialized, trigger queue processing
-      if (initialized && db) {
-        onQueue();
-      }
-    });
-  }
-
-  /**
-   * Get current queue length (for debugging)
-   */
-  getQueueLength(): number {
-    return this.operationQueue.length;
-  }
-}

src/services/platforms/sqlite.ts

@@ -1,20 +0,0 @@
-/**
- * Shared SQLite connection manager for Capacitor platform
- *
- * Ensures only one SQLiteConnection instance exists across the application,
- * preventing connection desync issues and unnecessary connection recreation.
- */
-
-import { CapacitorSQLite, SQLiteConnection } from "@capacitor-community/sqlite";
-
-/**
- * Native Capacitor SQLite plugin instance
- * This is the bridge to the native SQLite implementation
- */
-export const CAP_SQLITE = CapacitorSQLite;
-
-/**
- * Shared SQLite connection manager
- * Use this instance throughout the application - do not create new SQLiteConnection instances
- */
-export const SQLITE = new SQLiteConnection(CAP_SQLITE);

src/services/platforms/types.ts

@@ -1,13 +0,0 @@
-/**
- * Types for platform services
- */
-
-export interface QueuedOperation {
-  type: "run" | "query" | "rawQuery";
-  sql: string;
-  params: unknown[];
-  resolve: (value: unknown) => void;
-  reject: (reason: unknown) => void;
-}
-
-export type QueuedOperationType = QueuedOperation["type"];

src/utils/seedPhraseReminder.ts

@@ -1,5 +1,4 @@
 import { NotificationIface } from "@/constants/app";
-import router from "@/router";
 
 const SEED_REMINDER_KEY = "seedPhraseReminderLastShown";
 const REMINDER_COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
@@ -54,8 +53,8 @@ export function createSeedReminderNotification(): NotificationIface {
     yesText: "Backup Identifier Seed",
     noText: "Remind me Later",
     onYes: async () => {
-      // Navigate to seed backup page using SPA routing
-      await router.push({ path: "/seed-backup" });
+      // Navigate to seed backup page
+      window.location.href = "/seed-backup";
     },
     onNo: async () => {
       // Mark as shown so it won't appear again for 24 hours

src/views/DIDView.vue

@@ -20,12 +20,12 @@
       </button>
 
       <!-- Help button -->
-      <button
+      <router-link
+        :to="{ name: 'help' }"
         class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
-        @click="goToHelp()"
       >
         <font-awesome icon="question" class="block text-center w-[1em]" />
-      </button>
+      </router-link>
     </div>
 
     <!-- Identity Details -->

src/views/DeepLinkRedirectView.vue

@@ -157,27 +157,11 @@ export default class DeepLinkRedirectView extends Vue {
     }
 
     try {
-      const capabilities = this.platformService.getCapabilities();
-
-      // If we're already in the native app, use router navigation instead
-      // of window.location.href (which doesn't work properly in Capacitor)
-      if (capabilities.isNativeApp) {
-        // Navigate directly using the router
-        const destinationPath = `/${this.destinationUrl}`;
-        this.$router.push(destinationPath).catch((error) => {
-          logger.error("Router navigation failed: " + errorStringForLog(error));
-          this.pageError =
-            "Unable to navigate to the destination. Please use a manual option below.";
-        });
-        return;
-      }
-
-      // For web contexts, use window.location.href to redirect to app
       // For mobile, try the deep link URL; for desktop, use the web URL
       const redirectUrl = this.isMobile ? this.deepLinkUrl : this.webUrl;
 
       // Method 1: Try window.location.href (works on most browsers)
-      window.location.href = redirectUrl; // Do not use this on native apps! The channel to Capacitor gets messed up.
+      window.location.href = redirectUrl;
 
       // Method 2: Fallback - create and click a link element
       setTimeout(() => {

src/views/NewEditProjectView.vue

@@ -60,12 +60,60 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <input
-      v-model="agentDid"
-      type="text"
-      placeholder="Other Authorized Representative"
-      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
+    <!-- Authorized Representative Selection -->
+    <div class="w-full flex items-stretch my-4">
+      <div
+        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"
+        @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 +
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(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>