@ibgib/web-gib 0.0.61 → 0.0.63

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

@@ -2,7 +2,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 { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
 import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
@@ -24,9 +24,11 @@ import {
 } from "../../component-types.mjs";
 import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
 import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
-import { getOrCreateDeviceDelegateSecret, setDeviceDelegateSecret } from "../../../../identity/device-delegate-helper.mjs";
+import { getOrCreateDeviceDelegateSecret, setDeviceDelegateSecret, 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 { isPasskeyPrfSupported, registerPasskeyCredential, evaluatePasskeyPrf, createPasskeyDeviceSyncDelegate, bufferToHex } from "../../../../identity/passkey-helper.mjs";
+import { KeystonePasskeyEntry } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
 import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
 import { alertUser, shadowRoot_getElementById } from "../../../../helpers.web.mjs";
 
@@ -81,6 +83,12 @@ interface KeystoneCreatorElements extends ElementsBase {
     inputEmail: HTMLInputElement;
     inputSecret: HTMLInputElement;
     checkboxMakeActive: HTMLInputElement;
+    inputPasskeyUsername: HTMLInputElement;
+    inputPasskeyDescription: HTMLInputElement;
+    inputPasskeyEmail: HTMLInputElement;
+    inputPasskeyName: HTMLInputElement;
+    checkboxPasskeyMakeActive: HTMLInputElement;
+    btnGeneratePasskey: HTMLButtonElement;
     statusArea: HTMLDivElement;
     statusText: HTMLParagraphElement;
 }
@@ -94,6 +102,7 @@ export class KeystoneCreatorComponentInstance
 
     protected lc: string = `[KeystoneCreatorComponentInstance]`;
     private hasExistingIdentities = false;
+    private resendCooldownInterval: any = null;
 
     constructor() {
         super();
@@ -103,6 +112,36 @@ export class KeystoneCreatorComponentInstance
         await super.initialize(opts);
     }
 
+    override async disconnected(): Promise<void> {
+        if (this.resendCooldownInterval) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = null;
+        }
+    }
+
+    private startResendCooldownTimer({ btnId, durationSecs = 30 }: { btnId: string; durationSecs?: number }): void {
+        const btn = this.shadowRoot?.getElementById(btnId) as HTMLButtonElement | null;
+        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);
+    }
+
     override async created(): Promise<void> {
         this.elements = {} as KeystoneCreatorElements;
 
@@ -116,6 +155,12 @@ export class KeystoneCreatorComponentInstance
         this.elements.inputEmail = this.shadowRoot!.getElementById('input-email') as HTMLInputElement;
         this.elements.inputSecret = this.shadowRoot!.getElementById('input-secret') as HTMLInputElement;
         this.elements.checkboxMakeActive = this.shadowRoot!.getElementById('checkbox-make-active') as HTMLInputElement;
+        this.elements.inputPasskeyUsername = this.shadowRoot!.getElementById('input-passkey-username') as HTMLInputElement;
+        this.elements.inputPasskeyDescription = this.shadowRoot!.getElementById('input-passkey-description') as HTMLInputElement;
+        this.elements.inputPasskeyEmail = this.shadowRoot!.getElementById('input-passkey-email') as HTMLInputElement;
+        this.elements.inputPasskeyName = this.shadowRoot!.getElementById('input-passkey-name') as HTMLInputElement;
+        this.elements.checkboxPasskeyMakeActive = this.shadowRoot!.getElementById('checkbox-passkey-make-active') as HTMLInputElement;
+        this.elements.btnGeneratePasskey = this.shadowRoot!.getElementById('btn-generate-passkey') as HTMLButtonElement;
         this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
         this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
 
@@ -150,49 +195,50 @@ export class KeystoneCreatorComponentInstance
             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 = "";
+                }
             }
         }
     }
 
