@ibgib/web-gib 0.0.59 → 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";
@@ -921,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>

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

@@ -94,12 +94,12 @@ interface KeystoneDetailsElements extends ElementsBase {
     btnLinkGoogleEl: HTMLDivElement;
     btnLinkGithubEl: HTMLDivElement;
     ssoStatusMsgEl: HTMLDivElement;
-    inputCurrentPassphraseEl: HTMLInputElement;
-    inputNewPassphraseEl: HTMLInputElement;
-    inputConfirmPassphraseEl: HTMLInputElement;
-    btnChangePassphraseEl: HTMLButtonElement;
-    changePassphraseStatusEl: HTMLDivElement;
-    changePassphraseCardEl: HTMLDivElement;
+    inputCurrentPasswordEl: HTMLInputElement;
+    inputNewPasswordEl: HTMLInputElement;
+    inputConfirmPasswordEl: HTMLInputElement;
+    btnChangePasswordEl: HTMLButtonElement;
+    changePasswordStatusEl: HTMLDivElement;
+    changePasswordCardEl: HTMLDivElement;
 }
 
 export class KeystoneDetailsComponentInstance
@@ -212,12 +212,12 @@ export class KeystoneDetailsComponentInstance
             this.elements.btnLinkGoogleEl = shadow.getElementById('btn-link-google') as HTMLDivElement;
             this.elements.btnLinkGithubEl = shadow.getElementById('btn-link-github') as HTMLDivElement;
             this.elements.ssoStatusMsgEl = shadow.getElementById('sso-status-msg') as HTMLDivElement;
-            this.elements.inputCurrentPassphraseEl = shadow.getElementById('input-current-passphrase') as HTMLInputElement;
-            this.elements.inputNewPassphraseEl = shadow.getElementById('input-new-passphrase') as HTMLInputElement;
-            this.elements.inputConfirmPassphraseEl = shadow.getElementById('input-confirm-passphrase') as HTMLInputElement;
-            this.elements.btnChangePassphraseEl = shadow.getElementById('btn-change-passphrase') as HTMLButtonElement;
-            this.elements.changePassphraseStatusEl = shadow.getElementById('change-passphrase-status') as HTMLDivElement;
-            this.elements.changePassphraseCardEl = shadow.getElementById('change-passphrase-card') as HTMLDivElement;
+            this.elements.inputCurrentPasswordEl = shadow.getElementById('input-current-password') as HTMLInputElement;
+            this.elements.inputNewPasswordEl = shadow.getElementById('input-new-password') as HTMLInputElement;
+            this.elements.inputConfirmPasswordEl = shadow.getElementById('input-confirm-password') as HTMLInputElement;
+            this.elements.btnChangePasswordEl = shadow.getElementById('btn-change-password') as HTMLButtonElement;
+            this.elements.changePasswordStatusEl = shadow.getElementById('change-password-status') as HTMLDivElement;
+            this.elements.changePasswordCardEl = shadow.getElementById('change-password-card') as HTMLDivElement;
 
             // ElementBase requires contentEl
             this.elements.contentEl = shadow.getElementById('identity-details-view') as HTMLDivElement;
@@ -260,7 +260,7 @@ export class KeystoneDetailsComponentInstance
         this.elements!.btnUpdateIdentityEl.addEventListener('click', () => this.handleUpdateIdentity());
         this.elements!.btnLinkGoogleEl.addEventListener('click', () => this.handleSSOClick('google'));
         this.elements!.btnLinkGithubEl.addEventListener('click', () => this.handleSSOClick('github'));
