@ibgib/web-gib 0.0.60 → 0.0.62

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

@@ -1,7 +1,7 @@
 import thisCss from "./keystone-creator.css";
 import thisHtml from "./keystone-creator.html";
 import commonComponentStylesCss from "../../common-component-styles.css";
-import { delay, extractErrorMsg, } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { delay, extractErrorMsg, getSaferSubstring } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
 import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-service-v1.mjs";
 import { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
@@ -9,13 +9,14 @@ import { updateSpecialIndex, } from "@ibgib/core-gib/dist/timeline/timeline-api.
 import { toDto, getTjpAddr, getTimelinesGroupedByTjp } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
 import { validateEmail } from "@ibgib/core-gib/dist/keystone/keystone-helpers.mjs";
 import { KEYSTONE_USERNAME_REGEXP, KEYSTONE_DESCRIPTION_REGEXP, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
-import { deriveDelegateSecret } from "@ibgib/core-gib/dist/keystone/strategy/hash-reveal-v1/hash-reveal-v1.mjs";
 import { getGlobalMetaspace_waitIfNeeded, } from "../../../../helpers.mjs";
 import { IbGibDynamicComponentMetaBase, IbGibFormInstanceBase, } from "../../ibgib-dynamic-component-bases.mjs";
 import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
 import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
-import { deriveLocalCustodianDelegateSecret } from "../../../../identity/custodian-delegate-helper.mjs";
+import { createSovereignDeviceSyncDelegate, createOAuth2DeviceSyncDelegate, createEmailDeviceSyncDelegate } from "../../../../identity/device-delegate-helper.mjs";
 import { executeSsoOAuthPopup } from "../../../../identity/sso-popup-helper.mjs";
+import { generateDefaultDeviceTag } from "../../../../util/device-helper.mjs";
+import { registerPasskeyCredential, evaluatePasskeyPrf, createPasskeyDeviceSyncDelegate, bufferToHex } from "../../../../identity/passkey-helper.mjs";
 import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
 import { alertUser, shadowRoot_getElementById } from "../../../../helpers.web.mjs";
 export const KEYSTONE_CREATOR_COMPONENT_NAME = 'ibgib-keystone-creator';
@@ -50,12 +51,43 @@ export class KeystoneCreatorComponentMeta extends IbGibDynamicComponentMetaBase
 export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
     lc = `[KeystoneCreatorComponentInstance]`;
     hasExistingIdentities = false;
+    resendCooldownInterval = null;
     constructor() {
         super();
     }
     async initialize(opts) {
         await super.initialize(opts);
     }
+    async disconnected() {
+        if (this.resendCooldownInterval) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = null;
+        }
+    }
+    startResendCooldownTimer({ btnId, durationSecs = 30 }) {
+        const btn = this.shadowRoot?.getElementById(btnId);
+        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 created() {
         this.elements = {};
         this.elements.containerEl = this.shadowRoot.getElementById('container');
@@ -68,6 +100,12 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
         this.elements.inputEmail = this.shadowRoot.getElementById('input-email');
         this.elements.inputSecret = this.shadowRoot.getElementById('input-secret');
         this.elements.checkboxMakeActive = this.shadowRoot.getElementById('checkbox-make-active');
+        this.elements.inputPasskeyUsername = this.shadowRoot.getElementById('input-passkey-username');
+        this.elements.inputPasskeyDescription = this.shadowRoot.getElementById('input-passkey-description');
+        this.elements.inputPasskeyEmail = this.shadowRoot.getElementById('input-passkey-email');
+        this.elements.inputPasskeyName = this.shadowRoot.getElementById('input-passkey-name');
+        this.elements.checkboxPasskeyMakeActive = this.shadowRoot.getElementById('checkbox-passkey-make-active');
+        this.elements.btnGeneratePasskey = this.shadowRoot.getElementById('btn-generate-passkey');
         this.elements.statusArea = this.shadowRoot.getElementById('status-area');
         this.elements.statusText = this.shadowRoot.getElementById('status-text');
         // ElementBase requires contentEl
@@ -98,46 +136,46 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
             console.warn(`${lc} Error checking existing identities: ${extractErrorMsg(error)}`);
             this.hasExistingIdentities = false;
         }
-        const checkbox = this.elements.checkboxMakeActive;
-        if (checkbox) {
-            if (!this.hasExistingIdentities) {
-                checkbox.checked = true;
-                checkbox.disabled = true;
-                checkbox.title = "At least one active identity is required.";
-            }
-            else {
-                checkbox.disabled = false;
-                checkbox.title = "";
+        const checkboxes = [this.elements.checkboxMakeActive, this.elements.checkboxPasskeyMakeActive];
+        for (const checkbox of checkboxes) {
+            if (checkbox) {
+                if (!this.hasExistingIdentities) {
+                    checkbox.checked = true;
+                    checkbox.disabled = true;
+                    checkbox.title = "At least one active identity is required.";
+                }
+                else {
+                    checkbox.disabled = false;
+                    checkbox.title = "";
+                }
             }
         }
     }
-    async disconnected() {
-        // cleanup if needed
-    }
     initHandlers() {
-        // Mode Tab Switching (Quick vs Password-based)
+        // Mode Tab Switching (Quick vs Passkey vs Password-based)
         const tabQuick = this.shadowRoot?.getElementById('tab-quick');
+        const tabPasskey = this.shadowRoot?.getElementById('tab-passkey');
         const tabPassword = this.shadowRoot?.getElementById('tab-password');
         const panelQuick = this.shadowRoot?.getElementById('panel-quick');
+        const panelPasskey = this.shadowRoot?.getElementById('panel-passkey');
         const panelPassword = this.shadowRoot?.getElementById('panel-password');
         const subtitleQuick = this.shadowRoot?.getElementById('subtitle-quick');
+        const subtitlePasskey = this.shadowRoot?.getElementById('subtitle-passkey');
         const subtitlePassword = this.shadowRoot?.getElementById('subtitle-password');
-        tabQuick?.addEventListener('click', () => {
-            tabQuick.classList.add('active');
-            tabPassword?.classList.remove('active');
-            panelQuick?.classList.remove('hidden');
-            panelPassword?.classList.add('hidden');
-            subtitleQuick?.classList.remove('hidden');
-            subtitlePassword?.classList.add('hidden');
-        });
-        tabPassword?.addEventListener('click', () => {
-            tabPassword.classList.add('active');
-            tabQuick?.classList.remove('active');
-            panelPassword?.classList.remove('hidden');
-            panelQuick?.classList.add('hidden');
-            subtitlePassword?.classList.remove('hidden');
-            subtitleQuick?.classList.add('hidden');
-        });
+        const switchTab = (mode) => {
+            tabQuick?.classList.toggle('active', mode === 'quick');
+            tabPasskey?.classList.toggle('active', mode === 'passkey');
+            tabPassword?.classList.toggle('active', mode === 'password');
+            panelQuick?.classList.toggle('hidden', mode !== 'quick');
+            panelPasskey?.classList.toggle('hidden', mode !== 'passkey');
+            panelPassword?.classList.toggle('hidden', mode !== 'password');
+            subtitleQuick?.classList.toggle('hidden', mode !== 'quick');
+            subtitlePasskey?.classList.toggle('hidden', mode !== 'passkey');
+            subtitlePassword?.classList.toggle('hidden', mode !== 'password');
+        };
+        tabQuick?.addEventListener('click', () => switchTab('quick'));
+        tabPasskey?.addEventListener('click', () => switchTab('passkey'));
+        tabPassword?.addEventListener('click', () => switchTab('password'));
         const btnGoogleSso = this.shadowRoot?.getElementById('btn-google-sso');
         btnGoogleSso?.addEventListener('click', () => this.handleSsoClick('google'));
         const btnGithubSso = this.shadowRoot?.getElementById('btn-github-sso');
@@ -157,8 +195,11 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
         const secQuickOtp = this.shadowRoot?.getElementById('section-quick-otp');
         const inputQuickOtp = this.shadowRoot?.getElementById('input-quick-otp');
         const btnQuickVerifyCode = this.shadowRoot?.getElementById('btn-quick-verify-code');
+        const btnQuickResendCode = this.shadowRoot?.getElementById('btn-quick-resend-code');
         btnQuickSendCode?.addEventListener('click', () => this.handleQuickSendCode());
         btnQuickVerifyCode?.addEventListener('click', () => this.handleQuickVerifyCode());
+        btnQuickResendCode?.addEventListener('click', () => this.handleQuickResendCode());
+        this.elements.btnGeneratePasskey?.addEventListener('click', () => this.handleGeneratePasskey());
         this.elements.btnGenerateEl.addEventListener('click', () => this.handleGenerate());
         this.shadowRoot.getElementById('btn-switch-sign-in')?.addEventListener('click', (e) => {
             e.preventDefault();
@@ -169,6 +210,15 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
             }));
         });
         // Clear invalid styling when user inputs text
+        this.elements.inputPasskeyUsername?.addEventListener('input', () => {
+            this.elements.inputPasskeyUsername.classList.remove('invalid');
+        });
+        this.elements.inputPasskeyDescription?.addEventListener('input', () => {
+            this.elements.inputPasskeyDescription.classList.remove('invalid');
+        });
+        this.elements.inputPasskeyEmail?.addEventListener('input', () => {
+            this.elements.inputPasskeyEmail.classList.remove('invalid');
+        });
         this.elements.inputUsername?.addEventListener('input', () => {
             this.elements.inputUsername.classList.remove('invalid');
         });
@@ -235,37 +285,21 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
                 msg: 'Generating cryptographic sync delegate keys...',
                 animationEmoji: '🔑'
             });
