@ibgib/web-gib 0.0.61 → 0.0.62

package/src/ui/component/identity/keystone-details/keystone-details.mts

@@ -2,7 +2,7 @@ import thisCss from "./keystone-details.css";
 import thisHtml from "./keystone-details.html";
 import commonComponentStylesCss from "../../common-component-styles.css";
 
-import { extractErrorMsg, pretty } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { extractErrorMsg, pretty, getSaferSubstring, HashAlgorithm } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
 import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
 import { getIbAndGib, getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
@@ -20,15 +20,22 @@ import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED } fro
 import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
 import { getKeystoneSyncService } from "../../../../identity/keystone-sync-service.mjs";
 import { updateSpecialIndex } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
-import { getTjpAddr, toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { getTjpAddr, toDto, getTimelinesGroupedByTjp } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
 import { parseSpaceIb } from "@ibgib/core-gib/dist/witness/space/space-helper.mjs";
 import { executeSsoOAuthPopup } from "../../../../identity/sso-popup-helper.mjs";
 import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
 import { promptForSecret } from "../../../../helpers.web.mjs";
-import { isSsoProviderLinked, getKeystoneCapabilities, isDelegateExpired } from "@ibgib/core-gib/dist/keystone/delegate/delegate-helpers.mjs";
+import { isSsoProviderLinked, getKeystoneCapabilities, isDelegateExpired, deriveDelegateSecret, createSyncDelegateKeystone, isCustodialDelegate } from "@ibgib/core-gib/dist/keystone/delegate/delegate-helpers.mjs";
 import { generatePoolChallenges } from "@ibgib/core-gib/dist/keystone/keystone-helpers.mjs";
-import { POOL_ID_MANAGE } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { POOL_ID_MANAGE, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT, KEYSTONE_VERB_MANAGE } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { generateDefaultDeviceTag } from "../../../../util/device-helper.mjs";
 import { getGlobalMetaspace_waitIfNeeded } from "../../../../helpers.mjs";
+import { createSovereignDeviceSyncDelegate, createOAuth2DeviceSyncDelegate, createEmailDeviceSyncDelegate } from "../../../../identity/device-delegate-helper.mjs";
+import { isPasskeyPrfSupported, registerPasskeyCredential, evaluatePasskeyPrf, createPasskeyDeviceSyncDelegate, bufferToHex } from "../../../../identity/passkey-helper.mjs";
+import {
+    KeystonePasskeyEntry, KeystoneChallengePool, KeystonePoolConfig_HashV1,
+    KeystoneChallengeType, KeystoneReplenishStrategy
+} from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
 
 const logalot = false;
 
@@ -89,6 +96,10 @@ interface KeystoneDetailsElements extends ElementsBase {
     rawKeystoneJsonEl: HTMLPreElement;
     delegatesCardEl: HTMLDivElement;
     delegatesListEl: HTMLTableSectionElement;
+    passkeysCardEl: HTMLDivElement;
+    passkeysListEl: HTMLTableSectionElement;
+    btnAddPasskeyEl: HTMLButtonElement;
+    passkeyStatusMsgEl: HTMLDivElement;
     historicalWarningBannerEl: HTMLDivElement;
     containerEl: HTMLDivElement;
     ssoLinkCardEl: HTMLDivElement;
@@ -101,6 +112,10 @@ interface KeystoneDetailsElements extends ElementsBase {
     btnChangePasswordEl: HTMLButtonElement;
     changePasswordStatusEl: HTMLDivElement;
     changePasswordCardEl: HTMLDivElement;
+    sectionAddPasswordOtpEl: HTMLDivElement;
+    inputAddPasswordOtpEl: HTMLInputElement;
+    btnResendAddPasswordOtpEl: HTMLButtonElement;
+    descAddPasswordOtpEl: HTMLParagraphElement;
 }
 
 export class KeystoneDetailsComponentInstance
@@ -120,6 +135,7 @@ export class KeystoneDetailsComponentInstance
     private _onIdentityChanged: ((e: any) => void) | null = null;
     private keystoneCache: Map<string, { username: string, description: string, isPrimary: boolean, n: number }> = new Map();
     private aggregatedDetails?: any;
+    private resendCooldownInterval: any = null;
 
     constructor() {
         super();
@@ -142,6 +158,39 @@ export class KeystoneDetailsComponentInstance
         }
     }
 
+    override async disconnected(): Promise<void> {
+        if (this._onIdentityChanged) {
+            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+        }
+        if (this.resendCooldownInterval) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = null;
+        }
+    }
+
+    private startResendCooldownTimer(durationSecs: number = 30): void {
+        const btn = this.elements?.btnResendAddPasswordOtpEl;
+        if (!btn) return;
+        if (this.resendCooldownInterval) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = null;
+        }
+        let remaining = durationSecs;
+        btn.disabled = true;
+        btn.textContent = `Resend Code (${remaining}s)`;
+        this.resendCooldownInterval = setInterval(() => {
+            remaining -= 1;
+            if (remaining <= 0) {
+                clearInterval(this.resendCooldownInterval);
+                this.resendCooldownInterval = null;
+                btn.disabled = false;
+                btn.textContent = "Resend Code";
+            } else {
+                btn.textContent = `Resend Code (${remaining}s)`;
+            }
+        }, 1000);
+    }
+
     private async getKeystoneDetails(addr: string): Promise<{ username: string, description: string, isPrimary: boolean, n: number }> {
         const cached = this.keystoneCache.get(addr);
         if (cached) return cached;
@@ -208,6 +257,10 @@ export class KeystoneDetailsComponentInstance
             this.elements.rawKeystoneJsonEl = shadow.getElementById('raw-keystone-json') as HTMLPreElement;
             this.elements.delegatesCardEl = shadow.getElementById('delegates-card') as HTMLDivElement;
             this.elements.delegatesListEl = shadow.getElementById('delegates-list') as HTMLTableSectionElement;
+            this.elements.passkeysCardEl = shadow.getElementById('passkeys-card') as HTMLDivElement;
+            this.elements.passkeysListEl = shadow.getElementById('passkeys-list') as HTMLTableSectionElement;
+            this.elements.btnAddPasskeyEl = shadow.getElementById('btn-add-passkey') as HTMLButtonElement;
+            this.elements.passkeyStatusMsgEl = shadow.getElementById('passkey-status-msg') as HTMLDivElement;
             this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
             this.elements.historicalWarningBannerEl = shadow.getElementById('historical-warning-banner') as HTMLDivElement;
             this.elements.ssoLinkCardEl = shadow.getElementById('sso-link-card') as HTMLDivElement;
@@ -220,6 +273,10 @@ export class KeystoneDetailsComponentInstance
             this.elements.btnChangePasswordEl = shadow.getElementById('btn-change-password') as HTMLButtonElement;
             this.elements.changePasswordStatusEl = shadow.getElementById('change-password-status') as HTMLDivElement;
             this.elements.changePasswordCardEl = shadow.getElementById('change-password-card') as HTMLDivElement;
+            this.elements.sectionAddPasswordOtpEl = shadow.getElementById('section-add-password-otp') as HTMLDivElement;
+            this.elements.inputAddPasswordOtpEl = shadow.getElementById('input-add-password-otp') as HTMLInputElement;
+            this.elements.btnResendAddPasswordOtpEl = shadow.getElementById('btn-resend-add-password-otp') as HTMLButtonElement;
+            this.elements.descAddPasswordOtpEl = shadow.getElementById('desc-add-password-otp') as HTMLParagraphElement;
 
             // ElementBase requires contentEl
             this.elements.contentEl = shadow.getElementById('identity-details-view') as HTMLDivElement;
@@ -245,12 +302,6 @@ export class KeystoneDetailsComponentInstance
         }
     }
 