-    override async disconnected(): Promise<void> {
-        // cleanup if needed
-    }
-
     private initHandlers() {
-        // Mode Tab Switching (Quick vs Password-based)
+        // Mode Tab Switching (Quick vs Passkey vs Password-based)
         const tabQuick = this.shadowRoot?.getElementById('tab-quick') as HTMLButtonElement | null;
+        const tabPasskey = this.shadowRoot?.getElementById('tab-passkey') as HTMLButtonElement | null;
         const tabPassword = this.shadowRoot?.getElementById('tab-password') as HTMLButtonElement | null;
         const panelQuick = this.shadowRoot?.getElementById('panel-quick') as HTMLDivElement | null;
+        const panelPasskey = this.shadowRoot?.getElementById('panel-passkey') as HTMLDivElement | null;
         const panelPassword = this.shadowRoot?.getElementById('panel-password') as HTMLDivElement | null;
         const subtitleQuick = this.shadowRoot?.getElementById('subtitle-quick') as HTMLParagraphElement | null;
+        const subtitlePasskey = this.shadowRoot?.getElementById('subtitle-passkey') as HTMLParagraphElement | null;
         const subtitlePassword = this.shadowRoot?.getElementById('subtitle-password') as HTMLParagraphElement | null;
 
-        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');
-        });
+        const switchTab = (mode: 'quick' | 'passkey' | 'password') => {
+            tabQuick?.classList.toggle('active', mode === 'quick');
+            tabPasskey?.classList.toggle('active', mode === 'passkey');
+            tabPassword?.classList.toggle('active', mode === 'password');
 
-        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');
-        });
+            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') as HTMLButtonElement | null;
         btnGoogleSso?.addEventListener('click', () => this.handleSsoClick('google'));
@@ -216,11 +262,13 @@ export class KeystoneCreatorComponentInstance
         const secQuickOtp = this.shadowRoot?.getElementById('section-quick-otp') as HTMLDivElement | null;
         const inputQuickOtp = this.shadowRoot?.getElementById('input-quick-otp') as HTMLInputElement | null;
         const btnQuickVerifyCode = this.shadowRoot?.getElementById('btn-quick-verify-code') as HTMLButtonElement | null;
+        const btnQuickResendCode = this.shadowRoot?.getElementById('btn-quick-resend-code') as HTMLButtonElement | null;
 
         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) => {
@@ -233,6 +281,16 @@ export class KeystoneCreatorComponentInstance
         });
 
         // 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');
         });
@@ -315,22 +373,14 @@ export class KeystoneCreatorComponentInstance
                 return;
             }
 