-            const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
-            const email = resLogin.userInfo?.email || '';
-            const username = email ? email.split('@')[0] : 'user';
-            const custodianSyncProfileName = process.env.KEYSTONE_PROFILE_CUSTODIAN_SYNC;
-            if (!custodianSyncProfileName || !custodianSyncProfileName.trim()) {
-                throw new Error('KEYSTONE_PROFILE_CUSTODIAN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 4d5e6f7890123456789abcdef4)');
-            }
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(custodianSyncProfileName.trim())
-                .withUsername(`${username}-sync`)
-                .withDescription(`Sync Delegate for ${username}`)
-                .withDetails({
-                client: 'space-gib-web',
-                role: 'sync-delegate',
-                primaryTjpAddr,
-                custodianReqs,
-            });
-            const configs = await delegateBuilder.compileConfigs();
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
             const space = await metaspace.getLocalUserSpace({ lock: false });
             if (!space) {
                 this.setStatus('Could not access local user space.', 'error');
                 return;
             }
-            const keystoneService = new KeystoneService_V1();
-            const delegateKeystone = await keystoneService.genesis({
-                masterSecret: delegateSecret,
-                configs,
+            const email = resLogin.userInfo?.email || '';
+            const username = email ? email.split('@')[0] : 'user';
+            const { delegateKeystone, delegateSecret } = await createOAuth2DeviceSyncDelegate({
+                providerId,
+                username,
+                primaryTjpAddr,
+                custodianReqs,
                 metaspace,
                 space,
-                frameDetails: delegateBuilder.getFrameDetails(),
-                isPrimary: false
             });
             this.setStatus('Registering device delegate with custodian server...', 'info');
             this.showBusy({
@@ -322,6 +356,7 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
             if (resCode.success) {
                 secQuickOtp?.classList.remove('hidden');
                 this.setStatus("✉️ 6-digit verification code sent to your email!", "success");
+                this.startResendCooldownTimer({ btnId: 'btn-quick-resend-code', durationSecs: 30 });
             }
             else {
                 this.setStatus(resCode.message || "Failed to dispatch verification code.", "error");
@@ -339,6 +374,52 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
             }
         }
     }
+    /**
+     * Triggered by the "Resend Code" button in the quick email panel.
+     */
+    async handleQuickResendCode() {
+        const lc = `${this.lc}[${this.handleQuickResendCode.name}]`;
+        const btnQuickResendCode = this.shadowRoot?.getElementById('btn-quick-resend-code');
+        const inputQuickEmail = this.shadowRoot?.getElementById('input-quick-email');
+        const inputQuickOtp = this.shadowRoot?.getElementById('input-quick-otp');
+        const email = (inputQuickEmail?.value || '').trim();
+        if (!email || !validateEmail(email)) {
+            this.setStatus("Please enter a valid email address.", "error");
+            return;
+        }
+        if (btnQuickResendCode) {
+            btnQuickResendCode.disabled = true;
+            btnQuickResendCode.textContent = "Sending...";
+        }
+        this.setStatus("Resending verification code...", "info");
+        try {
+            const resCode = await getApiBridge().postVerificationCode({ email });
+            if (resCode.success) {
+                this.setStatus(`✉️ Fresh 6-digit verification code sent to ${email}!`, "success");
+                this.startResendCooldownTimer({ btnId: 'btn-quick-resend-code', durationSecs: 30 });
+                if (inputQuickOtp) {
+                    inputQuickOtp.value = '';
+                    inputQuickOtp.focus();
+                }
+            }
+            else {
+                this.setStatus(resCode.message || "Failed to resend verification code.", "error");
+                if (btnQuickResendCode) {
+                    btnQuickResendCode.disabled = false;
+                    btnQuickResendCode.textContent = "Resend Code";
+                }
+            }
+        }
+        catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`);
+            this.setStatus(`Failed to resend verification code: ${emsg}`, "error");
+            if (btnQuickResendCode) {
+                btnQuickResendCode.disabled = false;
+                btnQuickResendCode.textContent = "Resend Code";
+            }
+        }
+    }
     /**
      * Triggered by the "Verify Code" button.
      * Submits 6-digit OTP code to custodian server, builds local sync delegate keystone,
@@ -382,36 +463,18 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
                 msg: 'Generating cryptographic sync delegate keys...',
                 animationEmoji: '🔑'
             });
-            const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
-            const username = email ? email.split('@')[0] : 'user';
-            const custodianSyncProfileName = process.env.KEYSTONE_PROFILE_CUSTODIAN_SYNC;
-            if (!custodianSyncProfileName || !custodianSyncProfileName.trim()) {
-                throw new Error('KEYSTONE_PROFILE_CUSTODIAN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 4d5e6f7890123456789abcdef4)');
-            }
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(custodianSyncProfileName.trim())
-                .withUsername(`${username}-sync`)
-                .withDescription(`Sync Delegate for ${username}`)
-                .withDetails({
-                client: 'space-gib-web',
-                role: 'sync-delegate',
-                primaryTjpAddr,
-                custodianReqs,
-            });
-            const configs = await delegateBuilder.compileConfigs();
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
             const space = await metaspace.getLocalUserSpace({ lock: false });
             if (!space) {
                 this.setStatus("Failed to access local user space.", "error");
                 return;
             }
-            const keystoneService = new KeystoneService_V1();
-            const delegateKeystone = await keystoneService.genesis({
-                masterSecret: delegateSecret,
-                configs,
+            const { delegateKeystone, delegateSecret } = await createEmailDeviceSyncDelegate({
+                email,
+                primaryTjpAddr,
+                custodianReqs,
                 metaspace,
                 space,
-                frameDetails: delegateBuilder.getFrameDetails(),
-                isPrimary: false
             });
             // Register delegate with server
             this.setStatus("Registering device delegate with custodian server...", "info");
@@ -449,6 +512,358 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
             }
         }
     }
+    /**
+     * Triggered by the "Create Identity with Passkey / Biometrics" button.
+     * Orchestrates: WebAuthn Credential -> PRF Secret Evaluation -> Local Passkey Genesis -> Graph Collection -> Server Sync.
+     */
+    async handleGeneratePasskey() {
+        const lc = `${this.lc}[${this.handleGeneratePasskey.name}]`;
+        const btn = this.shadowRoot?.getElementById('btn-generate-passkey');
+        try {
+            console.log(`${lc} starting passkey genesis orchestration...`);
+            const humanEyeDelay = 500;
+            this.setStatus("Initializing passkey genesis...", "info");
+            const inputUsername = this.elements.inputPasskeyUsername;
+            const inputDesc = this.elements.inputPasskeyDescription;
+            const inputEmail = this.elements.inputPasskeyEmail;
+            const inputName = this.elements.inputPasskeyName;
+            const checkboxActive = this.elements.checkboxPasskeyMakeActive;
+            const username = (inputUsername?.value || '').trim();
+            if (inputUsername)
+                inputUsername.value = username;
+            if (!this.validateInputPattern({
+                input: inputUsername,
+                pattern: KEYSTONE_USERNAME_REGEXP,
+                errorMessage: "Username must be 1-63 characters (alphanumeric, underscores, hyphens, dots).",
+                required: true
+            })) {
+                this.setStatus("Invalid username. Must be 1-63 characters (alphanumeric, _, -, .).", "error");
+                return;
+            }
+            const description = (inputDesc?.value || '').trim();
+            if (inputDesc)
+                inputDesc.value = description;
+            if (inputDesc && !this.validateInputPattern({
+                input: inputDesc,
+                pattern: KEYSTONE_DESCRIPTION_REGEXP,
+                errorMessage: "Description must be 0-128 characters.",
+                required: false
+            })) {
+                this.setStatus("Invalid description. Max 128 chars.", "error");
+                return;
+            }
+            const email = (inputEmail?.value || '').trim();
+            if (inputEmail)
+                inputEmail.value = email;
+            if (email && !validateEmail(email)) {
+                inputEmail?.classList.add('invalid');
+                this.setStatus("Invalid email address format.", "error");
+                return;
+            }
+            if (btn) {
+                btn.disabled = true;
+                btn.textContent = 'Awaiting Biometrics / Security Key...';
+            }
+            // Pre-check email availability on server if email provided
+            if (email) {
+                this.showBusy({
+                    isBusy: true,
+                    title: 'Checking Email Availability...',
+                    msg: 'Checking server identity index...',
+                    animationEmoji: '🔍'
+                });
+                const resCheck = await getApiBridge().checkEmailAvailability({ email });
+                if (!resCheck.available) {
+                    const msg = resCheck.message || "Email/Identity is already registered.";
+                    this.setStatus(msg, "error");
+                    this.showBusy({ isBusy: false });
+                    if (btn) {
+                        btn.disabled = false;
+                        btn.textContent = '🛡️ Create Identity with Passkey / Biometrics';
+                    }
+                    return;
+                }
+            }
+            // 1. WebAuthn Passkey Registration & PRF Secret Evaluation
+            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 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 passkeyName = (inputName?.value || '').trim() || generateDefaultDeviceTag();
+            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 } : {})
+            };
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Compiling sovereign passkey challenge pools...',
+                animationEmoji: '⚙️'
+            });
+            // 2. Prepare Sovereign Keystone Configs
+            const sovereignPrimaryProfileName = process.env.KEYSTONE_PROFILE_SOVEREIGN_PRIMARY;
+            if (!sovereignPrimaryProfileName || !sovereignPrimaryProfileName.trim()) {
+                throw new Error('KEYSTONE_PROFILE_SOVEREIGN_PRIMARY environment variable is missing.');
+            }
+            const builder = KeystoneProfileBuilder.buildKeystone(sovereignPrimaryProfileName.trim())
+                .withUsername(username)
+                .withDescription(description);
+            if (email) {
+                builder.withEmails([email]);
+            }
+            builder.withDetails({
+                client: 'space-gib-web',
+                role: 'domain-identity',
+                passkeys: {
+                    [credentialId]: passkeyEntry
+                }
+            });
+            const configs = await builder.compileConfigs();
+            // Re-label manage pool to passkey pool id
+            for (const cfg of configs) {
+                if (cfg.id === 'manage') {
+                    cfg.id = poolId;
+                }
+            }
+            // 3. Prepare Metaspace & Local Space
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) {
+                this.setStatus("Failed to access local user space.", "error");
+                return;
+            }
+            // 4. Perform Local Genesis
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Generating cryptographic domain identity keys...',
+                animationEmoji: '🔑'
+            });
+            const keystoneService = new KeystoneService_V1();
+            const keystoneIbGib = await keystoneService.genesis({
+                masterSecret: passkeySecret,
+                emails: email ? [email] : undefined,
+                credentialIds: [credentialId],
+                configs,
+                metaspace,
+                space,
+                frameDetails: builder.getFrameDetails(),
+                isPrimary: true
+            });
+            const primaryTjpAddr = getTjpAddr({ ibGib: keystoneIbGib, defaultIfNone: 'incomingAddr' });
+            console.log(`${lc} passkey local genesis complete: ${primaryTjpAddr}`);
+            await delay(humanEyeDelay);
+            this.setStatus("Local genesis complete. Creating passkey sync delegate...", "info");
+            // 5. Create Passkey Device Sync Delegate
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sync Delegate...',
+                msg: 'Generating cryptographic sync delegate keys...',
+                animationEmoji: '🔑'
+            });
+            const { delegateKeystone: delegateKeystoneIbGib, deviceTag, delegateSecret } = await createPasskeyDeviceSyncDelegate({
+                username,
+                primaryTjpAddr,
+                passkeySecret,
+                transports,
+                metaspace,
+                space,
+            });
+            // 6. Register Delegate locally on primary keystone
+            const evolvedParentKeystoneIbGib = await keystoneService.registerDelegate({
+                parentKeystone: keystoneIbGib,
+                delegateKeystone: delegateKeystoneIbGib,
+                masterSecret: passkeySecret,
+                signingPoolId: poolId,
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                deviceName: deviceTag,
+                metaspace,
+                space,
+            });
+            // 7. Post to Server & Handle Verification
+            this.setStatus("Syncing genesis keystone to server...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Staging pending genesis keystone on server...',
+                animationEmoji: '🔄'
+            });
+            const resSync = await getApiBridge().postGenesisKeystone(keystoneIbGib);
+            if (!resSync.success) {
+                const msg = `Sync failed: ${resSync.message}`;
+                console.error(`${lc} ${msg}`);
+                this.setStatus(msg, "error");
+                this.showBusy({ isBusy: false });
+                if (btn) {
+                    btn.disabled = false;
+                    btn.textContent = '🛡️ Create Identity with Passkey / Biometrics';
+                }
+                return;
+            }
+            const isPending = resSync.pending || resSync.statusCode === 202;
+            if (isPending) {
+                console.log(`${lc} Genesis keystone quarantined in pending staging area. Prompting for 6-digit verification code.`);
+                this.showBusy({ isBusy: false });
+                this.setFormDisabled(true);
+                if (!this.shadowRoot) {
+                    throw new Error(`(UNEXPECTED) this.shadowRoot falsy? (E: 6d316f5a2bf8e6a0286306468d35c826)`);
+                }
+                const secVerify = shadowRoot_getElementById(this.shadowRoot, 'section-code-verification');
+                const inputVerifyCode = shadowRoot_getElementById(this.shadowRoot, 'input-verify-code');
+                const btnSubmitCode = shadowRoot_getElementById(this.shadowRoot, 'btn-submit-code');
+                const btnResendCode = shadowRoot_getElementById(this.shadowRoot, 'btn-resend-code');
+                secVerify.classList.remove('hidden');
+                secVerify.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                this.setStatus("✉️ Verification code sent to your email. Enter 6-digit code below:", "info");
+                this.startResendCooldownTimer({ btnId: 'btn-resend-code', durationSecs: 30 });
+                const onResendCode = async () => {
+                    btnResendCode.disabled = true;
+                    btnResendCode.textContent = "Sending...";
+                    this.setStatus("Resending verification code to your email...", "info");
+                    try {
+                        const resResend = await getApiBridge().postVerificationCode({ email, primaryTjpAddr });
+                        if (resResend.success) {
+                            this.setStatus("✉️ Fresh 6-digit verification code sent to your email!", "success");
+                            this.startResendCooldownTimer({ btnId: 'btn-resend-code', durationSecs: 30 });
+                            inputVerifyCode.value = '';
+                            inputVerifyCode.focus();
+                        }
+                        else {
+                            this.setStatus(resResend.message || "Failed to resend verification code.", "error");
+                            btnResendCode.disabled = false;
+                            btnResendCode.textContent = "Resend Code";
+                        }
+                    }
+                    catch (error) {
+                        const emsg = extractErrorMsg(error);
+                        console.error(`${lc} ${emsg}`);
+                        this.setStatus(`Failed to resend verification code: ${emsg}`, "error");
+                        btnResendCode.disabled = false;
+                        btnResendCode.textContent = "Resend Code";
+                    }
+                };
+                btnResendCode.addEventListener('click', onResendCode);
+                await new Promise((resolve) => {
+                    const onSubmitCode = async () => {
+                        const code = inputVerifyCode.value.trim();
+                        if (!code || code.length !== 6 || !/^\d{6}$/.test(code)) {
+                            this.setStatus("Please enter a valid 6-digit numeric verification code (e.g. 482901).", "error");
+                            return;
+                        }
+                        btnSubmitCode.disabled = true;
+                        btnSubmitCode.textContent = "Verifying...";
+                        this.showBusy({
+                            isBusy: true,
+                            title: 'Verifying & Activating...',
+                            msg: 'Great! Juust a moment...\n(Validating code, promoting server domain space, other security stuff...)',
+                            animationEmoji: '🔐'
+                        });
+                        const resVerify = await getApiBridge().postVerifyCode({ email, primaryTjpAddr, code });
+                        if (!resVerify.success) {
+                            this.showBusy({ isBusy: false });
+                            this.setStatus(resVerify.message || "Incorrect verification code.", "error");
+                            btnSubmitCode.disabled = false;
+                            btnSubmitCode.textContent = "Verify Code";
+                            return;
+                        }
+                        console.log(`${lc} Code verified & server domain promoted! Syncing delegate...`);
+                        this.showBusy({
+                            isBusy: true,
+                            title: 'Syncing Delegate...',
+                            msg: 'Posting evolved domain identity and sync delegate to server...',
+                            animationEmoji: '⚡'
+                        });
+                        btnSubmitCode.removeEventListener('click', onSubmitCode);
+                        secVerify.classList.add('hidden');
+                        this.setFormDisabled(false);
+                        // Now that server domain space is promoted, post evolved keystone + delegate
+                        const resEvolve = await getApiBridge().putEvolveKeystone({
+                            domainAddr: primaryTjpAddr,
+                            keystoneIbGib: evolvedParentKeystoneIbGib,
+                            relatedKeystoneIbGibs: [delegateKeystoneIbGib]
+                        });
+                        if (!resEvolve.success) {
+                            console.warn(`${lc} Delegate sync warning after code verification: ${resEvolve.message}`);
+                        }
+                        resolve();
+                    };
+                    btnSubmitCode.addEventListener('click', onSubmitCode);
+                });
+            }
+            else {
+                // Post evolved keystone + delegate keystone immediately
+                this.setStatus("Syncing delegate registration to server...", "info");
+                this.showBusy({
+                    isBusy: true,
+                    title: 'Syncing Delegate...',
+                    msg: 'Posting evolved domain identity and sync delegate to server...',
+                    animationEmoji: '🔄'
+                });
+                const resEvolve = await getApiBridge().putEvolveKeystone({
+                    domainAddr: primaryTjpAddr,
+                    keystoneIbGib: evolvedParentKeystoneIbGib,
+                    relatedKeystoneIbGibs: [delegateKeystoneIbGib]
+                });
+                if (!resEvolve.success) {
+                    const msg = `Delegate registration sync failed: ${resEvolve.message}`;
+                    console.error(`${lc} ${msg}`);
+                    this.setStatus(msg, "error");
+                    this.showBusy({ isBusy: false });
+                    if (btn) {
+                        btn.disabled = false;
+                        btn.textContent = '🛡️ Create Identity with Passkey / Biometrics';
+                    }
+                    return;
+                }
+            }
+            // 8. Finalize Onboarding
+            await this.finalizeIdentityOnboarding({
+                primaryKeystone: evolvedParentKeystoneIbGib,
+                delegateKeystone: delegateKeystoneIbGib,
+                primaryTjpAddr,
+                masterSecret: passkeySecret,
+                delegateSecret,
+                makeActive: checkboxActive?.checked ?? true
+            });
+        }
+        catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`, error);
+            this.setStatus(`Error: ${emsg}`, "error");
+        }
+        finally {
+            this.showBusy({ isBusy: false });
+            if (btn) {
+                btn.disabled = false;
+                btn.textContent = '🛡️ Create Identity with Passkey / Biometrics';
+            }
+        }
+    }
     /**
      * Triggered by the "Generate" button.
      * Orchestrates: Secret -> Local Genesis -> Graph Collection -> Server Sync.
@@ -577,26 +992,12 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
                 msg: 'Generating cryptographic sync delegate keys...',
                 animationEmoji: '🔑'
             });
-            const delegateSecret = await deriveDelegateSecret({ masterSecret });
-            const sovereignSyncProfileName = process.env.KEYSTONE_PROFILE_SOVEREIGN_SYNC;
-            if (!sovereignSyncProfileName || !sovereignSyncProfileName.trim()) {
-                throw new Error('KEYSTONE_PROFILE_SOVEREIGN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 5e6f7890123456789abcdef5)');
-            }
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(sovereignSyncProfileName.trim())
-                .withUsername(`${username}-sync`)
-                .withDescription(`Sync Delegate for ${username}`)
-                .withDetails({
-                client: 'space-gib-web',
-                role: 'sync-delegate',
-                primaryTjpAddr: primaryTjpAddr,
-            });
-            const delegateConfigs = await delegateBuilder.compileConfigs();
-            const delegateKeystoneIbGib = await keystoneService.genesis({
-                masterSecret: delegateSecret,
-                configs: delegateConfigs,
+            const { delegateKeystone: delegateKeystoneIbGib, deviceTag, delegateSecret } = await createSovereignDeviceSyncDelegate({
+                username,
+                primaryTjpAddr,
+                masterSecret,
                 metaspace,
                 space,
-                frameDetails: delegateBuilder.getFrameDetails()
             });
             const delegateAddr = getIbGibAddr({ ibGib: delegateKeystoneIbGib });
             console.log(`${lc} sync delegate genesis complete: ${delegateAddr}`);
@@ -613,9 +1014,11 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
                 parentKeystone: keystoneIbGib,
                 delegateKeystone: delegateKeystoneIbGib,
                 masterSecret,
+                signingPoolId: 'manage',
                 metaspace,
                 space,
-                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT]
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                deviceName: deviceTag,
             });
             const evolvedParentAddr = getIbGibAddr({ ibGib: evolvedParentKeystoneIbGib });
             console.log(`${lc} delegate registered. evolved parent address: ${evolvedParentAddr}`);
@@ -652,19 +1055,32 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
                 secVerify.classList.remove('hidden');
                 secVerify.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 this.setStatus("✉️ Verification code sent to your email. Enter 6-digit code below:", "info");
+                this.startResendCooldownTimer({ btnId: 'btn-resend-code', durationSecs: 30 });
                 const onResendCode = async () => {
                     btnResendCode.disabled = true;
                     btnResendCode.textContent = "Sending...";
                     this.setStatus("Resending verification code to your email...", "info");
-                    const resResend = await getApiBridge().postVerificationCode({ email, primaryTjpAddr: primaryTjpAddr });
-                    if (resResend.success) {
-                        this.setStatus("✉️ New verification code sent to your email!", "success");
+                    try {
+                        const resResend = await getApiBridge().postVerificationCode({ email, primaryTjpAddr: primaryTjpAddr });
+                        if (resResend.success) {
+                            this.setStatus("✉️ Fresh 6-digit verification code sent to your email!", "success");
+                            this.startResendCooldownTimer({ btnId: 'btn-resend-code', durationSecs: 30 });
+                            inputVerifyCode.value = '';
+                            inputVerifyCode.focus();
+                        }
+                        else {
+                            this.setStatus(resResend.message || "Failed to resend verification code.", "error");
+                            btnResendCode.disabled = false;
+                            btnResendCode.textContent = "Resend Code";
+                        }
                     }
-                    else {
-                        this.setStatus(resResend.message || "Failed to resend verification code.", "error");
+                    catch (error) {
+                        const emsg = extractErrorMsg(error);
+                        console.error(`${lc} ${emsg}`);
+                        this.setStatus(`Failed to resend verification code: ${emsg}`, "error");
+                        btnResendCode.disabled = false;
+                        btnResendCode.textContent = "Resend Code";
                     }
-                    btnResendCode.disabled = false;
-                    btnResendCode.textContent = "Resend Code";
                 };
                 btnResendCode.addEventListener('click', onResendCode);
                 await new Promise((resolve, reject) => {
@@ -864,6 +1280,10 @@ export class KeystoneCreatorComponentInstance extends IbGibFormInstanceBase {
         }
         this.setStatus(successMsg, "success");
         console.log(`${lc} ✓ ${successMsg}`);
+        // 3.5 Sanitize secret input fields from DOM
+        if (this.elements?.inputSecret) {
+            this.elements.inputSecret.value = '';
+        }
         // 4. Dispatch UI navigation message to close creator and open identity manager
         window.dispatchEvent(new CustomEvent(EVENT_IBGIB_UI_MESSAGE, {
             detail: { action: 'show-identity-manager', addr: primaryTjpAddr },