-    override async disconnected(): Promise<void> {
-        if (this._onIdentityChanged) {
-            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
-        }
-    }
-
     private initHandlers() {
         // Setup raw JSON accordion toggle
         this.elements!.rawAccordionHeaderEl.addEventListener('click', () => this.toggleAccordion());
@@ -260,9 +311,11 @@ export class KeystoneDetailsComponentInstance
         this.elements!.btnSetActiveEl.addEventListener('click', () => this.handleSetActiveIdentity());
         this.elements!.btnCheckUpdatesEl.addEventListener('click', () => this.handleCheckForUpdates());
         this.elements!.btnUpdateIdentityEl.addEventListener('click', () => this.handleUpdateIdentity());
+        this.elements!.btnAddPasskeyEl?.addEventListener('click', () => this.handleAddPasskey());
         this.elements!.btnLinkGoogleEl.addEventListener('click', () => this.handleSSOClick('google'));
         this.elements!.btnLinkGithubEl.addEventListener('click', () => this.handleSSOClick('github'));
         this.elements!.btnChangePasswordEl.addEventListener('click', () => this.handleChangePassword());
+        this.elements!.btnResendAddPasswordOtpEl?.addEventListener('click', () => this.handleResendAddPasswordOtp());
     }
 
     private toggleAccordion() {
@@ -458,15 +511,22 @@ export class KeystoneDetailsComponentInstance
 
             // Check if origin provider or linked
             const originProvider = this.aggregatedDetails?.custodianProvider || this.ibGib?.data?.frameDetails?.custodianProvider;
-            const isGoogleLinked = isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId: 'google' });
-            const isGithubLinked = isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId: 'github' });
+            const isGoogleLinked = !!this.ibGib ?
+                isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId: 'google' }) :
+                false;
+            const isGithubLinked = !!this.ibGib ?
+                isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId: 'github' }) :
+                false;
 
-            const caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
+            const caps = !!this.ibGib ?
+                getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails }) :
+                undefined;
 
             // Google Card States
             const googleCard = this.elements.btnLinkGoogleEl;
             const googleLabel = googleCard.querySelector('.toggle-state-text')!;
             if (isGoogleLinked) {
+                if (!caps) { throw new Error(`(UNEXPECTED) isGoogleLinked but capabilities falsy? (E: cc62e8357b66860dd2cb8148c833b726)`); }
                 googleCard.classList.remove('unlinked');
                 googleCard.classList.add('linked');
                 const isOrigin = originProvider === 'google';
@@ -491,6 +551,7 @@ export class KeystoneDetailsComponentInstance
             const githubCard = this.elements.btnLinkGithubEl;
             const githubLabel = githubCard.querySelector('.toggle-state-text')!;
             if (isGithubLinked) {
+                if (!caps) { throw new Error(`(UNEXPECTED) isGithubLinked but capabilities falsy? (E: e94688210538e0e82878088873a46826)`); }
                 githubCard.classList.remove('unlinked');
                 githubCard.classList.add('linked');
                 const isOrigin = originProvider === 'github';
@@ -514,13 +575,17 @@ export class KeystoneDetailsComponentInstance
     }
 
     private updatePasswordCardView(): void {
-        const caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
+        const caps = !!this.ibGib ?
+            getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails }) :
+            false;
         const cardTitleEl = this.elements?.changePasswordCardEl?.querySelector('h3');
         const cardDescEl = this.elements?.changePasswordCardEl?.querySelector('.description');
         const currentPasswordGroup = this.elements?.inputCurrentPasswordEl?.closest('.form-group') as HTMLElement | null;
         const btnChangePassword = this.elements?.btnChangePasswordEl;
 
-        const isCustodialOnly = caps.isCustodial && !caps.isSovereign;
+        const isCustodialOnly = !!caps ?
+            caps.isCustodial && !caps.isSovereign :
+            false;
         if (isCustodialOnly) {
             if (cardTitleEl) cardTitleEl.textContent = "Add Master Password";
             if (cardDescEl) cardDescEl.textContent = "Establish sovereign ownership by adding a master password. This enables direct, independent cryptographic management without relying solely on custodian authentication.";
@@ -532,6 +597,13 @@ export class KeystoneDetailsComponentInstance
             if (currentPasswordGroup) currentPasswordGroup.style.display = '';
             if (btnChangePassword) btnChangePassword.textContent = "Update Password";
         }
+
+        if (this.elements?.sectionAddPasswordOtpEl) {
+            this.elements.sectionAddPasswordOtpEl.classList.add('hidden');
+            if (this.elements.inputAddPasswordOtpEl) {
+                this.elements.inputAddPasswordOtpEl.value = '';
+            }
+        }
     }
 
     private async updateFrameDetailsView(): Promise<void> {
@@ -643,16 +715,19 @@ export class KeystoneDetailsComponentInstance
             // Render Challenge Pools
             this.renderChallengePools(keystone.data?.challengePools || []);
 
-            // Render Delegates, SSO link, and Password Change cards (only if this is a primary keystone, hide them for delegate/session keystones)
+            // Render Delegates, Passkeys, SSO link, and Password Change cards (only if this is a primary keystone, hide them for delegate/session keystones)
             const details = await this.getKeystoneDetails(this.ibGibAddr);
             if (details.isPrimary) {
                 this.elements.delegatesCardEl.classList.remove('hidden');
                 await this.renderDelegates(keystone.data?.delegates);
+                this.elements.passkeysCardEl.classList.remove('hidden');
+                await this.renderPasskeys(this.aggregatedDetails?.passkeys);
                 this.elements.ssoLinkCardEl.classList.remove('hidden');
                 this.elements.changePasswordCardEl.classList.remove('hidden');
                 this.updatePasswordCardView();
             } else {
                 this.elements.delegatesCardEl.classList.add('hidden');
+                this.elements.passkeysCardEl.classList.add('hidden');
                 this.elements.ssoLinkCardEl.classList.add('hidden');
                 this.elements.changePasswordCardEl.classList.add('hidden');
             }
@@ -687,6 +762,15 @@ export class KeystoneDetailsComponentInstance
         if (this.elements.delegatesListEl) {
             this.elements.delegatesListEl.innerHTML = '';
         }
+        if (this.elements.passkeysListEl) {
+            this.elements.passkeysListEl.innerHTML = '';
+        }
+        if (this.elements.sectionAddPasswordOtpEl) {
+            this.elements.sectionAddPasswordOtpEl.classList.add('hidden');
+            if (this.elements.inputAddPasswordOtpEl) {
+                this.elements.inputAddPasswordOtpEl.value = '';
+            }
+        }
     }
 
     private renderChallengePools(pools: any[]) {
@@ -1009,8 +1093,9 @@ export class KeystoneDetailsComponentInstance
             let masterSecret: string;
             try {
                 masterSecret = await promptForSecret({
-                    msg: `Enter Master Password to revoke delegate '${deviceName}':`,
-                    confirm: false
+                    msg: `Enter Master Password or touch security key to revoke delegate '${deviceName}':`,
+                    confirm: false,
+                    passkeys: this.aggregatedDetails?.passkeys,
                 });
             } catch (err) {
                 // User cancelled prompt
@@ -1027,11 +1112,35 @@ export class KeystoneDetailsComponentInstance
 
             const keystoneSvc = new KeystoneService_V1();
 
+            // Resolve which manage pool matches the provided masterSecret
+            let matchedPoolId: string | undefined;
+            const candidatePools = this.ibGib!.data?.challengePools.filter(p =>
+                p.id === 'manage' || p.id.startsWith('passkey-manage-') || (p.config.allowedVerbs && p.config.allowedVerbs.includes(KEYSTONE_VERB_MANAGE))
+            ) || [];
+
+            for (const pool of candidatePools) {
+                const ok = await keystoneSvc.verifySigningSecret({
+                    keystoneIbGib: this.ibGib!,
+                    signingSecret: masterSecret,
+                    poolId: pool.id
+                });
+                if (ok) {
+                    matchedPoolId = pool.id;
+                    break;
+                }
+            }
+
+            if (!matchedPoolId) {
+                this.setSyncStatus("Failed to authorize revocation (invalid secret/passkey).", "error");
+                return;
+            }
+
             // Unregister delegate from parent keystone
             const evolvedParent = await keystoneSvc.unregisterDelegate({
                 parentKeystone: this.ibGib!,
                 delegateTjpAddr,
                 masterSecret,
+                signingPoolId: matchedPoolId,
                 metaspace,
                 space
             });
@@ -1085,6 +1194,477 @@ export class KeystoneDetailsComponentInstance
         }
     }
 
