@ibgib/web-gib 0.0.61 → 0.0.62

package/dist/ui/component/identity/keystone-details/keystone-details.mjs

@@ -1,7 +1,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 { getIbAndGib, getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { getGibInfo } from "@ibgib/ts-gib/dist/V1/transforms/transform-helper.mjs";
 import { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-service-v1.mjs";
@@ -10,15 +10,19 @@ 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, 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 } from "../../../../identity/device-delegate-helper.mjs";
+import { isPasskeyPrfSupported, registerPasskeyCredential, evaluatePasskeyPrf, bufferToHex } from "../../../../identity/passkey-helper.mjs";
+import { KeystoneChallengeType, KeystoneReplenishStrategy } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
 const logalot = false;
 export const KEYSTONE_DETAILS_COMPONENT_NAME = 'ibgib-keystone-details';
 export class KeystoneDetailsComponentMeta extends IbGibDynamicComponentMetaBase {
@@ -54,6 +58,7 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
     _onIdentityChanged = null;
     keystoneCache = new Map();
     aggregatedDetails;
+    resendCooldownInterval = null;
     constructor() {
         super();
     }
@@ -77,6 +82,39 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             }
         }
     }
+    async disconnected() {
+        if (this._onIdentityChanged) {
+            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+        }
+        if (this.resendCooldownInterval) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = null;
+        }
+    }
+    startResendCooldownTimer(durationSecs = 30) {
+        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);
+    }
     async getKeystoneDetails(addr) {
         const cached = this.keystoneCache.get(addr);
         if (cached)
@@ -142,6 +180,10 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.elements.rawKeystoneJsonEl = shadow.getElementById('raw-keystone-json');
             this.elements.delegatesCardEl = shadow.getElementById('delegates-card');
             this.elements.delegatesListEl = shadow.getElementById('delegates-list');
+            this.elements.passkeysCardEl = shadow.getElementById('passkeys-card');
+            this.elements.passkeysListEl = shadow.getElementById('passkeys-list');
+            this.elements.btnAddPasskeyEl = shadow.getElementById('btn-add-passkey');
+            this.elements.passkeyStatusMsgEl = shadow.getElementById('passkey-status-msg');
             this.elements.containerEl = shadow.getElementById('container');
             this.elements.historicalWarningBannerEl = shadow.getElementById('historical-warning-banner');
             this.elements.ssoLinkCardEl = shadow.getElementById('sso-link-card');
@@ -154,6 +196,10 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.elements.btnChangePasswordEl = shadow.getElementById('btn-change-password');
             this.elements.changePasswordStatusEl = shadow.getElementById('change-password-status');
             this.elements.changePasswordCardEl = shadow.getElementById('change-password-card');
+            this.elements.sectionAddPasswordOtpEl = shadow.getElementById('section-add-password-otp');
+            this.elements.inputAddPasswordOtpEl = shadow.getElementById('input-add-password-otp');
+            this.elements.btnResendAddPasswordOtpEl = shadow.getElementById('btn-resend-add-password-otp');
+            this.elements.descAddPasswordOtpEl = shadow.getElementById('desc-add-password-otp');
             // ElementBase requires contentEl
             this.elements.contentEl = shadow.getElementById('identity-details-view');
             this.initHandlers();
@@ -178,11 +224,6 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             }
         }
     }
-    async disconnected() {
-        if (this._onIdentityChanged) {
-            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
-        }
-    }
     initHandlers() {
         // Setup raw JSON accordion toggle
         this.elements.rawAccordionHeaderEl.addEventListener('click', () => this.toggleAccordion());
@@ -191,9 +232,11 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
         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());
     }
     toggleAccordion() {
         const header = this.elements.rawAccordionHeaderEl;
@@ -399,13 +442,22 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.elements.btnLinkGithubEl.classList.remove('disabled');
             // 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 caps = getKeystoneCapabilities({ keystone: this.ibGib, aggregatedDetails: this.aggregatedDetails });
+            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 = !!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';
@@ -432,6 +484,9 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             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';
@@ -457,12 +512,16 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
         }
     }
     updatePasswordCardView() {
-        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');
         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";
@@ -483,6 +542,12 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             if (btnChangePassword)
                 btnChangePassword.textContent = "Update Password";
         }
+        if (this.elements?.sectionAddPasswordOtpEl) {
+            this.elements.sectionAddPasswordOtpEl.classList.add('hidden');
+            if (this.elements.inputAddPasswordOtpEl) {
+                this.elements.inputAddPasswordOtpEl.value = '';
+            }
+        }
     }
     async updateFrameDetailsView() {
         const lc = `${this.lc}[${this.updateFrameDetailsView.name}]`;
@@ -588,17 +653,20 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.elements.rawKeystoneJsonEl.textContent = pretty(keystone);
             // 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');
             }
@@ -637,6 +705,15 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
         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 = '';
+            }
+        }
     }
     renderChallengePools(pools) {
         if (!this.elements) {
@@ -936,8 +1013,9 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             let masterSecret;
             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) {
@@ -956,11 +1034,30 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 throw new Error("Local space not found");
             }
             const keystoneSvc = new KeystoneService_V1();
+            // Resolve which manage pool matches the provided masterSecret
+            let matchedPoolId;
+            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
             });
