@ibgib/web-gib 0.0.58 → 0.0.60

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

@@ -10,7 +10,7 @@ import { getGibInfo } from "@ibgib/ts-gib/dist/V1/transforms/transform-helper.mj
 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";
 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 { toDto, getTjpAddr, getTimelinesGroupedByTjp } 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";
@@ -261,77 +261,119 @@ export class KeystoneCreatorComponentInstance
      */
     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;
-        }
+        const providerName = providerId === 'google' ? 'Google' : providerId === 'github' ? 'GitHub' : providerId;
 
-        this.setStatus(`Exchanging ${providerId.toUpperCase()} authorization code...`, 'info');
-        const apiBridge = getApiBridge();
-        const resLogin = await apiBridge.postSsoLogin({
-            code: resPopup.code,
-            providerId,
-            redirectUri: resPopup.redirectUri!
+        this.setStatus(`Opening ${providerName} SSO authorization window...`, 'info');
+        this.showBusy({
+            isBusy: true,
+            title: `Connecting to ${providerName}...`,
+            msg: `Opening ${providerName} SSO authorization window...\nPlease complete authorization in the popup window.`,
+            animationEmoji: '🌐'
         });
 
-        if (!resLogin.success || !resLogin.primaryTjpAddr || !resLogin.custodianReqs) {
-            this.setStatus(resLogin.message || `${providerId.toUpperCase()} login failed.`, 'error');
-            return;
-        }
+        try {
+            const resPopup = await executeSsoOAuthPopup({ providerId });
+            if (!resPopup.success || !resPopup.code) {
+                this.setStatus(resPopup.message || `${providerName} sign-in cancelled.`, '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';
+            this.setStatus(`Exchanging ${providerName} authorization code...`, 'info');
+            this.showBusy({
+                isBusy: true,
+                title: 'Exchanging SSO Code...',
+                msg: `Validating ${providerName} authorization code with custodian server...`,
+                animationEmoji: '🔐'
+            });
 
-        const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
-            .withUsername(`${username}-sync`)
-            .withDescription(`Sync Delegate for ${username}`)
-            .withDetails({
-                client: 'space-gib-web',
-                role: 'sync-delegate',
-                primaryTjpAddr,
-                custodianReqs,
+            const apiBridge = getApiBridge();
+            const resLogin = await apiBridge.postSsoLogin({
+                code: resPopup.code,
+                providerId,
+                redirectUri: resPopup.redirectUri!
             });
 
-        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;
-        }
+            if (!resLogin.success || !resLogin.primaryTjpAddr || !resLogin.custodianReqs) {
+                this.setStatus(resLogin.message || `${providerName} login failed.`, 'error');
+                return;
+            }
 
-        const keystoneService = new KeystoneService_V1();
-        const delegateKeystone = await keystoneService.genesis({
-            masterSecret: delegateSecret,
-            configs,
-            metaspace,
-            space,
-            frameDetails: delegateBuilder.getFrameDetails(),
-            isPrimary: false
-        });
+            const { primaryTjpAddr, custodianReqs } = resLogin;
+            this.setStatus('Deriving local device delegate keys...', 'info');
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sync Delegate...',
+                msg: 'Generating cryptographic sync delegate keys...',
+                animationEmoji: '🔑'
+            });
 
-        this.setStatus('Registering device delegate with custodian server...', 'info');
-        const resRegister = await apiBridge.postCustodianRegisterDelegate({ delegateKeystone });
+            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)');
+            }
 
-        if (!resRegister.success) {
-            this.setStatus(resRegister.message || 'Custodian delegate registration failed.', 'error');
-            return;
-        }
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(custodianSyncProfileName.trim() as any)
+                .withUsername(`${username}-sync`)
+                .withDescription(`Sync Delegate for ${username}`)
+                .withDetails({
+                    client: 'space-gib-web',
+                    role: 'sync-delegate',
+                    primaryTjpAddr,
+                    custodianReqs,
+                });
 
-        // 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
-        });
+            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');
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Delegate...',
+                msg: 'Registering local delegate with custodian server...',
+                animationEmoji: '📝'
+            });
+
+            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
+            });
+
+        } catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`, error);
+            this.setStatus(`SSO sign-in error: ${emsg}`, 'error');
+        } finally {
+            this.showBusy({ isBusy: false });
+        }
     }
 
     /**
@@ -426,8 +468,13 @@ export class KeystoneCreatorComponentInstance
             });
 
             const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
-            const username = email.split('@')[0];
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+            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() as any)
                 .withUsername(`${username}-sync`)
                 .withDescription(`Sync Delegate for ${username}`)
                 .withDetails({
@@ -577,13 +624,14 @@ export class KeystoneCreatorComponentInstance
                 animationEmoji: '⚙️'
             });
 
-            // 1. Prepare Primary/Domain Keystone Configs
-            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)`);
+            // 1. Prepare Primary 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. Expected valid profile name like "primary-profile.dev" or "primary-profile.prod". (E: 3c4d5e6f7890123456789abcdef3)');
+            }
+            console.log(`${lc} Using sovereign primary keystone policy profile '${sovereignPrimaryProfileName}' (I: 90123456789abcdef0123456789abcde)`);
 
-            const builder = KeystoneProfileBuilder.buildKeystone(profileName as any)
+            const builder = KeystoneProfileBuilder.buildKeystone(sovereignPrimaryProfileName.trim() as any)
                 .withUsername(username)
                 .withDescription(description);
             if (email) {
@@ -595,10 +643,13 @@ export class KeystoneCreatorComponentInstance
             });
             const configs = await builder.compileConfigs();
 