+    private setPasskeyStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const statusEl = this.elements?.passkeyStatusMsgEl;
+        if (!statusEl) return;
+        statusEl.textContent = msg;
+        statusEl.className = `status-msg ${type}`;
+        statusEl.classList.remove('hidden');
+    }
+
+    private async renderPasskeys(passkeys: Record<string, KeystonePasskeyEntry> | undefined) {
+        if (!this.elements) { return; }
+        const listEl = this.elements.passkeysListEl;
+        listEl.innerHTML = '';
+
+        const caps = !!this.ibGib ?
+            getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails }) :
+            undefined;
+
+        // Update button text depending on whether the account is custodial-only (elevation) or sovereign/hybrid
+        const isCustodialOnly = !!caps ? caps.isCustodial && !caps.isSovereign : false;
+        if (this.elements.btnAddPasskeyEl) {
+            this.elements.btnAddPasskeyEl.textContent = isCustodialOnly
+                ? "🛡️ Add Passkey (Passwordless Sovereign Elevation)"
+                : "🛡️ Register New Passkey / Security Key";
+        }
+
+        const validPasskeyEntries = Object.entries(passkeys || {}).filter(([_, entry]) => entry !== null && entry !== undefined);
+
+        if (validPasskeyEntries.length === 0) {
+            listEl.innerHTML = `
+                <tr>
+                    <td colspan="4" style="text-align: center; color: var(--clr-text-secondary, #b3b3b3); padding: 1rem;">
+                        No hardware passkeys or biometrics registered.
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        for (const [credId, entry] of validPasskeyEntries) {
+            const row = document.createElement('tr');
+            const createdText = entry.createdUTC ? new Date(entry.createdUTC).toLocaleString() : 'N/A';
+            const nameText = entry.name || 'Hardware Key';
+
+            // Format transport badges
+            let transportBadgesHtml = '';
+            if (entry.transports && entry.transports.length > 0) {
+                transportBadgesHtml = entry.transports.map(t => {
+                    let icon = '🔑';
+                    let label: string = t;
+                    if (t === 'internal') { icon = '💻'; label = 'Touch ID / Built-in'; }
+                    else if (t === 'usb') { icon = '🔑'; label = 'USB Key'; }
+                    else if (t === 'nfc') { icon = '📶'; label = 'NFC'; }
+                    else if (t === 'ble' || t === 'hybrid') { icon = '📲'; label = 'Mobile / Bluetooth'; }
+                    return `<span class="badge badge-remote-device" style="background-color: #1b5e20; color: #a5d6a7; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: bold; margin-right: 0.3rem;">${icon} ${label}</span>`;
+                }).join(' ');
+            } else {
+                transportBadgesHtml = `<span class="badge badge-remote-device" style="background-color: #2e7d32; color: #c8e6c9; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: bold;">🛡️ Resident Passkey</span>`;
+            }
+
+            row.innerHTML = `
+                <td>
+                    <div style="font-weight: 500;">${nameText}</div>
+                    <code style="font-size: 0.75rem; color: var(--clr-text-secondary, #b3b3b3); word-break: break-all;">${credId.substring(0, 16)}...</code>
+                </td>
+                <td>${transportBadgesHtml}</td>
+                <td style="font-size: 0.85rem; color: var(--clr-text-secondary, #b3b3b3);">${createdText}</td>
+                <td>
+                    <button class="action-btn secondary btn-remove-passkey" style="font-size: 0.8rem; padding: 0.3rem 0.6rem; background: rgba(239, 83, 80, 0.1); color: #ef5350; border: 1px solid rgba(239, 83, 80, 0.3);">
+                        Remove
+                    </button>
+                </td>
+            `;
+
+            const btnRemove = row.querySelector('.btn-remove-passkey') as HTMLButtonElement;
+            btnRemove?.addEventListener('click', () => this.handleRemovePasskey(credId));
+
+            listEl.appendChild(row);
+        }
+    }
+
+    protected async handleAddPasskey(): Promise<void> {
+        const lc = `${this.lc}[${this.handleAddPasskey.name}]`;
+        if (!this.ibGib || !this.ibGibAddr) { return; }
+
+        try {
+            const caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
+            const isCustodialOnly = caps.isCustodial && !caps.isSovereign;
+
+            const supported = await isPasskeyPrfSupported();
+            if (!supported) {
+                this.setPasskeyStatus("WebAuthn PRF extension is not supported in this browser environment.", "error");
+                return;
+            }
+
+            this.showBusy({
+                isBusy: true,
+                title: 'Touch Biometrics or Security Key',
+                msg: 'Please touch your fingerprint sensor, Face ID, or insert your USB security key when prompted...',
+                animationEmoji: '🛡️'
+            });
+
+            const username = this.aggregatedDetails?.username || this.ibGib.data?.frameDetails?.username || 'user';
+            const rawSalt = crypto.getRandomValues(new Uint8Array(32));
+            const saltHex = bufferToHex(rawSalt.buffer as ArrayBuffer);
+
+            const regResult = await registerPasskeyCredential({
+                username,
+                displayName: username,
+                salt: saltHex
+            });
+            const { credentialId, transports } = regResult;
+
+            let passkeySecret = regResult.passkeySecret;
+            if (!passkeySecret) {
+                const prfResult = await evaluatePasskeyPrf({
+                    credentialId,
+                    salt: saltHex,
+                    transports
+                });
+                passkeySecret = prfResult.passkeySecret;
+            }
+
+            const defaultDeviceTag = generateDefaultDeviceTag();
+            const passkeyName = defaultDeviceTag;
+            const passkeyTag = getSaferSubstring({ text: passkeyName, length: 12, keepLiterals: ['-'] }) || 'key';
+            const poolId = `passkey-manage-${passkeyTag}`;
+
+            const passkeyEntry: KeystonePasskeyEntry = {
+                credentialId,
+                poolId,
+                name: passkeyName,
+                salt: saltHex,
+                createdUTC: new Date().toISOString(),
+                ...(transports && transports.length > 0 ? { transports } : {})
+            };
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) throw new Error("Local space not found");
+
+            const keystoneService = new KeystoneService_V1();
+            let evolvedKeystone: KeystoneIbGib_V1;
+
+            if (isCustodialOnly) {
+                // Elevate custodial account with sovereign passkey
+                this.showBusy({
+                    isBusy: true,
+                    title: 'Elevating Account Ownership...',
+                    msg: 'Establishing sovereign passkey pool on identity...',
+                    animationEmoji: '⚡'
+                });
+
+                // Generate new manage pool configuration using passkeySecret
+                const poolConfig: KeystonePoolConfig_HashV1 = {
+                    id: poolId,
+                    type: KeystoneChallengeType.hash_reveal_v1,
+                    salt: poolId,
+                    algo: HashAlgorithm.sha_256,
+                    rounds: 1,
+                    allowedVerbs: [KEYSTONE_VERB_MANAGE, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                    behavior: {
+                        size: 10,
+                        replenish: KeystoneReplenishStrategy.topUp,
+                        selectSequentially: 1,
+                        selectRandomly: 0,
+                        targetBindingCount: 0,
+                    }
+                };
+
+                const challenges = await generatePoolChallenges({
+                    config: poolConfig,
+                    masterSecret: passkeySecret
+                });
+
+                const newPool: KeystoneChallengePool = {
+                    id: poolId,
+                    config: poolConfig,
+                    challenges
+                };
+
+                evolvedKeystone = await keystoneService.addPools({
+                    latestKeystone: this.ibGib,
+                    masterSecret: passkeySecret,
+                    newPools: [newPool],
+                    frameDetails: {
+                        passkeys: {
+                            [credentialId]: passkeyEntry
+                        }
+                    },
+                    dataToPatch: {
+                        credentialIds: [...(this.ibGib.data?.credentialIds || []), credentialId]
+                    },
+                    metaspace,
+                    space
+                });
+            } else {
+                // Secondary passkey registration on existing sovereign identity:
+                // Prompt user to authorize with current master password
+                let authSecret: string | undefined;
+                let isCorrect = false;
+                let tries = 0;
+                const maxTries = 5;
+
+                while (tries < maxTries && !isCorrect) {
+                    try {
+                        const promptMsg = tries === 0
+                            ? 'Enter your current Master Secret (Password) or touch security key to authorize adding this passkey:'
+                            : `Incorrect password. Please try again (${maxTries - tries} tries remaining):`;
+                        authSecret = await promptForSecret({
+                            msg: promptMsg,
+                            confirm: false,
+                            passkeys: this.aggregatedDetails?.passkeys,
+                        });
+                    } catch (err) {
+                        authSecret = undefined;
+                        break;
+                    }
+
+                    if (!authSecret) break;
+
+                    // Verify secret against manage/passkey pools
+                    isCorrect = await keystoneService.verifySigningSecret({
+                        keystoneIbGib: this.ibGib,
+                        signingSecret: authSecret
+                    });
+
+                    if (!isCorrect) tries++;
+                }
+
+                if (!isCorrect || !authSecret) {
+                    this.setPasskeyStatus("Registration cancelled (authorization required).", "error");
+                    return;
+                }
+
+                this.showBusy({
+                    isBusy: true,
+                    title: 'Registering Passkey...',
+                    msg: 'Adding cryptographic challenge pool and evolving identity...',
+                    animationEmoji: '🛡️'
+                });
+
+                const poolConfig: KeystonePoolConfig_HashV1 = {
+                    id: poolId,
+                    type: KeystoneChallengeType.hash_reveal_v1,
+                    salt: poolId,
+                    algo: HashAlgorithm.sha_256,
+                    rounds: 1,
+                    allowedVerbs: [KEYSTONE_VERB_MANAGE, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                    behavior: {
+                        size: 10,
+                        replenish: KeystoneReplenishStrategy.topUp,
+                        selectSequentially: 1,
+                        selectRandomly: 0,
+                        targetBindingCount: 0,
+                    }
+                };
+
+                const challenges = await generatePoolChallenges({
+                    config: poolConfig,
+                    masterSecret: passkeySecret
+                });
+
+                const newPool: KeystoneChallengePool = {
+                    id: poolId,
+                    config: poolConfig,
+                    challenges
+                };
+
+                evolvedKeystone = await keystoneService.addPools({
+                    latestKeystone: this.ibGib,
+                    masterSecret: authSecret,
+                    newPools: [newPool],
+                    frameDetails: {
+                        passkeys: {
+                            [credentialId]: passkeyEntry
+                        }
+                    },
+                    dataToPatch: {
+                        credentialIds: [...(this.ibGib.data?.credentialIds || []), credentialId]
+                    },
+                    metaspace,
+                    space
+                });
+            }
+
+            // Sync evolved keystone to server
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Publishing evolved identity keystone to server...',
+                animationEmoji: '⚡'
+            });
+
+            const primaryTjpAddr = getTjpAddr({ ibGib: evolvedKeystone, defaultIfNone: 'incomingAddr' })!;
+            const resSync = await getApiBridge().putEvolveKeystone({
+                domainAddr: primaryTjpAddr,
+                keystoneIbGib: evolvedKeystone,
+                relatedKeystoneIbGibs: []
+            });
+
+            if (!resSync.success) {
+                console.warn(`${lc} Server sync note: ${resSync.message}`);
+            }
+
+            // Update Special Index
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: evolvedKeystone })]
+                    }
+                ],
+                metaspace,
+                space
+            });
+
+            this.setPasskeyStatus("Passkey successfully registered and bound to identity!", "success");
+            this.ibGibAddr = getIbGibAddr({ ibGib: evolvedKeystone });
+            this.staticIbGib = evolvedKeystone;
+            await this.loadIbGib({ getLatest: false });
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`, error);
+            this.setPasskeyStatus(`Failed to register passkey: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
+        }
+    }
+
+    protected async handleRemovePasskey(credentialId: string): Promise<void> {
+        const lc = `${this.lc}[${this.handleRemovePasskey.name}]`;
+        if (!this.ibGib || !this.ibGibAddr) { return; }
+
+        const passkeyEntry = this.aggregatedDetails?.passkeys?.[credentialId];
+        const passkeyName = passkeyEntry?.name || 'this passkey';
+
+        try {
+            const keystoneService = new KeystoneService_V1();
+            let masterSecret: string | undefined;
+            let isCorrect = false;
+            let tries = 0;
+            const maxTries = 5;
+
+            while (tries < maxTries && !isCorrect) {
+                try {
+                    const promptMsg = tries === 0
+                        ? `Are you sure you want to remove "${passkeyName}"? Enter your Master Secret (Password) or touch security key to authorize:`
+                        : `Incorrect password. Please try again (${maxTries - tries} tries remaining):`;
+                    masterSecret = await promptForSecret({
+                        msg: promptMsg,
+                        confirm: false,
+                        passkeys: this.aggregatedDetails?.passkeys,
+                    });
+                } catch (err) {
+                    masterSecret = undefined;
+                    break;
+                }
+
+                if (!masterSecret) break;
+
+                isCorrect = await keystoneService.verifySigningSecret({
+                    keystoneIbGib: this.ibGib,
+                    signingSecret: masterSecret
+                });
+
+                if (!isCorrect) tries++;
+            }
+
+            if (!isCorrect || !masterSecret) {
+                this.setPasskeyStatus("Removal cancelled or unauthorized.", "error");
+                return;
+            }
+
+            this.showBusy({
+                isBusy: true,
+                title: 'Revoking Passkey...',
+                msg: 'Tombstoning passkey record and removing challenge pool...',
+                animationEmoji: '🗑️'
+            });
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) throw new Error("Local space not found");
+
+            const poolIdToRemove = passkeyEntry?.poolId || `passkey-manage-${credentialId.substring(0, 8)}`;
+            const poolExists = this.ibGib.data?.challengePools.some(p => p.id === poolIdToRemove);
+
+            const filteredCredentialIds = (this.ibGib.data?.credentialIds || []).filter(id => id !== credentialId);
+
+            let evolvedKeystone: KeystoneIbGib_V1;
+            if (poolExists) {
+                evolvedKeystone = await keystoneService.removePools({
+                    latestKeystone: this.ibGib,
+                    masterSecret,
+                    poolIds: [poolIdToRemove],
+                    frameDetails: {
+                        passkeys: {
+                            [credentialId]: null
+                        }
+                    },
+                    dataToPatch: {
+                        credentialIds: filteredCredentialIds
+                    },
+                    metaspace,
+                    space
+                });
+            } else {
+                evolvedKeystone = await keystoneService.sign({
+                    latestKeystone: this.ibGib,
+                    masterSecret,
+                    claim: {
+                        verb: POOL_ID_MANAGE,
+                        target: getIbGibAddr({ ibGib: this.ibGib })
+                    },
+                    frameDetails: {
+                        passkeys: {
+                            [credentialId]: null
+                        }
+                    },
+                    dataToPatch: {
+                        credentialIds: filteredCredentialIds
+                    },
+                    metaspace,
+                    space
+                });
+            }
+
+            // Sync to server
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Publishing updated keystone to server...',
+                animationEmoji: '⚡'
+            });
+
+            const primaryTjpAddr = getTjpAddr({ ibGib: evolvedKeystone, defaultIfNone: 'incomingAddr' })!;
+            await getApiBridge().putEvolveKeystone({
+                domainAddr: primaryTjpAddr,
+                keystoneIbGib: evolvedKeystone,
+                relatedKeystoneIbGibs: []
+            });
+
+            // Update Special Index
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: evolvedKeystone })]
+                    }
+                ],
+                metaspace,
+                space
+            });
+
+            this.setPasskeyStatus(`Passkey "${passkeyName}" successfully removed.`, "success");
+            this.ibGibAddr = getIbGibAddr({ ibGib: evolvedKeystone });
+            this.staticIbGib = evolvedKeystone;
+            await this.loadIbGib({ getLatest: false });
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`, error);
+            this.setPasskeyStatus(`Failed to remove passkey: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
+        }
+    }
+
     override async handleContextUpdated(): Promise<void> {
         const lc = `${this.lc}[${this.handleContextUpdated.name}]`;
         try {
@@ -1124,10 +1704,26 @@ export class KeystoneDetailsComponentInstance
         const lc = `${this.lc}[${this.handleSSOLink.name}]`;
         this.setSSOStatus(`Linking ${providerId}...`, "info");
 
+        const providerName = providerId === 'google' ? 'Google' : providerId === 'github' ? 'GitHub' : providerId;
+        this.setSSOStatus(`Opening ${providerName} SSO authorization window...`, "info");
+        this.showBusy({
+            isBusy: true,
+            title: `Connecting to ${providerName}...`,
+            msg: `Opening ${providerName} SSO authorization window...\nPlease complete authorization in the popup window.`,
+            animationEmoji: '🌐'
+        });
+
         try {
+            const primaryTjpAddr = (this.ibGib ? getTjpAddr({ ibGib: this.ibGib }) : undefined)
+                || (this.ibGibAddr ? (() => {
+                    const { ib } = getIbAndGib({ ibGibAddr: this.ibGibAddr });
+                    const { tjpGib } = getGibInfo({ ibGibAddr: this.ibGibAddr });
+                    return tjpGib && ib ? `${ib}^${tjpGib}` : this.ibGibAddr;
+                })() : undefined);
+
             const resPopup = await executeSsoOAuthPopup({
                 providerId,
-                parentTjpAddr: this.ibGibAddr
+                parentTjpAddr: primaryTjpAddr
             });
 
             if (!resPopup.success || !resPopup.code) {
@@ -1139,6 +1735,8 @@ export class KeystoneDetailsComponentInstance
         } catch (error) {
             console.error(`${lc} SSO link initiation failed: ${extractErrorMsg(error)}`);
             this.setSSOStatus(`Link failed: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
         }
     }
 
