@ibgib/web-gib 0.0.56 → 0.0.58

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

@@ -2,39 +2,32 @@ import thisCss from "./keystone-creator.css";
 import thisHtml from "./keystone-creator.html";
 import commonComponentStylesCss from "../../common-component-styles.css";
 
-import { delay, extractErrorMsg, hash } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
-import { HashAlgorithm } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { delay, extractErrorMsg, } 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";
+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";
-import {
-    KeystonePoolConfig, KeystoneChallengeType, KeystoneReplenishStrategy
-} from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
 import { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
-import { getGlobalMetaspace_waitIfNeeded, getLocalCoupledIbGibForDomainIbGib } from "../../../../helpers.mjs";
-import {
-    IbGibDynamicComponentMetaBase, IbGibFormInstanceBase,
-} from "../../ibgib-dynamic-component-bases.mjs";
+import { updateSpecialIndex, } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { toDto, getTjpAddr } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { FlatIbGibGraph } from "@ibgib/core-gib/dist/common/other/graph-types.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 {
     ElementsBase, IbGibDynamicComponentInstance,
     IbGibDynamicComponentInstanceInitOpts,
 } from "../../component-types.mjs";
-
 import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
 import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
-
-import {
-    createSettings, getSectionName, getSettingsScope
-} from "../../../../common/settings/settings-helpers.mjs";
-import { SettingsType } from "../../../../common/settings/settings-constants.mjs";
-import { SettingsIbGib_V1 } from "../../../../common/settings/settings-types.mjs";
-import { updateSpecialIndex, mut8Timeline } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
-import { toDto } 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 { deriveLocalCustodianDelegateSecret } from "../../../../identity/custodian-delegate-helper.mjs";
+import { executeSsoOAuthPopup } from "../../../../identity/sso-popup-helper.mjs";
 import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
-import { deriveDelegateSecret } from "@ibgib/core-gib/dist/keystone/strategy/hash-reveal-v1/hash-reveal-v1.mjs";
+import { alertUser, shadowRoot_getElementById } from "../../../../helpers.web.mjs";
 
 export const KEYSTONE_CREATOR_COMPONENT_NAME = 'ibgib-keystone-creator';
 
@@ -174,6 +167,59 @@ export class KeystoneCreatorComponentInstance
     }
 
     private initHandlers() {
+        // Mode Tab Switching (Quick vs Password-based)
+        const tabQuick = this.shadowRoot?.getElementById('tab-quick') as HTMLButtonElement | null;
+        const tabPassword = this.shadowRoot?.getElementById('tab-password') as HTMLButtonElement | null;
+        const panelQuick = this.shadowRoot?.getElementById('panel-quick') as HTMLDivElement | null;
+        const panelPassword = this.shadowRoot?.getElementById('panel-password') as HTMLDivElement | null;
+        const subtitleQuick = this.shadowRoot?.getElementById('subtitle-quick') 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');
+        });
+
+        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 btnGoogleSso = this.shadowRoot?.getElementById('btn-google-sso') as HTMLButtonElement | null;
+        btnGoogleSso?.addEventListener('click', () => this.handleSsoClick('google'));
+
+        const btnGithubSso = this.shadowRoot?.getElementById('btn-github-sso') as HTMLButtonElement | null;
+        btnGithubSso?.addEventListener('click', () => this.handleSsoClick('github'));
+
+        // Email Sign-In Info Button
+        const btnEmailInfo = this.shadowRoot?.getElementById('btn-email-info') as HTMLButtonElement | null;
+        btnEmailInfo?.addEventListener('click', (e) => {
+            e.preventDefault();
+            alertUser({
+                title: 'Custom Email Sign-In',
+                msg: 'When you enter your email address, we dispatch a 6-digit one-time verification code to your inbox.\n\nEntering the code creates your cryptographic identity delegate on your device and signs you in seamlessly without needing a password!'
+            });
+        });
+
+        // Quick Email Verification Code Handlers
+        const btnQuickSendCode = this.shadowRoot?.getElementById('btn-quick-send-code') as HTMLButtonElement | null;
+        const inputQuickEmail = this.shadowRoot?.getElementById('input-quick-email') as HTMLInputElement | null;
+        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;
+
+        btnQuickSendCode?.addEventListener('click', () => this.handleQuickSendCode());
+
+        btnQuickVerifyCode?.addEventListener('click', () => this.handleQuickVerifyCode());
+
         this.elements!.btnGenerateEl.addEventListener('click', () => this.handleGenerate());
 
         this.shadowRoot!.getElementById('btn-switch-sign-in')?.addEventListener('click', (e) => {
@@ -186,16 +232,16 @@ export class KeystoneCreatorComponentInstance
         });
 
         // Clear invalid styling when user inputs text