-        this.elements!.btnChangePassphraseEl.addEventListener('click', () => this.handleChangePassphrase());
+        this.elements!.btnChangePasswordEl.addEventListener('click', () => this.handleChangePassword());
     }
 
     private toggleAccordion() {
@@ -591,17 +591,17 @@ export class KeystoneDetailsComponentInstance
             // Render Challenge Pools
             this.renderChallengePools(keystone.data?.challengePools || []);
 
-            // Render Delegates, SSO link, and Passphrase Change cards (only if this is a primary keystone, hide them for delegate/session keystones)
+            // Render Delegates, SSO link, and Password Change cards (only if this is a primary keystone, hide them for delegate/session keystones)
             const details = await this.getKeystoneDetails(this.ibGibAddr);
             if (details.isPrimary) {
                 this.elements.delegatesCardEl.classList.remove('hidden');
                 await this.renderDelegates(keystone.data?.delegates);
                 this.elements.ssoLinkCardEl.classList.remove('hidden');
-                this.elements.changePassphraseCardEl.classList.remove('hidden');
+                this.elements.changePasswordCardEl.classList.remove('hidden');
             } else {
                 this.elements.delegatesCardEl.classList.add('hidden');
                 this.elements.ssoLinkCardEl.classList.add('hidden');
-                this.elements.changePassphraseCardEl.classList.add('hidden');
+                this.elements.changePasswordCardEl.classList.add('hidden');
             }
 
             this.updateActiveButtonState();
@@ -924,7 +924,7 @@ export class KeystoneDetailsComponentInstance
             let masterSecret: string;
             try {
                 masterSecret = await promptForSecret({
-                    msg: `Enter Master Passphrase to revoke delegate '${deviceName}':`,
+                    msg: `Enter Master Password to revoke delegate '${deviceName}':`,
                     confirm: false
                 });
             } catch (err) {
@@ -1103,8 +1103,8 @@ export class KeystoneDetailsComponentInstance
             while (tries < maxTries && !isCorrect) {
                 try {
                     const promptMsg = tries === 0
-                        ? "Link successful! Enter your local Master Secret (Passphrase) to sign and register the custodian pool"
-                        : `Incorrect passphrase. Please try again (${maxTries - tries} tries remaining):`;
+                        ? "Link successful! Enter your local Master Secret (Password) to sign and register the custodian pool"
+                        : `Incorrect password. Please try again (${maxTries - tries} tries remaining):`;
                     masterSecret = await promptForSecret({
                         msg: promptMsg,
                         confirm: false
@@ -1133,7 +1133,7 @@ export class KeystoneDetailsComponentInstance
             }
 
             if (!isCorrect) {
-                this.setSSOStatus("Link cancelled or failed (incorrect passphrase).", "error");
+                this.setSSOStatus("Link cancelled or failed (incorrect password).", "error");
                 return;
             }
 
@@ -1200,7 +1200,7 @@ export class KeystoneDetailsComponentInstance
         this.setSSOStatus(`Unlinking ${providerId}...`, "info");
 
         try {
-            // 1. Prompt user for passphrase
+            // 1. Prompt user for password
             const keystoneService = new KeystoneService_V1();
             let masterSecret: string | undefined;
             let isCorrect = false;
@@ -1210,8 +1210,8 @@ export class KeystoneDetailsComponentInstance
             while (tries < maxTries && !isCorrect) {
                 try {
                     const promptMsg = tries === 0
-                        ? `Are you sure you want to unlink your ${providerId} account? If so, enter your local Master Secret (Passphrase) to authorize. Otherwise, click Cancel.`
-                        : `Incorrect passphrase. Please try again (${maxTries - tries} tries remaining):`;
+                        ? `Are you sure you want to unlink your ${providerId} account? If so, enter your local Master Secret (Password) to authorize. Otherwise, click Cancel.`
+                        : `Incorrect password. Please try again (${maxTries - tries} tries remaining):`;
                     masterSecret = await promptForSecret({
                         msg: promptMsg,
                         confirm: false
@@ -1238,7 +1238,7 @@ export class KeystoneDetailsComponentInstance
             }
 
             if (!isCorrect) {
-                this.setSSOStatus("Unlink cancelled or failed (incorrect passphrase).", "error");
+                this.setSSOStatus("Unlink cancelled or failed (incorrect password).", "error");
                 return;
             }
 
@@ -1292,49 +1292,49 @@ export class KeystoneDetailsComponentInstance
         }
     }
 
-    private setChangePassphraseStatus(msg: string, type: 'info' | 'success' | 'error') {
-        const el = this.elements!.changePassphraseStatusEl;
+    private setChangePasswordStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const el = this.elements!.changePasswordStatusEl;
         el.textContent = msg;
         el.className = `status-msg ${type}`;
         el.classList.remove('hidden');
     }
 
-    protected async handleChangePassphrase(): Promise<void> {
-        const lc = `${this.lc}[${this.handleChangePassphrase.name}]`;
-        this.setChangePassphraseStatus("Validating entries...", "info");
+    protected async handleChangePassword(): Promise<void> {
+        const lc = `${this.lc}[${this.handleChangePassword.name}]`;
+        this.setChangePasswordStatus("Validating entries...", "info");
 
         try {
-            const currentPassphrase = this.elements!.inputCurrentPassphraseEl.value;
-            const newPassphrase = this.elements!.inputNewPassphraseEl.value;
-            const confirmPassphrase = this.elements!.inputConfirmPassphraseEl.value;
+            const currentPassword = this.elements!.inputCurrentPasswordEl.value;
+            const newPassword = this.elements!.inputNewPasswordEl.value;
+            const confirmPassword = this.elements!.inputConfirmPasswordEl.value;
 
-            if (!currentPassphrase) {
-                this.setChangePassphraseStatus("Current passphrase is required.", "error");
+            if (!currentPassword) {
+                this.setChangePasswordStatus("Current password is required.", "error");
                 return;
             }
-            if (!newPassphrase) {
-                this.setChangePassphraseStatus("New passphrase is required.", "error");
+            if (!newPassword) {
+                this.setChangePasswordStatus("New password is required.", "error");
                 return;
             }
-            if (newPassphrase !== confirmPassphrase) {
-                this.setChangePassphraseStatus("New passphrase and confirmation do not match.", "error");
+            if (newPassword !== confirmPassword) {
+                this.setChangePasswordStatus("New password and confirmation do not match.", "error");
                 return;
             }
 
             const keystoneService = new KeystoneService_V1();
 
-            // 1. Verify current passphrase against parent manage pool
+            // 1. Verify current password against parent manage pool
             const isMatch = await keystoneService.verifySigningSecret({
                 keystoneIbGib: this.ibGib!,
-                signingSecret: currentPassphrase,
+                signingSecret: currentPassword,
                 poolId: 'manage'
             });
             if (!isMatch) {
-                this.setChangePassphraseStatus("Incorrect current passphrase.", "error");
+                this.setChangePasswordStatus("Incorrect current password.", "error");
                 return;
             }
 
-            this.setChangePassphraseStatus("Evolving primary identity keystone...", "info");
+            this.setChangePasswordStatus("Evolving primary identity keystone...", "info");
 
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
             if (!metaspace) { throw new Error(`(UNEXPECTED) metaspace falsy? (E: 95e3c8374b0f088f339f5c5a8700f826)`); }
@@ -1346,15 +1346,15 @@ export class KeystoneDetailsComponentInstance
             const { newKeystone: evolvedParent, newDelegates: evolvedDelegates } =
                 await keystoneService.changePassword({
                     keystoneIbGib: this.ibGib!,
-                    newMasterSecret: newPassphrase,
-                    signingSecret: currentPassphrase,
+                    newMasterSecret: newPassword,
+                    signingSecret: currentPassword,
                     signingPoolId: 'manage',
                     metaspace,
                     space
                 });
             debugger; // look at evolvedDelegates
 
-            this.setChangePassphraseStatus("Resolving and rotating delegate keystones...", "info");
+            this.setChangePasswordStatus("Resolving and rotating delegate keystones...", "info");
 
             // // 3. Evolve registered delegate keystones (preserving custodian/foreign delegate secrets)
             // const delegates = this.ibGib!.data?.delegates || {};
@@ -1368,7 +1368,7 @@ export class KeystoneDetailsComponentInstance
             //         space,
             //     });
 
-            //     // Identify user-owned challenge pools in the delegate that match the old passphrase
+            //     // Identify user-owned challenge pools in the delegate that match the old password
             //     const poolsToRotate: string[] = [];
             //     for (const pool of delegateKeystone.data?.challengePools ?? []) {
             //         if (!pool.isForeign) {
@@ -1383,7 +1383,7 @@ export class KeystoneDetailsComponentInstance
             //              */
             //             const isPoolMatch = await keystoneService.verifySigningSecret({
             //                 keystoneIbGib: delegateKeystone,
-            //                 signingSecret: currentPassphrase,
+            //                 signingSecret: currentPassword,
             //                 poolId: pool.id
             //             });
             //             if (isPoolMatch) { poolsToRotate.push(pool.id); }
@@ -1394,8 +1394,8 @@ export class KeystoneDetailsComponentInstance
             //         console.log(`${lc} Rotating pools in delegate ${delegateInfo.delegateTjpAddr}: ${poolsToRotate.join(', ')}`);
             //         const {newKeystone: evolvedDelegate} = await keystoneService.changePassword({
             //             keystoneIbGib: delegateKeystone,
-            //             newMasterSecret: newPassphrase,
-            //             signingSecret: currentPassphrase,
+            //             newMasterSecret: newPassword,
+            //             signingSecret: currentPassword,
             //             signingPoolId: 'manage',
             //             poolIds: poolsToRotate,
             //             metaspace,
@@ -1406,7 +1406,7 @@ export class KeystoneDetailsComponentInstance
             // }
 
             // 4. Sync evolved parent and all evolved delegate keystones atomically
-            this.setChangePassphraseStatus("Syncing evolved keystones to server...", "info");
+            this.setChangePasswordStatus("Syncing evolved keystones to server...", "info");
             const parentTjpAddr = getIbGibAddr({ ibGib: this.ibGib! }); // is this.ibGib the tjp always? or is it the latest in the keystone line? Does it matter?
 
             const syncRes = await getApiBridge().putEvolveKeystone({
@@ -1419,7 +1419,7 @@ export class KeystoneDetailsComponentInstance
             }
 
             // 5. Update index locally
-            this.setChangePassphraseStatus("Updating local indexes...", "info");
+            this.setChangePasswordStatus("Updating local indexes...", "info");
             const newKeystoneIbGibs = [toDto({ ibGib: evolvedParent })];
             if (evolvedDelegates) {
                 evolvedDelegates.forEach(d => {
@@ -1440,16 +1440,16 @@ export class KeystoneDetailsComponentInstance
             });
 
             // Clear inputs
-            this.elements!.inputCurrentPassphraseEl.value = "";
-            this.elements!.inputNewPassphraseEl.value = "";
-            this.elements!.inputConfirmPassphraseEl.value = "";
+            this.elements!.inputCurrentPasswordEl.value = "";
+            this.elements!.inputNewPasswordEl.value = "";
+            this.elements!.inputConfirmPasswordEl.value = "";
 
-            this.setChangePassphraseStatus("Passphrase updated successfully!", "success");
+            this.setChangePasswordStatus("Password updated successfully!", "success");
             await this.loadIbGib({ getLatest: true });
 
         } catch (error) {
-            console.error(`${lc} Passphrase rotation failed: ${extractErrorMsg(error)}`);
-            this.setChangePassphraseStatus(`Update failed: ${extractErrorMsg(error)}`, "error");
+            console.error(`${lc} Password rotation failed: ${extractErrorMsg(error)}`);
+            this.setChangePasswordStatus(`Update failed: ${extractErrorMsg(error)}`, "error");
         }
     }
 }

package/src/ui/component/identity/remove-device/remove-device.html

@@ -11,8 +11,8 @@
         </div>
 
         <div class="input-group">
-            <label for="input-passphrase">Master Passphrase</label>
-            <input type="password" id="input-passphrase" placeholder="Enter your master passphrase..." class="secret-input">
+            <label for="input-password">Primary Password</label>
+            <input type="password" id="input-password" placeholder="Enter your master password..." class="secret-input">
         </div>
 
         <div class="action-row">
@@ -28,4 +28,4 @@
             <p class="warning">🔒 The selected device delegate has been unlinked from your primary identity.</p>
         </div>
     </div>
-</div>
+</div>

package/src/ui/component/identity/remove-device/remove-device.mts

@@ -58,7 +58,7 @@ interface RemoveDeviceElements extends ElementsBase {
     containerEl: HTMLDivElement;
     titleEl: HTMLHeadingElement;
     selectDelegateEl: HTMLSelectElement;
-    inputPassphrase: HTMLInputElement;
+    inputPassword: HTMLInputElement;
     btnRemoveDeviceEl: HTMLButtonElement;
     statusArea: HTMLDivElement;
     statusText: HTMLParagraphElement;
@@ -89,7 +89,7 @@ export class RemoveDeviceComponentInstance
         this.elements.containerEl = this.shadowRoot!.getElementById('container') as HTMLDivElement;
         this.elements.titleEl = this.shadowRoot!.getElementById('title') as HTMLHeadingElement;
         this.elements.selectDelegateEl = this.shadowRoot!.getElementById('select-delegate') as HTMLSelectElement;
-        this.elements.inputPassphrase = this.shadowRoot!.getElementById('input-passphrase') as HTMLInputElement;
+        this.elements.inputPassword = this.shadowRoot!.getElementById('input-password') as HTMLInputElement;
         this.elements.btnRemoveDeviceEl = this.shadowRoot!.getElementById('btn-remove-device') as HTMLButtonElement;
         this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
         this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
@@ -108,8 +108,8 @@ export class RemoveDeviceComponentInstance
 
     private initHandlers() {
         this.elements!.btnRemoveDeviceEl.addEventListener('click', () => this.handleRemoveDevice());
-        this.elements!.inputPassphrase.addEventListener('input', () => {
-            this.elements!.inputPassphrase.classList.remove('invalid');
+        this.elements!.inputPassword.addEventListener('input', () => {
+            this.elements!.inputPassword.classList.remove('invalid');
         });
     }
 
@@ -187,11 +187,11 @@ export class RemoveDeviceComponentInstance
                 return;
             }
 
-            const masterSecret = this.elements!.inputPassphrase.value.trim();
-            this.elements!.inputPassphrase.value = masterSecret;
+            const masterSecret = this.elements!.inputPassword.value.trim();
+            this.elements!.inputPassword.value = masterSecret;
             if (!masterSecret) {
-                this.elements!.inputPassphrase.classList.add('invalid');
-                this.setStatus("Please enter your master passphrase.", "error");
+                this.elements!.inputPassword.classList.add('invalid');
+                this.setStatus("Please enter your master password.", "error");
                 return;
             }
 

package/src/util/device-helper.mts

@@ -0,0 +1,104 @@
+/**
+ * @module util/device-helper
+ *
+ * Pure utility functions for generating clean, friendly, auto-generated device names/tags.
+ */
+
+export interface DeviceTagOptions {
+    userAgent?: string;
+    userAgentData?: {
+        mobile?: boolean;
+        platform?: string;
+        brands?: Array<{ brand: string; version: string }>;
+    };
+    maxTouchPoints?: number;
+    screenWidth?: number;
+    randomSuffix?: string;
+}
+
+/**
+ * Generates a friendly, URL-safe, kebab-cased default device tag.
+ * (e.g., `chrome-win-a1b2`, `mobile-safari-ios-3c4d`, `tablet-android-e5f6`).
+ *
+ * Pure function: Uses global browser objects (`navigator`, `window`) only as fallbacks
+ * when explicit options are omitted, enabling deterministic unit testing.
+ *
+ * @param opts Optional mock options for deterministic unit testing.
+ */
+export function generateDefaultDeviceTag(opts?: DeviceTagOptions): string {
+    const ua = (opts?.userAgent ?? (typeof navigator !== 'undefined' ? navigator.userAgent : '') ?? '').toLowerCase();
+    const uaData = opts?.userAgentData ?? (typeof navigator !== 'undefined' ? (navigator as any).userAgentData : undefined);
+    const touchPoints = opts?.maxTouchPoints ?? (typeof navigator !== 'undefined' ? navigator.maxTouchPoints : 0) ?? 0;
+    const width = opts?.screenWidth ?? (typeof window !== 'undefined' ? window.innerWidth : 1024) ?? 1024;
+
+    // 1. Detect Form Factor (Mobile, Tablet, Desktop)
+    let formFactor = '';
+    const isMobileUaData = uaData?.mobile;
+    const isMobileUa = /mobile|iphone|ipod|android.*mobile|windows phone/i.test(ua);
+    const isTabletUa = /ipad|tablet|(android(?!.*mobile))/i.test(ua) || (touchPoints > 1 && /macintosh/i.test(ua) && width <= 1366);
+
+    if (isTabletUa) {
+        formFactor = 'tablet';
+    } else if (isMobileUaData || isMobileUa) {
+        formFactor = 'mobile';
+    }
+
+    // 2. Detect OS / Platform
+    let platform = '';
+    const uaPlatform = (uaData?.platform || '').toLowerCase();
+
+    if (uaPlatform.includes('win') || ua.includes('windows')) {
+        platform = 'win';
+    } else if (uaPlatform.includes('ios') || ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod')) {
+        platform = 'ios';
+    } else if (uaPlatform.includes('mac') || ua.includes('macintosh') || ua.includes('mac os')) {
+        platform = 'mac';
+    } else if (uaPlatform.includes('android') || ua.includes('android')) {
+        platform = 'android';
+    } else if (uaPlatform.includes('linux') || ua.includes('linux')) {
+        platform = 'linux';
+    }
+
+    // 3. Detect Browser
+    let browser = '';
+    if (ua.includes('edg/') || ua.includes('edge/')) {
+        browser = 'edge';
+    } else if (ua.includes('chrome/') || ua.includes('crios/')) {
+        browser = 'chrome';
+    } else if (ua.includes('firefox/') || ua.includes('fxios/')) {
+        browser = 'firefox';
+    } else if (ua.includes('safari/') && !ua.includes('chrome/') && !ua.includes('crios/')) {
+        browser = 'safari';
+    }
+
+    // 4. Generate or use provided 4-character random suffix
+    let suffix = opts?.randomSuffix;
+    if (!suffix) {
+        const chars = '0123456789abcdef';
+        suffix = '';
+        for (let i = 0; i < 4; i++) {
+            suffix += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+    }
+    suffix = suffix.toLowerCase().replace(/[^a-z0-9]/g, '').slice(0, 8);
+
+    // 5. Assemble Tokens
+    const tokens: string[] = [];
+    if (formFactor) {
+        tokens.push(formFactor);
+    }
+    if (browser) {
+        tokens.push(browser);
+    }
+    if (platform) {
+        tokens.push(platform);
+    }
+
+    if (tokens.length === 0) {
+        tokens.push('device');
+    }
+
+    tokens.push(suffix);
+
+    return tokens.join('-');
+}