@@ -1151,7 +1749,14 @@ export class KeystoneDetailsComponentInstance
 
     protected async handleSSOLinkCallback(code: string, stateObj: any, redirectUri: string) {
         const lc = `${this.lc}[${this.handleSSOLinkCallback.name}]`;
-        this.setSSOStatus("Retrieving challenge pool configuration from server...", "info");
+        const providerName = stateObj.providerId === 'google' ? 'Google' : stateObj.providerId === 'github' ? 'GitHub' : stateObj.providerId;
+        this.setSSOStatus(`Retrieving challenge pool configuration from server...`, "info");
+        this.showBusy({
+            isBusy: true,
+            title: `Linking ${providerName}...`,
+            msg: `Validating ${providerName} authorization with server...`,
+            animationEmoji: '🔐'
+        });
 
         try {
             // 1. Exchange OAuth code for custodian public pool config
@@ -1179,6 +1784,7 @@ export class KeystoneDetailsComponentInstance
             const custodianPool = linkData.custodianPool;
 
             // 2. Prompt user for master secret and verify it
+            this.showBusy({ isBusy: false });
             const keystoneService = new KeystoneService_V1();
             let masterSecret: string | undefined;
             let isCorrect = false;
@@ -1222,6 +1828,12 @@ export class KeystoneDetailsComponentInstance
                 return;
             }
 
+            this.showBusy({
+                isBusy: true,
+                title: 'Evolving Identity...',
+                msg: `Installing ${providerName} custodian pool and signing evolution...`,
+                animationEmoji: '📝'
+            });
             this.setSSOStatus("Evolving identity locally and generating cryptographic signatures...", "info");
 
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
@@ -1229,7 +1841,7 @@ export class KeystoneDetailsComponentInstance
             const space = await metaspace.getLocalUserSpace({ lock: false });
             if (!space) { throw new Error("Local space not found"); }
 
-            // 3. Evolve parent keystone to include the custodian pool
+            // 3. Evolve parent keystone to include the custodian pool (n -> n+1)
             const evolvedParent = await keystoneService.addPools({
                 latestKeystone: this.ibGib!,
                 masterSecret: masterSecret!,
@@ -1238,24 +1850,64 @@ export class KeystoneDetailsComponentInstance
                 space
             });
 
-            // 4. Sync evolved parent keystone back to server
-            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
-            const syncRes = await getApiBridge().putEvolveKeystone({
+            // Sync evolved parent (n+1) to server first
+            const syncRes1 = await getApiBridge().putEvolveKeystone({
                 domainAddr: stateObj.parentTjpAddr,
                 keystoneIbGib: evolvedParent,
-                relatedKeystoneIbGibs: [] // No outward delegate timelines
+                relatedKeystoneIbGibs: []
             });
-            if (!syncRes.success) {
-                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+            if (!syncRes1.success) {
+                throw new Error(`Server synchronization of linked pool rejected: ${syncRes1.message}`);
             }
 
-            // 5. Update index locally
+            // 4. Create and register OAuth2 sync delegate for this provider (n+1 -> n+2)
+            const username = this.aggregatedDetails?.username || this.ibGib?.data?.username || 'user';
+            const { delegateKeystone, deviceTag } = await createOAuth2DeviceSyncDelegate({
+                providerId: stateObj.providerId,
+                username,
+                primaryTjpAddr: stateObj.parentTjpAddr,
+                custodianReqs: linkData.custodianReqs,
+                metaspace,
+                space,
+            });
+
+            const parentWithDelegate = await keystoneService.registerDelegate({
+                parentKeystone: evolvedParent,
+                delegateKeystone,
+                masterSecret: masterSecret!,
+                signingPoolId: 'manage',
+                metaspace,
+                space,
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                deviceName: deviceTag,
+            });
+
+            await metaspace.put({ ibGibs: [delegateKeystone, parentWithDelegate], space });
+
+            // 5. Sync parent with registered delegate (n+2) to server
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Publishing linked identity and delegate to server...',
+                animationEmoji: '⚡'
+            });
+            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
+            const syncRes2 = await getApiBridge().putEvolveKeystone({
+                domainAddr: stateObj.parentTjpAddr,
+                keystoneIbGib: parentWithDelegate,
+                relatedKeystoneIbGibs: [delegateKeystone]
+            });
+            if (!syncRes2.success) {
+                throw new Error(`Server synchronization of delegate rejected: ${syncRes2.message}`);
+            }
+
+            // 6. Update index locally
             await updateSpecialIndex({
                 type: "keystones",
                 rel8nInfos: [
                     {
                         rel8nName: "keystone",
-                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                        ibGibs: [toDto({ ibGib: parentWithDelegate }), toDto({ ibGib: delegateKeystone })]
                     }
                 ],
                 metaspace,
@@ -1263,18 +1915,24 @@ export class KeystoneDetailsComponentInstance
             });
 
             this.setSSOStatus(`Successfully linked with ${stateObj.providerId}!`, "success");
+            this.ibGibAddr = getIbGibAddr({ ibGib: parentWithDelegate });
+            this.staticIbGib = parentWithDelegate;
             await this.loadIbGib({ getLatest: false });
 
         } catch (error) {
             console.error(`${lc} SSO callback processing failed: ${extractErrorMsg(error)}`);
             this.setSSOStatus(`Link failed: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
         }
     }
 
     protected async handleSSOClick(providerId: 'google' | 'github') {
-        const isLinked = isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId });
+        const isLinked = !!this.ibGib ?
+            isSsoProviderLinked({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails, providerId }) :
+            false;
         if (isLinked) {
-            const caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
+            const caps = getKeystoneCapabilities({ keystone: this.ibGib!, aggregatedDetails: this.aggregatedDetails });
             if (!caps.isSovereign) {
                 this.setSSOStatus(`Cannot unlink ${providerId}: This is your only identity recovery and management method. Please add a Master Password first in the Password card below to enable sovereign ownership before unlinking.`, "error");
                 return;
@@ -1287,7 +1945,8 @@ export class KeystoneDetailsComponentInstance
 
     protected async handleSSOUnlink(providerId: 'google' | 'github') {
         const lc = `${this.lc}[${this.handleSSOUnlink.name}]`;
-        this.setSSOStatus(`Unlinking ${providerId}...`, "info");
+        const providerName = providerId === 'google' ? 'Google' : providerId === 'github' ? 'GitHub' : providerId;
+        this.setSSOStatus(`Unlinking ${providerName}...`, "info");
 
         try {
             // 1. Prompt user for password
@@ -1300,11 +1959,12 @@ export class KeystoneDetailsComponentInstance
             while (tries < maxTries && !isCorrect) {
                 try {
                     const promptMsg = tries === 0
-                        ? `Are you sure you want to unlink your ${providerId} account? If so, enter your local Master Secret (Password) to authorize. Otherwise, click Cancel.`
+                        ? `Are you sure you want to unlink your ${providerName} account? If so, enter your local Master Secret (Password) or touch security key to authorize. Otherwise, click Cancel.`
                         : `Incorrect password. Please try again (${maxTries - tries} tries remaining):`;
                     masterSecret = await promptForSecret({
                         msg: promptMsg,
-                        confirm: false
+                        confirm: false,
+                        passkeys: this.aggregatedDetails?.passkeys,
                     });
                 } catch (error) {
                     masterSecret = undefined;
@@ -1315,11 +1975,10 @@ export class KeystoneDetailsComponentInstance
                     break;
                 }
 
-                // Verify secret using verifySigningSecret (requires manage poolId)
+                // Verify secret using verifySigningSecret
                 isCorrect = await keystoneService.verifySigningSecret({
                     keystoneIbGib: this.ibGib!,
-                    signingSecret: masterSecret,
-                    poolId: 'manage'
+                    signingSecret: masterSecret
                 });
 
                 if (!isCorrect) {
@@ -1332,6 +1991,12 @@ export class KeystoneDetailsComponentInstance
                 return;
             }
 
+            this.showBusy({
+                isBusy: true,
+                title: 'Unlinking Provider...',
+                msg: `Removing ${providerName} custodian pool and delegate keys...`,
+                animationEmoji: '🔓'
+            });
             this.setSSOStatus("Evolving identity locally and removing custodian pool...", "info");
 
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
@@ -1349,33 +2014,63 @@ export class KeystoneDetailsComponentInstance
                 space
             });
 
-            // Unregister any corresponding outward delegate for this provider if present
-            const delegatesMap = this.ibGib?.data?.delegates;
+            const primaryTjpAddr = (this.ibGib ? getTjpAddr({ ibGib: this.ibGib }) : undefined)
+                || (this.ibGibAddr ? (() => {
+                    const { ib } = getIbAndGib({ ibGibAddr: this.ibGibAddr });
+                    const { tjpGib } = getGibInfo({ ibGibAddr: this.ibGibAddr });
+                    return tjpGib && ib ? `${ib}^${tjpGib}` : this.ibGibAddr;
+                })() : undefined)
+                || getIbGibAddr({ ibGib: this.ibGib! });
+
+            // 3. Sync pool removal frame to server
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: `Publishing ${providerName} pool removal to server...`,
+                animationEmoji: '⚡'
+            });
+            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
+            let syncRes = await getApiBridge().putEvolveKeystone({
+                domainAddr: primaryTjpAddr,
+                keystoneIbGib: evolvedParent,
+                relatedKeystoneIbGibs: [] // No outward delegate timelines
+            });
+            if (!syncRes.success) {
+                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+            }
+
+            // 4. Unregister any corresponding outward delegate for this provider if present
+            const delegatesMap = evolvedParent.data?.delegates || this.ibGib?.data?.delegates;
             if (delegatesMap) {
                 for (const [delegateTjpAddr, info] of Object.entries(delegatesMap)) {
-                    if (info.deviceName?.includes(providerId)) {
+                    if (isCustodialDelegate({ delegateInfo: info, providerId })) {
                         evolvedParent = await keystoneService.unregisterDelegate({
                             parentKeystone: evolvedParent,
                             delegateTjpAddr,
                             masterSecret: masterSecret!,
+                            signingPoolId: 'manage',
                             metaspace,
                             space,
                         });
+
+                        this.showBusy({
+                            isBusy: true,
+                            title: 'Syncing to Server...',
+                            msg: `Publishing ${providerName} delegate unregistration to server...`,
+                            animationEmoji: '⚡'
+                        });
+                        syncRes = await getApiBridge().putEvolveKeystone({
+                            domainAddr: primaryTjpAddr,
+                            keystoneIbGib: evolvedParent,
+                            relatedKeystoneIbGibs: []
+                        });
+                        if (!syncRes.success) {
+                            throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+                        }
                     }
                 }
             }
 
-            // 3. Sync evolved parent keystone back to server
-            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
-            const syncRes = await getApiBridge().putEvolveKeystone({
-                domainAddr: getIbGibAddr({ ibGib: this.ibGib! }),
-                keystoneIbGib: evolvedParent,
-                relatedKeystoneIbGibs: [] // No outward delegate timelines
-            });
-            if (!syncRes.success) {
-                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
-            }
-
             // 4. Update index locally
             await updateSpecialIndex({
                 type: "keystones",
@@ -1389,15 +2084,21 @@ export class KeystoneDetailsComponentInstance
                 space
             });
 
-            this.setSSOStatus(`Successfully unlinked ${providerId}!`, "success");
-            await this.loadIbGib({ getLatest: true });
+            this.setSSOStatus(`Successfully unlinked ${providerName}!`, "success");
+            this.ibGibAddr = getIbGibAddr({ ibGib: evolvedParent });
+            this.staticIbGib = evolvedParent;
+            await this.loadIbGib({ getLatest: false });
 
         } catch (error) {
-            console.error(`${lc} SSO unlink failed: ${extractErrorMsg(error)}`);
-            this.setSSOStatus(`Unlink failed: ${extractErrorMsg(error)}`, "error");
+            console.error(`${lc} ${extractErrorMsg(error)}`, error);
+            this.setSSOStatus(`Failed to unlink ${providerName}: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
         }
     }
 
+
+
     private setChangePasswordStatus(msg: string, type: 'info' | 'success' | 'error') {
         const el = this.elements!.changePasswordStatusEl;
         el.textContent = msg;
@@ -1445,8 +2146,17 @@ export class KeystoneDetailsComponentInstance
                 challenges: newChallenges,
             };
 
-            const primaryTjpAddr = getTjpAddr({ ibGib: this.ibGib! }) || getIbGibAddr({ ibGib: this.ibGib! });
-            const custodianProvider = this.aggregatedDetails?.custodianProvider || 'google';
+            const primaryTjpAddr = (this.ibGib ? getTjpAddr({ ibGib: this.ibGib }) : undefined)
+                || (this.ibGibAddr ? (() => {
+                    const { ib } = getIbAndGib({ ibGibAddr: this.ibGibAddr });
+                    const { tjpGib } = getGibInfo({ ibGibAddr: this.ibGibAddr });
+                    return tjpGib && ib ? `${ib}^${tjpGib}` : this.ibGibAddr;
+                })() : undefined)
+                || getIbGibAddr({ ibGib: this.ibGib! });
+
+            const custodianProvider = this.aggregatedDetails?.custodianProvider
+                || this.ibGib?.data?.frameDetails?.custodianProvider
+                || (this.ibGib?.data as any)?.custodianProvider;
 
             let requestBody: any = {
                 primaryTjpAddr,
@@ -1476,17 +2186,69 @@ export class KeystoneDetailsComponentInstance
                 requestBody.code = resPopup.code;
                 requestBody.redirectUri = resPopup.redirectUri;
             } else {
-                this.showBusy({ isBusy: false });
-                // Email OTP fallback
-                const email = this.aggregatedDetails?.emails?.[0] || this.ibGib?.data?.emails?.[0];
-                const otpCode = await promptForSecret({
-                    msg: `Enter 6-digit verification code sent to ${email}:`,
-                    confirm: false,
-                });
-                if (!otpCode) {
-                    this.setChangePasswordStatus("Verification code required.", "error");
+                // Email OTP flow
+                const email = this.aggregatedDetails?.emails?.[0]
+                    || this.ibGib?.data?.emails?.[0]
+                    || this.ibGib?.data?.frameDetails?.emails?.[0];
+
+                if (!email) {
+                    this.showBusy({ isBusy: false });
+                    this.setChangePasswordStatus("No email address found for this identity to send verification code.", "error");
                     return;
                 }
+
+                const otpSection = this.elements?.sectionAddPasswordOtpEl;
+                const otpInput = this.elements?.inputAddPasswordOtpEl;
+                const isOtpVisible = otpSection && !otpSection.classList.contains('hidden');
+
+                // Step 1: If OTP section is not visible yet, send code and show the OTP input inline in the card
+                if (!isOtpVisible) {
+                    this.showBusy({
+                        isBusy: true,
+                        title: 'Sending Verification Code...',
+                        msg: `Sending 6-digit verification code to ${email}...`,
+                        animationEmoji: '📧'
+                    });
+                    this.setChangePasswordStatus(`Sending verification code to ${email}...`, "info");
+
+                    const resCode = await getApiBridge().postVerificationCode({
+                        email,
+                        primaryTjpAddr,
+                    });
+
+                    this.showBusy({ isBusy: false });
+
+                    if (!resCode.success) {
+                        this.setChangePasswordStatus(resCode.message || "Failed to send verification code.", "error");
+                        return;
+                    }
+
+                    if (otpSection) {
+                        otpSection.classList.remove('hidden');
+                    }
+                    if (this.elements?.descAddPasswordOtpEl) {
+                        this.elements.descAddPasswordOtpEl.textContent = `A 6-digit verification code was sent to ${email}. Enter it below to establish sovereign ownership:`;
+                    }
+                    if (this.elements?.btnChangePasswordEl) {
+                        this.elements.btnChangePasswordEl.textContent = "Verify Code & Add Master Password";
+                    }
+                    this.setChangePasswordStatus(`✉️ 6-digit verification code sent to ${email}. Enter the code and click "Verify Code & Add Master Password".`, "info");
+                    this.startResendCooldownTimer(30);
+                    if (otpInput) {
+                        otpInput.value = '';
+                        otpInput.focus();
+                    }
+                    return;
+                }
+
+                // Step 2: OTP section is visible - validate entered code
+                const otpCode = (otpInput?.value || '').trim();
+                if (!otpCode || otpCode.length < 6) {
+                    this.setChangePasswordStatus("Please enter the complete 6-digit verification code sent to your email.", "error");
+                    if (otpInput) { otpInput.focus(); }
+                    return;
+                }
+
                 requestBody.email = email;
                 requestBody.code = otpCode;
             }
@@ -1517,21 +2279,97 @@ export class KeystoneDetailsComponentInstance
             const space = await metaspace.getLocalUserSpace({ lock: false });
             if (!space) { throw new Error("Local user space not available"); }
 
-            await metaspace.put({ ibGibs: [evolvedParent], space });
-            await metaspace.registerNewIbGib({ ibGib: evolvedParent, space });
+            if (resJson.primaryGraph) {
+                const graphIbGibs = Object.values(resJson.primaryGraph) as any[];
+                await metaspace.put({ ibGibs: graphIbGibs, space });
+                const timelinesMap = getTimelinesGroupedByTjp({ ibGibs: graphIbGibs });
+                for (const tjpKey of Object.keys(timelinesMap)) {
+                    for (const frame of timelinesMap[tjpKey]) {
+                        await metaspace.registerNewIbGib({ ibGib: frame, space });
+                    }
+                }
+            } else {
+                await metaspace.put({ ibGibs: [evolvedParent], space });
+                await metaspace.registerNewIbGib({ ibGib: evolvedParent, space });
+            }
+
+            // 1. Create a password-based sync delegate for this device
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sovereign Sync Delegate...',
+                msg: 'Deriving local device sync delegate keys from Master Password...',
+                animationEmoji: '🔑'
+            });
+
+            const rawUsername = this.aggregatedDetails?.username
+                || this.ibGib?.data?.username
+                || this.aggregatedDetails?.emails?.[0]?.split('@')[0]
+                || this.ibGib?.data?.emails?.[0]?.split('@')[0]
+                || 'user';
+
+            const { delegateKeystone: userSyncDelegate, deviceTag } = await createSovereignDeviceSyncDelegate({
+                username: rawUsername,
+                primaryTjpAddr,
+                masterSecret: newPassword,
+                metaspace,
+                space,
+            });
+
+            // 2. Register the new user sync delegate on the evolved parent keystone
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Sovereign Delegate...',
+                msg: 'Registering user sync delegate on primary keystone...',
+                animationEmoji: '📝'
+            });
+
+            const keystoneService = new KeystoneService_V1();
+            const parentWithUserDelegate = await keystoneService.registerDelegate({
+                parentKeystone: evolvedParent,
+                delegateKeystone: userSyncDelegate,
+                masterSecret: newPassword,
+                signingPoolId: 'manage',
+                metaspace,
+                space,
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                deviceName: deviceTag
+            });
+
+            // 3. Post evolved keystone with new delegate to server
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Publishing updated domain identity and sovereign delegate to server...',
+                animationEmoji: '⚡'
+            });
+
+            const resSync = await getApiBridge().putEvolveKeystone({
+                domainAddr: primaryTjpAddr,
+                keystoneIbGib: parentWithUserDelegate,
+                relatedKeystoneIbGibs: [userSyncDelegate]
+            });
+            if (!resSync.success) {
+                console.warn(`${lc} Warning syncing user delegate to server: ${resSync.message}`);
+            }
+
+            // 4. Save parentWithUserDelegate and userSyncDelegate to local space & metaspace
+            await metaspace.put({ ibGibs: [parentWithUserDelegate, userSyncDelegate], space });
+            await metaspace.registerNewIbGib({ ibGib: parentWithUserDelegate, space });
+            await metaspace.registerNewIbGib({ ibGib: userSyncDelegate, space });
+
             await updateSpecialIndex({
                 type: "keystones",
                 rel8nInfos: [
                     {
                         rel8nName: "keystone",
-                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                        ibGibs: [toDto({ ibGib: parentWithUserDelegate }), toDto({ ibGib: userSyncDelegate })]
                     }
                 ],
                 metaspace,
                 space
             });
 
