Merge branch 'master' into ios-disable-zoom

- Add overflow-hidden, text-ellipsis and truncate classes to long text elements in list items and views to prevent text overflow
- Ensure proper text wrapping and ellipsis display for long content

.cursor/rules/development/development_guide.mdc

@@ -4,7 +4,6 @@ alwaysApply: false
 ---
 ✅ use system date command to timestamp all interactions with accurate date and
   time
-✅ python script files must always have a blank line at their end
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings
 ✅ do not use npm run dev let me handle running and supplying feedback
@@ -22,12 +21,10 @@ alwaysApply: false
 
 - [ ] **Timestamp Usage**: Include accurate timestamps in all interactions
 - [ ] **Code Quality**: Use npm run lint-fix to check for warnings
-- [ ] **File Standards**: Ensure Python files have blank line at end
 - [ ] **Whitespace**: Remove trailing whitespace from all lines
 
 ### After Development
 
 - [ ] **Linting Check**: Run npm run lint-fix to verify code quality
-- [ ] **File Validation**: Confirm Python files end with blank line
 - [ ] **Whitespace Review**: Verify no trailing whitespace remains
 - [ ] **Documentation**: Update relevant documentation with changes

doc/active-identity-upgrade-plan.md

@@ -1,390 +0,0 @@
-# Active Identity Upgrade Plan
-
-**Author**: Matthew Raymer  
-**Date**: 2025-09-11  
-**Status**: 🎯 **PLANNING** - Database migration and active identity system upgrade
-
-## Overview
-
-Comprehensive upgrade to the active identity system, addressing architectural issues and implementing enhanced database constraints. Includes database migration enhancements and settings table cleanup based on team feedback.
-
-## Implementation Status
-
-**✅ COMPLETED**: Migration structure updated according to team member feedback
-
-### Implemented Changes
-
-1. **✅ Migration 003**: `003_add_hasBackedUpSeed_to_settings` - Adds `hasBackedUpSeed` column to settings (assumes master deployment)
-2. **✅ Migration 004**: `004_active_identity_and_seed_backup` - Creates `active_identity` table with data migration
-3. **✅ Migration Service**: Updated validation and schema detection logic for new migration structure
-4. **✅ TypeScript**: Fixed type compatibility issues
-
-### Migration Structure Now Follows Team Guidance
-
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` (assumes master code deployed)
-- **Migration 004**: `004_active_identity_and_seed_backup` (creates active_identity table)
-- **All migrations are additional** - no editing of previous migrations
-- **Data migration logic** preserves existing `activeDid` from settings
-- **iOS/Android compatibility** confirmed with SQLCipher 4.9.0 (SQLite 3.44.2)
-
-## Educational Context
-
-### Why This Upgrade Matters
-
-The active identity system is **critical infrastructure** affecting every user interaction:
-
-1. **Data Integrity**: Current `ON DELETE SET NULL` allows accidental deletion of active accounts
-2. **Manual Maintenance**: Timestamps require manual updates, creating inconsistency opportunities
-3. **Architectural Clarity**: Separating active identity from user settings improves maintainability
-
-### What This Upgrade Achieves
-
-- **Prevents Data Loss**: `ON DELETE RESTRICT` prevents accidental account deletion
-- **Automatic Consistency**: Database triggers ensure timestamps are always current
-- **Cleaner Architecture**: Complete separation of identity management from user preferences
-- **Better Performance**: Optimized indexes for faster account selection
-
-## Current State Analysis
-
-### Existing Migration Structure
-
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` - Adds `hasBackedUpSeed` column to settings (already deployed in master)
-- **Migration 004**: `004_active_identity_and_seed_backup` - Creates `active_identity` table with data migration
-- **Foreign Key**: `ON DELETE SET NULL` constraint
-- **Data Migration**: Copies existing `activeDid` from settings to `active_identity` table
-- **Bootstrapping**: Auto-selects first account if `activeDid` is null/empty
-
-**Important**: All migrations are **additional** - no editing of previous migrations since master code has been deployed.
-
-### Current Schema (Migration 004) - IMPLEMENTED
-
-```sql
--- Migration 004: active_identity_and_seed_backup
--- Assumes master code deployed with migration 003
-
-PRAGMA foreign_keys = ON;
-CREATE UNIQUE INDEX IF NOT EXISTS idx_accounts_did_unique ON accounts(did);
-
-CREATE TABLE IF NOT EXISTS active_identity (
-  id INTEGER PRIMARY KEY CHECK (id = 1),
-  activeDid TEXT DEFAULT NULL,
-  lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-  FOREIGN KEY (activeDid) REFERENCES accounts(did) ON DELETE SET NULL
-);
-
-CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-
--- Seed singleton row
-INSERT INTO active_identity (id, activeDid, lastUpdated)
-SELECT 1, NULL, datetime('now')
-WHERE NOT EXISTS (SELECT 1 FROM active_identity WHERE id = 1);
-
--- MIGRATE EXISTING DATA: Copy activeDid from settings
-UPDATE active_identity
-SET activeDid = (SELECT activeDid FROM settings WHERE id = 1),
-    lastUpdated = datetime('now')
-WHERE id = 1
-AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
-```
-
-## Current Implementation Details
-
-### PlatformServiceMixin.ts Implementation
-
-The current `$getActiveIdentity()` method in `src/utils/PlatformServiceMixin.ts`:
-
-```typescript
-async $getActiveIdentity(): Promise<{ activeDid: string }> {
-  try {
-    const result = await this.$dbQuery("SELECT activeDid FROM active_identity WHERE id = 1");
-    
-    if (!result?.values?.length) {
-      logger.warn("[PlatformServiceMixin] Active identity table is empty - migration issue");
-      return { activeDid: "" };
-    }
-
-    const activeDid = result.values[0][0] as string | null;
-
-    // Handle null activeDid - auto-select first account
-    if (activeDid === null) {
-      const firstAccount = await this.$dbQuery("SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1");
-      if (firstAccount?.values?.length) {
-        const firstAccountDid = firstAccount.values[0][0] as string;
-        await this.$dbExec("UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1", [firstAccountDid]);
-        return { activeDid: firstAccountDid };
-      }
-      logger.warn("[PlatformServiceMixin] No accounts available for auto-selection");
-      return { activeDid: "" };
-    }
-
-    // Validate activeDid exists in accounts
-    const accountExists = await this.$dbQuery("SELECT did FROM accounts WHERE did = ?", [activeDid]);
-    if (accountExists?.values?.length) {
-      return { activeDid };
-    }
-
-    // Clear corrupted activeDid and return empty
-    logger.warn("[PlatformServiceMixin] Active identity not found in accounts, clearing");
-    await this.$dbExec("UPDATE active_identity SET activeDid = NULL, lastUpdated = datetime('now') WHERE id = 1");
-    return { activeDid: "" };
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error getting active identity:", error);
-    return { activeDid: "" };
-  }
-}
-```
-
-### Key Implementation Notes
-
-1. **Null Handling**: Auto-selects first account when `activeDid` is null
-2. **Corruption Detection**: Clears invalid `activeDid` values
-3. **Manual Timestamps**: Updates `lastUpdated` manually in code
-4. **Error Handling**: Returns empty string on any error with appropriate logging
-
-## Proposed Changes Impact
-
-### 1. Foreign Key Constraint Change
-**Current**: `ON DELETE SET NULL` → **Proposed**: `ON DELETE RESTRICT`
-- **Data Safety**: Prevents accidental deletion of active account
-- **New Migration**: Add migration 005 to update constraint
-
-### 2. Automatic Timestamp Updates
-**Current**: Manual `lastUpdated` updates → **Proposed**: Database trigger
-- **Code Simplification**: Remove manual timestamp updates from `PlatformServiceMixin`
-- **Consistency**: Ensures `lastUpdated` is always current
-
-### 3. Enhanced Indexing
-**Current**: Single unique index on `id` → **Proposed**: Additional index on `accounts(dateCreated, did)`
-- **Performance Improvement**: Faster account selection queries
-- **Minimal Risk**: Additive change only
-
-## Implementation Strategy
-
-### Add Migration 005
-
-Since the `active_identity` table already exists and is working, we can add a new migration to enhance it:
-
-```sql
-{
-  name: "005_active_identity_enhancements",
-  sql: `
-    PRAGMA foreign_keys = ON;
-    
-    -- Recreate table with ON DELETE RESTRICT constraint
-    CREATE TABLE active_identity_new (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT REFERENCES accounts(did) ON DELETE RESTRICT,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now'))
-    );
-    
-    -- Copy existing data
-    INSERT INTO active_identity_new (id, activeDid, lastUpdated)
-    SELECT id, activeDid, lastUpdated FROM active_identity;
-    
-    -- Replace old table
-    DROP TABLE active_identity;
-    ALTER TABLE active_identity_new RENAME TO active_identity;
-    
-    -- Add performance indexes
-    CREATE INDEX IF NOT EXISTS idx_accounts_pick ON accounts(dateCreated, did);
-    
-    -- Create automatic timestamp trigger
-    CREATE TRIGGER IF NOT EXISTS trg_active_identity_touch
-    AFTER UPDATE ON active_identity
-    FOR EACH ROW
-    BEGIN
-      UPDATE active_identity
-        SET lastUpdated = datetime('now')
-        WHERE id = 1;
-    END;
-  `
-}
-```
-
-## Migration Service Updates Required
-
-### Enhanced Validation Logic
-
-**File**: `src/services/migrationService.ts`
-
-**Migration 004 validation**:
-- **Table existence**: `SELECT name FROM sqlite_master WHERE type='table' AND name='active_identity'`
-- **Column structure**: `SELECT id, activeDid, lastUpdated FROM active_identity LIMIT 1`
-- **Schema detection**: Uses `isSchemaAlreadyPresent()` to check if migration was already applied
-
-**Migration 005 validation**:
-- **Trigger existence**: `trg_active_identity_touch`
-- **Performance index**: `idx_accounts_pick`
-- **Foreign key constraint**: `ON DELETE RESTRICT`
-- **Table recreation**: Verify table was successfully recreated
-
-### Enhanced Schema Detection
-
-**Migration 004 verification**:
-- **Table structure**: Checks `active_identity` table exists and has correct columns
-- **Data integrity**: Validates that the table can be queried successfully
-- **Migration tracking**: Uses `isSchemaAlreadyPresent()` to avoid re-applying migrations
-
-**Migration 005 verification**:
-- **Table structure**: Enhanced constraints with `ON DELETE RESTRICT`
-- **Trigger presence**: Automatic timestamp updates
-- **Index presence**: Performance optimization
-- **Data integrity**: Existing data was preserved during table recreation
-
-## Risk Assessment
-
-### Low Risk Changes
-- **Performance Index**: Additive only, no data changes
-- **Trigger Creation**: Additive only, improves consistency
-- **New Migration**: Clean implementation, no modification of existing migrations
-
-### Medium Risk Changes
-- **Foreign Key Change**: `ON DELETE RESTRICT` is more restrictive
-- **Table Recreation**: Requires careful data preservation
-- **Validation Updates**: Need to test enhanced validation logic
-
-### Mitigation Strategies
-1. **Comprehensive Testing**: Test migration on various database states
-2. **Data Preservation**: Verify existing data is copied correctly
-3. **Clean Implementation**: New migration with all enhancements
-4. **Validation Coverage**: Enhanced validation ensures correctness
-5. **Rollback Plan**: Can drop new table and restore original if needed
-
-## Implementation Timeline
-
-### Phase 1: Migration Enhancement
-- [ ] Add migration 005 with enhanced constraints
-- [ ] Add enhanced validation logic
-- [ ] Add enhanced schema detection logic
-- [ ] Test migration on clean database
-
-### Phase 2: Testing
-- [ ] Test migration on existing databases
-- [ ] Validate foreign key constraints work correctly
-- [ ] Test trigger functionality
-- [ ] Test performance improvements
-- [ ] Verify data preservation during table recreation
-
-### Phase 3: Deployment
-- [ ] Deploy enhanced migration to development
-- [ ] Monitor migration success rates
-- [ ] Deploy to production
-- [ ] Monitor for any issues
-
-### Phase 4: Settings Table Cleanup
-- [ ] Create migration 006 to clean up settings table
-- [ ] Remove orphaned settings records (accountDid is null)
-- [ ] Clear any remaining activeDid values in settings
-- [ ] Consider removing activeDid column entirely (future task)
-
-## Settings Table Cleanup Strategy
-
-### Current State Analysis
-The settings table currently contains:
-- **Legacy activeDid column**: Still present from original design
-- **Orphaned records**: Settings with `accountDid = null` that may be obsolete
-- **Redundant data**: Some settings may have been copied unnecessarily
-
-Based on team feedback, the cleanup should include:
-
-1. **Remove orphaned settings records**:
-   ```sql
-   DELETE FROM settings WHERE accountDid IS NULL;
-   ```
-
-2. **Clear any remaining activeDid values**:
-   ```sql
-   UPDATE settings SET activeDid = NULL;
-   ```
-
-3. **Future consideration**: Remove the activeDid column entirely from settings table
-
-### Migration 006: Settings Cleanup
-
-```sql
-{
-  name: "006_settings_cleanup",
-  sql: `
-    -- Remove orphaned settings records (accountDid is null)
-    DELETE FROM settings WHERE accountDid IS NULL;
-    
-    -- Clear any remaining activeDid values in settings
-    UPDATE settings SET activeDid = NULL;
-    
-    -- Optional: Consider removing the activeDid column entirely
-    -- ALTER TABLE settings DROP COLUMN activeDid;
-  `
-}
-```
-
-### Benefits of Settings Cleanup
-- **Reduced confusion**: Eliminates dual-purpose columns
-- **Cleaner architecture**: Settings table focuses only on user preferences
-- **Reduced storage**: Removes unnecessary data
-- **Clearer separation**: Active identity vs. user settings are distinct concerns
-
-### Risk Assessment: LOW
-- **Data safety**: Only removes orphaned/obsolete records
-- **Backward compatibility**: Maintains existing column structure
-- **Rollback**: Easy to restore if needed
-- **Testing**: Can be validated with existing data
-
-## Code Changes Required
-
-### Files to Modify
-1. **`src/db-sql/migration.ts`** - Add migration 005 with enhanced constraints
-2. **`src/db-sql/migration.ts`** - Add migration 006 for settings cleanup
-3. **`src/services/migrationService.ts`** - Add enhanced validation and detection logic
-4. **`src/utils/PlatformServiceMixin.ts`** - Remove manual timestamp updates
-
-### Estimated Impact
-- **Migration File**: ~25 lines added (migration 005) + ~15 lines added (migration 006)
-- **Migration Service**: ~50 lines added (enhanced validation)
-- **PlatformServiceMixin**: ~20 lines removed (manual timestamps)
-- **Total**: ~90 lines changed
-
-## Conclusion
-
-**✅ IMPLEMENTATION COMPLETE**: The active identity upgrade plan has been successfully applied to the current project.
-
-### Successfully Implemented
-
-**✅ Migration Structure Updated**:
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` (assumes master deployment)
-- **Migration 004**: `004_active_identity_and_seed_backup` (creates active_identity table)
-- **All migrations are additional** - follows team member feedback exactly
-
-**✅ Technical Implementation**:
-- **Data Migration**: Preserves existing `activeDid` from settings table
-- **Foreign Key Constraints**: `ON DELETE SET NULL` for data safety
-- **iOS/Android Compatibility**: Confirmed with SQLCipher 4.9.0 (SQLite 3.44.2)
-- **Migration Service**: Updated validation and schema detection logic
-
-**✅ Code Quality**:
-- **TypeScript**: All type errors resolved
-- **Linting**: No linting errors
-- **Team Guidance**: Follows "additional migrations only" requirement
-
-### Next Steps (Future Enhancements)
-
-The foundation is now in place for future enhancements:
-
-1. **Migration 005**: `005_active_identity_enhancements` (ON DELETE RESTRICT, triggers, indexes)
-2. **Migration 006**: `006_settings_cleanup` (remove orphaned settings, clear legacy activeDid)
-3. **Code Simplification**: Remove manual timestamp updates from PlatformServiceMixin
-
-### Current Status
-
-**Migration 004 is ready for deployment** and will:
-- ✅ Create `active_identity` table with proper constraints
-- ✅ Migrate existing `activeDid` data from settings
-- ✅ Work identically on iOS and Android
-- ✅ Follow team member feedback for additional migrations only
-
-**Key Point**: All migrations are **additional** - no editing of previous migrations since master code has been deployed. This ensures compatibility and proper testing.
-
----
-
-**Status**: Ready for team review and implementation approval  
-**Last Updated**: 2025-09-11  
-**Next Review**: After team feedback and approval

doc/active-pointer-smart-deletion-pattern.md

@@ -1,392 +0,0 @@
-# Engineering Directive v2 — Active Pointer + Smart Deletion Pattern (hardened)
-
-**Author**: Matthew Raymer  
-**Date**: 2025-01-27  
-**Status**: 🎯 **ACTIVE** - Production-grade engineering directive for implementing smart deletion patterns
-
-## Overview
-
-This supersedes the previous draft and is **copy-pasteable** for any `<model>`. It keeps UX smooth, guarantees data integrity, and adds production-grade safeguards (bootstrapping, races, soft deletes, bulk ops, and testability). Built on your prior pattern.
-
-## 0) Objectives (non-negotiable)
-
-1. Exactly **one active `<model>`** pointer (or `NULL` during first-run).
-2. **Block deletion** when it would leave **zero** `<models>`.
-3. If deleting the **active** item, **atomically re-point** to a deterministic **next** item **before** delete.
-4. Enforce with **app logic** + **FK `RESTRICT`** (and `ON UPDATE CASCADE` if `ref` can change).
-
----
-
-## 1) Schema / Migration (SQLite)
-
-```sql
--- <timestamp>__active_<model>.sql
-PRAGMA foreign_keys = ON;
-
--- Stable external key on <models> (e.g., did/slug/uuid)
--- ALTER TABLE <models> ADD COLUMN ref TEXT UNIQUE NOT NULL; -- if missing
-
-CREATE TABLE IF NOT EXISTS active_<model> (
-  id INTEGER PRIMARY KEY CHECK (id = 1),
-  activeRef TEXT UNIQUE, -- allow NULL on first run
-  lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-  FOREIGN KEY (activeRef) REFERENCES <models>(ref)
-    ON UPDATE CASCADE
-    ON DELETE RESTRICT
-);
-
--- Seed singleton row (idempotent)
-INSERT INTO active_<model> (id, activeRef)
-SELECT 1, NULL
-WHERE NOT EXISTS (SELECT 1 FROM active_<model> WHERE id = 1);
-```
-
-**Rules**
-
-* **Never** default `activeRef` to `''`—use `NULL` for "no selection yet".
-* Ensure `PRAGMA foreign_keys = ON` for **every connection**.
-
----
-
-## 2) Data Access API (TypeScript)
-
-```ts
-// Required DAL
-async function getAllRefs(): Promise<string[]> { /* SELECT ref FROM <models> ORDER BY created_at, ref */ }
-async function getRefById(id: number): Promise<string> { /* SELECT ref FROM <models> WHERE id=? */ }
-async function getActiveRef(): Promise<string|null> { /* SELECT activeRef FROM active_<model> WHERE id=1 */ }
-async function setActiveRef(ref: string|null): Promise<void> { /* UPDATE active_<model> SET activeRef=?, lastUpdated=datetime('now') WHERE id=1 */ }
-async function deleteById(id: number): Promise<void> { /* DELETE FROM <models> WHERE id=? */ }
-async function countModels(): Promise<number> { /* SELECT COUNT(*) FROM <models> */ }
-
-// Deterministic "next"
-function pickNextRef(all: string[], current?: string): string {
-  const sorted = [...all].sort();
-  if (!current) return sorted[0];
-  const i = sorted.indexOf(current);
-  return sorted[(i + 1) % sorted.length];
-}
-```
-
----
-
-## 3) Smart Delete (Atomic, Race-safe)
-
-```ts
-async function smartDeleteModelById(id: number, notify: (m: string) => void) {
-  await db.transaction(async trx => {
-    const total = await countModels();
-    if (total <= 1) {
-      notify("Cannot delete the last item. Keep at least one.");
-      throw new Error("blocked:last-item");
-    }
-
-    const refToDelete = await getRefById(id);
-    const activeRef   = await getActiveRef();
-
-    if (activeRef === refToDelete) {
-      const all = (await getAllRefs()).filter(r => r !== refToDelete);
-      const next = pickNextRef(all, refToDelete);
-      await setActiveRef(next);
-      notify(`Switched active to ${next} before deletion.`);
-    }
-
-    await deleteById(id); // RESTRICT prevents orphaning if we forgot to switch
-  });
-
-  // Post-tx: emit events / refresh UI
-}
-```
-
----
-
-## 4) Bootstrapping & Repair
-
-```ts
-async function ensureActiveSelected() {
-  const active = await getActiveRef();
-  const all = await getAllRefs();
-  if (active === null && all.length > 0) {
-    await setActiveRef(pickNextRef(all)); // first stable choice
-  }
-}
-```
-
-Invoke after migrations and after bulk imports.
-
----
-
-## 5) Concurrency & Crash Safety
-
-* **Always** wrap "switch → delete" inside a **single transaction**.
-* Treat any FK violation as a **logic regression**; surface telemetry (`fk:restrict`).
-
----
-
-## 6) Soft Deletes (if applicable)
-
-If `<models>` uses `deleted_at`:
-
-* Replace `DELETE` with `UPDATE <models> SET deleted_at = datetime('now') WHERE id=?`.
-* Add a **partial uniqueness** strategy for `ref`:
-
-  * SQLite workaround: make `ref` unique globally and never reuse; or maintain a shadow `refs` ledger to prevent reuse.
-* Adjust `getAllRefs()` to filter `WHERE deleted_at IS NULL`.
-
----
-
-## 7) Bulk Ops & Imports
-
-* For batch deletes:
-
-  1. Compute survivors.
-  2. If a batch would remove **all** survivors → **refuse**.
-  3. If the **active** is included, precompute a deterministic **new active** and set it **once** before deleting.
-* After imports, run `ensureActiveSelected()`.
-
----
-
-## 8) Multi-Scope Actives (optional)
-
-To support **one active per workspace/tenant**:
-
-* Replace singleton with scoped pointer:
-
-  ```sql
-  CREATE TABLE active_<model> (
-    scope TEXT NOT NULL,        -- e.g., workspace_id
-    activeRef TEXT,
-    lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-    PRIMARY KEY (scope),
-    FOREIGN KEY (activeRef) REFERENCES <models>(ref) ON UPDATE CASCADE ON DELETE RESTRICT
-  );
-  ```
-* All APIs gain `scope` parameter; transactions remain unchanged in spirit.
-
----
-
-## 9) UX Contract
-
-* Delete confirmation must state:
-
-  * Deleting the **active** item will **auto-switch**.
-  * Deleting the **last** item is **not allowed**.
-* Keep list ordering aligned with `pickNextRef` strategy for predictability.
-
----
-
-## 10) Observability
-
-* Log categories:
-
-  * `blocked:last-item`
-  * `fk:restrict`
-  * `repair:auto-selected-active`
-  * `active:switch:pre-delete`
-* Emit metrics counters; attach `<model>` and (if used) `scope`.
-
----
-
-## 11) Test Matrix (must pass)
-
-1. **Non-active delete** (≥2): deleted; active unchanged.
-2. **Active delete** (≥2): active switches deterministically, then delete succeeds.
-3. **Last item delete** (==1): blocked with message.
-4. **First-run**: 0 items → `activeRef` stays `NULL`; add first → `ensureActiveSelected()` selects it.
-5. **Ref update** (if allowed): `activeRef` follows via `ON UPDATE CASCADE`.
-6. **Soft delete** mode: filters respected; invariants preserved.
-7. **Bulk delete** that includes active but not all: pre-switch then delete set.
-8. **Foreign keys disabled** (fault injection): tests must fail to surface missing PRAGMA.
-
----
-
-## 12) Rollout & Rollback
-
-* **Feature-flag** the new deletion path.
-* Migrations are **idempotent**; ship `ensureActiveSelected()` with them.
-* Keep a pre-migration backup for `<models>` on first rollout.
-* Rollback leaves `active_<model>` table harmlessly present.
-
----
-
-## 13) Replace-Me Cheatsheet
-
-* `<model>` → singular (e.g., `project`)
-* `<models>` → plural table (e.g., `projects`)
-* `ref` → stable external key (`did` | `slug` | `uuid`)
-
----
-
-**Outcome:** You get **predictable UX**, **atomic state changes**, and **hard integrity guarantees** across single- or multi-scope actives, with clear tests and telemetry to keep it honest.
-
----
-
-## TimeSafari Implementation Guide
-
-### Current State Analysis (2025-01-27)
-
-**Status**: ✅ **FULLY COMPLIANT** - Active Pointer + Smart Deletion Pattern implementation complete.
-
-**Compliance Score**: 100% (6/6 components compliant)
-
-#### ✅ **What's Working**
-- **Smart Deletion Logic**: `IdentitySwitcherView.vue` implements atomic transaction-safe deletion
-- **Data Access API**: All required DAL methods exist in `PlatformServiceMixin.ts`
-- **Schema Structure**: `active_identity` table follows singleton pattern correctly
-- **Bootstrapping**: `$ensureActiveSelected()` method implemented
-- **Foreign Key Constraint**: ✅ **FIXED** - Now uses `ON DELETE RESTRICT` (Migration 005)
-- **Settings Cleanup**: ✅ **COMPLETED** - Orphaned records removed (Migration 006)
-
-#### ✅ **All Issues Resolved**
-- ✅ Foreign key constraint fixed to `ON DELETE RESTRICT`
-- ✅ Settings table cleaned up (orphaned records removed)
-
-### Updated Implementation Plan
-
-**Note**: Smart deletion logic is already implemented correctly. Focus on fixing security issues and cleanup.
-
-#### 1) Critical Security Fix (Migration 005)
-
-**Fix Foreign Key Constraint:**
-```sql
--- Migration 005: Fix foreign key constraint to ON DELETE RESTRICT
-{
-  name: "005_active_identity_constraint_fix",
-  sql: `
-    PRAGMA foreign_keys = ON;
-    
-    -- Recreate table with ON DELETE RESTRICT constraint (SECURITY FIX)
-    CREATE TABLE active_identity_new (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT REFERENCES accounts(did) ON DELETE RESTRICT,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now'))
-    );
-    
-    -- Copy existing data
-    INSERT INTO active_identity_new (id, activeDid, lastUpdated)
-    SELECT id, activeDid, lastUpdated FROM active_identity;
-    
-    -- Replace old table
-    DROP TABLE active_identity;
-    ALTER TABLE active_identity_new RENAME TO active_identity;
-    
-    -- Recreate indexes
-    CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-  `
-}
-```
-
-### Updated Implementation Plan
-
-**Note**: Smart deletion logic is already implemented correctly. Migration 005 (security fix) completed successfully.
-
-#### ✅ **Phase 1: Critical Security Fix (COMPLETED)**
-- **Migration 005**: ✅ **COMPLETED** - Fixed foreign key constraint to `ON DELETE RESTRICT`
-- **Impact**: Prevents accidental account deletion
-- **Status**: ✅ **Successfully applied and tested**
-
-#### **Phase 2: Settings Cleanup (CURRENT)**
-- **Migration 006**: Remove orphaned settings records
-- **Impact**: Cleaner architecture, reduced confusion
-- **Risk**: LOW - Only removes obsolete data
-
-#### 3) Optional Future Enhancement (Migration 007)
-
-**Remove Legacy activeDid Column:**
-```sql
--- Migration 007: Remove activeDid column entirely (future task)
-{
-  name: "007_remove_activeDid_column",
-  sql: `
-    -- Remove the legacy activeDid column from settings table
-    ALTER TABLE settings DROP COLUMN activeDid;
-  `
-}
-```
-
-### Current Implementation Status
-
-#### ✅ **Already Implemented Correctly**
-- **Smart Deletion Logic**: `IdentitySwitcherView.vue` lines 285-315
-- **Data Access API**: All methods exist in `PlatformServiceMixin.ts`
-- **Transaction Safety**: Uses `$withTransaction()` for atomicity
-- **Last Account Protection**: Blocks deletion when `total <= 1`
-- **Deterministic Selection**: `$pickNextAccountDid()` method
-- **Bootstrapping**: `$ensureActiveSelected()` method
-
-#### ❌ **Requires Immediate Fix**
-1. **Foreign Key Constraint**: Change from `ON DELETE SET NULL` to `ON DELETE RESTRICT`
-2. **Settings Cleanup**: Remove orphaned records with `accountDid=null`
-
-### Implementation Priority
-
-#### **Phase 1: Critical Security Fix (IMMEDIATE)**
-- **Migration 005**: Fix foreign key constraint to `ON DELETE RESTRICT`
-- **Impact**: Prevents accidental account deletion
-- **Risk**: HIGH - Current implementation allows data loss
-
-#### **Phase 2: Settings Cleanup (HIGH PRIORITY)**
-- **Migration 006**: Remove orphaned settings records
-- **Impact**: Cleaner architecture, reduced confusion
-- **Risk**: LOW - Only removes obsolete data
-
-#### **Phase 3: Future Enhancement (OPTIONAL)**
-- **Migration 007**: Remove `activeDid` column from settings
-- **Impact**: Complete separation of concerns
-- **Risk**: LOW - Architectural cleanup
-
-#### **Phase 2: Settings Cleanup Implementation (Migration 006)**
-
-**Remove Orphaned Records:**
-```sql
--- Migration 006: Settings cleanup
-{
-  name: "006_settings_cleanup",
-  sql: `
-    -- Remove orphaned settings records (accountDid is null)
-    DELETE FROM settings WHERE accountDid IS NULL;
-    
-    -- Clear any remaining activeDid values in settings
-    UPDATE settings SET activeDid = NULL;
-  `
-}
-```
-
-### Updated Compliance Assessment
-
-#### **Current Status**: ✅ **FULLY COMPLIANT** (100%)
-
-| Component | Status | Compliance |
-|-----------|--------|------------|
-| Smart Deletion Logic | ✅ Complete | 100% |
-| Data Access API | ✅ Complete | 100% |
-| Schema Structure | ✅ Complete | 100% |
-| Foreign Key Constraint | ✅ Fixed (`RESTRICT`) | 100% |
-| Settings Cleanup | ✅ Completed | 100% |
-| **Overall** | ✅ **Complete** | **100%** |
-
-### Implementation Benefits
-
-**Current implementation already provides:**
-- ✅ **Atomic Operations**: Transaction-safe account deletion
-- ✅ **Last Account Protection**: Prevents deletion of final account
-- ✅ **Smart Switching**: Auto-switches active account before deletion
-- ✅ **Deterministic Behavior**: Predictable "next account" selection
-- ✅ **NULL Handling**: Proper empty state management
-
-**After fixes will add:**
-- ✅ **Data Integrity**: Foreign key constraints prevent orphaned references
-- ✅ **Clean Architecture**: Complete separation of identity vs. settings
-- ✅ **Production Safety**: No accidental account deletion possible
-
-### Implementation Complete
-
-✅ **All Required Steps Completed:**
-1. ✅ **Migration 005**: Foreign key constraint fixed to `ON DELETE RESTRICT`
-2. ✅ **Migration 006**: Settings cleanup completed (orphaned records removed)
-3. ✅ **Testing**: All migrations executed successfully with no performance delays
-
-**Optional Future Enhancement:**
-- **Migration 007**: Remove `activeDid` column from settings table (architectural cleanup)
-
-The Active Pointer + Smart Deletion Pattern is now **fully implemented** with **100% compliance**.

doc/activeDid-migration-plan.md

@@ -1,559 +0,0 @@
-# ActiveDid Migration Plan - Implementation Guide
-
-**Author**: Matthew Raymer
-**Date**: 2025-09-03T06:40:54Z
-**Status**: 🚀 **ACTIVE MIGRATION** - API Layer Complete, Component Updates Complete ✅
-
-## Objective
-
-Move the `activeDid` field from the `settings` table to a dedicated `active_identity` table to improve database architecture, prevent data corruption, and separate identity selection from user preferences.
-
-## Result
-
-This document provides the specific implementation steps required to complete the ActiveDid migration with all necessary code changes.
-
-## Use/Run
-
-Follow this implementation checklist step-by-step to complete the migration.
-
-## Context & Scope
-
-- **In scope**: Database migration, API updates, component updates, testing
-- **Out of scope**: UI changes, authentication flow changes, MASTER_SETTINGS_KEY elimination (future improvement)
-
-## Critical Vue Reactivity Bug Discovery
-
-### Issue
-During testing of the ActiveDid migration, a critical Vue reactivity bug was discovered:
-
-**Problem**: The `newDirectOffersActivityNumber` element in HomeView.vue fails to render correctly without a watcher on `numNewOffersToUser`.
-
-**Symptoms**: 
-- Element not found in DOM even when `numNewOffersToUser` has correct value
-- Test failures with "element not found" errors
-- Inconsistent rendering behavior
-
-**Root Cause**: Unknown Vue reactivity issue where property changes don't trigger proper template updates
-
-**Workaround**: A watcher on `numNewOffersToUser` with debug logging is required:
-```typescript
-@Watch("numNewOffersToUser")
-onNumNewOffersToUserChange(newValue: number, oldValue: number) {
-  logger.debug("[HomeView] numNewOffersToUser changed", {
-    oldValue,
-    newValue,
-    willRender: !!newValue,
-    timestamp: new Date().toISOString()
-  });
-}
-```
-
-**Impact**: This watcher must remain in the codebase until the underlying Vue reactivity issue is resolved.
-
-**Files Affected**: `src/views/HomeView.vue`
-
-### Investigation Needed
-- [ ] Investigate why Vue reactivity is not working correctly
-- [ ] Check for race conditions in component lifecycle
-- [ ] Verify if this affects other components
-- [ ] Consider Vue version upgrade or configuration changes
-
-## Implementation Checklist
-
-### Phase 1: Database Migration ✅ COMPLETE
-- [x] Add migration to MIGRATIONS array in `src/db-sql/migration.ts`
-- [x] Create active_identity table with constraints
-- [x] Include data migration from settings to active_identity table
-
-**Status**: All migrations executed successfully. active_identity table created and populated with data.
-
-### Phase 2: API Layer Updates ✅ COMPLETE
-- [x] Implement `$getActiveIdentity()` method (exists with correct return type)
-- [x] Fix `$getActiveIdentity()` return type to match documented interface
-- [x] Update `$accountSettings()` to use new method (minimal safe change)
-- [x] Update `$updateActiveDid()` with dual-write pattern
-- [x] Add strategic logging for migration verification
-
-**Status**: All API layer updates complete and verified working. Methods return correct data format and maintain backward compatibility.
-
-### Phase 3: Component Updates ✅ COMPLETE
-- [x] Update HomeView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OfferDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update PhotoDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update GiftedDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update MembersList.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OnboardingDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ImageMethodDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update DIDView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update TestView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactAmountsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update UserProfileView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OfferDetailsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update QuickActionBvcEndView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update SharedPhotoView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimReportCertificateView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ProjectsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimAddRawView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactQRScanShowView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update InviteOneAcceptView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update RecentOffersToUserView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update NewEditProjectView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update GiftedDetailsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update IdentitySwitcherView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactQRScanFullView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update NewActivityView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactImportView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ProjectViewView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimCertificateView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactGiftingView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ConfirmGiftView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update RecentOffersToUserProjectsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update InviteOneView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update AccountViewView.vue to use `$getActiveIdentity()` (completed)
-- [x] All component migrations complete! ✅
-- [ ] Replace `this.activeDid = settings.activeDid` pattern
-- [ ] Test each component individually
-
-**Status**: 23 components successfully migrated. 11 components remaining. API layer ready for systematic updates.
-
-### Phase 4: Testing 🟡 PARTIALLY STARTED
-
-- [x] Test Web platform (verified working)
-- [ ] Test Electron platform
-- [ ] Test iOS platform  
-- [ ] Test Android platform
-- [ ] Test migration rollback scenarios
-- [ ] Test data corruption recovery
-
-## Required Code Changes
-
-### 1. Database Migration ✅ COMPLETE
-
-```typescript
-// Already added to MIGRATIONS array in src/db-sql/migration.ts
-{
-  name: "003_active_did_separate_table",
-  sql: `
-    -- Create new active_identity table with proper constraints
-    CREATE TABLE IF NOT EXISTS active_identity (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT NOT NULL,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-      FOREIGN KEY (activeDid) REFERENCES accounts(did) ON DELETE CASCADE
-    );
-
-    -- Add performance indexes
-    CREATE INDEX IF NOT EXISTS idx_active_identity_activeDid ON active_identity(activeDid);
-    CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-
-    -- Insert default record (will be updated during migration)
-    INSERT OR IGNORE INTO active_identity (id, activeDid, lastUpdated) VALUES (1, '', datetime('now'));
-
-    -- MIGRATE EXISTING DATA: Copy activeDid from settings to active_identity
-    -- This prevents data loss when migration runs on existing databases
-    UPDATE active_identity 
-    SET activeDid = (SELECT activeDid FROM settings WHERE id = 1), 
-        lastUpdated = datetime('now')
-    WHERE id = 1 
-    AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
-  `,
-},
-```
-
-### 2. $getActiveIdentity() Method ✅ EXISTS
-
-```typescript
-// Already exists in PlatformServiceMixin.ts with correct return type
-async $getActiveIdentity(): Promise<{ activeDid: string }> {
-  try {
-    const result = await this.$dbQuery(
-      "SELECT activeDid FROM active_identity WHERE id = 1"
-    );
-    
-    if (result?.values?.length) {
-      const activeDid = result.values[0][0] as string;
-      
-      // Validate activeDid exists in accounts
-      if (activeDid) {
-        const accountExists = await this.$dbQuery(
-          "SELECT did FROM accounts WHERE did = ?",
-          [activeDid]
-        );
-        
-        if (accountExists?.values?.length) {
-          return { activeDid };
-        } else {
-          // Clear corrupted activeDid
-          await this.$dbExec(
-            "UPDATE active_identity SET activeDid = '', lastUpdated = datetime('now') WHERE id = 1"
-          );
-          return { activeDid: "" };
-        }
-      }
-    }
-    
-    return { activeDid: "" };
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error getting active identity:", error);
-    return { activeDid: "" };
-  }
-}
-```
-
-### 3. Update $accountSettings Method
-
-```typescript
-// Update in PlatformServiceMixin.ts
-async $accountSettings(did?: string, defaults: Settings = {}): Promise<Settings> {
-  try {
-    // Get settings without activeDid (unchanged logic)
-    const settings = await this.$getMasterSettings(defaults);
-
-    if (!settings) {
-      return defaults;
-    }
-
-    // Get activeDid from new table (new logic)
-    const activeIdentity = await this.$getActiveIdentity();
-
-    // Return combined result (maintains backward compatibility)
-    return { ...settings, activeDid: activeIdentity.activeDid };
-  } catch (error) {
-    logger.error("[Settings Trace] ❌ Error in $accountSettings:", error);
-    return defaults;
-  }
-}
-```
-
-### 4. Update $updateActiveDid Method
-
-```typescript
-// Update in PlatformServiceMixin.ts
-async $updateActiveDid(newDid: string | null): Promise<boolean> {
-  try {
-    if (newDid === null) {
-      // Clear active identity in both tables
-      await this.$dbExec(
-        "UPDATE active_identity SET activeDid = '', lastUpdated = datetime('now') WHERE id = 1"
-      );
-      
-      // Keep legacy field in sync (backward compatibility)
-      await this.$dbExec(
-        "UPDATE settings SET activeDid = '' WHERE id = ?",
-        [MASTER_SETTINGS_KEY]
-      );
-    } else {
-      // Validate DID exists before setting
-      const accountExists = await this.$dbQuery(
-        "SELECT did FROM accounts WHERE did = ?",
-        [newDid]
-      );
-
-      if (!accountExists?.values?.length) {
-        logger.error(`[PlatformServiceMixin] Cannot set activeDid to non-existent DID: ${newDid}`);
-        return false;
-      }
-
-      // Update active identity in new table
-      await this.$dbExec(
-        "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
-        [newDid]
-      );
-      
-      // Keep legacy field in sync (backward compatibility)
-      await this.$dbExec(
-        "UPDATE settings SET activeDid = ? WHERE id = ?",
-        [newDid, MASTER_SETTINGS_KEY]
-      );
-    }
-
-    // Update internal tracking
-    await this._updateInternalActiveDid(newDid);
-    return true;
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error updating activeDid:", error);
-    return false;
-  }
-}
-```
-
-### 5. Component Updates Required
-
-**35 components need this pattern change:**
-
-```typescript
-// CURRENT PATTERN (replace in all components):
-this.activeDid = settings.activeDid || "";
-
-// NEW PATTERN (use in all components):
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const activeIdentity = await (this as any).$getActiveIdentity();
-this.activeDid = activeIdentity.activeDid || "";
-```
-
-**Components requiring updates:**
-
-#### Views (28 components)
-- `src/views/DIDView.vue` (line 378)
-- `src/views/TestView.vue` (line 654)
-- `src/views/ContactAmountsView.vue` (line 226)
-- `src/views/HomeView.vue` (line 517)
-- `src/views/UserProfileView.vue` (line 185)
-- `src/views/ClaimView.vue` (line 730)
-- `src/views/OfferDetailsView.vue` (line 435)
-- `src/views/QuickActionBvcEndView.vue` (line 229)
-- `src/views/SharedPhotoView.vue` (line 178)
-- `src/views/ClaimReportCertificateView.vue` (line 56)
-- `src/views/ProjectsView.vue` (line 393)
-- `src/views/ClaimAddRawView.vue` (line 114)
-- `src/views/ContactQRScanShowView.vue` (line 288)
-- `src/views/InviteOneAcceptView.vue` (line 122)
-- `src/views/RecentOffersToUserView.vue` (line 118)
-- `src/views/NewEditProjectView.vue` (line 380)
-- `src/views/GiftedDetailsView.vue` (line 443)
-- `src/views/ProjectViewView.vue` (line 782)
-- `src/views/ContactsView.vue` (line 296)
-- `src/views/ContactQRScanFullView.vue` (line 267)
-- `src/views/NewActivityView.vue` (line 204)
-- `src/views/ClaimCertificateView.vue` (line 42)
-- `src/views/ContactGiftingView.vue` (line 166)
-- `src/views/RecentOffersToUserProjectsView.vue` (line 126)
-- `src/views/InviteOneView.vue` (line 285)
-- `src/views/IdentitySwitcherView.vue` (line 202)
-- `src/views/AccountViewView.vue` (line 1052)
-- `src/views/ConfirmGiftView.vue` (line 549)
-- `src/views/ContactImportView.vue` (line 342)
-
-#### Components (7 components)
-- `src/components/OfferDialog.vue` (line 177)
-- `src/components/PhotoDialog.vue` (line 270)
-- `src/components/GiftedDialog.vue` (line 223)
-- `src/components/MembersList.vue` (line 234)
-- `src/components/OnboardingDialog.vue` (line 272)
-- `src/components/ImageMethodDialog.vue` (line 502)
-- `src/components/FeedFilters.vue` (line 89)
-
-**Implementation Strategy:**
-
-1. **Systematic Replacement**: Use grep search to find all instances
-2. **Pattern Matching**: Replace `this.activeDid = settings.activeDid` with new pattern
-3. **Error Handling**: Ensure proper error handling in each component
-4. **Testing**: Test each component individually after update
-
-**Example Component Update:**
-
-```typescript
-// BEFORE (in any component):
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  this.activeDid = settings.activeDid || "";
-  this.apiServer = settings.apiServer || "";
-}
-
-// AFTER (in any component):
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  const activeIdentity = await this.$getActiveIdentity();
-  this.activeDid = activeIdentity.activeDid || "";
-  this.apiServer = settings.apiServer || "";
-}
-```
-
-**Alternative Pattern (if settings still needed):**
-
-```typescript
-// If component needs both settings and activeDid:
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  const activeIdentity = await this.$getActiveIdentity();
-  
-  // Use activeDid from new table
-  this.activeDid = activeIdentity.activeDid || "";
-  
-  // Use other settings from settings table
-  this.apiServer = settings.apiServer || "";
-  this.partnerApiServer = settings.partnerApiServer || "";
-  // ... other settings
-}
-```
-
-## What Works (Evidence)
-
-- ✅ **Migration code exists** in MIGRATIONS array
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows successful execution of migrations 003 and 004
-  - **Verify at**: `🎉 [Migration] Successfully applied: 003_active_did_separate_table`
-
-- ✅ **$getActiveIdentity() method exists** in PlatformServiceMixin
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows method calls returning correct data format
-  - **Verify at**: `[PlatformServiceMixin] $getActiveIdentity(): activeDid resolved {activeDid: 'did:ethr:0xAe6ea6A4c20aDeE7B1c7Ee1fEFAa6fBe0986a671'}`
-
-- ✅ **Database migration infrastructure** exists and mature
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows 6 migrations applied successfully
-  - **Verify at**: `🎉 [Migration] Migration process complete! Summary: 6 applied, 0 skipped`
-
-- ✅ **$accountSettings() updated** with minimal safe change
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows method returning activeDid from new table
-  - **Status**: Maintains all existing complex logic while using new table as primary source
-
-- ✅ **$updateActiveDid() dual-write implemented**
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Method exists and ready for testing
-  - **Status**: Uses MASTER_SETTINGS_KEY constant for proper settings table targeting
-
-- ✅ **HomeView.vue successfully migrated** to use new API
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows `[HomeView] ActiveDid migration - using new API`
-  - **Status**: Component successfully uses `$getActiveIdentity()` instead of `settings.activeDid`
-
-- ✅ **Clean architecture implemented** - active_identity is now single source of truth
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows consistent activeDid values from active_identity table
-  - **Status**: active_identity table is the only source for activeDid, settings table handles app config only
-
-- ✅ **Schema cleanup** - activeDid column removed from settings table
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows successful execution of migration 004
-  - **Status**: Complete separation of concerns - no more confusing dual-purpose columns
-
-## What Doesn't (Evidence & Hypotheses)
-
-- ❌ **11 components still use old pattern** `this.activeDid = settings.activeDid`
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Grep search found 11 remaining instances across views and components
-  - **Hypothesis**: Components need updates but API layer is now ready
-  - **Next probe**: Systematic component updates can now proceed
-
-## Risks, Limits, Assumptions
-
-- **Data Loss Risk**: Migration failure could lose activeDid values
-- **Breaking Changes**: API updates required in PlatformServiceMixin
-- **Testing Overhead**: All platforms must be tested with new structure
-- **Component Updates**: 35+ components need individual updates and testing
-
-## Rollback Strategy
-
-### Schema Rollback
-```sql
--- If migration fails, restore original schema
-DROP TABLE IF EXISTS active_identity;
-```
-
-### Data Rollback
-```typescript
-// Rollback function to restore activeDid to settings table
-async function rollbackActiveDidMigration(): Promise<boolean> {
-  try {
-    const activeIdentityResult = await dbQuery(
-      "SELECT activeDid FROM active_identity WHERE id = 1"
-    );
-    
-    if (activeIdentityResult?.values?.length) {
-      const activeDid = activeIdentityResult.values[0][0] as string;
-      
-      await dbExec(
-        "UPDATE settings SET activeDid = ? WHERE id = ?",
-        [activeDid, MASTER_SETTINGS_KEY]
-      );
-      
-      return true;
-    }
-    
-    return false;
-  } catch (error) {
-    logger.error("[Rollback] Failed to restore activeDid:", error);
-    return false;
-  }
-}
-```
-
-## Next Steps
-
-| Task | Exit Criteria | Priority |
-|------|---------------|----------|
-| **Update $accountSettings() method** | Method calls $getActiveIdentity and combines with settings | ✅ COMPLETE |
-| **Implement $updateActiveDid() dual-write** | Method updates both active_identity and settings tables | ✅ COMPLETE |
-| **Start application in browser** | Application loads and initializes IndexedDB database | ✅ COMPLETE |
-| **Inspect IndexedDB via DevTools** | Verify active_identity table exists and contains data | ✅ COMPLETE |
-| **Update first component** | One component successfully uses new API pattern | ✅ COMPLETE (HomeView.vue) |
-| **Systematic component updates** | All 26 remaining components use new API pattern (with test:web after each) | 🟢 HIGH |
-| **Test all platforms** | Web, Electron, iOS, Android platforms verified working | 🟡 MEDIUM |
-| **Performance optimization** | Reduce excessive $getActiveIdentity() calls | 🟡 MEDIUM |
-
-**Critical Blocker**: API layer complete. Ready to proceed with component updates.
-
-## Migration Execution Rule
-
-### **One Component + Test Pattern**
-**Rule**: After migrating each component, run `npm run test:web` and `npm run lint-fix` to verify the change doesn't break existing functionality and meets code standards.
-
-**Workflow**:
-1. **Migrate one component** - Update to use `$getActiveIdentity()` pattern
-2. **Run lint-fix** - Ensure code meets project standards
-3. **Run test:web** - Verify no regressions introduced
-4. **Commit if passing** - Only commit after tests and linting pass
-5. **Repeat** - Move to next component
-
-**Benefits**:
-- Catch issues immediately after each change
-- Maintain code quality throughout migration
-- Easy rollback if problems arise
-- Systematic progress tracking
-
-**Exit Criteria**: All 26 components migrated with passing tests
-
-## Performance Observations
-
-### Excessive API Calls Detected
-The console log shows `$getActiveIdentity()` being called very frequently (multiple times per component mount). This suggests:
-- Components may be calling the API more than necessary
-- Could be optimized for better performance
-- Not a blocker, but worth monitoring during component updates
-
-### Recommended Optimization Strategy
-1. **Audit component lifecycle** - Ensure API calls happen only when needed
-2. **Implement caching** - Consider short-term caching of activeDid values
-3. **Batch updates** - Group related API calls where possible
-4. **Monitor performance** - Track API call frequency during component updates
-
-## Future Improvement: MASTER_SETTINGS_KEY Elimination
-
-**Not critical for this task** but logged for future improvement:
-
-```typescript
-// Current: WHERE id = "1" 
-// Future: WHERE accountDid IS NULL
-
-// This eliminates the confusing concept of "master" settings
-// and uses a cleaner pattern for default settings
-```
-
-## References
-
-- [Database Migration Guide](./database-migration-guide.md)
-- [Dexie to SQLite Mapping](./dexie-to-sqlite-mapping.md)
-- [PlatformServiceMixin Documentation](./component-communication-guide.md)
-
-## Competence Hooks
-
-- *Why this works*: Separates concerns between identity selection and user preferences, prevents data corruption with foreign key constraints
-- *Common pitfalls*: Method signature mismatches, forgetting dual-write pattern, not testing database state
-- *Next skill unlock*: Systematic API updates with backward compatibility
-- *Teach-back*: Explain why dual-write pattern is needed during migration transition
-
-## Collaboration Hooks
-
-- **Reviewers**: Database team, PlatformServiceMixin maintainers, QA team
-- **Sign-off checklist**:
-  - [ ] Migration script integrated with existing MIGRATIONS array
-  - [x] $getActiveIdentity() method returns correct type
-  - [x] $accountSettings() method updated to use new API (minimal safe change)
-  - [x] $updateActiveDid() method implements dual-write pattern
-  - [ ] All 35+ components updated to use new API
-  - [ ] Rollback procedures validated
-  - [ ] All platforms tested
-  - [ ] All stakeholders approve deployment timeline

doc/migration-004-complexity-resolution-plan.md

@@ -1,198 +0,0 @@
-# Migration 004 Complexity Resolution Plan
-
-**Document Version**: 1.3  
-**Author**: Matthew Raymer  
-**Date**: 2025-01-27  
-**Status**: Implementation Phase - Phase 1 Complete  
-
-## Problem Summary
-
-The current migration 004 implementation has become overly complex with multiple critical issues that create serious risks for data integrity and application performance.
-
-### Four Most Critical Issues
-
-1. **Duplicate SQL Definitions**: Migration 004 SQL exists in three separate locations (main sql field, statements array, recovery logic), making it impossible to ensure all users run identical statements.
-
-2. **Non-Atomic Execution**: Individual statements continue executing even if earlier statements fail, causing partial data migration and potential data loss.
-
-3. **Incorrect Database Result Handling**: Code assumes PlatformService abstraction format when called directly from raw database services, causing runtime errors.
-
-4. **Duplicate Execution Risk**: Recovery logic could re-run statements that already executed successfully, leading to data corruption.
-
-## Resolution Principles
-
-**Guiding Principle**: All migrations must execute from a single SQL source in the MIGRATIONS array, as one atomic statement.
-
-- **Single Source of Truth**: Only one place defines migration SQL
-- **Atomic Operations**: Migration succeeds completely or fails completely  
-- **Database Agnostic**: Result handling works with any database service
-- **Minimal Overhead**: No unnecessary logging or validation
-- **Simple Recovery**: If migration fails, it should be obvious and fixable
-
-## Implementation Phases
-
-### Phase 1: Simplify Migration Definition ✅ COMPLETED
-**Objective**: Establish single source of truth for migration SQL
-
-**Actions**:
-- ✅ Remove `statements` array from migration 004 definition
-- ✅ Keep only the single `sql` field as the authoritative source
-- ✅ Remove all recovery logic that duplicates SQL statements
-- ✅ Ensure migration SQL is self-contained and atomic
-
-**Deliverables**:
-- ✅ Clean migration definition with single SQL source
-- ✅ Removed duplicate SQL definitions
-- ✅ Eliminated recovery logic complexity
-
-### Phase 2: Fix Database Result Handling ✅ COMPLETED
-**Objective**: Make result handling database-agnostic
-
-**Actions**:
-- ✅ Remove DatabaseResult type assumptions from migration code
-- ✅ Implement proper result extraction based on actual database service
-- ✅ Use the `extractMigrationNames` function pattern consistently
-- ✅ Make result handling work with any database service implementation
-- ✅ Normalize results from AbsurdSqlDatabaseService and CapacitorPlatformService into shared internal format
-
-**Deliverables**:
-- ✅ Database-agnostic result handling
-- ✅ Consistent result extraction across all database services
-- ✅ Removed type casting assumptions
-- ✅ Shared internal result format for all database services
-
-### Phase 3: Ensure Atomic Execution ✅ COMPLETED
-**Objective**: Guarantee migration succeeds completely or fails completely
-
-**Actions**:
-- ✅ Modify migration service to execute single SQL block only
-- ✅ Remove individual statement execution logic
-- ✅ Implement proper error handling that prevents partial execution
-- ✅ Ensure migration tracking is accurate
-- ✅ Provide explicit rollback/restore instructions for migration failures
-- ✅ Ensure migration logs indicate failure cause and required operator action
-
-**Deliverables**:
-- ✅ Atomic migration execution
-- ✅ Proper error handling
-- ✅ Accurate migration tracking
-- ✅ Clear recovery procedures
-
-### Phase 4: Remove Excessive Debugging ✅ COMPLETED
-**Objective**: Eliminate performance overhead from debugging code
-
-**Actions**:
-- ✅ Remove detailed logging that slows startup
-- ✅ Keep only essential error logging
-- ✅ Remove complex validation logic that runs on every startup
-- ✅ Move debugging code to test page or development-only mode
-
-**Deliverables**:
-- ✅ Faster application startup
-- ✅ Cleaner production code
-- ✅ Debugging available only when needed
-
-### Phase 5: Testing & Validation
-**Objective**: Ensure simplified migration works correctly
-
-**Actions**:
-- Test migration execution with different database services
-- Verify no duplicate execution occurs
-- Confirm proper error handling
-- Validate data integrity after migration
-- Test rollback/restore scenarios to confirm system recovery paths
-- Test edge cases: empty database, partially migrated database, already-migrated database
-- Test concurrency scenarios (multiple app instances/migrations starting simultaneously)
-- Test cross-platform/device differences (SQLite, AbsurdSQL, Capacitor DB adapters)
-
-**Deliverables**:
-- Working migration system
-- No duplicate execution
-- Proper error handling
-- Data integrity maintained
-- Validated recovery procedures
-- Edge case coverage confirmed
-- Documented test results as artifacts for future regression testing
-
-## Performance & Debugging
-
-**Current Issue**: Excessive logging and validation code runs on every app startup, slowing application performance.
-
-**Solution**: 
-- Debugging/logging is acceptable in development/test environments
-- Production startup must not be slowed by migration debugging
-- Move complex validation to test page or development-only mode
-- Keep only essential error logging for production
-
-## Rollback & Recovery Procedures
-
-### Manual Rollback Steps
-1. **Stop Application**: Ensure no active database connections
-2. **Restore Database**: Use snapshot/backup to restore pre-migration state
-3. **Clear Migration Tracking**: Remove migration 004 entry from migrations table
-4. **Verify State**: Confirm active_identity table is removed and settings.activeDid is restored
-5. **Restart Application**: Test normal operation
-
-### Automated Rollback
-- **Automated Detection**: Migration service detects failure and triggers rollback
-- **Database Restore**: Automated restoration from pre-migration snapshot
-- **Logging**: Detailed rollback logs with failure cause and recovery actions
-- **Validation**: Automated verification of rollback success
-
-### Recovery Validation
-- **Data Integrity Check**: Verify all data is consistent with pre-migration state
-- **Migration Status**: Confirm migration tracking reflects correct state
-- **Application Functionality**: Test core features work correctly
-- **Performance Baseline**: Confirm startup performance matches pre-migration levels
-
-## Files Requiring Changes
-
-### Core Migration Files (Primary Changes)
-- `src/db-sql/migration.ts` - Remove duplicate SQL definitions, fix DatabaseResult usage, remove recovery logic
-- `src/services/migrationService.ts` - Remove individual statement execution, ensure atomic execution
-
-### Database Service Files (Result Handling Fixes)
-- `src/services/AbsurdSqlDatabaseService.ts` - Fix result extraction for migration queries
-- `src/services/platforms/CapacitorPlatformService.ts` - Fix result extraction for migration queries
-
-**Note**: Verify all file paths match repository reality as part of CI validation.
-
-## Success Criteria
-
-- [ ] Migration 004 SQL defined in single location only
-- [ ] Migration executes atomically (all-or-nothing)
-- [ ] Database result handling works with all database services
-- [ ] No duplicate statement execution possible
-- [ ] Startup time reduced by at least 20% compared to pre-fix baseline (measured via cold app start profiling logs)
-- [ ] Migration tracking is accurate and reliable
-- [ ] Error handling is clear and actionable
-
-## Next Steps
-
-1. **Review and Approve Plan**: Get stakeholder approval for this approach
-2. **Phase 1 Implementation**: Begin with simplifying migration definition
-3. **Testing**: Validate each phase before proceeding
-4. **Assign Migration Owner**: Designate clear owner for future migration reviews
-5. **Create Review Checklist**: Define lightweight checklist (SQL duplication, atomicity, error handling) to prevent recurrence
-
-## Dependencies
-
-- Migration service architecture
-- Database service implementations
-- Testing infrastructure
-- Documentation system
-- Seed datasets or controlled test states for reproducible validation
-- Snapshot/restore utilities for rollback testing
-
-## Lessons Learned
-
-**Process Improvement Note**: This migration complexity highlights the importance of closer review and consolidation of AI-generated code. Uncontrolled proliferation of generated logic leads to fragmentation, review fatigue, and system instability. Future development should prioritize:
-
-- Single source of truth for all critical logic
-- Atomic operations over complex multi-step processes  
-- Regular consolidation and simplification of generated code
-- Clear ownership and review processes for migration logic
-
----
-
-*This document will be updated as the implementation progresses and new insights are gained.*

doc/verification-party-system-plan.md

@@ -1,375 +0,0 @@
-# TimeSafari Identity Verification Party System Plan
-
-## Objectives
-
-* Maintain strict conformity with TimeSafari's existing **DID, contact, and identity management**.
-* Ensure **offline-first reliability** with background sync and retry logic.
-* Provide **minimal, mobile-first UX** with single-tap core actions and QR-driven flows.
-
-## Architecture
-
-* Use a **single atomic migration** (`005_verification_party_system.sql`) following `registerMigration()` + `MIGRATIONS` array pattern.
-* Standardize timestamps (`dateCreated`, `dateVerified`) in **ISO-8601 UTC**.
-* Add `verification_session_logs` for audit trail and debugging.
-
-## Workflow
-
-* **Pre-Party**: Enforce RSVP via DID signing challenge; cache DID QR locally.
-* **In-Party**: Dual-mode verification (Fast Scan + Deep Verify) with **trust presets**.
-* **Post-Party**: Queue verifications for delayed sync; issue signed receipts; auto-create verified contacts.
-
-## Services
-
-* `VerificationPartyService`: Monolithic class aligned with existing service pattern.
-* `DidVerificationService`: Pluggable methods (QR, NFC, manual, photo ID).
-* `TrustNetworkService`: Add caching + **trust decay** unless renewed.
-
-## Security
-
-* Store **hashes of evidence** only (not raw PII).
-* Encrypt data with **per-user derived keys**.
-* Provide **per-verification sharing controls** (private, party-only, global).
-
-## UI/UX
-
-* Single-tap flows for RSVP, scan, verify.
-* Embed **trust level criteria** in UI to reduce inconsistency.
-* Optimize QR scanning and trust graph for **battery savings**.
-* Follow existing **i18n service** for multi-language support.
-
-## Priorities
-
-1. Migration + offline queue
-2. Dual-mode verification UI
-3. Trust graph caching + decay
-4. Privacy-hardened evidence handling
-5. Notification constants + helper integration
-
----
-
-## Database Schema
-
-### Migration 005: Verification Party System
-Add to `src/db-sql/migration.ts` in the `MIGRATIONS` array:
-
-```typescript
-{
-  name: "005_verification_party_system",
-  sql: `
-    -- Migration 005: verification_party_system
-    -- Adds identity verification party functionality
-    
-    -- Enable foreign key constraints for data integrity
-    PRAGMA foreign_keys = ON;
-    
-    -- Create verification_parties table
-    CREATE TABLE IF NOT EXISTS verification_parties (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT UNIQUE NOT NULL,
-      organizerDid TEXT NOT NULL,
-      name TEXT NOT NULL,
-      description TEXT,
-      location TEXT,
-      scheduledDate TEXT,
-      maxParticipants INTEGER DEFAULT 50,
-      status TEXT DEFAULT 'planned',
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (organizerDid) REFERENCES accounts(did)
-    );
-    
-    -- Create party_participants table
-    CREATE TABLE IF NOT EXISTS party_participants (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT NOT NULL,
-      participantDid TEXT NOT NULL,
-      status TEXT DEFAULT 'invited',
-      verificationCount INTEGER DEFAULT 0,
-      rsvpDate TEXT,
-      checkInDate TEXT,
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId),
-      FOREIGN KEY (participantDid) REFERENCES accounts(did)
-    );
-    
-    -- Create did_verifications table
-    CREATE TABLE IF NOT EXISTS did_verifications (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      verifierDid TEXT NOT NULL,
-      verifiedDid TEXT NOT NULL,
-      partyId TEXT,
-      verificationMethod TEXT,
-      verificationNotes TEXT,
-      verificationLevel INTEGER DEFAULT 1,
-      verificationEvidenceHash TEXT,
-      dateVerified TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (verifierDid) REFERENCES accounts(did),
-      FOREIGN KEY (verifiedDid) REFERENCES accounts(did),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId)
-    );
-    
-    -- Create verification_session_logs table
-    CREATE TABLE IF NOT EXISTS verification_session_logs (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT NOT NULL,
-      sessionAction TEXT NOT NULL,
-      participantDid TEXT,
-      actionData TEXT,
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId),
-      FOREIGN KEY (participantDid) REFERENCES accounts(did)
-    );
-    
-    -- Create indexes for performance
-    CREATE INDEX IF NOT EXISTS idx_verification_parties_organizer ON verification_parties(organizerDid);
-    CREATE INDEX IF NOT EXISTS idx_verification_parties_status ON verification_parties(status);
-    CREATE INDEX IF NOT EXISTS idx_party_participants_party ON party_participants(partyId);
-    CREATE INDEX IF NOT EXISTS idx_party_participants_did ON party_participants(participantDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_verifier ON did_verifications(verifierDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_verified ON did_verifications(verifiedDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_party ON did_verifications(partyId);
-    CREATE INDEX IF NOT EXISTS idx_session_logs_party ON verification_session_logs(partyId);
-  `
-}
-```
-
----
-
-## TypeScript Interfaces
-
-### Required Interface Definitions
-Add to `src/interfaces/verification-party.ts`:
-
-```typescript
-/**
- * Verification Party entity interface
- */
-export interface VerificationParty {
-  id: number;
-  partyId: string;
-  organizerDid: string;
-  name: string;
-  description?: string;
-  location?: string;
-  scheduledDate?: string;
-  maxParticipants: number;
-  status: 'planned' | 'active' | 'completed' | 'cancelled';
-  dateCreated: string;
-}
-
-/**
- * Party Participant entity interface
- */
-export interface PartyParticipant {
-  id: number;
-  partyId: string;
-  participantDid: string;
-  status: 'invited' | 'confirmed' | 'attended' | 'verified';
-  verificationCount: number;
-  rsvpDate?: string;
-  checkInDate?: string;
-  dateCreated: string;
-}
-
-/**
- * DID Verification entity interface
- */
-export interface DidVerification {
-  id: number;
-  verifierDid: string;
-  verifiedDid: string;
-  partyId?: string;
-  verificationMethod: 'qr_scan' | 'manual_entry' | 'photo_id' | 'nfc';
-  verificationNotes?: string;
-  verificationLevel: number; // 1-5 trust level
-  verificationEvidenceHash?: string; // Hash of verification evidence
-  dateVerified: string;
-}
-
-/**
- * Verification Session Log entity interface
- */
-export interface VerificationSessionLog {
-  id: number;
-  partyId: string;
-  sessionAction: 'party_started' | 'participant_joined' | 'verification_completed' | 'sync_attempted';
-  participantDid?: string;
-  actionData?: string; // JSON blob of action-specific data
-  dateCreated: string;
-}
-```
-
----
-
-## PlatformServiceMixin Integration
-
-### Required Methods
-Add to `PlatformServiceMixin`:
-
-```typescript
-// Add to PlatformServiceMixin methods
-async $insertVerificationParty(party: Partial<VerificationParty>): Promise<boolean> {
-  return this.$insertEntity('verification_parties', party, [
-    'partyId', 'organizerDid', 'name', 'description', 'location', 
-    'scheduledDate', 'maxParticipants', 'status', 'dateCreated'
-  ]);
-}
-
-async $insertPartyParticipant(participant: Partial<PartyParticipant>): Promise<boolean> {
-  return this.$insertEntity('party_participants', participant, [
-    'partyId', 'participantDid', 'status', 'verificationCount',
-    'rsvpDate', 'checkInDate', 'dateCreated'
-  ]);
-}
-
-async $insertDidVerification(verification: Partial<DidVerification>): Promise<boolean> {
-  return this.$insertEntity('did_verifications', verification, [
-    'verifierDid', 'verifiedDid', 'partyId', 'verificationMethod',
-    'verificationNotes', 'verificationLevel', 'verificationEvidenceHash', 'dateVerified'
-  ]);
-}
-
-async $getVerificationParties(): Promise<VerificationParty[]> {
-  const results = await this.$dbQuery('SELECT * FROM verification_parties ORDER BY dateCreated DESC');
-  return this.$mapResults(results, (row) => ({
-    id: row[0] as number,
-    partyId: row[1] as string,
-    organizerDid: row[2] as string,
-    name: row[3] as string,
-    description: row[4] as string,
-    location: row[5] as string,
-    scheduledDate: row[6] as string,
-    maxParticipants: row[7] as number,
-    status: row[8] as VerificationParty['status'],
-    dateCreated: row[9] as string,
-  }));
-}
-
-async $getPartyParticipants(partyId: string): Promise<PartyParticipant[]> {
-  const results = await this.$dbQuery(
-    'SELECT * FROM party_participants WHERE partyId = ? ORDER BY dateCreated DESC',
-    [partyId]
-  );
-  return this.$mapResults(results, (row) => ({
-    id: row[0] as number,
-    partyId: row[1] as string,
-    participantDid: row[2] as string,
-    status: row[3] as PartyParticipant['status'],
-    verificationCount: row[4] as number,
-    rsvpDate: row[5] as string,
-    checkInDate: row[6] as string,
-    dateCreated: row[7] as string,
-  }));
-}
-```
-
----
-
-## Notification Constants
-
-### Required Notification Constants
-Add to `src/constants/notifications.ts`:
-
-```typescript
-// Used in: VerificationPartyCreateView.vue (createParty method)
-export const NOTIFY_PARTY_CREATED = {
-  title: "Verification Party Created",
-  message: "Your verification party has been created successfully."
-};
-
-// Used in: VerificationPartyJoinView.vue (joinParty method)
-export const NOTIFY_PARTY_JOINED = {
-  title: "Party Joined",
-  message: "You have successfully joined the verification party."
-};
-
-// Used in: VerificationPartyActiveView.vue (submitManualVerification method)
-export const NOTIFY_VERIFICATION_COMPLETED = {
-  title: "Identity Verified",
-  message: "You have successfully verified this person's identity."
-};
-
-// Used in: VerificationPartyService.ts (syncVerifications method)
-export const NOTIFY_VERIFICATION_SYNCED = {
-  title: "Verifications Synced",
-  message: "Your verification data has been synchronized successfully."
-};
-
-// Used in: VerificationPartyActiveView.vue (error handling)
-export const NOTIFY_VERIFICATION_FAILED = {
-  title: "Verification Failed",
-  message: "There was an error completing the verification. Please try again."
-};
-```
-
-### Notification Helper Integration
-Use existing `createNotifyHelpers()` pattern in components:
-
-```typescript
-// In VerificationPartyCreateView.vue
-const { success, error } = createNotifyHelpers(this.$notify);
-
-// Usage
-success("Party created successfully!");
-error("Failed to create party. Please try again.");
-```
-
----
-
-## Component Implementation Pattern
-
-### VerificationPartyCreateView.vue Structure
-```typescript
-@Component({
-  name: "VerificationPartyCreateView",
-  components: {
-    QuickNav,
-    TopMessage,
-    EntityIcon,
-  },
-  mixins: [PlatformServiceMixin],
-})
-export default class VerificationPartyCreateView extends Vue {
-  // Use PlatformServiceMixin methods
-  async createParty(): Promise<void> {
-    const partyData: Partial<VerificationParty> = {
-      partyId: `party_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-      organizerDid: (await this.$getActiveIdentity()).activeDid,
-      name: this.partyForm.name,
-      description: this.partyForm.description,
-      location: this.partyForm.location,
-      scheduledDate: this.partyForm.scheduledDate,
-      maxParticipants: this.partyForm.maxParticipants,
-      status: 'planned',
-      dateCreated: new Date().toISOString(),
-    };
-    
-    const success = await this.$insertVerificationParty(partyData);
-    if (success) {
-      this.$notify(NOTIFY_PARTY_CREATED);
-      this.$router.push(`/verification-party/${partyData.partyId}`);
-    } else {
-      this.$notify(NOTIFY_VERIFICATION_FAILED);
-    }
-  }
-}
-```
-
----
-
-## Architecture Conformity Checklist
-
-### ✅ **100% CONFORMANT PATTERNS**
-- **Migration Structure**: ✅ Follows existing `registerMigration()` and `MIGRATIONS` array pattern
-- **Database Schema**: ✅ Uses `INTEGER PRIMARY KEY AUTOINCREMENT` and `camelCase` field naming
-- **Component Architecture**: ✅ Integrates `@Component` decorator and `PlatformServiceMixin`
-- **Service Pattern**: ✅ Single monolithic service class following TimeSafari conventions
-- **Notification System**: ✅ Uses existing `NOTIFY_*` constants and `createNotifyHelpers()`
-- **UI Components**: ✅ Leverages existing `QuickNav`, `TopMessage`, `EntityIcon` components
-- **TypeScript Interfaces**: ✅ Proper interface definitions following existing patterns
-- **PlatformServiceMixin Integration**: ✅ Uses existing `$insertEntity()` and `$mapResults()` methods
-- **Database Operations**: ✅ Follows existing `$dbQuery()`, `$dbExec()` patterns
-- **Error Handling**: ✅ Uses existing logger and error handling patterns
-
-### 📊 **FINAL CONFORMITY SCORE: 100%**
-
-The verification party system plan now achieves complete conformity with TimeSafari's existing architecture patterns, naming conventions, and integration approaches.

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
     
     <!-- CORS headers removed to allow images from any domain -->
     
@@ -13,4 +13,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>

package-lock.json

@@ -27,6 +27,7 @@
         "@ethersproject/hdnode": "^5.7.0",
         "@ethersproject/wallet": "^5.8.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/vue-fontawesome": "^3.0.6",
         "@jlongster/sql.js": "^1.6.7",
@@ -90,6 +91,7 @@
         "vue": "3.5.13",
         "vue-axios": "^3.5.2",
         "vue-facing-decorator": "3.0.4",
+        "vue-markdown-render": "^2.2.1",
         "vue-picture-cropper": "^0.7.0",
         "vue-qrcode-reader": "^5.5.3",
         "vue-router": "^4.5.0",
@@ -106,6 +108,7 @@
         "@types/js-yaml": "^4.0.9",
         "@types/leaflet": "^1.9.8",
         "@types/luxon": "^3.4.2",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^20.14.11",
         "@types/node-fetch": "^2.6.12",
         "@types/ramda": "^0.29.11",
@@ -6786,6 +6789,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
@@ -10147,6 +10161,12 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true
+    },
     "node_modules/@types/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
@@ -10154,6 +10174,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -32883,6 +32919,61 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-markdown-render": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
+      "integrity": "sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==",
+      "dependencies": {
+        "markdown-it": "^13.0.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
+    "node_modules/vue-markdown-render/node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/vue-picture-cropper": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/vue-picture-cropper/-/vue-picture-cropper-0.7.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"
@@ -106,7 +106,7 @@
     "guard": "bash ./scripts/build-arch-guard.sh",
     "guard:test": "bash ./scripts/build-arch-guard.sh --staged",
     "guard:setup": "npm run prepare && echo '✅ Build Architecture Guard is now active!'",
-    "clean:android": "./scripts/clean-android.sh",
+    "clean:android": "./scripts/uninstall-android.sh",
     "clean:ios": "rm -rf ios/App/build ios/App/Pods ios/App/output ios/App/App/public ios/DerivedData ios/capacitor-cordova-ios-plugins ios/App/App/capacitor.config.json ios/App/App/config.xml || true",
     "clean:electron": "./scripts/build-electron.sh --clean",
     "clean:all": "npm run clean:ios && npm run clean:android && npm run clean:electron",
@@ -136,7 +136,6 @@
     "*.{js,ts,vue,css,json,yml,yaml}": "eslint --fix || true",
     "*.{md,markdown,mdc}": "markdownlint-cli2 --fix"
   },
-
   "dependencies": {
     "@capacitor-community/electron": "^5.0.1",
     "@capacitor-community/sqlite": "6.0.2",
@@ -157,6 +156,7 @@
     "@ethersproject/hdnode": "^5.7.0",
     "@ethersproject/wallet": "^5.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@jlongster/sql.js": "^1.6.7",
@@ -220,6 +220,7 @@
     "vue": "3.5.13",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "3.0.4",
+    "vue-markdown-render": "^2.2.1",
     "vue-picture-cropper": "^0.7.0",
     "vue-qrcode-reader": "^5.5.3",
     "vue-router": "^4.5.0",
@@ -236,6 +237,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.8",
     "@types/luxon": "^3.4.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.11",
     "@types/node-fetch": "^2.6.12",
     "@types/ramda": "^0.29.11",

scripts/build-android.sh

@@ -22,6 +22,7 @@
 #   --sync                  Sync Capacitor only
 #   --assets                Generate assets only
 #   --deploy                Deploy APK to connected device
+#   --uninstall             Uninstall app from connected device
 #   -h, --help             Show this help message
 #   -v, --verbose          Enable verbose logging
 #
@@ -196,6 +197,7 @@ SYNC_ONLY=false
 ASSETS_ONLY=false
 DEPLOY_APP=false
 AUTO_RUN=false
+UNINSTALL=false
 CUSTOM_API_IP=""
 
 # Function to parse Android-specific arguments
@@ -246,6 +248,9 @@ parse_android_args() {
             --auto-run)
                 AUTO_RUN=true
                 ;;
+            --uninstall)
+                UNINSTALL=true
+                ;;
             --api-ip)
                 if [ $((i + 1)) -lt ${#args[@]} ]; then
                     CUSTOM_API_IP="${args[$((i + 1))]}"
@@ -291,6 +296,7 @@ print_android_usage() {
     echo "  --assets                Generate assets only"
     echo "  --deploy                Deploy APK to connected device"
     echo "  --auto-run              Auto-run app after build"
+    echo "  --uninstall             Uninstall app from connected device"
     echo "  --api-ip <ip>          Custom IP address for claim API (defaults to 10.0.2.2)"
     echo ""
     echo "Common Options:"
@@ -305,6 +311,7 @@ print_android_usage() {
     echo "  $0 --clean             # Clean only"
     echo "  $0 --sync              # Sync only"
     echo "  $0 --deploy            # Build and deploy to device"
+    echo "  $0 --uninstall         # Uninstall app from device"
     echo "  $0 --dev                    # Dev build with default 10.0.2.2"
     echo "  $0 --dev --api-ip 192.168.1.100  # Dev build with custom API IP"
     echo ""
@@ -351,8 +358,18 @@ fi
 # Setup application directories
 setup_app_directories
 
-# Load environment from .env file if it exists
+# Load environment-specific .env file if it exists
-load_env_file ".env"
+env_file=".env.$BUILD_MODE"
+if [ -f "$env_file" ]; then
+    load_env_file "$env_file"
+else
+    log_debug "No $env_file file found, using default environment"
+fi
+
+# Load .env file if it exists (fallback)
+if [ -f ".env" ]; then
+    load_env_file ".env"
+fi
 
 # Handle clean-only mode
 if [ "$CLEAN_ONLY" = true ]; then
@@ -407,8 +424,13 @@ safe_execute "Validating asset configuration" "npm run assets:validate" || {
     log_info "If you encounter build failures, please run 'npm install' first to ensure all dependencies are available."
 }
 
-# Step 2: Clean Android app
+# Step 2: Uninstall Android app
-safe_execute "Cleaning Android app" "npm run clean:android" || exit 1
+if [ "$UNINSTALL" = true ]; then
+    log_info "Uninstall: uninstalling app from device"
+    safe_execute "Uninstalling Android app" "./scripts/uninstall-android.sh" || exit 1
+    log_success "Uninstall completed successfully!"
+    exit 0
+fi
 
 # Step 3: Clean dist directory
 log_info "Cleaning dist directory..."

scripts/build-electron.sh

@@ -341,7 +341,19 @@ main_electron_build() {
     # Setup environment
     setup_build_env "electron" "$BUILD_MODE"
     setup_app_directories
-    load_env_file ".env"
+    
+    # Load environment-specific .env file if it exists
+    env_file=".env.$BUILD_MODE"
+    if [ -f "$env_file" ]; then
+        load_env_file "$env_file"
+    else
+        log_debug "No $env_file file found, using default environment"
+    fi
+    
+    # Load .env file if it exists (fallback)
+    if [ -f ".env" ]; then
+        load_env_file ".env"
+    fi
     
     # Step 1: Clean Electron build artifacts
     clean_electron_artifacts

scripts/build-ios.sh

@@ -324,8 +324,18 @@ fi
 # Setup application directories
 setup_app_directories
 
-# Load environment from .env file if it exists
+# Load environment-specific .env file if it exists
-load_env_file ".env"
+env_file=".env.$BUILD_MODE"
+if [ -f "$env_file" ]; then
+    load_env_file "$env_file"
+else
+    log_debug "No $env_file file found, using default environment"
+fi
+
+# Load .env file if it exists (fallback)
+if [ -f ".env" ]; then
+    load_env_file ".env"
+fi
 
 # Validate iOS environment
 validate_ios_environment

scripts/uninstall-android.sh

@@ -1,8 +1,8 @@
 #!/bin/bash
-# clean-android.sh
+# uninstall-android.sh
 # Author: Matthew Raymer
 # Date: 2025-08-19
-# Description: Clean Android app with timeout protection to prevent hanging
+# Description: Uninstall Android app with timeout protection to prevent hanging
 # This script safely uninstalls the TimeSafari app from connected Android devices
 # with a 30-second timeout to prevent indefinite hanging.
 

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 {
@@ -22,4 +40,24 @@
 	.dialog {
 		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
+
+	/* Markdown content styling to restore list elements */
+	.markdown-content ul {
+		@apply list-disc list-inside ml-4;
+	}
+
+	.markdown-content ol {
+		@apply list-decimal list-inside ml-4;
+	}
+
+	.markdown-content li {
+		@apply mb-1;
+	}
+
+	.markdown-content ul ul,
+	.markdown-content ol ol,
+	.markdown-content ul ol,
+	.markdown-content ol ul {
+		@apply ml-4 mt-1;
+	}
 }

src/components/ActivityListItem.vue

@@ -78,9 +78,15 @@
       </div>
 
       <!-- Description -->
-      <p class="font-medium">
+      <p class="font-medium overflow-hidden">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+        <a
-          {{ description }}
+          class="block cursor-pointer overflow-hidden text-ellipsis"
+          @click="emitLoadClaim(record.jwtId)"
+        >
+          <vue-markdown
+            :source="truncatedDescription"
+            class="markdown-content"
+          />
         </a>
       </p>
 
@@ -258,11 +264,13 @@ import {
   NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
 import { TIMEOUTS } from "@/utils/notify";
+import VueMarkdown from "vue-markdown-render";
 
 @Component({
   components: {
     EntityIcon,
     ProjectIcon,
+    VueMarkdown,
   },
 })
 export default class ActivityListItem extends Vue {
@@ -303,6 +311,14 @@ export default class ActivityListItem extends Vue {
     return `${claim?.description || ""}`;
   }
 
+  get truncatedDescription(): string {
+    const desc = this.description;
+    if (desc.length <= 300) {
+      return desc;
+    }
+    return desc.substring(0, 300) + "...";
+  }
+
   private displayAmount(code: string, amt: number) {
     return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
   }

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/DataExportSection.vue

@@ -18,7 +18,7 @@ messages * - Conditional UI based on platform capabilities * * @component *
     >
       <!-- Notification dot - show while the user has not yet backed up their seed phrase -->
       <font-awesome
-        v-if="!hasBackedUpSeed"
+        v-if="showRedNotificationDot"
         icon="circle"
         class="absolute -right-[8px] -top-[8px] text-rose-500 text-[14px] border border-white rounded-full"
       ></font-awesome>
@@ -108,7 +108,7 @@ export default class DataExportSection extends Vue {
    * Flag indicating if the user has backed up their seed phrase
    * Used to control the visibility of the notification dot
    */
-  hasBackedUpSeed = false;
+  showRedNotificationDot = false;
 
   /**
    * Notification helper for consistent notification patterns
@@ -240,11 +240,12 @@ export default class DataExportSection extends Vue {
   private async loadSeedBackupStatus(): Promise<void> {
     try {
       const settings = await this.$accountSettings();
-      this.hasBackedUpSeed = !!settings.hasBackedUpSeed;
+      this.showRedNotificationDot =
+        !!settings.isRegistered && !settings.hasBackedUpSeed;
     } catch (err: unknown) {
       logger.error("Failed to load seed backup status:", err);
       // Default to false (show notification dot) if we can't load the setting
-      this.hasBackedUpSeed = false;
+      this.showRedNotificationDot = false;
     }
   }
 }

src/components/ImageMethodDialog.vue

@@ -293,7 +293,7 @@ const inputImageFileNameRef = ref<Blob>();
 export default class ImageMethodDialog extends Vue {
   $notify!: NotifyFunction;
   $router!: Router;
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /** Active DID for user authentication */
   activeDid = "";
@@ -498,6 +498,9 @@ export default class ImageMethodDialog extends Vue {
    * @throws {Error} When settings retrieval fails
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       // Get activeDid from active_identity table (single source of truth)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/TopMessage.vue

@@ -1,16 +1,9 @@
 <template>
   <div
-    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+    v-if="message"
+    class="-mt-6 bg-rose-100 border border-t-0 border-dashed border-rose-600 text-rose-900 text-sm text-center font-semibold rounded-b-md px-3 py-2 mb-3"
   >
-    <span class="align-center text-red-500 mr-2">{{ message }}</span>
+    {{ message }}
-    <span class="ml-2">
-      <router-link
-        :to="{ name: 'help' }"
-        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
-      >
-        Help
-      </router-link>
-    </span>
   </div>
 </template>
 
@@ -27,8 +20,8 @@ import { logger } from "../utils/logger";
 })
 export default class TopMessage extends Vue {
   // Enhanced PlatformServiceMixin v4.0 provides:
-  // - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
+  // - Cached database operations: this.$contacts(), this.$accountSettings()
-  // - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
+  // - Settings shortcuts: this.$saveSettings()
   // - Cache management: this.$refreshSettings(), this.$clearAllCaches()
   // - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()
   // - All methods use smart caching with TTL for massive performance gains

src/components/UsageLimitsSection.vue

@@ -8,7 +8,7 @@
     <!-- show spinner if loading limits -->
     <div
       v-if="loadingLimits"
-      class="text-center"
+      class="text-slate-500 text-center italic mb-4"
       role="status"
       aria-live="polite"
     >
@@ -19,7 +19,10 @@
         aria-hidden="true"
       ></font-awesome>
     </div>
-    <div class="mb-4 text-center">
+    <div
+      v-if="limitsMessage"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
       {{ limitsMessage }}
     </div>
     <div v-if="endorserLimits">

src/constants/accountView.ts

@@ -86,7 +86,7 @@ export const ACCOUNT_VIEW_CONSTANTS = {
     CANNOT_UPLOAD_IMAGES: "You cannot upload images.",
     BAD_SERVER_RESPONSE: "Bad server response.",
     ERROR_RETRIEVING_LIMITS:
-      "No limits were found, so no actions are allowed. You will need to get registered.",
+      "No limits were found, so no actions are allowed. You need to get registered.",
   },
 
   // Project assignment errors

src/db-sql/migration.ts

@@ -68,13 +68,21 @@ const MIG_004_SQL = `
   WHERE id = 1 
   AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
   
+  -- Copy important settings that were set in the MASTER_SETTINGS_KEY to the main identity.
+  -- (We're not doing them all because some were already identity-specific and others aren't as critical.)
+  UPDATE settings
+  SET lastViewedClaimId = (SELECT lastViewedClaimId FROM settings WHERE id = 1),
+      profileImageUrl = (SELECT profileImageUrl FROM settings WHERE id = 1),
+      showShortcutBvc = (SELECT showShortcutBvc FROM settings WHERE id = 1),
+      warnIfProdServer = (SELECT warnIfProdServer FROM settings WHERE id = 1),
+      warnIfTestServer = (SELECT warnIfTestServer FROM settings WHERE id = 1)
+  WHERE id = 2;
+
   -- CLEANUP: Remove orphaned settings records and clear legacy activeDid values
+  -- which usually simply deletes the MASTER_SETTINGS_KEY record.
   -- This completes the migration from settings-based to table-based active identity
-  -- Use guarded operations to prevent accidental data loss
+  DELETE FROM settings WHERE accountDid IS NULL;
-  DELETE FROM settings WHERE accountDid IS NULL AND id != 1;
+  UPDATE settings SET activeDid = NULL;
-  UPDATE settings SET activeDid = NULL WHERE id = 1 AND EXISTS (
-    SELECT 1 FROM active_identity WHERE id = 1 AND activeDid IS NOT NULL
-  );
 `;
 
 // Each migration can include multiple SQL statements (with semicolons)
@@ -184,6 +192,13 @@ const MIGRATIONS = [
     name: "004_active_identity_management",
     sql: MIG_004_SQL,
   },
+  {
+    name: "005_add_starredPlanHandleIds_to_settings",
+    sql: `
+      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
+      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
+    `,
+  },
 ];
 
 /**

src/db/databaseUtil.ts

@@ -9,34 +9,6 @@ import { logger } from "@/utils/logger";
 import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 import { QueryExecResult } from "@/interfaces/database";
 
-export async function updateDefaultSettings(
-  settingsChanges: Settings,
-): Promise<boolean> {
-  delete settingsChanges.accountDid; // just in case
-  // ensure there is no "id" that would override the key
-  delete settingsChanges.id;
-  try {
-    const platformService = PlatformServiceFactory.getInstance();
-    const { sql, params } = generateUpdateStatement(
-      settingsChanges,
-      "settings",
-      "id = ?",
-      [MASTER_SETTINGS_KEY],
-    );
-    const result = await platformService.dbExec(sql, params);
-    return result.changes === 1;
-  } catch (error) {
-    logger.error("Error updating default settings:", error);
-    if (error instanceof Error) {
-      throw error; // Re-throw if it's already an Error with a message
-    } else {
-      throw new Error(
-        `Failed to update settings. We recommend you try again or restart the app.`,
-      );
-    }
-  }
-}
-
 export async function insertDidSpecificSettings(
   did: string,
   settings: Partial<Settings> = {},
@@ -91,6 +63,7 @@ export async function updateDidSpecificSettings(
     ? mapColumnsToValues(postUpdateResult.columns, postUpdateResult.values)[0]
     : null;
 
+  // Note that we want to eliminate this check (and fix the above if it doesn't work).
   // Check if any of the target fields were actually changed
   let actuallyUpdated = false;
   if (currentRecord && updatedRecord) {
@@ -157,10 +130,11 @@ export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
       result.columns,
       result.values,
     )[0] as Settings;
-    if (settings.searchBoxes) {
+    settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      // @ts-expect-error - the searchBoxes field is a string in the DB
+    settings.starredPlanHandleIds = parseJsonField(
-      settings.searchBoxes = JSON.parse(settings.searchBoxes);
+      settings.starredPlanHandleIds,
-    }
+      [],
+    );
     return settings;
   }
 }
@@ -226,10 +200,11 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
         );
       }
 
-      // Handle searchBoxes parsing
+      settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      if (settings.searchBoxes) {
+      settings.starredPlanHandleIds = parseJsonField(
-        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+        settings.starredPlanHandleIds,
-      }
+        [],
+      );
 
       return settings;
     } catch (error) {

src/db/tables/settings.ts

@@ -43,6 +43,7 @@ export type Settings = {
 
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
   lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred plan changes that they've acknowledged seeing
 
   // The claim list has a most recent one used in notifications that's separate from the last viewed
   lastNotifiedClaimId?: string;
@@ -67,15 +68,18 @@ export type Settings = {
   showContactGivesInline?: boolean; // Display contact inline or not
   showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
   showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
+
+  starredPlanHandleIds?: string[]; // Array of starred plan handle IDs
   vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
   warnIfProdServer?: boolean; // Warn if using a production server
   warnIfTestServer?: boolean; // Warn if using a testing server
   webPushServer?: string; // Web Push server URL
 };
 
-// type of settings where the searchBoxes are JSON strings instead of objects
+// type of settings where the values are JSON strings instead of objects
 export type SettingsWithJsonStrings = Settings & {
   searchBoxes: string;
+  starredPlanHandleIds: string;
 };
 
 export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
@@ -92,6 +96,11 @@ export const SettingsSchema = {
 /**
  * Constants.
  */
+
+/**
+ * This is deprecated.
+ * It only remains for those with a PWA who have not migrated, but we'll soon remove it.
+ */
 export const MASTER_SETTINGS_KEY = "1";
 
 export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;

src/interfaces/claims.ts

@@ -72,11 +72,15 @@ export interface PlanActionClaim extends ClaimObject {
   name: string;
   agent?: { identifier: string };
   description?: string;
+  endTime?: string;
   identifier?: string;
+  image?: string;
   lastClaimId?: string;
   location?: {
     geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
   };
+  startTime?: string;
+  url?: string;
 }
 
 // AKA Registration & RegisterAction

src/interfaces/records.ts

@@ -1,4 +1,5 @@
-import { GiveActionClaim, OfferClaim } from "./claims";
+import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
+import { GenericCredWrapper } from "./common";
 
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
@@ -61,6 +62,11 @@ export interface PlanSummaryRecord {
   jwtId?: string;
 }
 
+export interface PlanSummaryAndPreviousClaim {
+  plan: PlanSummaryRecord;
+  wrappedClaimBefore: GenericCredWrapper<PlanActionClaim>;
+}
+
 /**
  * Represents data about a project
  *
@@ -87,7 +93,10 @@ export interface PlanData {
   name: string;
   /**
    * The identifier of the project record -- different from jwtId
-   * (Maybe we should use the jwtId to iterate through the records instead.)
+   *
+   * This has been used to iterate through plan records, because jwtId ordering doesn't match
+   * chronological create ordering, though it does match most recent edit order (in reverse order).
+   * (It may be worthwhile to order by jwtId instead. It is an indexed field.)
    **/
   rowId?: string;
 }

src/libs/endorserServer.ts

@@ -56,7 +56,12 @@ import {
   KeyMetaWithPrivate,
   KeyMetaMaybeWithPrivate,
 } from "../interfaces/common";
-import { PlanSummaryRecord } from "../interfaces/records";
+import {
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
+} from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -362,6 +367,22 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+/**
+ * In some contexts (eg. agent), a blank really is nobody.
+ */
+export function didInfoOrNobody(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): string {
+  if (did == null) {
+    return "Nobody";
+  } else {
+    return didInfo(did, activeDid, allMyDids, contacts);
+  }
+}
+
 /**
  * return text description without any references to "you" as user
  */
@@ -730,7 +751,7 @@ export async function getNewOffersToUser(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
   if (afterOfferJwtId) {
     url += "&afterId=" + afterOfferJwtId;
@@ -752,7 +773,7 @@ export async function getNewOffersToUserProjects(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferToPlanSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
   if (afterOfferJwtId) {
     url += "?afterId=" + afterOfferJwtId;
@@ -766,6 +787,46 @@ export async function getNewOffersToUserProjects(
   return response.data;
 }
 
+/**
+ * Get starred projects that have been updated since the last check
+ *
+ * @param axios - axios instance
+ * @param apiServer - endorser API server URL
+ * @param activeDid - user's DID for authentication
+ * @param starredPlanHandleIds - array of starred project handle IDs
+ * @param afterId - JWT ID to check for changes after (from lastAckedStarredPlanChangesJwtId)
+ * @returns { data: Array<PlanSummaryAndPreviousClaim>, hitLimit: boolean }
+ */
+export async function getStarredProjectsWithChanges(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  starredPlanHandleIds: string[],
+  afterId?: string,
+): Promise<{ data: Array<PlanSummaryAndPreviousClaim>; hitLimit: boolean }> {
+  if (!starredPlanHandleIds || starredPlanHandleIds.length === 0) {
+    return { data: [], hitLimit: false };
+  }
+
+  if (!afterId) {
+    // This doesn't make sense: there should always be some previous one they've seen.
+    // We'll just return blank.
+    return { data: [], hitLimit: false };
+  }
+
+  // Use POST method for larger lists of project IDs
+  const url = `${apiServer}/api/v2/report/plansLastUpdatedBetween`;
+  const headers = await getHeaders(activeDid);
+
+  const requestBody = {
+    planIds: starredPlanHandleIds,
+    afterId: afterId,
+  };
+
+  const response = await axios.post(url, requestBody, { headers });
+  return response.data;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *
@@ -1697,49 +1758,19 @@ export async function fetchEndorserRateLimits(
     timestamp: new Date().toISOString(),
   });
 
-  try {
+  // not wrapped in a 'try' because the error returned is self-explanatory
-    const response = await axios.get(url, { headers } as AxiosRequestConfig);
+  const response = await axios.get(url, { headers } as AxiosRequestConfig);
 
-    // Log successful registration check
+  // Log successful registration check
-    logger.debug("[User Registration] User registration check successful:", {
+  logger.debug("[User Registration] User registration check successful:", {
-      did: issuerDid,
+    did: issuerDid,
-      server: apiServer,
+    server: apiServer,
-      status: response.status,
+    status: response.status,
-      isRegistered: true,
+    isRegistered: true,
-      timestamp: new Date().toISOString(),
+    timestamp: new Date().toISOString(),
-    });
+  });
 
-    return response;
+  return response;
-  } catch (error) {
-    // Enhanced error logging with user registration context
-    const axiosError = error as {
-      response?: {
-        data?: { error?: { code?: string; message?: string } };
-        status?: number;
-      };
-    };
-    const errorCode = axiosError.response?.data?.error?.code;
-    const errorMessage = axiosError.response?.data?.error?.message;
-    const httpStatus = axiosError.response?.status;
-
-    logger.warn("[User Registration] User not registered on server:", {
-      did: issuerDid,
-      server: apiServer,
-      errorCode: errorCode,
-      errorMessage: errorMessage,
-      httpStatus: httpStatus,
-      needsRegistration: true,
-      timestamp: new Date().toISOString(),
-    });
-
-    // Log the original error for debugging
-    logger.error(
-      `[fetchEndorserRateLimits] Error for DID ${issuerDid}:`,
-      errorStringForLog(error),
-    );
-
-    throw error;
-  }
 }
 
 /**
@@ -1788,14 +1819,17 @@ export async function fetchImageRateLimits(
       };
     };
 
-    logger.error("[Image Server] Image rate limits check failed:", {
+    logger.warn(
-      did: issuerDid,
+      "[Image Server] Image rate limits check failed, which is expected for users not registered on test server (eg. when only registered on local server).",
-      server: server,
+      {
-      errorCode: axiosError.response?.data?.error?.code,
+        did: issuerDid,
-      errorMessage: axiosError.response?.data?.error?.message,
+        server: server,
-      httpStatus: axiosError.response?.status,
+        errorCode: axiosError.response?.data?.error?.code,
-      timestamp: new Date().toISOString(),
+        errorMessage: axiosError.response?.data?.error?.message,
-    });
+        httpStatus: axiosError.response?.status,
+        timestamp: new Date().toISOString(),
+      },
+    );
     return null;
   }
 }

src/libs/fontawesome.ts

@@ -86,6 +86,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
   faThumbtack,
   faTrashCan,
   faTriangleExclamation,
@@ -94,6 +95,9 @@ import {
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 
+// these are referenced differently, eg. ":icon='['far', 'star']'" as in ProjectViewView.vue
+import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+
 // Initialize Font Awesome library with all required icons
 library.add(
   faArrowDown,
@@ -168,14 +172,16 @@ library.add(
   faPlus,
   faQrcode,
   faQuestion,
-  faRotate,
   faRightFromBracket,
+  faRotate,
   faShareNodes,
   faSpinner,
   faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
+  faStarRegular,
   faThumbtack,
   faTrashCan,
   faTriangleExclamation,

src/router/index.ts

@@ -285,6 +285,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "user-profile",
     component: () => import("../views/UserProfileView.vue"),
   },
+  // Catch-all route for 404 errors - must be last
+  {
+    path: "/:pathMatch(.*)*",
+    name: "not-found",
+    component: () => import("../views/NotFoundView.vue"),
+    meta: {
+      title: "Page Not Found",
+      requiresAuth: false,
+    },
+  },
 ];
 
 const isElectron = window.location.protocol === "file:";

src/services/api.ts

@@ -19,7 +19,6 @@ import { logger, safeStringify } from "../utils/logger";
  * @remarks
  * Special handling includes:
  * - Enhanced logging for Capacitor platform
- * - Rate limit detection and handling
  * - Detailed error information logging including:
  *   - Error message
  *   - HTTP status
@@ -50,11 +49,5 @@ export const handleApiError = (error: AxiosError, endpoint: string) => {
     });
   }
 
-  // Specific handling for rate limits
-  if (error.response?.status === 400) {
-    logger.warn(`[Rate Limit] ${endpoint}`);
-    return null;
-  }
-
   throw error;
 };

src/services/migrationService.ts

@@ -799,7 +799,7 @@ export async function runMigrations<T>(
     }
 
     // Only show completion message in development
-    logger.debug(
+    logger.log(
       `🎉 [Migration] Migration process complete! Summary: ${appliedCount} applied, ${skippedCount} skipped`,
     );
   } catch (error) {

src/test/PlatformServiceMixinTest.vue

@@ -85,7 +85,6 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 @Component({
   mixins: [PlatformServiceMixin],
@@ -197,10 +196,10 @@ This tests the helper method only - no database interaction`;
       const success = await this.$saveSettings(testSettings);
 
       if (success) {
-        // Now query the raw database to see how it's actually stored
+        // Now query the raw database to see how it's actually stored.
+        // Note that new users probably have settings with ID of 1 but old migrated users might skip to 2.
         const rawResult = await this.$dbQuery(
-          "SELECT searchBoxes FROM settings WHERE id = ?",
+          "SELECT searchBoxes FROM settings limit 1",
-          [MASTER_SETTINGS_KEY],
         );
 
         if (rawResult?.values?.length) {

src/utils/PlatformServiceMixin.ts

@@ -301,7 +301,11 @@ export const PlatformServiceMixin = {
           }
 
           // Convert SQLite JSON strings to objects/arrays
-          if (column === "contactMethods" || column === "searchBoxes") {
+          if (
+            column === "contactMethods" ||
+            column === "searchBoxes" ||
+            column === "starredPlanHandleIds"
+          ) {
             value = this._parseJsonField(value, []);
           }
 
@@ -349,6 +353,14 @@ export const PlatformServiceMixin = {
           ? JSON.stringify(settings.searchBoxes)
           : String(settings.searchBoxes);
       }
+      if (settings.starredPlanHandleIds !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (converted as any).starredPlanHandleIds = Array.isArray(
+          settings.starredPlanHandleIds,
+        )
+          ? JSON.stringify(settings.starredPlanHandleIds)
+          : String(settings.starredPlanHandleIds);
+      }
 
       return converted;
     },
@@ -514,7 +526,7 @@ export const PlatformServiceMixin = {
      * Utility method for retrieving master settings
      * Common pattern used across many components
      */
-    async $getMasterSettings(
+    async _getMasterSettings(
       fallback: Settings | null = null,
     ): Promise<Settings | null> {
       try {
@@ -551,6 +563,12 @@ export const PlatformServiceMixin = {
         if (settings.searchBoxes) {
           settings.searchBoxes = this._parseJsonField(settings.searchBoxes, []);
         }
+        if (settings.starredPlanHandleIds) {
+          settings.starredPlanHandleIds = this._parseJsonField(
+            settings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return settings;
       } catch (error) {
@@ -571,7 +589,7 @@ export const PlatformServiceMixin = {
     ): Promise<Settings> {
       try {
         // Get default settings
-        const defaultSettings = await this.$getMasterSettings(defaultFallback);
+        const defaultSettings = await this._getMasterSettings(defaultFallback);
 
         // If no account DID, return defaults
         if (!accountDid) {
@@ -617,6 +635,12 @@ export const PlatformServiceMixin = {
             [],
           );
         }
+        if (mergedSettings.starredPlanHandleIds) {
+          mergedSettings.starredPlanHandleIds = this._parseJsonField(
+            mergedSettings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return mergedSettings;
       } catch (error) {
@@ -970,7 +994,7 @@ export const PlatformServiceMixin = {
      * @returns Fresh settings object from database
      */
     async $settings(defaults: Settings = {}): Promise<Settings> {
-      const settings = await this.$getMasterSettings(defaults);
+      const settings = await this._getMasterSettings(defaults);
 
       if (!settings) {
         return defaults;
@@ -1003,7 +1027,7 @@ export const PlatformServiceMixin = {
     ): Promise<Settings> {
       try {
         // Get default settings first
-        const defaultSettings = await this.$getMasterSettings(defaults);
+        const defaultSettings = await this._getMasterSettings(defaults);
 
         if (!defaultSettings) {
           return defaults;
@@ -1212,6 +1236,11 @@ export const PlatformServiceMixin = {
      * @param changes Settings changes to save
      * @returns Promise<boolean> Success status
      */
+    /**
+     * Since this is unused, and since it relies on this.activeDid which isn't guaranteed to exist,
+     * let's take this out for the sake of safety.
+     * Totally remove after start of 2026 (since it would be obvious by then that it's not used).
+     *
     async $saveMySettings(changes: Partial<Settings>): Promise<boolean> {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const currentDid = (this as any).activeDid;
@@ -1221,6 +1250,7 @@ export const PlatformServiceMixin = {
       }
       return await this.$saveUserSettings(currentDid, changes);
     },
+    **/
 
     // =================================================
     // CACHE MANAGEMENT METHODS
@@ -1842,7 +1872,7 @@ export const PlatformServiceMixin = {
     async $debugMergedSettings(did: string): Promise<void> {
       try {
         // Get default settings
-        const defaultSettings = await this.$getMasterSettings({});
+        const defaultSettings = await this._getMasterSettings({});
         logger.debug(
           `[PlatformServiceMixin] Default settings:`,
           defaultSettings,
@@ -1892,7 +1922,6 @@ export interface IPlatformServiceMixin {
     params?: unknown[],
   ): Promise<SqlValue[] | undefined>;
   $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-  $getMasterSettings(fallback?: Settings | null): Promise<Settings | null>;
   $getMergedSettings(
     defaultKey: string,
     accountDid?: string,
@@ -2017,7 +2046,6 @@ declare module "@vue/runtime-core" {
       params?: unknown[],
     ): Promise<unknown[] | undefined>;
     $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-    $getMasterSettings(defaults?: Settings | null): Promise<Settings | null>;
     $getMergedSettings(
       key: string,
       did?: string,
@@ -2040,7 +2068,8 @@ declare module "@vue/runtime-core" {
       did: string,
       changes: Partial<Settings>,
     ): Promise<boolean>;
-    $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
+    // @deprecated; see implementation note above
+    // $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
 
     // Cache management methods
     $refreshSettings(): Promise<Settings>;

src/utils/logger.ts

@@ -24,10 +24,28 @@ export function getMemoryLogs(): string[] {
   return [..._memoryLogs];
 }
 
+/**
+ * Stringify an object with proper handling of circular references and functions
+ *
+ * Don't use for arrays; map with this over the array.
+ *
+ * @param obj - The object to stringify
+ * @returns The stringified object, plus 'message' and 'stack' for Error objects
+ */
 export function safeStringify(obj: unknown) {
   const seen = new WeakSet();
 
-  return JSON.stringify(obj, (_key, value) => {
+  // since 'message' & 'stack' are not enumerable for errors, let's add those
+  let objToStringify = obj;
+  if (obj instanceof Error) {
+    objToStringify = {
+      ...obj,
+      message: obj.message,
+      stack: obj.stack,
+    };
+  }
+
+  return JSON.stringify(objToStringify, (_key, value) => {
     if (typeof value === "object" && value !== null) {
       if (seen.has(value)) {
         return "[Circular]";
@@ -178,7 +196,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "info");
   },
 
@@ -189,7 +208,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "info");
   },
 
@@ -200,7 +220,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "warn");
   },
 
@@ -211,9 +232,9 @@ export const logger = {
     }
 
     // Database logging
-    const messageString = safeStringify(message);
+    const argsString =
-    const argsString = args.length > 0 ? safeStringify(args) : "";
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
-    logToDatabase(messageString + argsString, "error");
+    logToDatabase(message + argsString, "error");
   },
 
   // New database-focused methods (self-contained)

src/views/AccountViewView.vue

@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <main
@@ -9,10 +8,22 @@
     role="main"
     aria-label="Account Profile"
   >
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Identity
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-8">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Identity
+      </h1>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- ID notice -->
     <div
@@ -150,8 +161,6 @@
     </section>
     <PushNotificationPermission ref="pushNotificationPermission" />
 
-    <LocationSearchSection :search-box="searchBox" />
-
     <!-- User Profile -->
     <section
       v-if="isRegistered"
@@ -244,6 +253,8 @@
       <div v-else>Saving...</div>
     </section>
 
+    <LocationSearchSection :search-box="searchBox" />
+
     <UsageLimitsSection
       v-if="activeDid"
       :loading-limits="loadingLimits"
@@ -1064,8 +1075,8 @@ export default class AccountViewView extends Vue {
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings?.isRegistered;
-    this.isSearchAreasSet = !!settings.searchBoxes;
+    this.isSearchAreasSet =
-    this.searchBox = settings.searchBoxes?.[0] || null;
+      !!settings.searchBoxes && settings.searchBoxes.length > 0;
     this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
     this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.notifyingReminder = !!settings.notifyingReminderTime;
@@ -1079,6 +1090,7 @@ export default class AccountViewView extends Vue {
     this.passkeyExpirationMinutes =
       settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
     this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
+    this.searchBox = settings.searchBoxes?.[0] || null;
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
     this.showShortcutBvc = !!settings.showShortcutBvc;
     this.warnIfProdServer = !!settings.warnIfProdServer;
@@ -1454,7 +1466,6 @@ export default class AccountViewView extends Vue {
         this.imageLimits = imageResp.data;
       } else {
         this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.CANNOT_UPLOAD_IMAGES);
       }
 
       const endorserResp = await fetchEndorserRateLimits(
@@ -1465,9 +1476,6 @@ export default class AccountViewView extends Vue {
 
       if (endorserResp.status === 200) {
         this.endorserLimits = endorserResp.data;
-      } else {
-        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
       }
     } catch (error) {
       this.limitsMessage =

src/views/ClaimAddRawView.vue

@@ -1,19 +1,27 @@
 <template>
-  <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
         Raw Claim
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex">

src/views/ClaimView.vue

@@ -2,19 +2,27 @@
   <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
         Verifiable Claim Details
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Details -->
@@ -80,16 +88,22 @@
               </button>
             </div>
           </div>
-          <div class="text-sm">
+          <div class="text-sm overflow-hidden">
-            <div data-testId="description">
+            <div
+              data-testId="description"
+              class="overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+              <vue-markdown
+                :source="claimDescription"
+                class="markdown-content"
+              />
             </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 }}
@@ -533,8 +547,10 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
+
 import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -553,7 +569,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";
 
 @Component({
-  components: { GiftedDialog, QuickNav },
+  components: { GiftedDialog, QuickNav, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class ClaimView extends Vue {

src/views/ConfirmContactView.vue

@@ -1,18 +1,27 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
         Confirm Contact
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <p class="text-center text-xl mb-4 font-light">

src/views/ConfirmGiftView.vue

@@ -1,18 +1,11 @@
 <template>
-  <QuickNav />
-  <TopMessage />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
         <span
           v-if="
             libsUtil.isGiveRecordTheUserCanConfirm(
@@ -25,8 +18,24 @@
         >
           Do you agree?
         </span>
-        <span v-else> Confirmation Details </span>
+        <span v-else>Confirmation Details</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="giveDetails && !isLoading">

src/views/ContactAmountsView.vue

@@ -2,18 +2,27 @@
   <QuickNav selected="Contacts" />
 
   <section class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Header -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <router-link
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        :to="{ name: 'contacts' }"
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw" />
-      </router-link>
-
-      <h1 class="text-4xl text-center font-light pt-4">
         Transferred with {{ contact?.name }}
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'contacts' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Info Messages -->
@@ -223,7 +232,7 @@ export default class ContactAmountssView extends Vue {
       const contact = await this.$getContact(contactDid);
       this.contact = contact;
 
-      const settings = await this.$getMasterSettings();
+      const settings = await this.$accountSettings();
 
       // Get activeDid from active_identity table (single source of truth)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/ContactEditView.vue

@@ -1,19 +1,28 @@
 <template>
-  <QuickNav selected="Contacts" />
-  <TopMessage />
-
   <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
-    <div id="ViewBreadcrumb" class="mb-8">
+    <TopMessage />
-      <h1 class="text-4xl text-center font-light relative px-7">
+
-        <!-- Back -->
+    <!-- Sub View Heading -->
-        <button
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
         {{ contact?.name || AppString.NO_CONTACT_NAME }}
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Contact Name -->

src/views/ContactGiftingView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'home' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
         {{ stepType === "giver" ? "Given by..." : "Given to..." }}
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'home' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Results List -->

src/views/ContactImportView.vue

@@ -1,20 +1,28 @@
 <template>
   <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Contact Import
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
-    </div>
 
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Contact Import
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div v-if="checkingImports" class="text-center">
       <font-awesome icon="spinner" class="animate-spin" />

src/views/ContactQRScanFullView.vue

@@ -2,26 +2,27 @@
   <!-- CONTENT -->
   <section id="Content" class="relative w-[100vw] h-[100vh]">
     <div :class="mainContentClasses">
-      <div class="mb-4">
+      <!-- Sub View Heading -->
-        <h1 class="text-xl text-center font-semibold relative">
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <!-- Back -->
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
-          <a
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="handleBack"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw" />
-          </a>
-
-          <!-- Quick Help -->
-          <a
-            class="text-xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-            @click="toastQRCodeHelp()"
-          >
-            <font-awesome icon="circle-question" class="fa-fw" />
-          </a>
-
           Share Contact Info
         </h1>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="handleBack"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Quick Help -->
+        <a
+          class="block 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="toastQRCodeHelp()"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </a>
       </div>
 
       <div
@@ -235,7 +236,7 @@ export default class ContactQRScanFull extends Vue {
    * Computed property for main content container CSS classes
    */
   get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
+    return "p-4 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   /**

src/views/ContactQRScanShowView.vue

@@ -1,26 +1,27 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div class="mb-2">
+    <!-- Sub View Heading -->
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <a
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="handleBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </a>
-
-        <!-- Quick Help -->
-        <a
-          class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-          @click="toastQRCodeHelp()"
-        >
-          <font-awesome icon="circle-question" class="fa-fw" />
-        </a>
-
         Share Contact Info
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="handleBack"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Quick Help -->
+      <a
+        class="block 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="toastQRCodeHelp()"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </a>
     </div>
 
     <div v-if="!givenName" :class="nameWarningClasses">

src/views/ContactsView.vue

@@ -1,14 +1,25 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Contacts
-    </h1>
 
-    <div class="flex justify-between py-2 mt-8">
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Contacts
+      </h1>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
+
+    <div class="flex justify-between py-2 mt-4">
       <span />
       <span>
         <a

src/views/DIDView.vue

@@ -1,22 +1,31 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-             (and going back there is annoying). -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
         Identifier Details
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'contacts' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity Details -->
@@ -25,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 } }"

src/views/DeepLinkErrorView.vue

@@ -1,7 +1,15 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1>Invalid Deep Link</h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1
+        class="grow text-rose-500 text-xl text-center font-semibold leading-tight"
+      >
+        Invalid Deep Link
+      </h1>
+    </div>
+
     <div class="error-details">
       <div class="error-message">
         <h3>Error Details</h3>
@@ -114,11 +122,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-h1 {
-  color: #ff4444;
-  margin-bottom: 24px;
-}
-
 h2,
 h3 {
   color: #333;

src/views/DeepLinkRedirectView.vue

@@ -2,9 +2,12 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <div class="mb-4">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+      <!-- Sub View Heading -->
-        Redirecting to Time Safari
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      </h1>
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          Redirecting to Time Safari
+        </h1>
+      </div>
 
       <div v-if="destinationUrl" class="space-y-4">
         <!-- Platform-specific messaging -->

src/views/DiscoverView.vue

@@ -1,13 +1,22 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Discover Projects & People
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -51,6 +60,33 @@
     <!-- Secondary Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li v-if="isProjectsActive">
+          <a
+            href="#"
+            :class="computedStarredTabStyleClassNames()"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isStarredActive = true;
+              isLocalActive = false;
+              isMappedActive = false;
+              isAnywhereActive = false;
+              isSearchVisible = false;
+              tempSearchBox = null;
+              searchStarred();
+            "
+          >
+            Starred
+            <!-- restore when the links don't jump around for different numbers
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              v-if="isLocalActive"
+            >
+              {{ localCount > -1 ? localCount : "?" }}
+            </span>
+            -->
+          </a>
+        </li>
         <li>
           <a
             href="#"
@@ -58,9 +94,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = true;
               isMappedActive = false;
               isAnywhereActive = false;
+              isStarredActive = false;
               isSearchVisible = true;
               tempSearchBox = null;
               searchLocal();
@@ -84,9 +122,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = false;
               isMappedActive = true;
               isAnywhereActive = false;
+              isStarredActive = false;
               isSearchVisible = false;
               searchTerms = '';
               tempSearchBox = null;
@@ -103,9 +143,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = false;
               isMappedActive = false;
               isAnywhereActive = true;
+              isStarredActive = false;
               isSearchVisible = true;
               tempSearchBox = null;
               searchAll();
@@ -201,6 +243,15 @@
           >No {{ isProjectsActive ? "projects" : "people" }} were found with
           that search.</span
         >
+        <span v-else-if="isStarredActive">
+          <p>
+            You have no starred projects. Star some projects to see them here.
+          </p>
+          <p class="mt-4">
+            When you star projects, you will get a notice on the front page when
+            they change.
+          </p>
+        </span>
       </p>
     </div>
 
@@ -231,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">
@@ -383,9 +434,12 @@ export default class DiscoverView extends Vue {
   allMyDids: Array<string> = [];
   apiServer = "";
   isLoading = false;
+
   isLocalActive = false;
   isMappedActive = false;
   isAnywhereActive = true;
+  isStarredActive = false;
+
   isProjectsActive = true;
   isPeopleActive = false;
   isSearchVisible = true;
@@ -474,6 +528,8 @@ export default class DiscoverView extends Vue {
         leafletObject: L.Map;
       };
       this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
+    } else if (this.isStarredActive) {
+      await this.searchStarred();
     } else {
       await this.searchAll();
     }
@@ -544,6 +600,60 @@ export default class DiscoverView extends Vue {
     }
   }
 
+  public async searchStarred() {
+    this.resetCounts();
+
+    // Clear any previous results
+    this.projects = [];
+    this.userProfiles = [];
+
+    try {
+      this.isLoading = true;
+
+      // Get starred project IDs from settings
+      const settings = await this.$accountSettings();
+
+      const starredIds = settings.starredPlanHandleIds || [];
+      if (starredIds.length === 0) {
+        // No starred projects
+        return;
+      }
+
+      // This could be optimized to only pull those not already in the cache (endorserServer.ts)
+
+      const planHandleIdsJson = JSON.stringify(starredIds);
+      const endpoint =
+        this.apiServer +
+        "/api/v2/report/plans?planHandleIds=" +
+        encodeURIComponent(planHandleIdsJson);
+      const response = await this.axios.get(endpoint, {
+        headers: await getHeaders(this.activeDid),
+      });
+      if (response.status !== 200) {
+        this.notify.error("Failed to load starred projects", TIMEOUTS.SHORT);
+        return;
+      }
+      const starredPlans: PlanData[] = response.data.data;
+      if (response.data.hitLimit) {
+        // someday we'll have to let them incrementally load the rest
+        this.notify.warning(
+          "Beware: you have so many starred projects that we cannot load them all.",
+          TIMEOUTS.SHORT,
+        );
+      }
+
+      this.projects = starredPlans;
+    } catch (error: unknown) {
+      logger.error("Error loading starred projects:", error);
+      this.notify.error(
+        "Failed to load starred projects. Please try again.",
+        TIMEOUTS.LONG,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
@@ -637,9 +747,12 @@ export default class DiscoverView extends Vue {
         const latestProject = this.projects[this.projects.length - 1];
         if (this.isLocalActive || this.isMappedActive) {
           this.searchLocal(latestProject.rowId);
+        } else if (this.isStarredActive) {
+          this.searchStarred();
         } else if (this.isAnywhereActive) {
           this.searchAll(latestProject.rowId);
         }
+        // Note: Starred tab doesn't support pagination since we load all starred projects at once
       } else if (this.isPeopleActive && this.userProfiles.length > 0) {
         const latestProfile = this.userProfiles[this.userProfiles.length - 1];
         if (this.isLocalActive || this.isMappedActive) {
@@ -779,13 +892,31 @@ export default class DiscoverView extends Vue {
     this.$router.push(route);
   }
 
-  public computedLocalTabStyleClassNames() {
+  public computedStarredTabStyleClassNames() {
     return {
       "inline-block": true,
       "py-3": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
+      active: this.isStarredActive,
+      "text-black": this.isStarredActive,
+      "border-black": this.isStarredActive,
+      "font-semibold": this.isStarredActive,
+
+      "text-blue-600": !this.isStarredActive,
+      "border-transparent": !this.isStarredActive,
+      "hover:border-slate-400": !this.isStarredActive,
+    };
+  }
+
+  public computedLocalTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-2": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
       active: this.isLocalActive,
       "text-black": this.isLocalActive,
       "border-black": this.isLocalActive,
@@ -800,7 +931,7 @@ export default class DiscoverView extends Vue {
   public computedMappedTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -818,7 +949,7 @@ export default class DiscoverView extends Vue {
   public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -836,7 +967,7 @@ export default class DiscoverView extends Vue {
   public computedProjectsTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -854,7 +985,7 @@ export default class DiscoverView extends Vue {
   public computedPeopleTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 

src/views/GiftedDetailsView.vue

@@ -1,24 +1,33 @@
 <template>
-  <QuickNav />
-  <TopMessage />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+    <div class="mb-8">
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          What Was Given
+        </h1>
+
         <!-- Back -->
-        <div
+        <a
-          v-if="!hideBackButton"
+          class="order-first text-lg text-center leading-none p-1"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="cancelBack()"
         >
-          <font-awesome icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-        </div>
+        </a>
-        What Was Given
-      </h1>
 
-      <h2 class="text-lg font-normal text-center overflow-hidden">
+        <!-- Help 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"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </router-link>
+      </div>
+
+      <h2 class="text-lg font-normal leading-tight text-center overflow-hidden">
         <div class="truncate">
           From
           {{

src/views/HelpNotificationTypesView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Notification Types
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->

src/views/HelpNotificationsView.vue

@@ -34,22 +34,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Notification Help
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->
@@ -394,7 +399,7 @@ export default class HelpNotificationsView extends Vue {
   notifyingReminderTime = "";
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent button styling
@@ -430,6 +435,9 @@ export default class HelpNotificationsView extends Vue {
    * Handles errors gracefully with proper logging without exposing sensitive data.
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       const registration = await navigator.serviceWorker?.ready;
       const fullSub = await registration?.pushManager.getSubscription();

src/views/HelpOnboardingView.vue

@@ -3,11 +3,9 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Don't include 'back' button since this is shown in a different window. -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Time Safari Onboarding Instructions
       </h1>
     </div>

src/views/HelpView.vue

@@ -3,23 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Help
-        <span class="text-xs text-gray-500">{{ package.version }}</span>
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Spacer (no Help button) -->
+      <div class="p-3 pe-3.5 pb-3.5"></div>
     </div>
 
     <!-- eslint-disable prettier/prettier max-len -->

src/views/HomeView.vue

@@ -6,7 +6,6 @@ Raymer * @version 1.0.0 */
 
 <template>
   <QuickNav selected="Home" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section
@@ -14,10 +13,25 @@ Raymer * @version 1.0.0 */
     class="p-6 pb-24 max-w-3xl mx-auto"
     :data-active-did="activeDid"
   >
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+    <TopMessage />
-      {{ AppString.APP_NAME }}
+
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        {{ AppString.APP_NAME }}
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
+      </h1>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -97,9 +111,9 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <h2 class="text-xl font-bold">Record something given by:</h2>
+              <h2 class="font-bold">Record something given by:</h2>
               <button
-                class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                 @click="openGiftedPrompts()"
               >
                 <font-awesome
@@ -143,10 +157,10 @@ Raymer * @version 1.0.0 */
     <!-- Results List -->
     <div class="mt-4 mb-4">
       <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
-          class="block ms-auto 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-2 rounded-full"
+          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="openFeedFilters()"
         >
           <font-awesome
@@ -156,7 +170,7 @@ Raymer * @version 1.0.0 */
         </button>
         <button
           v-else
-          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome
@@ -170,10 +184,10 @@ Raymer * @version 1.0.0 */
         class="border-t p-2 border-slate-300"
         @click="goToActivityToUserPage()"
       >
-        <div class="flex justify-center">
+        <div class="flex justify-center gap-2">
           <div
             v-if="numNewOffersToUser"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
           >
             <span
               class="block text-center text-6xl"
@@ -187,7 +201,7 @@ Raymer * @version 1.0.0 */
           </div>
           <div
             v-if="numNewOffersToUserProjects"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
           >
             <span
               class="block text-center text-6xl"
@@ -201,6 +215,22 @@ Raymer * @version 1.0.0 */
               projects
             </p>
           </div>
+          <div
+            v-if="numNewStarredProjectChanges"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newStarredProjectChangesActivityNumber"
+            >
+              {{ numNewStarredProjectChanges
+              }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              starred project{{ numNewStarredProjectChanges === 1 ? "" : "s" }}
+              with changes
+            </p>
+          </div>
         </div>
         <div class="flex justify-end mt-2">
           <button class="text-blue-500">View All New Activity For You</button>
@@ -268,6 +298,7 @@ import {
   getHeaders,
   getNewOffersToUser,
   getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
   getPlanFromCache,
 } from "../libs/endorserServer";
 import {
@@ -284,6 +315,7 @@ import { NOTIFY_CONTACT_LOADING_ISSUE } from "@/constants/notifications";
 import * as Package from "../../package.json";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 import { errorStringForLog } from "../libs/endorserServer";
+import * as databaseUtil from "../db/databaseUtil";
 
 // consolidate this with GiveActionClaim in src/interfaces/claims.ts
 interface Claim {
@@ -396,11 +428,25 @@ export default class HomeView extends Vue {
   isRegistered = false;
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
   lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred project changes that they've acknowledged seeing
   newOffersToUserHitLimit: boolean = false;
   newOffersToUserProjectsHitLimit: boolean = false;
+  newStarredProjectChangesHitLimit: boolean = false;
   numNewOffersToUser: number = 0; // number of new offers-to-user
   numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
 
+  numNewStarredProjectChanges: number = 0; // number of new starred project changes
+  starredPlanHandleIds: Array<string> = []; // list of starred project IDs
+  searchBoxes: Array<{
+    name: string;
+    bbox: BoundingBox;
+  }> = [];
+  showShortcutBvc = false;
+  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
+  selectedImage = "";
+  isImageViewerOpen = false;
+  showProjectsDialog = false;
+
   /**
    * CRITICAL VUE REACTIVITY BUG WORKAROUND
    *
@@ -438,16 +484,6 @@ export default class HomeView extends Vue {
   //   return shouldShow;
   // }
 
-  searchBoxes: Array<{
-    name: string;
-    bbox: BoundingBox;
-  }> = [];
-  showShortcutBvc = false;
-  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
-  selectedImage = "";
-  isImageViewerOpen = false;
-  showProjectsDialog = false;
-
   /**
    * Initializes notification helpers
    */
@@ -498,6 +534,7 @@ export default class HomeView extends Vue {
           this.numNewOffersToUser + this.numNewOffersToUserProjects > 0,
       });
 
+      await this.loadNewStarredProjectChanges();
       await this.checkOnboarding();
 
       logger.debug("[HomeView] mounted() - component lifecycle completed", {
@@ -623,8 +660,14 @@ export default class HomeView extends Vue {
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
       this.lastAckedOfferToUserProjectsJwtId =
         settings.lastAckedOfferToUserProjectsJwtId;
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId;
       this.searchBoxes = settings.searchBoxes || [];
       this.showShortcutBvc = !!settings.showShortcutBvc;
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
       this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
 
       // Check onboarding status
@@ -645,7 +688,9 @@ export default class HomeView extends Vue {
 
           if (resp.status === 200) {
             // Ultra-concise settings update with automatic cache invalidation!
-            await this.$saveMySettings({ isRegistered: true });
+            await this.$saveUserSettings(this.activeDid, {
+              isRegistered: true,
+            });
             this.isRegistered = true;
           }
         } catch (error) {
@@ -703,7 +748,7 @@ export default class HomeView extends Vue {
    * Used for displaying contact info in feed and actions
    *
    * @internal
-   * Called by mounted() and initializeIdentity()
+   * Called by initializeIdentity()
    */
   private async loadContacts() {
     this.allContacts = await this.$contacts();
@@ -717,7 +762,6 @@ export default class HomeView extends Vue {
    * Triggers updateAllFeed() to populate activity feed
    *
    * @internal
-   * Called by mounted()
    */
   private async loadFeedData() {
     await this.updateAllFeed();
@@ -731,7 +775,6 @@ export default class HomeView extends Vue {
    * - Rate limit status for both
    *
    * @internal
-   * Called by mounted() and initializeIdentity()
    * @requires Active DID
    */
   private async loadNewOffers() {
@@ -835,6 +878,42 @@ export default class HomeView extends Vue {
     }
   }
 
+  /**
+   * Loads new changes for starred projects
+   * Updates:
+   * - Number of new starred project changes
+   * - Rate limit status for starred project changes
+   *
+   * @internal
+   * @requires Active DID
+   */
+  private async loadNewStarredProjectChanges() {
+    if (this.activeDid && this.starredPlanHandleIds.length > 0) {
+      try {
+        const starredProjectChanges = await getStarredProjectsWithChanges(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.starredPlanHandleIds,
+          this.lastAckedStarredPlanChangesJwtId,
+        );
+        this.numNewStarredProjectChanges = starredProjectChanges.data.length;
+        this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit;
+      } catch (error) {
+        // Don't show errors for starred project changes as it's a secondary feature
+        logger.warn(
+          "[HomeView] Failed to load starred project changes:",
+          error,
+        );
+        this.numNewStarredProjectChanges = 0;
+        this.newStarredProjectChangesHitLimit = false;
+      }
+    } else {
+      this.numNewStarredProjectChanges = 0;
+      this.newStarredProjectChangesHitLimit = false;
+    }
+  }
+
   /**
    * Checks if user needs onboarding using ultra-concise mixin utilities
    * Opens onboarding dialog if not completed

src/views/IdentitySwitcherView.vue

@@ -1,18 +1,27 @@
 <template>
   <QuickNav selected="Profile"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
         Switch Identity
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity List -->
@@ -306,6 +315,9 @@ export default class IdentitySwitcherView extends Vue {
       }
 
       await this.$exec("DELETE FROM accounts WHERE id = ?", [id]);
+      await this.$exec("DELETE FROM settings WHERE accountDid = ?", [
+        accountDid,
+      ]);
     });
 
     // Update UI

src/views/ImportAccountView.vue

@@ -1,17 +1,26 @@
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
         Import Existing Identifier
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
     <!-- Import Account Form -->
     <p class="text-center text-xl mb-4 font-light">

src/views/ImportDerivedAccountView.vue

@@ -1,20 +1,29 @@
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
         Derive from Existing Identity
       </h1>
-    </div>
-    <!-- Import Account Form -->
 
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
+
+    <!-- Import Account Form -->
     <div>
       <p class="text-center text-xl mb-4 font-light">
         Will increment the maximum known derivation path from the existing seed.

src/views/InviteOneView.vue

@@ -1,20 +1,31 @@
 <template>
-  <QuickNav selected="Invite" />
+  <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
 
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Invitations
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
       <li>

src/views/LogView.vue

@@ -1,22 +1,31 @@
 <!-- This is useful in an environment where the download doesn't work. -->
 <template>
   <QuickNav selected="" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back Button -->
+    <TopMessage />
-    <div class="relative px-7">
-      <h1
-        class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="mr-2" />
-      </h1>
-    </div>
 
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Error Message -->
     <div

src/views/NewActivityView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
         New Activity For You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
@@ -29,12 +39,12 @@
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
+          @click.prevent="expandOffersToUserAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user" class="text-blue-500">
+      <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersDetails" class="ml-4 mt-4">
@@ -48,7 +58,7 @@
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
           offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
             offer.objectDescription
           }}</span
           >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -67,10 +77,10 @@
           <!-- New line that appears on hover or when the offer is clicked -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersAsReadStartingWith(offer.jwtId)"
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
           </div>
         </li>
       </ul>
@@ -96,12 +106,15 @@
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
           "
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
         />
       </div>
-      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+      <a
+        class="text-blue-500 cursor-pointer"
+        @click="handleSeeAllOffersToUserProjects"
+      >
         See&nbsp;all
-      </router-link>
+      </a>
     </div>
 
     <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@@ -115,7 +128,7 @@
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
           offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
             offer.objectDescription
           }}</span
           >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -136,10 +149,153 @@
           <!-- New line that appears on hover -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="
+              markOffersToUserProjectsAsReadStartingWith(offer.jwtId)
+            "
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Starred Projects with Changes Section -->
+    <div
+      class="flex justify-between mt-6"
+      data-testId="showStarredProjectChanges"
+    >
+      <div>
+        <span class="text-lg font-medium"
+          >{{ newStarredProjectChanges.length
+          }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}</span
+        >
+        <span class="text-lg font-medium ml-4"
+          >Starred Project{{
+            newStarredProjectChanges.length === 1 ? "" : "s"
+          }}
+          With Changes</span
+        >
+        <font-awesome
+          v-if="newStarredProjectChanges.length > 0"
+          :icon="
+            showStarredProjectChangesDetails ? 'chevron-down' : 'chevron-right'
+          "
+          class="cursor-pointer ml-4 mr-4 text-lg"
+          @click.prevent="expandStarredProjectChangesAndMarkRead()"
+        />
+      </div>
+    </div>
+
+    <div v-if="showStarredProjectChangesDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="projectChange in newStarredProjectChanges"
+          :key="projectChange.plan.handleId"
+          class="mt-4 relative group"
+        >
+          <div class="flex items-center gap-2">
+            <div class="flex-1 min-w-0">
+              <span class="font-medium">{{
+                projectChange.plan.name || "Unnamed Project"
+              }}</span>
+              <span
+                v-if="projectChange.plan.description"
+                class="text-gray-600 block truncate"
+              >
+                {{ projectChange.plan.description }}
+              </span>
+            </div>
+            <router-link
+              :to="{
+                path:
+                  '/project/' + encodeURIComponent(projectChange.plan.handleId),
+              }"
+              class="text-blue-500 flex-shrink-0"
+            >
+              <font-awesome
+                icon="file-lines"
+                class="text-blue-500 cursor-pointer"
+              />
+            </router-link>
+          </div>
+          <!-- Show what changed -->
+          <div
+            v-if="getPlanDifferences(projectChange.plan.handleId)"
+            class="text-sm mt-2"
+          >
+            <div class="font-medium mb-2">Changes</div>
+            <div class="overflow-x-auto">
+              <table
+                class="w-full text-xs border-collapse border border-gray-300 rounded-lg shadow-sm bg-white"
+              >
+                <thead>
+                  <tr class="bg-gray-50">
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    ></th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Previous
+                    </th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Current
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(difference, field) in getPlanDifferences(
+                      projectChange.plan.handleId,
+                    )"
+                    :key="field"
+                    class="hover:bg-gray-50"
+                  >
+                    <td
+                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800 break-words"
+                    >
+                      {{ getDisplayFieldName(field) }}
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.old"
+                        :source="formatFieldValue(difference.old)"
+                        class="markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.new"
+                        :source="formatFieldValue(difference.new)"
+                        class="markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div v-else>The changes did not affect essential project data.</div>
+          <!-- New line that appears on hover -->
+          <div
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+            @click.prevent="
+              markStarredProjectChangesAsReadStartingWith(
+                projectChange.plan.jwtId!,
+              )
+            "
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as unread changes
           </div>
         </li>
       </ul>
@@ -149,6 +305,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -159,20 +316,28 @@ import { Router } from "vue-router";
 import {
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
 } from "../interfaces/records";
 import {
   didInfo,
+  didInfoOrNobody,
   displayAmount,
   getNewOffersToUser,
   getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
 } from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import * as databaseUtil from "../db/databaseUtil";
+import * as R from "ramda";
+import { PlanActionClaim } from "../interfaces/claims";
+import { GenericCredWrapper } from "@/interfaces";
 
 @Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class NewActivityView extends Vue {
@@ -186,13 +351,22 @@ export default class NewActivityView extends Vue {
   apiServer = "";
   lastAckedOfferToUserJwtId = "";
   lastAckedOfferToUserProjectsJwtId = "";
+  lastAckedStarredPlanChangesJwtId = "";
   newOffersToUser: Array<OfferSummaryRecord> = [];
   newOffersToUserHitLimit = false;
   newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
   newOffersToUserProjectsHitLimit = false;
+  newStarredProjectChanges: Array<PlanSummaryAndPreviousClaim> = [];
+  newStarredProjectChangesHitLimit = false;
+  starredPlanHandleIds: Array<string> = [];
+  planDifferences: Record<
+    string,
+    Record<string, { old: unknown; new: unknown }>
+  > = {};
 
   showOffersDetails = false;
   showOffersToUserProjectsDetails = false;
+  showStarredProjectChangesDetails = false;
   didInfo = didInfo;
   displayAmount = displayAmount;
 
@@ -211,6 +385,12 @@ export default class NewActivityView extends Vue {
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
       this.lastAckedOfferToUserProjectsJwtId =
         settings.lastAckedOfferToUserProjectsJwtId || "";
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId || "";
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
 
       this.allContacts = await this.$getAllContacts();
 
@@ -234,6 +414,29 @@ export default class NewActivityView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;
 
+      // Load starred project changes if user has starred projects
+      if (this.starredPlanHandleIds.length > 0) {
+        try {
+          const starredProjectChangesData = await getStarredProjectsWithChanges(
+            this.axios,
+            this.apiServer,
+            this.activeDid,
+            this.starredPlanHandleIds,
+            this.lastAckedStarredPlanChangesJwtId,
+          );
+          this.newStarredProjectChanges = starredProjectChangesData.data;
+          this.newStarredProjectChangesHitLimit =
+            starredProjectChangesData.hitLimit;
+
+          // Analyze differences between current plans and previous claims
+          this.analyzePlanDifferences(this.newStarredProjectChanges);
+        } catch (error) {
+          logger.warn("Failed to load starred project changes:", error);
+          this.newStarredProjectChanges = [];
+          this.newStarredProjectChangesHitLimit = false;
+        }
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);
@@ -246,14 +449,14 @@ export default class NewActivityView extends Vue {
 
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
-    if (this.showOffersDetails) {
+    if (this.showOffersDetails && this.newOffersToUser.length > 0) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserJwtId in case they
       // later choose the last one to keep the offers as new
       this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are marked as read. Click in the list to keep them unread.",
         TIMEOUTS.LONG,
       );
     }
@@ -265,12 +468,12 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUser.length - 1) {
       // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
       });
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
       });
     }
@@ -283,15 +486,18 @@ export default class NewActivityView extends Vue {
   async expandOffersToUserProjectsAndMarkRead() {
     this.showOffersToUserProjectsDetails =
       !this.showOffersToUserProjectsDetails;
-    if (this.showOffersToUserProjectsDetails) {
+    if (
-      await this.$updateSettings({
+      this.showOffersToUserProjectsDetails &&
+      this.newOffersToUserProjects.length > 0
+    ) {
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
       // they later choose the last one to keep the offers as new
       this.notify.info(
-        "The offers are now marked as viewed. Click in the list to keep them as new.",
+        "The offers are now marked read. Click in the list to keep them unread.",
         TIMEOUTS.LONG,
       );
     }
@@ -303,13 +509,13 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
       // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[index + 1].jwtId,
       });
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.lastAckedOfferToUserProjectsJwtId,
       });
@@ -319,5 +525,390 @@ export default class NewActivityView extends Vue {
       TIMEOUTS.STANDARD,
     );
   }
+
+  async handleSeeAllOffersToUser() {
+    this.$router.push("/recent-offers-to-user");
+  }
+
+  async handleSeeAllOffersToUserProjects() {
+    this.$router.push("/recent-offers-to-user-projects");
+  }
+
+  async expandStarredProjectChangesAndMarkRead() {
+    this.showStarredProjectChangesDetails =
+      !this.showStarredProjectChangesDetails;
+    if (
+      this.showStarredProjectChangesDetails &&
+      this.newStarredProjectChanges.length > 0
+    ) {
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[0].plan.jwtId,
+      });
+      this.notify.info(
+        "The starred project changes are now marked read. Click in the list to keep them unread.",
+        TIMEOUTS.LONG,
+      );
+    }
+  }
+
+  async markStarredProjectChangesAsReadStartingWith(jwtId: string) {
+    const index = this.newStarredProjectChanges.findIndex(
+      (change) => change.plan.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newStarredProjectChanges.length - 1) {
+      // Set to the next change's jwtId
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[index + 1].plan.jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId: this.lastAckedStarredPlanChangesJwtId,
+      });
+    }
+    this.notify.info(
+      "All starred project changes above that line are marked as unread.",
+      TIMEOUTS.STANDARD,
+    );
+  }
+
+  /**
+   * Analyzes differences between current plans and their previous claims
+   *
+   * Walks through a list of PlanSummaryAndPreviousClaim items and stores the
+   * differences between the previous claim and the current plan. This method
+   * extracts the claim from the wrappedClaimBefore object and compares relevant
+   * fields with the current plan.
+   *
+   * @param planChanges Array of PlanSummaryAndPreviousClaim objects to analyze
+   */
+  analyzePlanDifferences(planChanges: Array<PlanSummaryAndPreviousClaim>) {
+    this.planDifferences = {};
+
+    for (const planChange of planChanges) {
+      const currentPlan: PlanSummaryRecord = planChange.plan;
+      const wrappedClaim: GenericCredWrapper<PlanActionClaim> =
+        planChange.wrappedClaimBefore;
+
+      // Extract the actual claim from the wrapped claim
+      let previousClaim: PlanActionClaim;
+
+      const embeddedClaim: PlanActionClaim = wrappedClaim.claim;
+      if (
+        embeddedClaim &&
+        typeof embeddedClaim === "object" &&
+        "credentialSubject" in embeddedClaim
+      ) {
+        // It's a Verifiable Credential
+        previousClaim =
+          (embeddedClaim.credentialSubject as PlanActionClaim) || embeddedClaim;
+      } else {
+        // It's a direct claim
+        previousClaim = embeddedClaim;
+      }
+
+      if (!previousClaim || !currentPlan.handleId) {
+        continue;
+      }
+
+      const differences: Record<string, { old: unknown; new: unknown }> = {};
+
+      // Compare name
+      const normalizedOldName = this.normalizeValueForComparison(
+        previousClaim.name,
+      );
+      const normalizedNewName = this.normalizeValueForComparison(
+        currentPlan.name,
+      );
+      if (!R.equals(normalizedOldName, normalizedNewName)) {
+        differences.name = {
+          old: previousClaim.name,
+          new: currentPlan.name,
+        };
+      }
+
+      // Compare description
+      const normalizedOldDescription = this.normalizeValueForComparison(
+        previousClaim.description,
+      );
+      const normalizedNewDescription = this.normalizeValueForComparison(
+        currentPlan.description,
+      );
+      if (!R.equals(normalizedOldDescription, normalizedNewDescription)) {
+        differences.description = {
+          old: previousClaim.description,
+          new: currentPlan.description,
+        };
+      }
+
+      // Compare location (combine latitude and longitude into one row)
+      const oldLat = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.latitude,
+      );
+      const oldLon = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.longitude,
+      );
+      const newLat = this.normalizeValueForComparison(currentPlan.locLat);
+      const newLon = this.normalizeValueForComparison(currentPlan.locLon);
+
+      if (!R.equals(oldLat, newLat) || !R.equals(oldLon, newLon)) {
+        differences.location = {
+          old: this.formatLocationValue(oldLat, oldLon, true),
+          new: this.formatLocationValue(newLat, newLon, false),
+        };
+      }
+
+      // Compare agent (issuer)
+      const oldAgent = didInfoOrNobody(
+        previousClaim.agent?.identifier,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const newAgent = didInfoOrNobody(
+        currentPlan.agentDid,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const normalizedOldAgent = this.normalizeValueForComparison(oldAgent);
+      const normalizedNewAgent = this.normalizeValueForComparison(newAgent);
+      if (!R.equals(normalizedOldAgent, normalizedNewAgent)) {
+        differences.agent = {
+          old: oldAgent,
+          new: newAgent,
+        };
+      }
+
+      // Compare start time
+      const oldStartTime = previousClaim.startTime;
+      const newStartTime = currentPlan.startTime;
+      const normalizedOldStartTime =
+        this.normalizeDateForComparison(oldStartTime);
+      const normalizedNewStartTime =
+        this.normalizeDateForComparison(newStartTime);
+      if (!R.equals(normalizedOldStartTime, normalizedNewStartTime)) {
+        differences.startTime = {
+          old: oldStartTime,
+          new: newStartTime,
+        };
+      }
+
+      // Compare end time
+      const oldEndTime = previousClaim.endTime;
+      const newEndTime = currentPlan.endTime;
+      const normalizedOldEndTime = this.normalizeDateForComparison(oldEndTime);
+      const normalizedNewEndTime = this.normalizeDateForComparison(newEndTime);
+      if (!R.equals(normalizedOldEndTime, normalizedNewEndTime)) {
+        differences.endTime = {
+          old: oldEndTime,
+          new: newEndTime,
+        };
+      }
+
+      // Compare image
+      const oldImage = previousClaim.image;
+      const newImage = currentPlan.image;
+      const normalizedOldImage = this.normalizeValueForComparison(oldImage);
+      const normalizedNewImage = this.normalizeValueForComparison(newImage);
+      if (!R.equals(normalizedOldImage, normalizedNewImage)) {
+        differences.image = {
+          old: oldImage,
+          new: newImage,
+        };
+      }
+
+      // Compare url
+      const oldUrl = previousClaim.url;
+      const newUrl = currentPlan.url;
+      const normalizedOldUrl = this.normalizeValueForComparison(oldUrl);
+      const normalizedNewUrl = this.normalizeValueForComparison(newUrl);
+      if (!R.equals(normalizedOldUrl, normalizedNewUrl)) {
+        differences.url = {
+          old: oldUrl,
+          new: newUrl,
+        };
+      }
+
+      // Store differences if any were found
+      if (!R.isEmpty(differences)) {
+        this.planDifferences[currentPlan.handleId] = differences;
+        logger.debug(
+          "[NewActivityView] Plan differences found for",
+          currentPlan.handleId,
+          differences,
+        );
+      }
+    }
+
+    logger.debug(
+      "[NewActivityView] Analyzed",
+      planChanges.length,
+      "plan changes, found differences in",
+      Object.keys(this.planDifferences).length,
+      "plans",
+    );
+  }
+
+  /**
+   * Normalizes values for comparison - treats null, undefined, and empty string as equivalent
+   *
+   * @param value The value to normalize
+   * @returns The normalized value (null for null/undefined/empty, otherwise the original value)
+   */
+  normalizeValueForComparison<T>(value: T | null | undefined): T | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    return value;
+  }
+
+  /**
+   * Normalizes date values for comparison by converting strings to Date objects
+   * Returns null for null/undefined/empty values, Date objects for valid date strings
+   */
+  normalizeDateForComparison(value: unknown): Date | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    if (typeof value === "string") {
+      const date = new Date(value);
+      // Check if the date is valid
+      return isNaN(date.getTime()) ? null : date;
+    }
+    if (value instanceof Date) {
+      return isNaN(value.getTime()) ? null : value;
+    }
+    return null;
+  }
+
+  /**
+   * Gets the differences for a specific plan by handle ID
+   *
+   * @param handleId The handle ID of the plan to get differences for
+   * @returns The differences object or null if no differences found
+   */
+  getPlanDifferences(
+    handleId: string,
+  ): Record<string, { old: unknown; new: unknown }> | null {
+    return this.planDifferences[handleId] || null;
+  }
+
+  /**
+   * Formats a field value for display in the UI
+   *
+   * @param value The value to format
+   * @returns A human-readable string representation
+   */
+  formatFieldValue(value: unknown): string {
+    if (value === null || value === undefined) {
+      return "Not set";
+    }
+    if (typeof value === "string") {
+      const stringValue = value || "Empty";
+
+      // Check if it's a date/time string
+      if (this.isDateTimeString(stringValue)) {
+        return this.formatDateTime(stringValue);
+      }
+
+      // Check if it's a URL
+      if (this.isUrl(stringValue)) {
+        return stringValue; // Keep URLs as-is for now
+      }
+
+      return stringValue;
+    }
+    if (typeof value === "number") {
+      return value.toString();
+    }
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+    // For complex objects, stringify
+    const stringified = JSON.stringify(value);
+    return stringified;
+  }
+
+  /**
+   * Checks if a string appears to be a date/time string
+   */
+  isDateTimeString(value: string): boolean {
+    if (!value) return false;
+    // Check for ISO 8601 format or other common date formats
+    const dateRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})?(\.\d{3})?Z?$/;
+    return dateRegex.test(value) || !isNaN(Date.parse(value));
+  }
+
+  /**
+   * Checks if a string is a URL
+   */
+  isUrl(value: string): boolean {
+    if (!value) return false;
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Formats a date/time string for display
+   */
+  formatDateTime(value: string): string {
+    try {
+      const date = new Date(value);
+      return date.toLocaleString();
+    } catch {
+      return value; // Return original if parsing fails
+    }
+  }
+
+  /**
+   * Gets a human-readable field name for display
+   *
+   * @param fieldName The internal field name
+   * @returns A formatted field name for display
+   */
+  getDisplayFieldName(fieldName: string): string {
+    const fieldNameMap: Record<string, string> = {
+      name: "Name",
+      description: "Description",
+      location: "Location",
+      agent: "Agent",
+      startTime: "Start Time",
+      endTime: "End Time",
+      image: "Image",
+      url: "URL",
+    };
+    return fieldNameMap[fieldName] || fieldName;
+  }
+
+  /**
+   * Formats location values for display
+   *
+   * @param latitude The latitude value
+   * @param longitude The longitude value
+   * @param isOldValue Whether this is the old value (true) or new value (false)
+   * @returns A formatted location string
+   */
+  formatLocationValue(
+    latitude: number | undefined | null,
+    longitude: number | undefined | null,
+    isOldValue: boolean = false,
+  ): string {
+    if (latitude == null && longitude == null) {
+      return "Not set";
+    }
+    // If there's any location data, show generic labels instead of coordinates
+    if (isOldValue) {
+      return "A Location";
+    } else {
+      return "New Location";
+    }
+  }
 }
 </script>

src/views/NewEditAccountView.vue

@@ -22,18 +22,27 @@
 -->
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
         Edit Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <input

src/views/NewEditProjectView.vue

@@ -2,19 +2,27 @@
   <QuickNav selected="Projects"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Cancel -->
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
         Edit Project Idea
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Project Details -->

src/views/NewIdentifierView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Your Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center py-12">

src/views/NotFoundView.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
+  >
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+      <div class="text-center">
+        <div class="mx-auto h-24 w-24 text-gray-400">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01"
+            />
+          </svg>
+        </div>
+        <h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
+        <p class="text-sm text-gray-600">
+          The page you're looking for doesn't exist.
+        </p>
+        <div class="mt-1">
+          <button
+            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            @click="goBack"
+          >
+            <svg
+              class="-ml-1 mr-2 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 19l-7-7m0 0l7-7m-7 7h18"
+              />
+            </svg>
+            Go Back
+          </button>
+        </div>
+        <div class="mt-16">
+          <button
+            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            @click="goHome"
+          >
+            <svg
+              class="-ml-1 mr-2 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                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"
+              ></path>
+            </svg>
+            Go Home
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const goHome = () => {
+  router.push("/");
+};
+
+const goBack = () => {
+  router.go(-1);
+};
+</script>

src/views/OfferDetailsView.vue

@@ -1,24 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div
+
-      v-if="!hideBackButton"
+    <!-- Sub View Heading -->
-      class="text-lg text-center font-light relative px-7"
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-    >
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <h1
+        What Is Offered
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="cancelBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
-    </div>
 
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+      <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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <h1 class="text-xl font-bold text-center mb-4">
       <span> Offer to {{ recipientDisplayName }} </span>

src/views/OnboardMeetingListView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Onboarding Meetings
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meetings
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center py-8">

src/views/OnboardMeetingMembersView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Meeting Members
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Meeting Members
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading Animation -->
     <div

src/views/OnboardMeetingSetupView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Onboarding Meeting
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meeting
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Existing Meeting Section -->
     <div

src/views/ProjectViewView.vue

@@ -1,40 +1,58 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb">
+
-      <div>
+    <div class="mb-4">
-        <h1 class="text-center text-lg font-light relative px-7">
+      <!-- Sub View Heading -->
-          <!-- Back -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <button
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="$router.back()"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-          </button>
           Project Idea
         </h1>
-        <h2 class="text-center text-xl font-semibold">
+
-          {{ name }}
+        <!-- Back -->
-          <button
+        <a
-            v-if="activeDid === issuer || activeDid === agentDid"
+          class="order-first text-lg text-center leading-none p-1"
-            title="Edit"
+          @click="$router.go(-1)"
-            data-testId="editClaimButton"
+        >
-            @click="onEditClick()"
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-          >
+        </a>
-            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+
-          </button>
+        <!-- Help button -->
-          <button title="Copy Link to Project" @click="onCopyLinkClick()">
+        <router-link
-            <font-awesome
+          :to="{ name: 'help' }"
-              icon="link"
+          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"
-              class="text-sm text-slate-500 ml-2 mb-1"
+        >
-            />
+          <font-awesome icon="question" class="block text-center w-[1em]" />
-          </button>
+        </router-link>
-        </h2>
       </div>
+      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
+        {{ name }}
+        <button
+          v-if="activeDid === issuer || activeDid === agentDid"
+          title="Edit"
+          data-testId="editClaimButton"
+          @click="onEditClick()"
+        >
+          <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
+        </button>
+        <button
+          :title="
+            isStarred
+              ? 'Remove from starred projects'
+              : 'Add to starred projects'
+          "
+          @click="toggleStar()"
+        >
+          <font-awesome
+            :icon="isStarred ? 'star' : ['far', 'star']"
+            :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
+            class="text-sm ml-2"
+          />
+        </button>
+      </h2>
     </div>
 
     <!-- Project Details -->
@@ -58,13 +76,13 @@
                   icon="user"
                   class="fa-fw text-slate-400"
                 ></font-awesome>
-                <span class="truncate inline-block max-w-[calc(100%-2rem)]">
+                <span class="truncate max-w-[calc(100%-2rem)] ml-1">
                   {{ issuerInfoObject?.displayName }}
                 </span>
 
                 <span
                   v-if="!serverUtil.isHiddenDid(issuer)"
-                  class="inline-flex items-center"
+                  class="inline-flex items-center ml-1"
                 >
                   <router-link
                     :to="{
@@ -139,26 +157,30 @@
         </div>
 
         <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
-            {{ truncatedDesc }}
+            <vue-markdown
+              :source="truncatedDesc"
+              class="mb-4 markdown-content"
+            />
             <a
               v-if="description.length >= truncateLength"
-              class="uppercase text-xs font-semibold text-slate-700"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="expandText"
               >... Read More</a
             >
           </div>
-          <div v-else>
+          <div v-else class="overflow-hidden text-ellipsis">
-            {{ description }}
+            <vue-markdown :source="description" class="mb-4 markdown-content" />
             <a
-              class="uppercase text-xs font-semibold text-slate-700"
+              v-if="description.length >= truncateLength"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="collapseText"
               >- Read Less</a
             >
           </div>
         </div>
 
-        <a class="cursor-pointer" @click="onClickLoadClaim(projectId)">
+        <a class="cursor-pointer" @click="onClickLoadClaim(jwtId)">
           <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
         </a>
       </div>
@@ -286,15 +308,15 @@
                 />{{ 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>
             <div class="flex justify-between">
-              <a
+              <a class="cursor-pointer" @click="onClickLoadClaim(offer.jwtId)">
-                class="cursor-pointer"
-                @click="onClickLoadClaim(offer.jwtId as string)"
-              >
                 <font-awesome
                   icon="file-lines"
                   class="pl-2 pt-1 text-blue-500"
@@ -431,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>
@@ -538,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>
@@ -592,7 +620,9 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
+
 import {
   GenericVerifiableCredential,
   GenericCredWrapper,
@@ -603,25 +633,25 @@ import {
   PlanSummaryRecord,
 } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
+import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
-import { NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface } from "../constants/app";
-// Removed legacy logging import - migrated to PlatformServiceMixin
+import { UNNAMED_PROJECT } from "../constants/entities";
+import { NOTIFY_CONFIRM_CLAIM } from "../constants/notifications";
+import * as databaseUtil from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
-import HiddenDidDialog from "../components/HiddenDidDialog.vue";
-import { logger } from "../utils/logger";
 import { copyToClipboard } from "../services/ClipboardService";
+import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
+
-import { APP_SERVER } from "@/constants/app";
-import { UNNAMED_PROJECT } from "@/constants/entities";
 /**
  * Project View Component
  * @author Matthew Raymer
@@ -663,6 +693,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
     ProjectIcon,
     QuickNav,
     TopMessage,
+    VueMarkdown,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -718,6 +749,8 @@ export default class ProjectViewView extends Vue {
   givesProvidedByHitLimit = false;
   givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
   imageUrl = "";
+  /** Whether this project is starred by the user */
+  isStarred = false;
   /** Project issuer DID */
   issuer = "";
   /** Cached issuer information */
@@ -728,6 +761,8 @@ export default class ProjectViewView extends Vue {
   } | null = null;
   /** DIDs that can see issuer information */
   issuerVisibleToDids: Array<string> = [];
+  /** Project JWT ID */
+  jwtId = "";
   /** Project location data */
   latitude = 0;
   loadingTotals = false;
@@ -756,7 +791,7 @@ export default class ProjectViewView extends Vue {
   totalsExpanded = false;
   truncatedDesc = "";
   /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;
 
   // Utility References
   libsUtil = libsUtil;
@@ -810,6 +845,12 @@ export default class ProjectViewView extends Vue {
     }
     this.loadProject(this.projectId, this.activeDid);
     this.loadTotals();
+
+    // Check if this project is starred when settings are loaded
+    if (this.projectId && settings.starredPlanHandleIds) {
+      const starredIds = settings.starredPlanHandleIds || [];
+      this.isStarred = starredIds.includes(this.projectId);
+    }
   }
 
   /**
@@ -886,8 +927,9 @@ export default class ProjectViewView extends Vue {
           this.allContacts,
         );
         this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
+        this.jwtId = resp.data.id;
         this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "(no description)";
+        this.description = resp.data.claim?.description || "";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
         this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
         this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
@@ -1477,5 +1519,67 @@ export default class ProjectViewView extends Vue {
       this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
     );
   }
+
+  /**
+   * Toggle the starred status of the current project
+   */
+  async toggleStar() {
+    if (!this.projectId) return;
+
+    try {
+      const settings = await this.$accountSettings();
+      const starredIds = settings.starredPlanHandleIds || [];
+      if (!this.isStarred) {
+        // Add to starred projects
+        if (!starredIds.includes(this.projectId)) {
+          const newStarredIds = [...starredIds, this.projectId];
+          const newIdsParam = JSON.stringify(newStarredIds);
+          const result = await databaseUtil.updateDidSpecificSettings(
+            this.activeDid,
+            // @ts-expect-error until we use SettingsWithJsonString properly
+            { starredPlanHandleIds: newIdsParam },
+          );
+          if (result) {
+            this.isStarred = true;
+          } else {
+            // eslint-disable-next-line no-console
+            logger.error("Got a bad result from SQL update to star a project.");
+          }
+        }
+        if (!settings.lastAckedStarredPlanChangesJwtId) {
+          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
+            lastAckedStarredPlanChangesJwtId: this.jwtId,
+          });
+        }
+      } else {
+        // Remove from starred projects
+
+        const updatedIds = starredIds.filter((id) => id !== this.projectId);
+        const newIdsParam = JSON.stringify(updatedIds);
+        const result = await databaseUtil.updateDidSpecificSettings(
+          this.activeDid,
+          // @ts-expect-error until we use SettingsWithJsonString properly
+          { starredPlanHandleIds: newIdsParam },
+        );
+        if (result) {
+          this.isStarred = false;
+        } else {
+          // eslint-disable-next-line no-console
+          logger.error("Got a bad result from SQL update to unstar a project.");
+        }
+      }
+    } catch (error) {
+      logger.error("Error toggling star status:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to update starred status. Please try again.",
+        },
+        3000,
+      );
+    }
+  }
 }
 </script>

src/views/ProjectsView.vue

@@ -1,17 +1,28 @@
 <template>
   <QuickNav selected="Projects" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Project Ideas
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Ideas
+      </h1>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -107,8 +118,8 @@
               />
             </div>
 
-            <div>
+            <div class="overflow-hidden">
-              <div>
+              <div class="text-sm truncate">
                 To
                 {{
                   offer.fulfillsPlanHandleId
@@ -121,7 +132,7 @@
                       )
                 }}
               </div>
-              <div>
+              <div class="truncate">
                 {{ offer.objectDescription }}
               </div>
 
@@ -243,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">
@@ -646,7 +657,7 @@ export default class ProjectsView extends Vue {
   get offerTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showOffers,
@@ -664,7 +675,7 @@ export default class ProjectsView extends Vue {
    * @returns String with CSS classes for the floating new project button
    */
   get newProjectButtonClasses() {
-    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
   }
 
   /**
@@ -706,7 +717,7 @@ export default class ProjectsView extends Vue {
   get projectTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showProjects,

src/views/QuickActionBvcBeginView.vue

@@ -1,23 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
+
-      <h1
+    <!-- Sub View Heading -->
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Beginning of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="goBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
-    </div>
 
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      <router-link
-      Beginning of BVC Saturday Meeting
+        :to="{ name: 'help' }"
-    </h1>
+        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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">You're Here</h2>
@@ -99,7 +108,7 @@ export default class QuickActionBvcBeginView extends Vue {
   $router!: Router;
 
   // Notification helper system
-  private notify = createNotifyHelpers(this.$notify);
+  private notify!: ReturnType<typeof createNotifyHelpers>;
 
   attended = true;
   gaveTime = true;
@@ -111,6 +120,9 @@ export default class QuickActionBvcBeginView extends Vue {
    * Uses America/Denver timezone for Bountiful location
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     logger.debug(
       "[QuickActionBvcBeginView] Mounted - calculating meeting date",
     );

src/views/QuickActionBvcEndView.vue

@@ -1,20 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
-      <h1 :class="backButtonClasses" @click="$router.back()">
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
 
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      End of BVC Saturday Meeting
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        End of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>

src/views/QuickActionBvcView.vue

@@ -1,23 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
 
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Bountiful Voluntaryist Community Actions
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        Bountiful Voluntaryist Community Actions
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <router-link

src/views/RecentOffersToUserProjectsView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
         Offers to Your Projects
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUserProjects.length === 0">
@@ -32,20 +42,20 @@
     </div>
 
     <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul
+      <ul data-testId="listRecentOffersToUserProjects">
-        data-testId="listRecentOffersToUserProjects"
-        class="border-t border-slate-300"
-      >
         <li
           v-for="offer in newOffersToUserProjects"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -147,6 +157,14 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUserProjects.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserProjectsJwtId:
+            this.newOffersToUserProjects[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/RecentOffersToUserView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
         Offers to You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUser.length === 0">
@@ -27,20 +37,20 @@
       </p>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul
+      <ul data-testId="listRecentOffersToUser">
-        data-testId="listRecentOffersToUser"
-        class="border-t border-slate-300"
-      >
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -138,6 +148,13 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUser = offersToUserData.data;
       this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUser.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/SearchAreaView.vue

@@ -1,24 +1,27 @@
 <template>
-  <QuickNav />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Area for Nearby Search
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="px-2 py-4">

src/views/SeedBackupView.vue

@@ -28,31 +28,29 @@
 -->
 
 <template>
-  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Seed Backup
-        @click="goBack"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
-    </div>
 
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Seed Backup
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <div class="flex justify-between py-2">
+      <!-- Help button -->
-      <span />
+      <router-link
-      <span>
+        :to="{ name: 'help' }"
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
+        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"
-          Help
+      >
-        </router-link>
+        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </span>
+      </router-link>
     </div>
 
     <div v-if="activeAccount">
@@ -162,7 +160,7 @@ export default class SeedBackupView extends Vue {
   showSeed = false;
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent copy feedback styling
@@ -204,6 +202,9 @@ export default class SeedBackupView extends Vue {
    * Handles errors gracefully with user notifications.
    */
   async created() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       let activeDid = "";
 

src/views/ShareMyContactInfoView.vue

@@ -1,26 +1,31 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div>
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
-      </div>
 
-      <!-- Heading -->
+    <!-- Sub View Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Share Your Contact Info
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center mt-8">

src/views/SharedPhotoView.vue

@@ -39,10 +39,28 @@
   <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Image
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        Image
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
     <div v-if="imageBlob">
       <div v-if="uploading" class="text-center mb-4">
         <font-awesome icon="spinner" class="fa-spin-pulse" />

src/views/StartView.vue

@@ -3,26 +3,31 @@
     id="Content"
     class="p-6 pb-24 min-h-screen flex flex-col justify-center"
   >
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Generate an Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- id used by puppeteer test script -->
-    <div id="start-question" class="mt-8">
+    <div id="start-question">
       <div class="max-w-3xl mx-auto">
         <p class="text-center text-xl font-light">
           How do you want to create this identifier?

src/views/StatisticsView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
         Achievements & Statistics
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div>

src/views/TestView.vue

@@ -3,22 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Test</h1>
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
 
-      <!-- Heading -->
+      <!-- Back -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-        Test
+        class="order-first text-lg text-center leading-none p-1"
-      </h1>
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="isNotProdServer">

src/views/UserProfileView.vue

@@ -1,22 +1,31 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
         Individual Profile
       </h1>
-      <div class="text-sm text-center text-slate-500"></div>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help 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"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Loading Animation -->

test-playwright/20-create-project.spec.ts

@@ -100,7 +100,10 @@ test('Create new project, then search for it', async ({ page }) => {
   const finalTitle = standardTitle + finalRandomString;
   const finalDescription = standardDescription + finalRandomString;
   const editedTitle = finalTitle + standardEdit;
-  const editedDescription = finalDescription + standardEdit;
+  const editedDescription =
+    finalDescription +
+    standardEdit +
+    " ... and enough text to overflow into the 'Read More' section.";
 
   // Import user 00
   await importUser(page, '00');

test-playwright/60-new-activity.spec.ts

@@ -109,7 +109,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
 
-  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
+  await expect(page.getByText('The offers are marked as read')).toBeVisible();
   await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert
 
   await page.waitForTimeout(1000);
@@ -140,7 +140,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
 
-  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
+  await expect(page.getByText('The offers are marked as read')).toBeVisible();
   await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert
 
   // now see that no offers are shown as new

test-playwright/testUtils.ts

@@ -145,9 +145,10 @@ export async function generateNewEthrUser(page: Page): Promise<string> {
 }
 
 // Function to generate a random string of specified length
+// Note that this only generates up to 10 characters
 export async function generateRandomString(length: number): Promise<string> {
   return Math.random()
-    .toString(36)
+    .toString(36) // base 36 only generates up to 10 characters
     .substring(2, 2 + length);
 }
 
@@ -156,7 +157,7 @@ export async function createUniqueStringsArray(
   count: number
 ): Promise<string[]> {
   const stringsArray: string[] = [];
-  const stringLength = 16;
+  const stringLength = 5; // max of 10; see generateRandomString
 
   for (let i = 0; i < count; i++) {
     let randomString = await generateRandomString(stringLength);