@@ -1006,6 +1103,452 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.setSyncStatus(`Revocation failed: ${extractErrorMsg(error)}`, "error");
         }
     }
+    setPasskeyStatus(msg, type) {
+        const statusEl = this.elements?.passkeyStatusMsgEl;
+        if (!statusEl)
+            return;
+        statusEl.textContent = msg;
+        statusEl.className = `status-msg ${type}`;
+        statusEl.classList.remove('hidden');
+    }
+    async renderPasskeys(passkeys) {
+        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 = 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');
+            btnRemove?.addEventListener('click', () => this.handleRemovePasskey(credId));
+            listEl.appendChild(row);
+        }
+    }
+    async handleAddPasskey() {
+        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);
+            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 = {
+                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;
+            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 = {
+                    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 = {
+                    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;
+                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 = {
+                    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 = {
+                    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 });
+        }
+    }
+    async handleRemovePasskey(credentialId) {
+        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;
+            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;
+            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 });
+        }
+    }
     async handleContextUpdated() {
         const lc = `${this.lc}[${this.handleContextUpdated.name}]`;
         try {
@@ -1050,10 +1593,24 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
     async handleSSOLink(providerId) {
         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) {
                 this.setSSOStatus(resPopup.message || `Linking cancelled.`, "error");
@@ -1065,6 +1622,9 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             console.error(`${lc} SSO link initiation failed: ${extractErrorMsg(error)}`);
             this.setSSOStatus(`Link failed: ${extractErrorMsg(error)}`, "error");
         }
+        finally {
+            this.showBusy({ isBusy: false });
+        }
     }
     setSSOStatus(msg, type) {
         const statusEl = this.elements.ssoStatusMsgEl;
@@ -1074,7 +1634,14 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
     }
     async handleSSOLinkCallback(code, stateObj, redirectUri) {
         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
             const res = await fetch('/api/identity/sso/link', {
@@ -1098,6 +1665,7 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             }
             const custodianPool = linkData.custodianPool;
             // 2. Prompt user for master secret and verify it
+            this.showBusy({ isBusy: false });
             const keystoneService = new KeystoneService_V1();
             let masterSecret;
             let isCorrect = false;
@@ -1138,6 +1706,12 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 this.setSSOStatus("Link cancelled or failed (incorrect password).", "error");
                 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();
             if (!metaspace)
@@ -1146,7 +1720,7 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             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,
@@ -1154,38 +1728,81 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 metaspace,
                 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}`);
+            }
+            // 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}`);
             }
-            // 5. Update index locally
+            // 6. Update index locally
             await updateSpecialIndex({
                 type: "keystones",
                 rel8nInfos: [
                     {
                         rel8nName: "keystone",
-                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                        ibGibs: [toDto({ ibGib: parentWithDelegate }), toDto({ ibGib: delegateKeystone })]
                     }
                 ],
                 metaspace,
                 space
             });
             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 });
+        }
     }
     async handleSSOClick(providerId) {
-        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 });
             if (!caps.isSovereign) {
@@ -1200,7 +1817,8 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
     }
     async handleSSOUnlink(providerId) {
         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
             const keystoneService = new KeystoneService_V1();
@@ -1211,11 +1829,12 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             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) {
@@ -1225,11 +1844,10 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 if (!masterSecret) {
                     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) {
                     tries++;
@@ -1239,6 +1857,12 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 this.setSSOStatus("Unlink cancelled or failed (incorrect password).", "error");
                 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();
             if (!metaspace)
@@ -1256,31 +1880,59 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 metaspace,
                 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",
@@ -1293,12 +1945,17 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 metaspace,
                 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 });
         }
     }
     setChangePasswordStatus(msg, type) {
@@ -1342,8 +1999,16 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 config: initialManagePool.config,
                 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?.custodianProvider;
             let requestBody = {
                 primaryTjpAddr,
                 newManagePool,
@@ -1370,15 +2035,60 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 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;
@@ -1410,20 +2120,88 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             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);
+                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, {
                 detail: { activeIdentityAddr: evolvedAddr },
@@ -1431,9 +2209,19 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 composed: true
             }));
             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
             this.elements.inputNewPasswordEl.value = '';
@@ -1442,20 +2230,80 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
         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 });
         }
     }
+    async handleResendAddPasswordOtp() {
+        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";
+            }
+        }
+    }
     async handleChangePassword() {
         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;
             const newPassword = this.elements.inputNewPasswordEl.value;
@@ -1483,6 +2331,12 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 this.setChangePasswordStatus("Incorrect current password.", "error");
                 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();
             if (!metaspace) {
@@ -1492,8 +2346,7 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             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,
                 newMasterSecret: newPassword,
@@ -1502,56 +2355,21 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
                 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,
                 keystoneIbGib: evolvedParent,
@@ -1560,7 +2378,7 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             if (!syncRes.success) {
                 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) {
@@ -1585,12 +2403,18 @@ export class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInsta
             this.elements.inputNewPasswordEl.value = "";
             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 });
+        }
     }
 }
 //# sourceMappingURL=keystone-details.mjs.map