@ibgib/space-gib 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibgib/space-gib",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "description": "ibgib storage and provider service — SaaS at ibgib.space",
   "scripts": {
@@ -12,11 +12,11 @@
     "build:test": "tsc -p tsconfig.test.json"
   },
   "dependencies": {
-    "@ibgib/core-gib": "^0.1.61",
+    "@ibgib/core-gib": "^0.1.63",
     "@ibgib/helper-gib": "^0.0.36",
     "@ibgib/ts-gib": "^0.5.32",
-    "@ibgib/web-gib": "^0.0.47",
-    "@ibgib/node-gib": "^0.0.5"
+    "@ibgib/web-gib": "^0.0.49",
+    "@ibgib/node-gib": "^0.0.7"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/client/AUTO-GENERATED-version.mts

@@ -8,4 +8,4 @@
 /**
  * Version of space-gib, auto-updated by the build process.
  */
-export const AUTO_GENERATED_VERSION = '0.0.4';
+export const AUTO_GENERATED_VERSION = '0.0.6';

package/src/client/components/identity-header/identity-header.css

@@ -18,14 +18,13 @@
     background: var(--tab-background-color-active, rgba(255, 255, 255, 0.1));
     border: 1px solid var(--tab-border-color-active, rgba(80, 250, 123, 0.3));
     border-radius: var(--radius-lg, 20px);
-    cursor: pointer;
+    cursor: default;
     transition: all 0.2s ease-in-out;
 }
 
 .identity-pill:hover {
     background: rgba(80, 250, 123, 0.15);
     border-color: var(--clr-accent, #50fa7b);
-    transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(80, 250, 123, 0.1);
 }
 
@@ -72,3 +71,42 @@
 .hidden {
     display: none !important;
 }
+
+/* Styled selector dropdown */
+.identity-select {
+    font-family: var(--font-sans, sans-serif);
+    font-size: 0.85rem;
+    color: var(--clr-text-primary, #ffffff);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    outline: none;
+    padding: 0 0.2rem;
+    max-width: 150px;
+    text-overflow: ellipsis;
+}
+
+.identity-select option {
+    background: var(--clr-bg-surface, #1e1e2e);
+    color: var(--clr-text-primary, #ffffff);
+}
+
+/* Gear manage button */
+.manage-btn {
+    background: transparent;
+    border: none;
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--clr-text-secondary, #b3b3b3);
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.manage-btn:hover {
+    color: var(--clr-accent, #50fa7b);
+    transform: rotate(45deg);
+}

package/src/client/components/identity-header/identity-header.html

@@ -1,8 +1,9 @@
 <div id="container" class="header-widget-container">
     <!-- Active Identity Pill -->
-    <div id="active-identity-pill" class="identity-pill hidden" title="Active Domain Identity. Click to manage.">
+    <div id="active-identity-pill" class="identity-pill hidden">
         <div id="identity-avatar" class="avatar-circle">-</div>
-        <span id="identity-address-truncated" class="address-text">No Identity</span>
+        <select id="identity-selector" class="identity-select" title="Switch active identity"></select>
+        <button id="btn-manage-identities" class="manage-btn" title="Manage Identities">⚙️</button>
     </div>
 
     <!-- Fallback Action Button -->

package/src/client/components/identity-header/identity-header.mts

@@ -68,7 +68,8 @@ export class IdentityHeaderComponentMeta extends IbGibDynamicComponentMetaBase {
 interface IdentityHeaderElements extends ElementsBase {
     containerEl: HTMLDivElement;
     activeIdentityPillEl: HTMLDivElement;
-    identityAddressTruncatedEl: HTMLSpanElement;
+    identitySelectorEl: HTMLSelectElement;
+    btnManageIdentitiesEl: HTMLButtonElement;
     btnCreateIdentityEl: HTMLButtonElement;
     identityAvatarEl: HTMLDivElement;
 }
@@ -132,7 +133,8 @@ export class IdentityHeaderComponentInstance
         const shadow = this.shadowRoot!;
         this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
         this.elements.activeIdentityPillEl = shadow.getElementById('active-identity-pill') as HTMLDivElement;
-        this.elements.identityAddressTruncatedEl = shadow.getElementById('identity-address-truncated') as HTMLSpanElement;
+        this.elements.identitySelectorEl = shadow.getElementById('identity-selector') as HTMLSelectElement;
+        this.elements.btnManageIdentitiesEl = shadow.getElementById('btn-manage-identities') as HTMLButtonElement;
         this.elements.btnCreateIdentityEl = shadow.getElementById('btn-create-identity') as HTMLButtonElement;
         this.elements.identityAvatarEl = shadow.getElementById('identity-avatar') as HTMLDivElement;
 
@@ -182,9 +184,24 @@ export class IdentityHeaderComponentInstance
     }
 
     private initHandlers() {
-        // Handle clicks: route to the full identity manager
-        this.elements!.activeIdentityPillEl.addEventListener('click', () => this.navigateToManager());
         this.elements!.btnCreateIdentityEl.addEventListener('click', () => this.navigateToManager());
+        this.elements!.btnManageIdentitiesEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.navigateToManager();
+        });
+        this.elements!.identitySelectorEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+        this.elements!.identitySelectorEl.addEventListener('change', () => {
+            const selectedAddr = this.elements!.identitySelectorEl.value;
+            if (selectedAddr) {
+                window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+                    detail: { activeIdentityAddr: selectedAddr },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        });
     }
 
     private navigateToManager() {
@@ -222,7 +239,7 @@ export class IdentityHeaderComponentInstance
             }
 
             // Sync with globalState.identity
-            const globalState = getIbGibGlobalThis_SpaceGib(APP_CONFIG) as any;
+            const globalState = getIbGibGlobalThis_SpaceGib(APP_CONFIG);
             if (this.activeAddr) {
                 const metaspace = globalState.metaspace;
                 if (metaspace) {
@@ -230,12 +247,44 @@ export class IdentityHeaderComponentInstance
                     if (space) {
                         const res = await metaspace.get({ addr: this.activeAddr, space });
                         if (res.success && res.ibGibs && res.ibGibs.length > 0) {
-                            globalState.identity = res.ibGibs[0];
+                            const domainIdentity = res.ibGibs[0] as KeystoneIbGib_V1;
+
+                            // Find delegate with the sync allowed verb
+                            let syncDelegateIdentity: KeystoneIbGib_V1 | undefined;
+                            const delegates = domainIdentity.data?.delegates;
+                            if (delegates) {
+                                for (const delegateInfo of Object.values(delegates)) {
+                                    if (delegateInfo.allowedVerbs?.includes('sync^gib') || (!delegateInfo.allowedVerbs && delegateInfo.delegateTjpAddr)) {
+                                        // Fetch the delegate's latest tip from space
+                                        const delegateLatestAddr = await metaspace.getLatestAddr({
+                                            addr: delegateInfo.delegateTjpAddr,
+                                            space
+                                        });
+                                        if (delegateLatestAddr) {
+                                            const resDelegate = await metaspace.get({ addr: delegateLatestAddr, space });
+                                            if (resDelegate.success && resDelegate.ibGibs && resDelegate.ibGibs.length > 0) {
+                                                syncDelegateIdentity = resDelegate.ibGibs[0] as KeystoneIbGib_V1;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            globalState.identity = {
+                                resolved: true,
+                                authenticated: true,
+                                domainIdentity,
+                                syncDelegateIdentity
+                            };
                         }
                     }
                 }
             } else {
-                globalState.identity = undefined;
+                globalState.identity = {
+                    resolved: false,
+                    authenticated: false
+                };
             }
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
@@ -251,24 +300,47 @@ export class IdentityHeaderComponentInstance
         // Double check state on render
         await this.resolveActiveIdentity();
 
-        if (this.activeAddr) {
+        const keystones = this.ibGib?.rel8ns?.keystone ?? [];
+
+        if (this.activeAddr && keystones.length > 0) {
             this.elements.activeIdentityPillEl.classList.remove('hidden');
             this.elements.btnCreateIdentityEl.classList.add('hidden');
 
             const addr = this.activeAddr;
 
-            // Initial fallback render
-            let displayAddr = addr;
-            if (displayAddr.length > 14) {
-                displayAddr = displayAddr.substring(0, 7) + '...' + displayAddr.substring(displayAddr.length - 5);
+            // Populate the dropdown selector
+            this.elements.identitySelectorEl.innerHTML = '';
+            for (const kAddr of keystones) {
+                const option = document.createElement('option');
+                option.value = kAddr;
+
+                let displayAddr = kAddr;
+                if (displayAddr.length > 14) {
+                    displayAddr = displayAddr.substring(0, 7) + '...' + displayAddr.substring(displayAddr.length - 5);
+                }
+                option.textContent = displayAddr;
+
+                // Load details asynchronously so we don't block
+                this.getKeystoneDetails(kAddr).then(details => {
+                    if (details.username) {
+                        let name = details.username;
+                        if (name.length > 14) {
+                            name = name.substring(0, 11) + '...';
+                        }
+                        option.textContent = name;
+                    }
+                }).catch(err => {});
+
+                this.elements.identitySelectorEl.appendChild(option);
             }
-            this.elements.identityAddressTruncatedEl.textContent = displayAddr;
+            this.elements.identitySelectorEl.value = addr;
+
+            // Render active avatar
             this.elements.identityAvatarEl.textContent = '-';
             this.elements.identityAvatarEl.style.backgroundColor = 'var(--clr-accent)';
             this.elements.identityAvatarEl.style.color = '#11111b';
-            this.elements.activeIdentityPillEl.title = `Active Identity: ${addr}\nClick to manage.`;
 
-            // Load details dynamically
+            // Load details dynamically for the active identity
             const details = await this.getKeystoneDetails(addr);
 
             // First letter of username, or fallback to first char of address (or 'A')
@@ -290,16 +362,6 @@ export class IdentityHeaderComponentInstance
             this.elements.identityAvatarEl.style.backgroundColor = bg;
             this.elements.identityAvatarEl.style.color = fg;
 
-            // Set user display name or address in pill
-            let displayName = details.username;
-            const maxLen = 14;
-            if (displayName) {
-                if (displayName.length > maxLen) {
-                    displayName = displayName.substring(0, maxLen - 3) + '...';
-                }
-                this.elements.identityAddressTruncatedEl.textContent = displayName;
-            }
-
             // Title with full details
             const titleParts: string[] = [];
             if (details.username) {
@@ -312,7 +374,6 @@ export class IdentityHeaderComponentInstance
                 titleParts.push(`Desc: ${desc}`);
             }
             titleParts.push(`Addr: ${addr}`);
-            titleParts.push(`Click to manage.`);
             this.elements.activeIdentityPillEl.title = titleParts.join('\n');
         } else {
             this.elements.activeIdentityPillEl.classList.add('hidden');

package/src/client/components/identity-manager/IMPLEMENTATION.md

@@ -68,9 +68,9 @@ Following the custom `web-gib` Web Component microframework, the component consi
 - [x] Document the custom `web-gib` Web Component microframework (covering element lifecycles, routing, parent-child delegation, and settings/tabs state persistence).
 
 ### Phase 5: UI/UX Enhancements & Bugs
-- [ ] Center/align the `<ibgib-identity-manager>` component instead of having it shoved to the left (maxing out at ~66% width of the center-panel).
+- [x] Center/align the `<ibgib-identity-manager>` component instead of having it shoved to the left (maxing out at ~66% width of the center-panel).
 - [x] Adjust scrolling behavior so the entire manager or manager-content div scrolls, instead of limiting the scroll region to the accordion detail pre-tag.
-- [ ] Automatically select/activate the newly created identity keystone in the tab list upon creation.
+- [x] Automatically select/activate the newly created identity keystone in the tab list upon creation.
 
 ### Phase 6: Detail Views (Pools & Keystone Metadata)
 - [x] Add a details view for challenge pools on the keystone (`KeystoneData_V1.challengePools`).
@@ -86,14 +86,14 @@ Following the custom `web-gib` Web Component microframework, the component consi
 - [x] Implement history scrubber navigation (First, Back 10, Back 1, Next 1, Next 10, Latest) to traverse the keystone timeline.
 
 ### Phase 8: Active Identity Management
-- [ ] Define reusable event constants (`EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` and `EVENT_IBGIB_IDENTITY_CHANGED`) in `libs/web-gib/src/ui/ui-constants.mts`.
-- [ ] Add checkbox in `<ibgib-keystone-creator>` to make the newly created identity the active one. Enforce/lock to checked if no identities exist yet.
-- [ ] If checked on creation, `<ibgib-keystone-creator>` dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` containing the new keystone address.
-- [ ] Add "Set as Active Identity" button to `<ibgib-identity-manager>` details view. When clicked, it dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` with the selected keystone address.
-- [ ] Decouple tab clicks in `<ibgib-identity-manager>` so they only browse details via `viewIdentityDetails(addr)` without setting active identity.
-- [ ] Update `<ibgib-identity-header>` to listen for `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE`. On receipt, write the address to its settings timeline, update `ibGibGlobalThis.identity`, re-render, and dispatch `EVENT_IBGIB_IDENTITY_CHANGED`.
-- [ ] Set `ibGibGlobalThis.identity` on `<ibgib-identity-header>` initialization using settings.
-- [ ] Update `<ibgib-identity-manager>` to subscribe to `EVENT_IBGIB_IDENTITY_CHANGED` and re-render/update its "Set as Active" button state accordingly.
+- [x] Define reusable event constants (`EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` and `EVENT_IBGIB_IDENTITY_CHANGED`) in `libs/web-gib/src/ui/ui-constants.mts`.
+- [x] Add checkbox in `<ibgib-keystone-creator>` to make the newly created identity the active one. Enforce/lock to checked if no identities exist yet.
+- [x] If checked on creation, `<ibgib-keystone-creator>` dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` containing the new keystone address.
+- [x] Add "Set as Active Identity" button to `<ibgib-identity-manager>` details view. When clicked, it dispatches `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE` with the selected keystone address.
+- [x] Decouple tab clicks in `<ibgib-identity-manager>` so they only browse details via `viewIdentityDetails(addr)` without setting active identity.
+- [x] Update `<ibgib-identity-header>` to listen for `EVENT_IBGIB_IDENTITY_REQUEST_CHANGE`. On receipt, write the address to its settings timeline, update `ibGibGlobalThis.identity`, re-render, and dispatch `EVENT_IBGIB_IDENTITY_CHANGED`.
+- [x] Set `ibGibGlobalThis.identity` on `<ibgib-identity-header>` initialization using settings.
+- [x] Update `<ibgib-identity-manager>` to subscribe to `EVENT_IBGIB_IDENTITY_CHANGED` and re-render/update its "Set as Active" button state accordingly.
 - [ ] TODO: Enhance the `<ibgib-identity-header>` component to support selecting/switching between loaded identities directly from a dropdown/dropdown-like UI inside the header.
 
 ### Testing Protocol

package/src/client/components/identity-manager/identity-manager.css

@@ -464,4 +464,43 @@ h2 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+/* Delegates Card styling */
+.delegates-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-sm, 6px);
+    overflow: hidden;
+}
+
+.delegates-table th,
+.delegates-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.delegates-table th {
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--clr-text-secondary, #8fa08f);
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.delegates-table td {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.8rem;
+    color: var(--clr-text-primary, #ffffff);
+    word-break: break-all;
+}
+
+.delegates-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.02);
 }

package/src/client/components/identity-manager/identity-manager.html

@@ -85,6 +85,26 @@
                 </div>
             </div>
 
+            <!-- Delegates Card -->
+            <div 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>
+                    <table class="delegates-table">
+                        <thead>
+                            <tr>
+                                <th>Name / Description</th>
+                                <th>TJP Address</th>
+                                <th>Allowed Verbs</th>
+                            </tr>
+                        </thead>
+                        <tbody id="delegates-list">
+                            <!-- Dynamic list of delegates gets injected here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
             <!-- Replicas / Sync Peers Repository Manager -->
             <!-- <div class="card">
                 <h3>Replication & Spaces</h3>

package/src/client/components/identity-manager/identity-manager.mts

@@ -102,6 +102,7 @@ interface IdentityManagerElements extends ElementsBase {
     rawAccordionHeaderEl: HTMLDivElement;
     rawAccordionContentEl: HTMLDivElement;
     rawKeystoneJsonEl: HTMLPreElement;
+    delegatesListEl: HTMLTableSectionElement;
 }
 
 /**
@@ -201,6 +202,7 @@ export class IdentityManagerComponentInstance
         this.elements.rawAccordionHeaderEl = shadow.getElementById('raw-accordion-header') as HTMLDivElement;
         this.elements.rawAccordionContentEl = shadow.getElementById('raw-accordion-content') as HTMLDivElement;
         this.elements.rawKeystoneJsonEl = shadow.getElementById('raw-keystone-json') as HTMLPreElement;
+        this.elements.delegatesListEl = shadow.getElementById('delegates-list') as HTMLTableSectionElement;
 
         // ElementBase requires contentEl (points to the main container/body area)
         this.elements.contentEl = shadow.getElementById('identity-manager-content') as HTMLDivElement;
@@ -524,6 +526,9 @@ export class IdentityManagerComponentInstance
         this.elements.identityAggrDetailsEl.textContent = '{}';
         this.elements.scrubberStatusEl.textContent = 'Frame - / -';
         this.elements.poolsContainerEl.innerHTML = '';
+        if (this.elements.delegatesListEl) {
+            this.elements.delegatesListEl.innerHTML = '';
+        }
         this.history = [];
         this.currentFrameIndex = -1;
     }
@@ -681,6 +686,9 @@ export class IdentityManagerComponentInstance
 
         // Render Challenge Pools
         this.renderChallengePools(keystone.data?.challengePools || []);
+
+        // Render Delegates
+        await this.renderDelegates(keystone.data?.delegates);
     }
 
     private renderChallengePools(pools: any[]) {
@@ -761,6 +769,57 @@ export class IdentityManagerComponentInstance
         }
     }
 
+    private async renderDelegates(delegates: Record<string, any> | undefined) {
+        if (!this.elements) return;
+        const listEl = this.elements.delegatesListEl;
+        listEl.innerHTML = '';
+
+        if (!delegates || Object.keys(delegates).length === 0) {
+            listEl.innerHTML = `
+                <tr>
+                    <td colspan="3" style="text-align: center; color: var(--clr-text-secondary, #b3b3b3);">
+                        No registered delegates.
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        for (const [delegateTjpAddr, info] of Object.entries(delegates)) {
+            const tr = document.createElement('tr');
+
+            const tdName = document.createElement('td');
+            tdName.textContent = 'Loading...';
+
+            const tdTjp = document.createElement('td');
+            tdTjp.textContent = delegateTjpAddr;
+            tdTjp.title = delegateTjpAddr;
+
+            const tdVerbs = document.createElement('td');
+            tdVerbs.textContent = info.allowedVerbs ? info.allowedVerbs.join(', ') : '-';
+            tdVerbs.title = tdVerbs.textContent;
+
+            tr.appendChild(tdName);
+            tr.appendChild(tdTjp);
+            tr.appendChild(tdVerbs);
+            listEl.appendChild(tr);
+
+            if (info.delegateAddr) {
+                this.getKeystoneDetails(info.delegateAddr).then(details => {
+                    const textParts: string[] = [];
+                    if (details.username) textParts.push(details.username);
+                    if (details.description) textParts.push(details.description);
+                    tdName.textContent = textParts.join(' / ') || 'Unnamed Delegate';
+                    tdName.title = `Addr: ${info.delegateAddr}\n` + textParts.join('\n');
+                }).catch(err => {
+                    tdName.textContent = 'Unknown Delegate';
+                });
+            } else {
+                tdName.textContent = 'No Address';
+            }
+        }
+    }
+
     override async handleContextUpdated(): Promise<void> {
         await this.renderUI();
     }

package/src/client/components/keystone-creator/keystone-creator.mts

@@ -2,7 +2,7 @@ import thisCss from "./keystone-creator.css";
 import thisHtml from "./keystone-creator.html";
 import styleCss from "../../style.css";
 
-import { delay, extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+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 { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
@@ -32,7 +32,8 @@ import { SettingsType } from "@ibgib/web-gib/dist/common/settings/settings-const
 import { SettingsIbGib_V1 } from "@ibgib/web-gib/dist/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 { KEYSTONE_USERNAME_REGEXP, KEYSTONE_DESCRIPTION_REGEXP } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { KEYSTONE_USERNAME_REGEXP, KEYSTONE_DESCRIPTION_REGEXP, KEYSTONE_VERB_SYNC } 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 { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
 
 export const KEYSTONE_CREATOR_COMPONENT_NAME = 'ibgib-keystone-creator';
@@ -247,12 +248,13 @@ export class KeystoneCreatorComponentInstance
                 loadingText: 'Generating...'
             });
 
-            // 1. Prepare Keystone Configs using the test behavior profile (with username and description)
-            const builder = KeystoneProfileBuilder.buildKeystone('test')
+            // 1. Prepare Primary/Domain Keystone Configs
+            const builder = KeystoneProfileBuilder.buildKeystone('domain')
                 .withUsername(username)
                 .withDescription(description)
                 .withDetails({
                     client: 'space-gib-web',
+                    role: 'domain-identity'
                 });
             const configs = await builder.compileConfigs();
 
@@ -280,20 +282,66 @@ export class KeystoneCreatorComponentInstance
             const addr = getIbGibAddr({ ibGib: keystoneIbGib });
             console.log(`${lc} [NAG][ibgib-paradigm] local genesis complete: ${addr}`);
             await delay(humanEyeDelay); // for human eyes, not needed for functionality
-            this.setStatus("Local genesis complete. Syncing to server...", "info");
+            this.setStatus("Local genesis complete. Creating sync delegate...", "info");
             devLog(`✓ Local genesis complete: ${addr}`);
 
-            // Expose for dev tools
-            (window as any).dev_domainI = keystoneIbGib;
-            (window as any).dev_domainIMasterSecret = masterSecret;
+            // Automatically generate Sync Delegate Keystone
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sync Delegate...',
+                msg: 'Generating cryptographic sync delegate keys...',
+                animationEmoji: '🔑'
+            });
+
+            const delegateSecret = await deriveDelegateSecret({ masterSecret });
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+                .withUsername(`${username}-sync`)
+                .withDescription(`Sync Delegate for ${username}`)
+                .withDetails({
+                    client: 'space-gib-web',
+                    role: 'sync-delegate'
+                });
+            const delegateConfigs = await delegateBuilder.compileConfigs();
+
+            const delegateKeystoneIbGib = await keystoneService.genesis({
+                masterSecret: delegateSecret,
+                configs: delegateConfigs,
+                metaspace,
+                space,
+                frameDetails: delegateBuilder.getFrameDetails()
+            });
+
+            const delegateAddr = getIbGibAddr({ ibGib: delegateKeystoneIbGib });
+            console.log(`${lc} sync delegate genesis complete: ${delegateAddr}`);
+            await delay(humanEyeDelay);
+
+            // Register delegate on parent
+            this.setStatus("Registering delegate on parent...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Delegate...',
+                msg: 'Evolving domain identity to register delegate...',
+                animationEmoji: '📝'
+            });
+            const evolvedParentKeystoneIbGib = await keystoneService.registerDelegate({
+                parentKeystone: keystoneIbGib,
+                delegateKeystone: delegateKeystoneIbGib,
+                masterSecret,
+                metaspace,
+                space,
+                allowedVerbs: [KEYSTONE_VERB_SYNC]
+            });
+            const evolvedParentAddr = getIbGibAddr({ ibGib: evolvedParentKeystoneIbGib });
+            console.log(`${lc} delegate registered. evolved parent address: ${evolvedParentAddr}`);
+            await delay(humanEyeDelay);
 
             // 4. Post to Server
             devLog(`Posting genesis keystone to server...`);
+            this.setStatus("Syncing genesis to server...", "info");
             this.showBusy({
                 isBusy: true,
                 title: 'Syncing to Server...',
                 msg: [
-                    'Local genesis complete!',
                     'Posting genesis keystone to server sync node...',
                     '(may take awhile, depending on strength of keystone...)',
                 ].join('\n'),
@@ -306,6 +354,25 @@ export class KeystoneCreatorComponentInstance
                 return; /* <<<< returns early */
             }
 
+            // 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 spaceGibApiBridge.putEvolveKeystone(
+                addr,
+                evolvedParentKeystoneIbGib,
+                [delegateKeystoneIbGib]
+            );
+            if (!resEvolve.success) {
+                this.setStatus(`Delegate registration sync failed: ${resEvolve.message}`, "error");
+                devLog(`✗ Server rejected delegate registration: ${resEvolve.message}`);
+                return; /* <<<< returns early */
+            }
+
             // 5. Register with the keystones special index
             this.showBusy({
                 isBusy: true,
@@ -319,25 +386,34 @@ export class KeystoneCreatorComponentInstance
                 rel8nInfos: [
                     {
                         rel8nName: "keystone",
-                        ibGibs: [toDto({ ibGib: keystoneIbGib })],
+                        ibGibs: [
+                            toDto({ ibGib: evolvedParentKeystoneIbGib }),
+                            toDto({ ibGib: delegateKeystoneIbGib })
+                        ],
                     },
                 ],
                 metaspace,
                 space,
             });
 
+            // 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: addr },
+                    detail: { activeIdentityAddr: evolvedParentAddr },
                     bubbles: true,
                     composed: true
                 }));
             }
 
             // 7. Success
-            this.elements!.keystoneAddrEl.textContent = addr;
+            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