-            const evolvedAddr = getIbGibAddr({ ibGib: evolvedParent });
+            const evolvedAddr = getIbGibAddr({ ibGib: parentWithUserDelegate });
 
             // Dispatch EVENT_IBGIB_IDENTITY_CHANGED
             window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_CHANGED, {
@@ -1542,9 +2380,20 @@ export class KeystoneDetailsComponentInstance
 
             this.setChangePasswordStatus("Successfully added Master Password! Identity is now sovereign.", "success");
 
+            // Reset OTP section and button text
+            if (this.elements?.sectionAddPasswordOtpEl) {
+                this.elements.sectionAddPasswordOtpEl.classList.add('hidden');
+                if (this.elements.inputAddPasswordOtpEl) {
+                    this.elements.inputAddPasswordOtpEl.value = '';
+                }
+            }
+            if (this.elements?.btnChangePasswordEl) {
+                this.elements.btnChangePasswordEl.textContent = "Update Password";
+            }
+
             // Refresh the view
             this.ibGibAddr = evolvedAddr;
-            this.staticIbGib = evolvedParent;
+            this.staticIbGib = parentWithUserDelegate;
             await this.loadIbGib({ getLatest: true });
 
             // Clear inputs
@@ -1554,22 +2403,83 @@ export class KeystoneDetailsComponentInstance
         } catch (error) {
             console.error(`${lc} Elevation failed: ${extractErrorMsg(error)}`);
             this.setChangePasswordStatus(`Failed to add master password: ${extractErrorMsg(error)}`, "error");
+            if (this.elements?.inputAddPasswordOtpEl && !this.elements.sectionAddPasswordOtpEl?.classList.contains('hidden')) {
+                this.elements.inputAddPasswordOtpEl.select();
+                this.elements.inputAddPasswordOtpEl.focus();
+            }
         } finally {
             this.showBusy({ isBusy: false });
         }
     }
 