-        this.elements!.inputUsername.addEventListener('input', () => {
+        this.elements!.inputUsername?.addEventListener('input', () => {
             this.elements!.inputUsername.classList.remove('invalid');
         });
-        this.elements!.inputDescription.addEventListener('input', () => {
+        this.elements!.inputDescription?.addEventListener('input', () => {
             this.elements!.inputDescription.classList.remove('invalid');
         });
-        this.elements!.inputEmail.addEventListener('input', () => {
+        this.elements!.inputEmail?.addEventListener('input', () => {
             this.elements!.inputEmail.classList.remove('invalid');
         });
-        this.elements!.inputSecret.addEventListener('input', () => {
+        this.elements!.inputSecret?.addEventListener('input', () => {
             this.elements!.inputSecret.classList.remove('invalid');
         });
     }
@@ -208,6 +254,245 @@ export class KeystoneCreatorComponentInstance
         }
     }
 
+    /**
+     * Triggered by Google / GitHub SSO buttons.
+     * Opens OAuth popup, exchanges authorization code, builds local delegate keystone,
+     * registers delegate on server, and finalizes onboarding.
+     */
+    protected async handleSsoClick(providerId: 'google' | 'github'): Promise<void> {
+        const lc = `${this.lc}[${this.handleSsoClick.name}]`;
+        this.setStatus(`Opening ${providerId.toUpperCase()} SSO authorization window...`, 'info');
+        const resPopup = await executeSsoOAuthPopup({ providerId });
+        if (!resPopup.success || !resPopup.code) {
+            this.setStatus(resPopup.message || `${providerId.toUpperCase()} sign-in cancelled.`, 'error');
+            return;
+        }
+
+        this.setStatus(`Exchanging ${providerId.toUpperCase()} authorization code...`, 'info');
+        const apiBridge = getApiBridge();
+        const resLogin = await apiBridge.postSsoLogin({
+            code: resPopup.code,
+            providerId,
+            redirectUri: resPopup.redirectUri!
+        });
+
+        if (!resLogin.success || !resLogin.primaryTjpAddr || !resLogin.custodianReqs) {
+            this.setStatus(resLogin.message || `${providerId.toUpperCase()} login failed.`, 'error');
+            return;
+        }
+
+        const { primaryTjpAddr, custodianReqs } = resLogin;
+        this.setStatus('Deriving local device delegate keys...', 'info');
+        const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
+        const email = resLogin.userInfo?.email || '';
+        const username = email ? email.split('@')[0] : 'user';
+
+        const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+            .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,
+            metaspace,
+            space,
+            frameDetails: delegateBuilder.getFrameDetails(),
+            isPrimary: false
+        });
+
+        this.setStatus('Registering device delegate with custodian server...', 'info');
+        const resRegister = await apiBridge.postCustodianRegisterDelegate({ delegateKeystone });
+
+        if (!resRegister.success) {
+            this.setStatus(resRegister.message || 'Custodian delegate registration failed.', 'error');
+            return;
+        }
+
+        // Finalize onboarding: update keystones index, activate identity, and navigate to identity manager
+        await this.finalizeIdentityOnboarding({
+            primaryKeystone: resRegister.evolvedPrimaryKeystone || resLogin.primaryKeystone,
+            primaryGraph: resRegister.primaryGraph || resLogin.primaryGraph,
+            delegateKeystone,
+            primaryTjpAddr,
+            delegateSecret,
+            makeActive: true
+        });
+    }
+
+    /**
+     * Triggered by the "Send 6-Digit Verification Code" button.
+     * Validates quick email input and dispatches a 6-digit OTP code to the user's inbox.
+     */
+    protected async handleQuickSendCode(): Promise<void> {
+        const lc = `${this.lc}[${this.handleQuickSendCode.name}]`;
+        const btnQuickSendCode = this.shadowRoot?.getElementById('btn-quick-send-code') as HTMLButtonElement | null;
+        const inputQuickEmail = this.shadowRoot?.getElementById('input-quick-email') as HTMLInputElement | null;
+        const secQuickOtp = this.shadowRoot?.getElementById('section-quick-otp') as HTMLDivElement | null;
+
+        const email = (inputQuickEmail?.value || '').trim();
+        if (!email || !validateEmail(email)) {
+            this.setStatus("Please enter a valid email address.", "error");
+            return;
+        }
+
+        if (btnQuickSendCode) {
+            btnQuickSendCode.disabled = true;
+            btnQuickSendCode.textContent = "Sending Verification Code...";
+        }
+        this.setStatus("Requesting verification code...", "info");
+
+        try {
+            const resCode = await getApiBridge().postVerificationCode({ email });
+            if (resCode.success) {
+                secQuickOtp?.classList.remove('hidden');
+                this.setStatus("✉️ 6-digit verification code sent to your email!", "success");
+            } else {
+                this.setStatus(resCode.message || "Failed to dispatch verification code.", "error");
+            }
+        } catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`);
+            this.setStatus(`Failed to dispatch verification code: ${emsg}`, "error");
+        } finally {
+            if (btnQuickSendCode) {
+                btnQuickSendCode.disabled = false;
+                btnQuickSendCode.textContent = "Send 6-Digit Verification Code";
+            }
+        }
+    }
+
+    /**
+     * Triggered by the "Verify Code" button.
+     * Submits 6-digit OTP code to custodian server, builds local sync delegate keystone,
+     * registers delegate on server, and finalizes onboarding.
+     */
+    protected async handleQuickVerifyCode(): Promise<void> {
+        const lc = `${this.lc}[${this.handleQuickVerifyCode.name}]`;
+        const inputQuickEmail = this.shadowRoot?.getElementById('input-quick-email') as HTMLInputElement | 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 email = (inputQuickEmail?.value || '').trim();
+        const code = (inputQuickOtp?.value || '').trim();
+        if (!code || code.length !== 6 || !/^\d{6}$/.test(code)) {
+            this.setStatus("Please enter a valid 6-digit verification code.", "error");
+            return;
+        }
+
+        if (btnQuickVerifyCode) {
+            btnQuickVerifyCode.disabled = true;
+            btnQuickVerifyCode.textContent = "Verifying...";
+        }
+        this.setStatus("Verifying code & completing onboarding...", "info");
+        this.showBusy({
+            isBusy: true,
+            title: 'Verifying Code...',
+            msg: 'Great! Juust a moment...\n(Validating code, promoting server domain space, other security stuff...)',
+            animationEmoji: '🔐'
+        });
+
+        try {
+            const resGenesis = await getApiBridge().postCustodianGenesis({ email, code });
+            if (!resGenesis.success || !resGenesis.primaryTjpAddr || !resGenesis.custodianReqs) {
+                this.setStatus(resGenesis.message || "Custodian verification failed.", "error");
+                return;
+            }
+
+            const primaryTjpAddr = resGenesis.primaryTjpAddr;
+            const custodianReqs = resGenesis.custodianReqs;
+
+            // Construct local delegate keystone
+            this.setStatus("Constructing local sync delegate...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sync Delegate...',
+                msg: 'Generating cryptographic sync delegate keys...',
+                animationEmoji: '🔑'
+            });
+
+            const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
+            const username = email.split('@')[0];
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+                .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,
+                metaspace,
+                space,
+                frameDetails: delegateBuilder.getFrameDetails(),
+                isPrimary: false
+            });
+
+            // Register delegate with server
+            this.setStatus("Registering device delegate with custodian server...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Delegate...',
+                msg: 'Registering local delegate with custodian server...',
+                animationEmoji: '📝'
+            });
+
+            const resRegister = await getApiBridge().postCustodianRegisterDelegate({ delegateKeystone });
+            if (!resRegister.success) {
+                this.setStatus(resRegister.message || "Failed to register delegate with custodian server.", "error");
+                return;
+            }
+
+            // Finalize onboarding: update keystones index, activate identity, and navigate to identity manager
+            await this.finalizeIdentityOnboarding({
+                primaryKeystone: resRegister.evolvedPrimaryKeystone || resGenesis.primaryKeystone,
+                primaryGraph: resRegister.primaryGraph || resGenesis.primaryGraph,
+                delegateKeystone,
+                primaryTjpAddr,
+                delegateSecret,
+                makeActive: true
+            });
+
+        } catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`, error);
+            this.setStatus(`Error: ${emsg}`, "error");
+        } finally {
+            this.showBusy({ isBusy: false });
+            if (btnQuickVerifyCode) {
+                btnQuickVerifyCode.disabled = false;
+                btnQuickVerifyCode.textContent = "Verify Code";
+            }
+        }
+    }
+
     /**
      * Triggered by the "Generate" button.
      * Orchestrates: Secret -> Local Genesis -> Graph Collection -> Server Sync.
@@ -293,7 +578,12 @@ export class KeystoneCreatorComponentInstance
             });
 
             // 1. Prepare Primary/Domain Keystone Configs
-            const builder = KeystoneProfileBuilder.buildKeystone('domain')
+            const isProd = process.env.NODE_ENV === 'production';
+            const requestedProfile = (process.env.KEYSTONE_PROFILE || 'domain').toLowerCase();
+            const profileName = (isProd && requestedProfile === 'test') ? 'domain' : requestedProfile;
+            console.log(`${lc} Using keystone policy profile '${profileName}' (I: 90123456789abcdef0123456789abcde)`);
+
+            const builder = KeystoneProfileBuilder.buildKeystone(profileName as any)
                 .withUsername(username)
                 .withDescription(description);
             if (email) {
@@ -328,11 +618,11 @@ export class KeystoneCreatorComponentInstance
                 isPrimary: true
             });
 
-            const addr = getIbGibAddr({ ibGib: keystoneIbGib });
-            console.log(`${lc} local genesis complete: ${addr}`);
+            const primaryTjpAddr = getTjpAddr({ ibGib: keystoneIbGib, defaultIfNone: 'incomingAddr' })!;
+            console.log(`${lc} local genesis complete: ${primaryTjpAddr}`);
             await delay(humanEyeDelay); // for human eyes, not needed for functionality
             this.setStatus("Local genesis complete. Creating sync delegate...", "info");
-            console.log(`✓ Local genesis complete: ${addr}`);
+            console.log(`✓ Local genesis complete: ${primaryTjpAddr}`);
 
             // Automatically generate Sync Delegate Keystone
             this.showBusy({
@@ -343,12 +633,13 @@ export class KeystoneCreatorComponentInstance
             });
 
             const delegateSecret = await deriveDelegateSecret({ masterSecret });
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(profileName as any)
                 .withUsername(`${username}-sync`)
                 .withDescription(`Sync Delegate for ${username}`)
                 .withDetails({
                     client: 'space-gib-web',
-                    role: 'sync-delegate'
+                    role: 'sync-delegate',
+                    primaryTjpAddr: primaryTjpAddr,
                 });
             const delegateConfigs = await delegateBuilder.compileConfigs();
 
@@ -385,15 +676,11 @@ export class KeystoneCreatorComponentInstance
             await delay(humanEyeDelay);
 
             // 4. Post to Server
-            console.log(`Posting genesis keystone to server...`);
-            this.setStatus("Syncing genesis to server...", "info");
+            this.setStatus("Syncing genesis keystone to server...", "info");
             this.showBusy({
                 isBusy: true,
                 title: 'Syncing to Server...',
-                msg: [
-                    'Posting genesis keystone to server sync node...',
-                    '(may take awhile, depending on strength of keystone...)',
-                ].join('\n'),
+                msg: 'Staging pending genesis keystone on server...',
                 animationEmoji: '🔄'
             });
             const resSync = await getApiBridge().postGenesisKeystone(keystoneIbGib);
@@ -406,74 +693,128 @@ export class KeystoneCreatorComponentInstance
                 return;
             }
 
-            // Post evolved keystone + delegate keystone
-            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: addr,
-                keystoneIbGib: evolvedParentKeystoneIbGib,
-                relatedKeystoneIbGibs: [delegateKeystoneIbGib]
-            });
-            if (!resEvolve.success) {
-                const msg = `Delegate registration sync failed: ${resEvolve.message}`;
-                console.error(`${lc} ${msg}`);
-                this.setStatus(msg, "error");
+            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.setButtonLoading(false);
-                return;
+                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");
+
+                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");
+                    }
+                    btnResendCode.disabled = false;
+                    btnResendCode.textContent = "Resend Code";
+                };
+                btnResendCode.addEventListener('click', onResendCode);
+
+                await new Promise<void>((resolve, reject) => {
+                    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: 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 (no email or pre-verified)
+                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 });
+                    this.setButtonLoading(false);
+                    return;
+                }
             }
 
-            // 5. Register with the keystones special index
-            this.showBusy({
-                isBusy: true,
-                title: 'Registering Identity...',
-                msg: 'Server sync succeeded!\nUpdating local identity indexes and scope settings...',
-                animationEmoji: '💾'
-            });
-            await delay(humanEyeDelay); // for human eyes, not needed for functionality
-            await updateSpecialIndex({
-                type: "keystones",
-                rel8nInfos: [
-                    {
-                        rel8nName: "keystone",
-                        ibGibs: [
-                            toDto({ ibGib: evolvedParentKeystoneIbGib }),
-                            toDto({ ibGib: delegateKeystoneIbGib })
-                        ],
-                    },
-                ],
-                metaspace,
-                space,
+            // 5. Finalize onboarding: update keystones index, activate identity, and navigate to identity manager
+            await this.finalizeIdentityOnboarding({
+                primaryKeystone: evolvedParentKeystoneIbGib,
+                delegateKeystone: delegateKeystoneIbGib,
+                primaryTjpAddr: evolvedParentAddr,
+                masterSecret,
+                delegateSecret,
+                makeActive: this.elements!.checkboxMakeActive?.checked ?? true
             });
 
-            // Expose for dev tools
-            (window as any).dev_domainI = evolvedParentKeystoneIbGib;
-            (window as any).dev_domainIMasterSecret = masterSecret;
-            (window as any).dev_syncDelegate = delegateKeystoneIbGib;
-            (window as any).dev_syncDelegateSecret = delegateSecret;
-
-            // 6. Request to make the new identity active if the checkbox is checked
-            const makeActive = this.elements!.checkboxMakeActive?.checked;
-            if (makeActive) {
-                window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
-                    detail: { activeIdentityAddr: evolvedParentAddr },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-
-            // 7. Success
-            this.elements!.keystoneAddrEl.textContent = evolvedParentAddr;
-            this.elements!.statusArea.classList.remove('hidden');
-            this.setStatus("Keystone successfully created and synced!", "success");
-            await delay(humanEyeDelay); // for human eyes, not needed for functionality
-            console.log(`✓ Keystone successfully created and synced!`);
-
         } catch (error) {
             const emsg = extractErrorMsg(error);
             console.error(`${lc} ${emsg}`, error);
@@ -487,6 +828,164 @@ export class KeystoneCreatorComponentInstance
         }
     }
 
+    /**
+     * DRY helper to register keystones in the local keystones special index,
+     * set the active identity, and navigate to the Identity Manager component.
+     */
+    private async finalizeIdentityOnboarding({
+        primaryKeystone,
+        primaryGraph,
+        delegateKeystone,
+        primaryTjpAddr,
+        masterSecret,
+        delegateSecret,
+        makeActive = true,
+    }: {
+        primaryKeystone?: IbGib_V1;
+        primaryGraph?: FlatIbGibGraph;
+        delegateKeystone: IbGib_V1;
+        primaryTjpAddr: string;
+        masterSecret?: string;
+        delegateSecret?: string;
+        makeActive?: boolean;
+    }): Promise<void> {
+        const lc = `${this.lc}[${this.finalizeIdentityOnboarding.name}]`;
+        const humanEyeDelay = 500;
+
+        const metaspace = await getGlobalMetaspace_waitIfNeeded();
+        if (!metaspace) {
+            throw new Error(`(UNEXPECTED) metaspace falsy? Expected active global metaspace instance. (E: 2e37a8b6fe987449c5d8693a7d4a2827)`);
+        }
+
+        const space = await metaspace.getLocalUserSpace({});
+        if (!space) {
+            throw new Error(`(UNEXPECTED) space falsy? Expected valid default local user space from metaspace. (E: 1e37a8b6fe987449c5d8693a7d4a2826)`);
+        }
+
+        // 0. Persist all frames of primary identity graph into local browser space
+        if (primaryGraph) {
+            const graphIbGibs = Object.values(primaryGraph) as IbGib_V1[];
+            for (const frame of graphIbGibs) {
+                await metaspace.put({ ibGibs: [frame], space });
+                await metaspace.registerNewIbGib({ ibGib: frame, space });
+            }
+        } else if (primaryKeystone) {
+            await metaspace.put({ ibGibs: [primaryKeystone], space });
+            await metaspace.registerNewIbGib({ ibGib: primaryKeystone, space });
+        }
+
+        // 0.5 Verify primary keystone exists in local browser space via getLatestKeystone
+        const keystoneService = new KeystoneService_V1();
+        try {
+            await keystoneService.getLatestKeystone({
+                addr: primaryTjpAddr,
+                metaspace,
+                space
+            });
+        } catch (error) {
+            const emsg = `Primary identity keystone ${primaryTjpAddr} not found in local browser space! Error: ${extractErrorMsg(error)}`;
+            console.error(`${lc} ${emsg} (E: a123456789abcdef0123456789c0001)`);
+            throw new Error(emsg);
+        }
+
+        // 1. Register with the local keystones special index
+        this.showBusy({
+            isBusy: true,
+            title: 'Registering Identity...',
+            msg: 'Updating local identity indexes and scope settings...',
+            animationEmoji: '💾'
+        });
+        const ibGibsToRegister: IbGib_V1[] = [toDto({ ibGib: delegateKeystone })];
+
+        if (!primaryKeystone && !primaryGraph) { throw new Error(`(UNEXPECTED) primaryKeystone and primaryGraph both falsy? We should have gotten this back from the server. (E: e34cd882ac66633c75c53318a3b28826)`); }
+        if (!delegateKeystone) { throw new Error(`(UNEXPECTED) delegateKeystone falsy? We should have made this locally and even registered it with the server. (E: 56b1c396269e15f008b7e298c71bc826)`); }
+
+        if (primaryKeystone) {
+            ibGibsToRegister.unshift(toDto({ ibGib: primaryKeystone }));
+        }
+        await updateSpecialIndex({
+            type: "keystones",
+            rel8nInfos: [
+                {
+                    rel8nName: "keystone",
+                    ibGibs: ibGibsToRegister,
+                },
+            ],
+            metaspace,
+            space,
+        });
+
+        // Expose for dev tools debugging if available
+        if (masterSecret) {
+            (window as any).dev_domainI = primaryKeystone;
+            (window as any).dev_domainIMasterSecret = masterSecret;
+            (window as any).dev_syncDelegate = delegateKeystone;
+            (window as any).dev_syncDelegateSecret = delegateSecret;
+        }
+
+        // 2. Request to make the new identity active
+        if (makeActive) {
+            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+                detail: { activeIdentityAddr: primaryTjpAddr },
+                bubbles: true,
+                composed: true
+            }));
+        }
+
+        // 3. Display success status
+        const successMsg = "Identity successfully created and activated!";
+        this.showBusy({
+            isBusy: true,
+            title: 'Success!',
+            msg: successMsg,
+            animationEmoji: '✅'
+        });
+        await delay(humanEyeDelay);
+        if (this.elements?.keystoneAddrEl) {
+            this.elements.keystoneAddrEl.textContent = primaryTjpAddr;
+        }
+        if (this.elements?.statusArea) {
+            this.elements.statusArea.classList.remove('hidden');
+        }
+        this.setStatus(successMsg, "success");
+        console.log(`${lc} ✓ ${successMsg}`);
+
+        // 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 },
+            bubbles: true,
+            composed: true
+        }));
+
+        this.showBusy({ isBusy: false });
+    }
+
+    private setFormDisabled(disabled: boolean): void {
+        const root = this.shadowRoot!;
+        const inputIds = [
+            'input-username',
+            'input-description',
+            'input-email',
+            'input-secret',
+            'checkbox-make-active',
+            'btn-generate',
+            'btn-switch-sign-in',
+        ];
+        for (const id of inputIds) {
+            const el = root.getElementById(id) as HTMLInputElement | HTMLButtonElement | null;
+            if (el) {
+                el.disabled = disabled;
+                if (disabled) {
+                    el.style.opacity = '0.5';
+                    el.style.pointerEvents = 'none';
+                } else {
+                    el.style.opacity = '1';
+                    el.style.pointerEvents = 'auto';
+                }
+            }
+        }
+    }
+
     protected override async renderUI(): Promise<void> {
         // No complex rendering needed for this simple creator component yet
     }