-            // 2. Get local services
+            // 2. Prepare Metaspace/Space
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
-            const space = await metaspace.getLocalUserSpace({});
-            if (!space) { throw new Error("No default space found in metaspace."); }
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) {
+                this.setStatus("Failed to access local user space.", "error");
+                return;
+            }
 
             // 3. Perform Genesis (Local)
             this.showBusy({
@@ -633,7 +684,12 @@ export class KeystoneCreatorComponentInstance
             });
 
             const delegateSecret = await deriveDelegateSecret({ masterSecret });
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(profileName as any)
+            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() as any)
                 .withUsername(`${username}-sync`)
                 .withDescription(`Sync Delegate for ${username}`)
                 .withDetails({
@@ -865,9 +921,12 @@ export class KeystoneCreatorComponentInstance
         // 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 });
+            await metaspace.put({ ibGibs: graphIbGibs, space });
+            const timelinesMap = getTimelinesGroupedByTjp({ ibGibs: graphIbGibs });
+            for (const tjpKey of Object.keys(timelinesMap)) {
+                for (const frame of timelinesMap[tjpKey]) {
+                    await metaspace.registerNewIbGib({ ibGib: frame, space });
+                }
             }
         } else if (primaryKeystone) {
             await metaspace.put({ ibGibs: [primaryKeystone], space });

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

@@ -578,7 +578,7 @@
     opacity: 0.4;
 }
 
-/* Form Layout for Passphrase Rotation */
+/* Form Layout for Password Rotation */
 .form-row {
     display: flex;
     gap: 1rem;

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

@@ -60,7 +60,8 @@
         <div id="delegates-card" class="card">
             <h3>Registered Delegates</h3>
             <div id="delegates-container" class="delegates-container">
-                <p class="description">Active sub-keystones authorized to perform sync and operations on behalf of this Domain Identity.</p>
+                <p class="description">Active sub-keystones authorized to perform operations on behalf of this Domain
+                    Identity.</p>
                 <table class="delegates-table">
                     <thead>
                         <tr>
@@ -80,7 +81,8 @@
         <!-- SSO Identity Linking Card -->
         <div id="sso-link-card" class="card hidden">
             <h3>Identity Providers</h3>
-            <p class="description">Securely link or unlink external OAuth2 providers to delegate sync access to this identity.</p>
+            <p class="description">Securely link or unlink external OAuth2 providers to delegate sync access to this
+                identity.</p>
             <div class="sso-toggle-group">
                 <!-- Google Card Toggle -->
                 <div id="btn-link-google" class="sso-toggle-card google" role="button" tabindex="0">
@@ -88,10 +90,14 @@
                     <div class="toggle-content">
                         <!-- Custom Google SVG Icon -->
                         <svg class="sso-icon" viewBox="0 0 24 24">
-                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
-                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
+                            <path fill="#4285F4"
+                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                            <path fill="#34A853"
+                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                            <path fill="#FBBC05"
+                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" />
+                            <path fill="#EA4335"
+                                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" />
                         </svg>
                         <span class="provider-label">Google</span>
                         <span class="toggle-state-text">Unlinked</span>
@@ -105,7 +111,8 @@
                     <div class="toggle-content">
                         <!-- Custom GitHub SVG Icon -->
                         <svg class="sso-icon" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                            <path
+                                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
                         </svg>
                         <span class="provider-label">GitHub</span>
                         <span class="toggle-state-text">Unlinked</span>
@@ -116,28 +123,30 @@
             <div id="sso-status-msg" class="status-msg hidden"></div>
         </div>
 
-        <!-- Change Passphrase Card -->
-        <div id="change-passphrase-card" class="card">
-            <h3>Change Master Passphrase</h3>
-            <p class="description">Rotate your local master passphrase. This will cryptographically evolve your primary identity and all registered user-owned delegate keystones to the new passphrase.</p>
+        <!-- Change Password Card -->
+        <div id="change-password-card" class="card">
+            <h3>Change Password</h3>
+            <p class="description">Rotate your local password that drives this identity. This will cryptographically
+                evolve your primary
+                identity and all registered user-owned delegate keystones to the new password.</p>
             <div class="form-row">
                 <div class="form-group">
-                    <label for="input-current-passphrase">Current Passphrase</label>
-                    <input type="password" id="input-current-passphrase" placeholder="••••••••" class="form-input">
+                    <label for="input-current-password">Current Password</label>
+                    <input type="password" id="input-current-password" placeholder="••••••••" class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="input-new-passphrase">New Passphrase</label>
-                    <input type="password" id="input-new-passphrase" placeholder="••••••••" class="form-input">
+                    <label for="input-new-password">New Password</label>
+                    <input type="password" id="input-new-password" placeholder="••••••••" class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="input-confirm-passphrase">Confirm New Passphrase</label>
-                    <input type="password" id="input-confirm-passphrase" placeholder="••••••••" class="form-input">
+                    <label for="input-confirm-password">Confirm New Password</label>
+                    <input type="password" id="input-confirm-password" placeholder="••••••••" class="form-input">
                 </div>
             </div>
             <div class="action-row">
-                <button id="btn-change-passphrase" class="action-btn">Update Passphrase</button>
+                <button id="btn-change-password" class="action-btn">Update Password</button>
             </div>
-            <div id="change-passphrase-status" class="status-msg hidden"></div>
+            <div id="change-password-status" class="status-msg hidden"></div>
         </div>
 
         <!-- Raw Keystone Timeline Explorer -->
@@ -151,4 +160,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>