+    protected async handleResendAddPasswordOtp(): Promise<void> {
+        const lc = `${this.lc}[${this.handleResendAddPasswordOtp.name}]`;
+        const email = this.aggregatedDetails?.emails?.[0]
+            || this.ibGib?.data?.emails?.[0]
+            || this.ibGib?.data?.frameDetails?.emails?.[0];
+        if (!email) {
+            this.setChangePasswordStatus("No email address found for this identity to send verification code.", "error");
+            return;
+        }
+        const primaryTjpAddr = (this.ibGib ? getTjpAddr({ ibGib: this.ibGib }) : undefined)
+            || (this.ibGibAddr ? (() => {
+                const { ib } = getIbAndGib({ ibGibAddr: this.ibGibAddr });
+                const { tjpGib } = getGibInfo({ ibGibAddr: this.ibGibAddr });
+                return tjpGib && ib ? `${ib}^${tjpGib}` : this.ibGibAddr;
+            })() : undefined)
+            || getIbGibAddr({ ibGib: this.ibGib! });
+
+        const btn = this.elements!.btnResendAddPasswordOtpEl;
+        if (btn) {
+            btn.disabled = true;
+            btn.textContent = "Sending...";
+        }
+        this.setChangePasswordStatus(`Resending verification code to ${email}...`, "info");
+        try {
+            const resCode = await getApiBridge().postVerificationCode({ email, primaryTjpAddr });
+            if (resCode.success) {
+                this.setChangePasswordStatus(`✉️ Fresh 6-digit verification code sent to ${email}!`, "success");
+                this.startResendCooldownTimer(30);
+                if (this.elements?.inputAddPasswordOtpEl) {
+                    this.elements.inputAddPasswordOtpEl.value = '';
+                    this.elements.inputAddPasswordOtpEl.focus();
+                }
+            } else {
+                this.setChangePasswordStatus(resCode.message || "Failed to resend verification code.", "error");
+                if (btn) {
+                    btn.disabled = false;
+                    btn.textContent = "Resend Code";
+                }
+            }
+        } catch (err) {
+            this.setChangePasswordStatus(`Error resending verification code: ${extractErrorMsg(err)}`, "error");
+            if (btn) {
+                btn.disabled = false;
+                btn.textContent = "Resend Code";
+            }
+        }
+    }
+
     protected async handleChangePassword(): Promise<void> {
         const lc = `${this.lc}[${this.handleChangePassword.name}]`;
 
-        const caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
-        const isCustodialOnly = caps.isCustodial && !caps.isSovereign;
+        const caps = !!this.ibGib ?
+            getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails }) :
+            undefined;
+
+        const isCustodialOnly = !!caps ? caps.isCustodial && !caps.isSovereign : false;
         if (isCustodialOnly) {
             await this.handleAddMasterPassword();
             return;
         }
 
         this.setChangePasswordStatus("Validating entries...", "info");