-            const delegateSecret = await getOrCreateDeviceDelegateSecret({ 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 delegateKeystone = await createSyncDelegateKeystone({
-                profileName: custodianSyncProfileName.trim() as any,
+            const { delegateKeystone, delegateSecret } = await createOAuth2DeviceSyncDelegate({
+                providerId,
                 username,
-                deviceTag: generateDefaultDeviceTag(),
                 primaryTjpAddr,
-                delegateSecret,
                 custodianReqs,
-                additionalFrameDetails: { client: 'space-gib-web' },
                 metaspace,
                 space,
             });
@@ -395,6 +445,7 @@ export class KeystoneCreatorComponentInstance
             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");
             }
@@ -410,6 +461,54 @@ export class KeystoneCreatorComponentInstance
         }
     }
 
+    /**
+     * Triggered by the "Resend Code" button in the quick email panel.
+     */
+    protected async handleQuickResendCode(): Promise<void> {
+        const lc = `${this.lc}[${this.handleQuickResendCode.name}]`;
+        const btnQuickResendCode = this.shadowRoot?.getElementById('btn-quick-resend-code') as HTMLButtonElement | null;
+        const inputQuickEmail = this.shadowRoot?.getElementById('input-quick-email') as HTMLInputElement | null;
+        const inputQuickOtp = this.shadowRoot?.getElementById('input-quick-otp') as HTMLInputElement | null;
+
+        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,
@@ -466,21 +565,10 @@ export class KeystoneCreatorComponentInstance
                 return;
             }
 
-            const delegateSecret = await getOrCreateDeviceDelegateSecret({ 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 delegateKeystone = await createSyncDelegateKeystone({
-                profileName: custodianSyncProfileName.trim() as any,
-                username,
-                deviceTag: generateDefaultDeviceTag(),
+            const { delegateKeystone, delegateSecret } = await createEmailDeviceSyncDelegate({
+                email,
                 primaryTjpAddr,
-                delegateSecret,
                 custodianReqs,
-                additionalFrameDetails: { client: 'space-gib-web' },
                 metaspace,
                 space,
             });
@@ -523,6 +611,399 @@ export class KeystoneCreatorComponentInstance
         }
     }
 
+    /**
+     * Triggered by the "Create Identity with Passkey / Biometrics" button.
+     * Orchestrates: WebAuthn Credential -> PRF Secret Evaluation -> Local Passkey Genesis -> Graph Collection -> Server Sync.
+     */
+    protected async handleGeneratePasskey() {
+        const lc = `${this.lc}[${this.handleGeneratePasskey.name}]`;
+        const btn = this.shadowRoot?.getElementById('btn-generate-passkey') as HTMLButtonElement | null;
+        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 selectAttachment = this.shadowRoot?.querySelector('#select-passkey-attachment') as HTMLSelectElement | null;
+            const attachmentVal = selectAttachment?.value;
+            const authenticatorAttachment: AuthenticatorAttachment | undefined =
+                (attachmentVal === 'cross-platform' || attachmentVal === 'platform')
+                    ? attachmentVal
+                    : undefined;
+
+            const rawSalt = crypto.getRandomValues(new Uint8Array(32));
+            const saltHex = bufferToHex(rawSalt.buffer as ArrayBuffer);
+            const regResult = await registerPasskeyCredential({
+                username,
+                displayName: username,
+                salt: saltHex,
+                authenticatorAttachment,
+                userVerification: 'preferred'
+            });
+            const { credentialId, transports } = regResult;
+
+            let passkeySecret = regResult.passkeySecret;
+            if (!passkeySecret) {
+                const prfResult = await evaluatePasskeyPrf({
+                    credentialId,
+                    salt: saltHex,
+                    transports,
+                    userVerification: 'preferred'
+                });
+                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: KeystonePasskeyEntry = {
+                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() as any)
+                .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 as any).pending || (resSync as any).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<HTMLDivElement>(this.shadowRoot, 'section-code-verification');
+                const inputVerifyCode = shadowRoot_getElementById<HTMLInputElement>(this.shadowRoot, 'input-verify-code');
+                const btnSubmitCode = shadowRoot_getElementById<HTMLButtonElement>(this.shadowRoot, 'btn-submit-code');
+                const btnResendCode = shadowRoot_getElementById<HTMLButtonElement>(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<void>((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.
@@ -666,21 +1147,10 @@ export class KeystoneCreatorComponentInstance
                 animationEmoji: '🔑'
             });
 
-            const delegateSecret = await deriveDelegateSecret({ masterSecret });
-            await setDeviceDelegateSecret({ primaryTjpAddr, delegateSecret });
-
-            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 delegateKeystoneIbGib = await createSyncDelegateKeystone({
-                profileName: sovereignSyncProfileName.trim() as any,
+            const { delegateKeystone: delegateKeystoneIbGib, deviceTag, delegateSecret } = await createSovereignDeviceSyncDelegate({
                 username,
-                deviceTag: generateDefaultDeviceTag(),
                 primaryTjpAddr,
-                delegateSecret,
-                additionalFrameDetails: { client: 'space-gib-web' },
+                masterSecret,
                 metaspace,
                 space,
             });
@@ -701,9 +1171,11 @@ export class KeystoneCreatorComponentInstance
                 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}`);
@@ -746,19 +1218,31 @@ export class KeystoneCreatorComponentInstance
                 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");
-                    } else {
-                        this.setStatus(resResend.message || "Failed to resend verification code.", "error");
+                    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";
+                        }
+                    } 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);