+        this.showBusy({
+            isBusy: true,
+            title: 'Changing Master Password...',
+            msg: 'Validating current password...',
+            animationEmoji: '🔐'
+        });
 
         try {
             const currentPassword = this.elements!.inputCurrentPasswordEl.value;
@@ -1602,6 +2512,12 @@ export class KeystoneDetailsComponentInstance
                 return;
             }
 
+            this.showBusy({
+                isBusy: true,
+                title: 'Evolving Master Password...',
+                msg: 'Generating new challenge proofs and rotating local user delegates...',
+                animationEmoji: '⚙️'
+            });
             this.setChangePasswordStatus("Evolving primary identity keystone...", "info");
 
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
@@ -1609,8 +2525,7 @@ export class KeystoneDetailsComponentInstance
             const space = await metaspace.getLocalUserSpace({ lock: false });
             if (!space) { throw new Error(`(UNEXPECTED) couldn't get default local space? (E: 2fc1281c28351fd378a1d7f88eaa0526)`); }
 
-            // 2. Rotate parent identity
-            debugger; // walk through this...looking for delegate failure // hmm...I thought we got change password going?
+            // 2. Rotate parent identity and sovereign sync delegates
             const { newKeystone: evolvedParent, newDelegates: evolvedDelegates } =
                 await keystoneService.changePassword({
                     keystoneIbGib: this.ibGib!,
@@ -1620,62 +2535,22 @@ export class KeystoneDetailsComponentInstance
                     metaspace,
                     space
                 });
-            debugger; // look at evolvedDelegates
-
-            this.setChangePasswordStatus("Resolving and rotating delegate keystones...", "info");
-
-            // // 3. Evolve registered delegate keystones (preserving custodian/foreign delegate secrets)
-            // const delegates = this.ibGib!.data?.delegates || {};
-            // const evolvedDelegates: KeystoneIbGib_V1[] = [];
-
-            // for (const delegateInfo of Object.values(delegates)) {
-            //     const delegateAddr = delegateInfo.delegateAddr;
-            //     const delegateKeystone = await keystoneService.getLatestKeystone({
-            //         addr: delegateAddr,
-            //         metaspace,
-            //         space,
-            //     });
-
-            //     // Identify user-owned challenge pools in the delegate that match the old password
-            //     const poolsToRotate: string[] = [];
-            //     for (const pool of delegateKeystone.data?.challengePools ?? []) {
-            //         if (!pool.isForeign) {
-            //             /**
-            //              * WARNING: There is an extreme edge case that if two pools
-            //              * happen to be owned by different parties but share the
-            //              * same secret, this will change the wrong pool's secret
-            //              * also. For V1, this shouldn't matter. But we need a
-            //              * better way of tracking pool ownership for V2 (or even
-            //              * V1 if we have multi-party support). (DO NOT REMOVE
-            //              * THIS COMMENT UNTIL THIS IS ADDRESSED)
-            //              */
-            //             const isPoolMatch = await keystoneService.verifySigningSecret({
-            //                 keystoneIbGib: delegateKeystone,
-            //                 signingSecret: currentPassword,
-            //                 poolId: pool.id
-            //             });
-            //             if (isPoolMatch) { poolsToRotate.push(pool.id); }
-            //         }
-            //     }
-
-            //     if (poolsToRotate.length > 0) {
-            //         console.log(`${lc} Rotating pools in delegate ${delegateInfo.delegateTjpAddr}: ${poolsToRotate.join(', ')}`);
-            //         const {newKeystone: evolvedDelegate} = await keystoneService.changePassword({
-            //             keystoneIbGib: delegateKeystone,
-            //             newMasterSecret: newPassword,
-            //             signingSecret: currentPassword,
-            //             signingPoolId: 'manage',
-            //             poolIds: poolsToRotate,
-            //             metaspace,
-            //             space
-            //         });
-            //         evolvedDelegates.push(evolvedDelegate);
-            //     }
-            // }
-
-            // 4. Sync evolved parent and all evolved delegate keystones atomically
+
+            // 3. Sync evolved parent and all evolved delegate keystones atomically
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Publishing rotated identity and delegates to server...',
+                animationEmoji: '⚡'
+            });
             this.setChangePasswordStatus("Syncing evolved keystones to server...", "info");
-            const parentTjpAddr = getIbGibAddr({ ibGib: this.ibGib! }); // is this.ibGib the tjp always? or is it the latest in the keystone line? Does it matter?
+            const parentTjpAddr = (this.ibGib ? getTjpAddr({ ibGib: this.ibGib }) : undefined)
+                || (this.ibGibAddr ? (() => {
+                    const { ib } = getIbAndGib({ ibGibAddr: this.ibGibAddr });
+                    const { tjpGib } = getGibInfo({ ibGibAddr: this.ibGibAddr });
+                    return tjpGib && ib ? `${ib}^${tjpGib}` : this.ibGibAddr;
+                })() : undefined)
+                || getIbGibAddr({ ibGib: this.ibGib! });
 
             const syncRes = await getApiBridge().putEvolveKeystone({
                 domainAddr: parentTjpAddr,
@@ -1686,7 +2561,7 @@ export class KeystoneDetailsComponentInstance
                 throw new Error(`Server synchronization rejected: ${syncRes.message}`);
             }
 
-            // 5. Update index locally
+            // 4. Update index locally
             this.setChangePasswordStatus("Updating local indexes...", "info");
             const newKeystoneIbGibs = [toDto({ ibGib: evolvedParent })];
             if (evolvedDelegates) {
@@ -1713,11 +2588,16 @@ export class KeystoneDetailsComponentInstance
             this.elements!.inputConfirmPasswordEl.value = "";
 
             this.setChangePasswordStatus("Password updated successfully!", "success");
+            this.ibGibAddr = getIbGibAddr({ ibGib: evolvedParent });
+            this.staticIbGib = evolvedParent;
             await this.loadIbGib({ getLatest: true });
 
         } catch (error) {
+            debugger; // error in handleChangePassword
             console.error(`${lc} Password rotation failed: ${extractErrorMsg(error)}`);
             this.setChangePasswordStatus(`Update failed: ${extractErrorMsg(error)}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
         }
     }
 }