@ibgib/space-gib 0.0.5 → 0.0.7

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

@@ -2,28 +2,35 @@ import styleCss from "../../style.css";
 import thisCss from "./identity-manager.css";
 import thisHtml from "./identity-manager.html";
 
-import { extractErrorMsg, pretty } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { delay, extractErrorMsg, pretty } 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 { getIbAndGib, getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.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 { KeystoneIbGib_V1 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import { getTjpAddr } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { mut8Timeline } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { MetaspaceService } from "@ibgib/core-gib/dist/witness/space/metaspace/metaspace-types.mjs";
 import {
-    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+    IbGibDynamicComponentMetaBase,
+    IbGibDynamicComponentInstanceBase_ParentOfTabs,
 } from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
 import {
-    ElementsBase, IbGibDynamicComponentInstance,
+    ElementsBase, ChildInfoBase, IbGibDynamicComponentInstance,
     IbGibDynamicComponentInstanceInitOpts,
 } from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getDeterministicColorInfo, getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.mjs";
 import { SettingsType } from "@ibgib/web-gib/dist/common/settings/settings-constants.mjs";
-import { Settings_General } from "@ibgib/web-gib/dist/common/settings/settings-types.mjs";
+import { Settings_General, Settings_IdentityManager } from "@ibgib/web-gib/dist/common/settings/settings-types.mjs";
+import { getSectionName } from "@ibgib/web-gib/dist/common/settings/settings-helpers.mjs";
 import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
 import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
 
 import { getComponentCtorArg, getIbGibGlobalThis_SpaceGib } from "../../helpers.web.mjs";
 import { APP_CONFIG } from "../../constants.mjs";
 import { devLog } from "../../dev-tools.mjs";
+import { KEYSTONE_ATOM } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
 
 export const IDENTITY_MANAGER_COMPONENT_NAME = 'ibgib-identity-manager';
 
@@ -62,6 +69,9 @@ export class IdentityManagerComponentMeta extends IbGibDynamicComponentMetaBase
     }
 }
 
+interface IdentityTabInfo extends ChildInfoBase<IbGibDynamicComponentInstance<any, any>> {
+}
+
 /**
  * References to DOM elements within the component's shadow root.
  */
@@ -72,81 +82,53 @@ interface IdentityManagerElements extends ElementsBase {
     btnAddIdentityEl: HTMLButtonElement;
     noIdentityPlaceholderEl: HTMLDivElement;
     btnCreatePlaceholderEl: HTMLButtonElement;
-    identityDetailsViewEl: HTMLDivElement;
-    identityAddrEl: HTMLElement;
-    identityGenEl: HTMLElement;
-    identityTimestampEl: HTMLElement;
-    identityUuidEl: HTMLElement;
-    identityNameEl: HTMLElement;
-    identityDescriptionEl: HTMLElement;
-    identityFrameDetailsEl: HTMLPreElement;
-    identityAggrDetailsEl: HTMLPreElement;
-
-    // Scrubber elements
-    btnScrubFirstEl: HTMLButtonElement;
-    btnScrubPrev10El: HTMLButtonElement;
-    btnScrubPrevEl: HTMLButtonElement;
-    scrubberStatusEl: HTMLSpanElement;
-    btnScrubNextEl: HTMLButtonElement;
-    btnScrubNext10El: HTMLButtonElement;
-    btnScrubLatestEl: HTMLButtonElement;
-
-    poolsContainerEl: HTMLDivElement;
-    btnVerifyChainEl: HTMLButtonElement;
-    // btnSyncIdentityEl: HTMLButtonElement;
-    btnSetActiveEl: HTMLButtonElement;
-    verificationStatusEl: HTMLDivElement;
-    replicasListEl: HTMLDivElement;
-    // inputReplicaUrlEl: HTMLInputElement;
-    // btnAddReplicaEl: HTMLButtonElement;
-    rawAccordionHeaderEl: HTMLDivElement;
-    rawAccordionContentEl: HTMLDivElement;
-    rawKeystoneJsonEl: HTMLPreElement;
 }
 
 /**
  * Concrete implementation of the Identity Manager component.
  */
 export class IdentityManagerComponentInstance
-    extends IbGibDynamicComponentInstanceBase<IbGib_V1, IdentityManagerElements>
+    extends IbGibDynamicComponentInstanceBase_ParentOfTabs<Settings_IdentityManager, IbGib_V1, IdentityManagerElements, IdentityTabInfo>
     implements IbGibDynamicComponentInstance<IbGib_V1, IdentityManagerElements> {
 
-    protected lc: string = `[IdentityManagerComponentInstance]`;
+    protected override lc: string = `[IdentityManagerComponentInstance]`;
 
-    private activeAddr: string | null = null;
     private globalActiveAddr: string | null = null;
     private _onIdentityChanged: ((e: any) => void) | null = null;
-    private history: any[] = [];
-    private currentFrameIndex: number = -1;
-    private lastLoadedHistoryAddr: string | null = null;
-    private keystoneCache: Map<string, { username: string, description: string }> = new Map();
+    private keystoneCache: Map<string, { username: string, description: string, isPrimary: boolean, n: number }> = new Map();
+    metaspace: MetaspaceService | undefined;
+
+    protected get settingsType(): SettingsType {
+        return SettingsType.identityManager;
+    }
 
     constructor() {
         super();
     }
 
-    private async getKeystoneDetails(addr: string): Promise<{ username: string, description: string }> {
+    private async getKeystoneDetails(addr: string): Promise<{ username: string, description: string, isPrimary: boolean, n: number }> {
         const cached = this.keystoneCache.get(addr);
         if (cached) return cached;
 
         const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
-        if (!metaspace) return { username: '', description: '' };
+        if (!metaspace) return { username: '', description: '', isPrimary: false, n: 0 };
         const space = await metaspace.getLocalUserSpace({ lock: false });
-        if (!space) return { username: '', description: '' };
+        if (!space) return { username: '', description: '', isPrimary: false, n: 0 };
 
         try {
-            const res = await metaspace.get({ addr, space });
-            if (res.success && res.ibGibs && res.ibGibs.length > 0) {
-                const keystone = res.ibGibs[0] as KeystoneIbGib_V1;
-                const keystoneSvc = new KeystoneService_V1();
-                const aggregated = await keystoneSvc.getAggregateDetails({
-                    latestKeystone: keystone,
-                    metaspace,
-                    space
-                });
-                const username = aggregated?.username || aggregated?.profile?.name || aggregated?.name || '';
-                const description = aggregated?.description || aggregated?.profile?.description || '';
-                const details = { username, description };
+            const keystoneSvc = new KeystoneService_V1();
+            const info = await keystoneSvc.getKeystoneCommonInfo({
+                addr,
+                metaspace,
+                space
+            });
+            if (info) {
+                const details = {
+                    username: info.name,
+                    description: info.description,
+                    isPrimary: info.isPrimary,
+                    n: info.n
+                };
                 this.keystoneCache.set(addr, details);
                 return details;
             }
@@ -154,10 +136,14 @@ export class IdentityManagerComponentInstance
             console.warn(`Error getting details for keystone ${addr}: ${extractErrorMsg(err)}`);
         }
 
-        return { username: '', description: '' };
+        return { username: '', description: '', isPrimary: false, n: 0 };
     }
 
     override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        if (!this.metaspace) {
+            this.metaspace = await getGlobalMetaspace_waitIfNeeded({ delayIntervalMs: 50 });
+        }
+        opts.ibGibAddr = await this.metaspace.getLatestAddr({ addr: opts.ibGibAddr }) ?? opts.ibGibAddr;
         await super.initialize(opts);
     }
 
@@ -171,38 +157,8 @@ export class IdentityManagerComponentInstance
         this.elements.btnAddIdentityEl = shadow.getElementById('btn-add-identity') as HTMLButtonElement;
         this.elements.noIdentityPlaceholderEl = shadow.getElementById('no-identity-placeholder') as HTMLDivElement;
         this.elements.btnCreatePlaceholderEl = shadow.getElementById('btn-create-placeholder') as HTMLButtonElement;
-        this.elements.identityDetailsViewEl = shadow.getElementById('identity-details-view') as HTMLDivElement;
-        this.elements.identityAddrEl = shadow.getElementById('identity-addr') as HTMLElement;
-        this.elements.identityGenEl = shadow.getElementById('identity-gen') as HTMLSpanElement;
-        this.elements.identityTimestampEl = shadow.getElementById('identity-timestamp') as HTMLSpanElement;
-        this.elements.identityUuidEl = shadow.getElementById('identity-uuid') as HTMLSpanElement;
-        this.elements.identityNameEl = shadow.getElementById('identity-name') as HTMLElement;
-        this.elements.identityDescriptionEl = shadow.getElementById('identity-description') as HTMLElement;
-        this.elements.identityFrameDetailsEl = shadow.getElementById('identity-frame-details') as HTMLPreElement;
-        this.elements.identityAggrDetailsEl = shadow.getElementById('identity-aggr-details') as HTMLPreElement;
-
-        // Scrubber elements
-        this.elements.btnScrubFirstEl = shadow.getElementById('btn-scrub-first') as HTMLButtonElement;
-        this.elements.btnScrubPrev10El = shadow.getElementById('btn-scrub-prev10') as HTMLButtonElement;
-        this.elements.btnScrubPrevEl = shadow.getElementById('btn-scrub-prev') as HTMLButtonElement;
-        this.elements.scrubberStatusEl = shadow.getElementById('scrubber-status') as HTMLSpanElement;
-        this.elements.btnScrubNextEl = shadow.getElementById('btn-scrub-next') as HTMLButtonElement;
-        this.elements.btnScrubNext10El = shadow.getElementById('btn-scrub-next10') as HTMLButtonElement;
-        this.elements.btnScrubLatestEl = shadow.getElementById('btn-scrub-latest') as HTMLButtonElement;
-
-        this.elements.poolsContainerEl = shadow.getElementById('pools-container') as HTMLDivElement;
-        this.elements.btnVerifyChainEl = shadow.getElementById('btn-verify-chain') as HTMLButtonElement;
-        // this.elements.btnSyncIdentityEl = shadow.getElementById('btn-sync-identity') as HTMLButtonElement;
-        this.elements.btnSetActiveEl = shadow.getElementById('btn-set-active') as HTMLButtonElement;
-        this.elements.verificationStatusEl = shadow.getElementById('verification-status') as HTMLDivElement;
-        this.elements.replicasListEl = shadow.getElementById('replicas-list') as HTMLDivElement;
-        // this.elements.inputReplicaUrlEl = shadow.getElementById('input-replica-url') as HTMLInputElement;
-        // this.elements.btnAddReplicaEl = shadow.getElementById('btn-add-replica') as HTMLButtonElement;
-        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;
-
-        // ElementBase requires contentEl (points to the main container/body area)
+
+        // ElementBase requires contentEl
         this.elements.contentEl = shadow.getElementById('identity-manager-content') as HTMLDivElement;
 
         this.initHandlers();
@@ -214,12 +170,65 @@ export class IdentityManagerComponentInstance
         };
         window.addEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
 
+        // Listen for requests to view details of a delegate (from child details component)
+        this.addEventListener('ibgib-view-keystone-details', async (e: any) => {
+            const addr = e.detail?.addr;
+            if (addr) {
+                await this.activateIbGib({ addr });
+            }
+        });
+
         if (this.ibGibAddr === ROOT_ADDR || !this.ibGib) {
             await this.loadKeystonesIndex();
         } else {
             await this.initSettings();
         }
+
         await this.renderUI();
+
+        // Spin off tab restore or defaults to allow createdPromise to resolve first
+        this.restoreOrInitTabs();
+    }
+
+    private async restoreOrInitTabs(): Promise<void> {
+        const settings = await this.getSettings<Settings_IdentityManager>({
+            settingsType: this.settingsType,
+            useCase: 'current',
+        });
+        if (settings) {
+            const validAddrs = (settings.openChildTjpAddrs ?? []).filter(addr => {
+                if (!addr || addr === '^' || addr === 'gib') return false;
+                const { gib } = getIbAndGib({ ibGibAddr: addr });
+                return !!gib && gib !== 'gib' && gib !== '^';
+            });
+            if (validAddrs.length !== (settings.openChildTjpAddrs ?? []).length) {
+                settings.openChildTjpAddrs = validAddrs;
+                const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+                if (metaspace) {
+                    const sectionName_current = await getSectionName({
+                        settingsType: this.settingsType,
+                        useCase: 'current',
+                    });
+                    await mut8Timeline({
+                        timeline: this.settings!.ibGib!,
+                        metaspace,
+                        mut8Opts: {
+                            dataToAddOrPatch: {
+                                sections: {
+                                    [sectionName_current]: settings,
+                                }
+                            },
+                        },
+                    });
+                }
+            }
+        }
+
+        if (!settings || (settings.openChildTjpAddrs ?? []).length === 0) {
+            await this.loadDefaultPrimaryIdentityTabs();
+        } else {
+            await this.reopenOldTabs();
+        }
     }
 
     override async disconnected(): Promise<void> {
@@ -250,45 +259,20 @@ export class IdentityManagerComponentInstance
         }
     }
 
-
-
     private initHandlers() {
-        // Setup raw JSON accordion toggle
-        this.elements!.rawAccordionHeaderEl.addEventListener('click', () => this.toggleAccordion());
-
         // Buttons
         this.elements!.btnAddIdentityEl.addEventListener('click', () => this.handleAddNewIdentityFlow());
         this.elements!.btnCreatePlaceholderEl.addEventListener('click', () => this.handleAddNewIdentityFlow());
-        this.elements!.btnVerifyChainEl.addEventListener('click', () => this.handleVerifyIdentityChain());
-        // this.elements!.btnSyncIdentityEl.addEventListener('click', () => this.handleSyncIdentity());
-        this.elements!.btnSetActiveEl.addEventListener('click', () => this.handleSetActiveIdentity());
-        // this.elements!.btnAddReplicaEl.addEventListener('click', () => this.handleAddReplicaSpace());
-
-        // Scrubber Buttons
-        this.elements!.btnScrubFirstEl.addEventListener('click', () => this.scrubFirst());
-        this.elements!.btnScrubPrev10El.addEventListener('click', () => this.scrubPrev10());
-        this.elements!.btnScrubPrevEl.addEventListener('click', () => this.scrubPrev());
-        this.elements!.btnScrubNextEl.addEventListener('click', () => this.scrubNext());
-        this.elements!.btnScrubNext10El.addEventListener('click', () => this.scrubNext10());
-        this.elements!.btnScrubLatestEl.addEventListener('click', () => this.scrubLatest());
 
         // Convert vertical mouse wheel scrolling into horizontal scroll for tabs
         this.elements!.tabsListEl.addEventListener('wheel', (e: WheelEvent) => {
             if (e.deltaY !== 0) {
                 e.preventDefault();
-                // this.elements!.tabsListEl.scrollLeft += e.deltaY;
                 this.elements!.tabsListEl.scrollBy({ left: e.deltaY, behavior: 'smooth' });
             }
         }, { passive: false });
     }
 
-    private toggleAccordion() {
-        const header = this.elements!.rawAccordionHeaderEl;
-        const content = this.elements!.rawAccordionContentEl;
-        header.classList.toggle('expanded');
-        content.classList.toggle('expanded');
-    }
-
     protected async handleAddNewIdentityFlow() {
         const lc = `${this.lc}[${this.handleAddNewIdentityFlow.name}]`;
         devLog(`${lc} Triggering identity creation/import flow...`);
@@ -300,14 +284,21 @@ export class IdentityManagerComponentInstance
                 useRegExpPrefilter: true,
             });
             if (creator) {
-                // Hide placeholder and details panel
+                // Hide placeholder
                 this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
-                this.elements!.identityDetailsViewEl.classList.add('hidden');
 
-                // Clear any previous creator
+                // Clear any previous creator/details
                 const existing = this.elements!.contentEl.querySelector('ibgib-keystone-creator');
                 if (existing) { existing.remove(); }
 
+                // Clear active child component inside ParentOfTabs to prevent conflict
+                const active = this.activeChildInfo;
+                if (active) {
+                    active.childBtnEl.classList.remove('active');
+                    active.active = false;
+                }
+
+                this.elements!.contentEl.innerHTML = '';
                 this.elements!.contentEl.appendChild(creator as any);
                 devLog(`${lc} Mounted ibgib-keystone-creator successfully.`);
             } else {
@@ -315,79 +306,13 @@ export class IdentityManagerComponentInstance
             }
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
-            this.setVerificationStatus(`Failed to load creator: ${extractErrorMsg(error)}`, "error");
         }
     }
 
-    protected async handleVerifyIdentityChain() {
-        const lc = `${this.lc}[${this.handleVerifyIdentityChain.name}]`;
-        devLog(`${lc} Verifying identity keystone timeline...`);
-        this.setVerificationStatus("Verification request sent...", "info");
-        try {
-            // Skeleton logic placeholder
-            this.setVerificationStatus("Verification complete. Root Keystone is verified (Genesis phase 1).", "success");
-        } catch (error) {
-            this.setVerificationStatus(`Verification failed: ${extractErrorMsg(error)}`, "error");
-        }
-    }
-
-    // leave this in
-    // protected async handleSyncIdentity() {
-    //     const lc = `${this.lc}[${this.handleSyncIdentity.name}]`;
-    //     devLog(`${lc} Starting Peer-to-Peer sync saga...`);
-    //     this.setVerificationStatus("Starting synchronization session...", "info");
-    // }
-
-    // leave this in
-    // protected async handleAddReplicaSpace() {
-    //     const lc = `${this.lc}[${this.handleAddReplicaSpace.name}]`;
-    //     const url = this.elements!.inputReplicaUrlEl.value;
-    //     if (!url) {
-    //         this.setVerificationStatus("Please enter a valid space replication URL.", "error");
-    //         return;
-    //     }
-    //     devLog(`${lc} Registering replica space: ${url}`);
-
-    //     // Add to UI list for verification
-    //     const replicaItem = document.createElement('div');
-    //     replicaItem.className = 'address-code';
-    //     replicaItem.style.marginTop = '0.5rem';
-    //     replicaItem.textContent = url;
-    //     this.elements!.replicasListEl.appendChild(replicaItem);
-
-    //     this.elements!.inputReplicaUrlEl.value = '';
-    //     this.setVerificationStatus(`Registered replica endpoint: ${url}`, "success");
-    // }
-
-    /**
-     * dispatches the event to set {@link activeAddr} (if truthy) as the active
-     * identity. IOW, this "logs it in".
-     */
-    protected async handleSetActiveIdentity() {
-        if (!this.activeAddr) { return; }
-        window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
-            detail: { activeIdentityAddr: this.activeAddr },
-            bubbles: true,
-            composed: true
-        }));
-    }
-
-    private setVerificationStatus(msg: string, type: 'info' | 'success' | 'error') {
-        const statusEl = this.elements!.verificationStatusEl;
-        statusEl.textContent = msg;
-        statusEl.className = `status-msg ${type}`;
-    }
-
-    private async viewIdentityDetails(addr: string): Promise<void> {
-        this.activeAddr = addr;
-        await this.renderUI();
-    }
-
     private async resolveActiveIdentity() {
         const lc = `${this.lc}[resolveActiveIdentity]`;
         try {
             if (!this.settings) {
-                this.activeAddr = null;
                 this.globalActiveAddr = null;
                 return;
             }
@@ -398,17 +323,22 @@ export class IdentityManagerComponentInstance
             const activeAddrInSettings = (generalSettings as any)?.activeIdentityAddr;
 
             const registeredKeystones = this.ibGib?.rel8ns?.keystone ?? [];
-            if (activeAddrInSettings && registeredKeystones.includes(activeAddrInSettings)) {
+            const detailsPromises = registeredKeystones.map(async addr => {
+                const details = await this.getKeystoneDetails(addr);
+                return { addr, isPrimary: details?.isPrimary ?? false };
+            });
+            const resolvedDetails = await Promise.all(detailsPromises);
+            const primaryKeystones = resolvedDetails
+                .filter(item => item.isPrimary)
+                .map(item => item.addr);
+
+            if (activeAddrInSettings && primaryKeystones.includes(activeAddrInSettings)) {
                 this.globalActiveAddr = activeAddrInSettings;
-            } else if (registeredKeystones.length > 0) {
-                this.globalActiveAddr = registeredKeystones[0];
+            } else if (primaryKeystones.length > 0) {
+                this.globalActiveAddr = primaryKeystones[0];
             } else {
                 this.globalActiveAddr = null;
             }
-
-            if (!this.activeAddr) {
-                this.activeAddr = this.globalActiveAddr;
-            }
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
             this.globalActiveAddr = null;
@@ -419,349 +349,291 @@ export class IdentityManagerComponentInstance
         const lc = `${this.lc}[${this.renderUI.name}]`;
         if (!this.elements) { return; }
 
-        // always resolve the current active identity, even if we aren't
-        // necessarily rendering the details for that identity (if it isn't
-        // this.activeAddr)
         await this.resolveActiveIdentity();
 
         const keystones = this.ibGib?.rel8ns?.keystone ?? [];
-
-        if (keystones.length === 0) {
-            this.elements.tabsListEl.innerHTML = '';
+        if (keystones.length === 0 && this.childInfos.length === 0) {
             this.elements.noIdentityPlaceholderEl.classList.remove('hidden');
-            this.elements.identityDetailsViewEl.classList.add('hidden');
-
-            const existing = this.elements.contentEl.querySelector('ibgib-keystone-creator');
-            if (existing && !this.elements.noIdentityPlaceholderEl.classList.contains('hidden')) {
-                existing.remove();
-            }
-            return; /* <<<< returns early */
+            this.elements.contentEl.innerHTML = '';
+            return;
         }
 
         this.elements.noIdentityPlaceholderEl.classList.add('hidden');
 
-        // Render Tabs
-        this.elements.tabsListEl.innerHTML = '';
-        for (const addr of keystones) {
-            const tabEl = document.createElement('button');
-            tabEl.className = `tab-btn ${addr === this.activeAddr ? 'active' : ''} ${addr === this.globalActiveAddr ? 'global-active' : ''}`;
-
-            // Initial fallback label and tooltip
-            let displayTab = addr;
-            if (displayTab.length > 12) {
-                displayTab = displayTab.substring(0, 5) + '...' + displayTab.substring(displayTab.length - 4);
-            }
-            tabEl.textContent = displayTab;
-            tabEl.title = addr;
+        // Render tab highlights
+        for (const info of this.childInfos) {
+            const btn = info.childBtnEl;
+            btn.className = `tab-btn ${info.active ? 'active' : ''} ${info.addr === this.globalActiveAddr ? 'global-active' : ''}`;
+        }
+    }
 
-            // Fetch details and update tab text/tooltip
+    private async loadDefaultPrimaryIdentityTabs() {
+        const keystones = (this.ibGib?.rel8ns?.keystone ?? []).filter(addr => {
+            if (!addr || addr === '^' || addr === 'gib') return false;
+            const { gib } = getIbAndGib({ ibGibAddr: addr });
+            return !!gib && gib !== 'gib' && gib !== '^';
+        });
+        const detailsPromises = keystones.map(async addr => {
             const details = await this.getKeystoneDetails(addr);
-            let name = details.username;
-            const maxTabLen = 16;
-            if (name) {
-                if (name.length > maxTabLen) {
-                    name = name.substring(0, maxTabLen - 3) + '...';
-                }
-                tabEl.textContent = name;
-            }
-
-            const tooltipParts: string[] = [];
-            if (details.username) {
-                tooltipParts.push(`User: ${details.username}`);
-            }
-            if (details.description) {
-                const desc = details.description.length > 100
-                    ? details.description.substring(0, 97) + '...'
-                    : details.description;
-                tooltipParts.push(`Desc: ${desc}`);
-            }
-            tooltipParts.push(`Addr: ${addr}`);
-            tabEl.title = tooltipParts.join('\n');
+            return { addr, isPrimary: details?.isPrimary ?? false };
+        });
+        const resolvedDetails = await Promise.all(detailsPromises);
+        const primaryKeystones = resolvedDetails
+            .filter(item => item.isPrimary)
+            .map(item => item.addr);
 
-            tabEl.addEventListener('click', async () => {
-                await this.viewIdentityDetails(addr);
-            });
-            this.elements.tabsListEl.appendChild(tabEl);
+        if (primaryKeystones.length === 0) {
+            this.elements!.noIdentityPlaceholderEl.classList.remove('hidden');
+            return;
         }
 
-        if (this.activeAddr) {
-            const existing = this.elements.contentEl.querySelector('ibgib-keystone-creator');
-            if (existing) { existing.remove(); }
-
-            this.elements.identityDetailsViewEl.classList.remove('hidden');
-
-            // Update Set Active button state
-            if (this.activeAddr === this.globalActiveAddr) {
-                this.elements.btnSetActiveEl.disabled = true;
-                this.elements.btnSetActiveEl.textContent = "Active Identity";
-                this.elements.btnSetActiveEl.classList.add('active-primary');
-            } else {
-                this.elements.btnSetActiveEl.disabled = false;
-                this.elements.btnSetActiveEl.textContent = "Set as Active Identity";
-                this.elements.btnSetActiveEl.classList.remove('active-primary');
-            }
+        this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
 
-            if (this.activeAddr !== this.lastLoadedHistoryAddr) {
-                await this.loadHistory(this.activeAddr);
-                this.lastLoadedHistoryAddr = this.activeAddr;
+        this.reloadingTabs = true;
+        try {
+            for (const addr of primaryKeystones) {
+                await this.activateIbGib({ addr });
             }
-
-            await this.updateFrameDetailsView();
-        } else {
-            this.elements.identityDetailsViewEl.classList.add('hidden');
-            this.clearActiveDetails();
+        } finally {
+            this.reloadingTabs = false;
         }
-    }
 
-    private clearActiveDetails() {
-        if (!this.elements) return;
-        this.elements.identityGenEl.textContent = '-';
-        this.elements.identityTimestampEl.textContent = '-';
-        this.elements.identityUuidEl.textContent = '-';
-        this.elements.identityNameEl.textContent = '-';
-        this.elements.identityDescriptionEl.textContent = '-';
-        this.elements.identityFrameDetailsEl.textContent = '{}';
-        this.elements.identityAggrDetailsEl.textContent = '{}';
-        this.elements.scrubberStatusEl.textContent = 'Frame - / -';
-        this.elements.poolsContainerEl.innerHTML = '';
-        this.history = [];
-        this.currentFrameIndex = -1;
+        // Activate the global active identity (if open), or the first primary one
+        const activeToOpen = primaryKeystones.includes(this.globalActiveAddr || '')
+            ? this.globalActiveAddr!
+            : primaryKeystones[0];
+        await this.activateIbGib({ addr: activeToOpen });
     }
 
-    private async loadHistory(tipAddr: string): Promise<void> {
-        const lc = `${this.lc}[loadHistory]`;
-        this.history = [];
-        this.currentFrameIndex = -1;
+    public override async activateIbGib({ addr, ibGib }: { addr?: IbGibAddr; ibGib?: IbGib_V1; }): Promise<void> {
+        const lc = `${this.lc}[activateIbGib]`;
+        try {
+            if (!this.metaspace) { throw new Error(`(UNEXPECTED) this.metaspace falsy? (E: f9e0e9a1427899eba8e469c18d7ae826)`); }
 
-        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
-        if (!metaspace) return;
-        const space = await metaspace.getLocalUserSpace({ lock: false });
-        if (!space) return;
+            await super.activateIbGib({ addr, ibGib });
 
-        let currentAddr: string | undefined = tipAddr;
-        const tempHistory: KeystoneIbGib_V1[] = [];
 
-        while (currentAddr) {
-            const res = await metaspace.get({ addr: currentAddr, space });
-            if (!res.success || !res.ibGibs || res.ibGibs.length === 0) {
-                console.warn(`${lc} Could not find frame at ${currentAddr}`);
-                break;
-            }
-            const keystone = res.ibGibs[0] as KeystoneIbGib_V1;
-            tempHistory.push(keystone);
+            if (!this.activeChildInfo) { throw new Error(`(UNEXPECTED) activeChildInfo falsy after activateIbGib? (E: d76bd8bc300f3fdc486d50c8b2644826)`); }
 
-            if (keystone.data?.n === 0) {
-                break;
-            }
+            ibGib ??= this.activeChildInfo.component?.ibGib;
 
-            const past = keystone.rel8ns?.past;
-            currentAddr = (past && past.length > 0) ? past[past.length - 1] : undefined;
-        }
+            if (!ibGib) { throw new Error(`(UNEXPECTED) ibGib falsy? (E: 5b6ec745dd32fd2128635728e3f35e26)`); }
 
-        this.history = tempHistory.reverse();
-        this.currentFrameIndex = this.history.length - 1;
-    }
-
-    private scrubTo(index: number) {
-        if (this.history.length === 0) return;
-        this.currentFrameIndex = Math.max(0, Math.min(index, this.history.length - 1));
-        this.updateFrameDetailsView();
-    }
+            if (!ibGib.ib.startsWith(KEYSTONE_ATOM)) {
+                throw new Error(`ibGib.ib (${ibGib.ib}) does not start with keystone atom (${KEYSTONE_ATOM}) (E: e0df410381c8e569eb6da996e79b6826)`);
+            }
 
-    private scrubFirst() {
-        this.scrubTo(0);
-    }
+            this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
 
-    private scrubPrev10() {
-        this.scrubTo(this.currentFrameIndex - 10);
-    }
+            if (!this.reloadingTabs) {
+                const settings_current = await this.getSettings<Settings_IdentityManager>({
+                    settingsType: this.settingsType,
+                    useCase: 'current',
+                });
+                if (settings_current) {
+                    let modified = false;
+                    const tjpAddr = getTjpAddr({ ibGib: this.activeChildInfo.component?.ibGib || ibGib!, defaultIfNone: 'incomingAddr' });
+                    if (tjpAddr) {
+                        if (!settings_current.openChildTjpAddrs.includes(tjpAddr)) {
+                            settings_current.openChildTjpAddrs.push(tjpAddr);
+                            modified = true;
+                        }
+                        if (settings_current.activeChildTjpAddr !== tjpAddr) {
+                            settings_current.activeChildTjpAddr = tjpAddr;
+                            modified = true;
+                        }
+                    }
+                    if (modified) {
+                        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+                        if (metaspace) {
+                            const sectionName_current = await getSectionName({
+                                settingsType: this.settingsType,
+                                useCase: 'current',
+                            });
+                            await mut8Timeline({
+                                timeline: this.settings!.ibGib!,
+                                metaspace,
+                                mut8Opts: {
+                                    dataToAddOrPatch: {
+                                        sections: {
+                                            [sectionName_current]: settings_current,
+                                        }
+                                    },
+                                },
+                            });
+                        }
+                    }
+                }
+            }
 
-    private scrubPrev() {
-        this.scrubTo(this.currentFrameIndex - 1);
+            await this.renderUI();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
     }
 
-    private scrubNext() {
-        this.scrubTo(this.currentFrameIndex + 1);
-    }
+    protected async getLoadedChildInfo({
+        addr,
+        ibGib,
+    }: {
+        addr: IbGibAddr,
+        ibGib?: IbGib_V1,
+    }): Promise<IdentityTabInfo> {
+        const lc = `${this.lc}[getLoadedChildInfo]`;
+        try {
+            if (!addr) { throw new Error(`(UNEXPECTED) addr falsy?`); }
+            if (addr === '^' || addr === 'gib' || getIbAndGib({ ibGibAddr: addr }).gib === '^') {
+                throw new Error(`Cannot load child info for primitive address ${addr}`);
+            }
+            const tjpGib = getGibInfo({ ibGibAddr: addr }).tjpGib ?? getIbAndGib({ ibGibAddr: addr }).gib;
+
+            const fnCreateAndLoadChildComponent = async () => {
+                const componentSvc = await getComponentSvc();
+                const detailsComponent = await componentSvc.getComponentInstance({
+                    path: 'ibgib-keystone-scrubber',
+                    ibGibAddr: addr,
+                    useRegExpPrefilter: true,
+                });
+                if (!detailsComponent) {
+                    throw new Error(`(UNEXPECTED) detailsComponent falsy?`);
+                }
+                return detailsComponent;
+            }
 
-    private scrubNext10() {
-        this.scrubTo(this.currentFrameIndex + 10);
-    }
+            let tabInfo: IdentityTabInfo;
 
-    private scrubLatest() {
-        this.scrubTo(this.history.length - 1);
-    }
+            const filtered = this.childInfos.filter(x => {
+                const tabGibInfo = getGibInfo({ ibGibAddr: x.addr });
+                const tabTjpGib = tabGibInfo.tjpGib ?? getIbAndGib({ ibGibAddr: x.addr }).gib;
+                return tabTjpGib === tjpGib;
+            });
 
-    private async updateFrameDetailsView(): Promise<void> {
-        const lc = `${this.lc}[updateFrameDetailsView]`;
-        if (!this.elements) return;
+            if (filtered.length > 0) {
+                if (filtered.length !== 1) { throw new Error(`(UNEXPECTED) filtered.length !== 1?`); }
+                tabInfo = filtered[0];
+                if (!tabInfo.component) {
+                    tabInfo.component = await fnCreateAndLoadChildComponent();
+                }
+            } else {
+                const detailsComponent = await fnCreateAndLoadChildComponent();
+                let i = 0;
+                while (!detailsComponent.ibGib!) {
+                    await delay(100);
+                    i++;
+                    if (i > 50) { // 5 seconds
+                        debugger; // error loading details component ibgib
+                        throw new Error(`(UNEXPECTED) detailsComponent.ibGib falsy? didn't load? (E: de50689834124914f770520f1eccb826)`);
+                    }
+                }
+                ibGib = detailsComponent.ibGib!;
+                addr = getIbGibAddr({ ibGib });
+                const tabBtnEl = await this.addChild({ addr, ibGib });
+                tabInfo = {
+                    addr,
+                    childBtnEl: tabBtnEl,
+                    component: detailsComponent,
+                    active: false,
+                };
+                this.childInfos.push(tabInfo);
+            }
 
-        if (this.history.length === 0 || this.currentFrameIndex < 0 || this.currentFrameIndex >= this.history.length) {
-            this.clearActiveDetails();
-            return;
+            return tabInfo;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
         }
+    }
 
-        const keystone = this.history[this.currentFrameIndex];
-        const keystoneAddr = getIbGibAddr({ ibGib: keystone });
-
-        // Update Verifiable Address
-        this.elements.identityAddrEl.textContent = keystoneAddr;
-
-        // Update Generation
-        this.elements.identityGenEl.textContent = keystone.data?.n !== undefined ? String(keystone.data.n) : '0 (Genesis)';
-
-        // Update Timestamp
-        const timestampStr = keystone.data?.timestamp;
-        let formattedTimestamp = 'N/A';
-        if (timestampStr) {
-            const parsed = parseInt(timestampStr);
-            if (!isNaN(parsed)) {
-                formattedTimestamp = new Date(parsed).toLocaleString();
-            } else {
-                formattedTimestamp = new Date(timestampStr).toLocaleString();
+    protected override async addChild({
+        addr,
+        ibGib,
+    }: {
+        ibGib: IbGib_V1,
+        addr?: IbGibAddr,
+    }): Promise<HTMLElement> {
+        const lc = `${this.lc}[addChild]`;
+        try {
+            addr ??= getIbGibAddr({ ibGib });
+            if (addr === '^' || addr === 'gib' || getIbAndGib({ ibGibAddr: addr }).gib === '^') {
+                throw new Error(`Cannot add child tab for primitive address ${addr}`);
             }
-        }
-        this.elements.identityTimestampEl.textContent = formattedTimestamp;
+            if (!this.elements) { throw new Error(`(UNEXPECTED) this.elements falsy?`); }
+            const { tabsListEl } = this.elements;
 
-        // Update UUID
-        this.elements.identityUuidEl.textContent = keystone.data?.uuid || 'N/A';
+            addr ??= getIbGibAddr({ ibGib });
 
-        // Update Scrubber Status
-        this.elements.scrubberStatusEl.textContent = `Frame ${this.currentFrameIndex + 1} / ${this.history.length}`;
+            const childBtnEl = document.createElement('button');
+            childBtnEl.className = 'tab-btn';
+            childBtnEl.id = `identity-tab-button-${addr}`;
 
-        // Disable/enable scrubber buttons based on boundaries
-        this.elements.btnScrubFirstEl.disabled = this.currentFrameIndex === 0;
-        this.elements.btnScrubPrev10El.disabled = this.currentFrameIndex === 0;
-        this.elements.btnScrubPrevEl.disabled = this.currentFrameIndex === 0;
-        this.elements.btnScrubNextEl.disabled = this.currentFrameIndex === this.history.length - 1;
-        this.elements.btnScrubNext10El.disabled = this.currentFrameIndex === this.history.length - 1;
-        this.elements.btnScrubLatestEl.disabled = this.currentFrameIndex === this.history.length - 1;
+            await this.updateTabTitleAndText({ span: childBtnEl, ibGib, addr });
 
-        // Show Frame Details
-        const frameDetails = keystone.data?.frameDetails;
-        this.elements.identityFrameDetailsEl.textContent = frameDetails ? pretty(frameDetails) : '{}';
+            const details = await this.getKeystoneDetails(addr);
+            if (!details.isPrimary) {
+                const closeBtnEl = document.createElement('span');
+                closeBtnEl.className = 'close-tab-button';
+                closeBtnEl.textContent = ' ×';
+                closeBtnEl.style.marginLeft = '0.5rem';
+                closeBtnEl.style.cursor = 'pointer';
+                childBtnEl.appendChild(closeBtnEl);
+                closeBtnEl.addEventListener('click', async (event) => {
+                    event.stopPropagation(); // Prevent activating the tab
+                    await this.closeTab({ ibGib });
+                });
+            }
 
-        // Get and Show Aggregated details up to the scrolled-to frame
-        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
-        if (metaspace) {
-            const space = await metaspace.getLocalUserSpace({ lock: false });
-            if (space) {
-                try {
-                    const keystoneSvc = new KeystoneService_V1();
-                    const aggregated = await keystoneSvc.getAggregateDetails({
-                        latestKeystone: keystone,
-                        metaspace,
-                        space
-                    });
+            tabsListEl.appendChild(childBtnEl);
+            childBtnEl.addEventListener('click', async (event) => {
+                await this.activateIbGib({ addr });
+            });
 
-                    this.elements.identityAggrDetailsEl.textContent = aggregated ? pretty(aggregated) : '{}';
+            return childBtnEl;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        }
+    }
 
-                    // Update Username and Description fields
-                    this.elements.identityNameEl.textContent = aggregated?.username || aggregated?.profile?.name || aggregated?.name || '-';
-                    this.elements.identityDescriptionEl.textContent = aggregated?.description || aggregated?.profile?.description || '-';
-                } catch (err) {
-                    console.warn(`${lc} Error aggregating details: ${extractErrorMsg(err)}`);
-                    this.elements.identityAggrDetailsEl.textContent = '{}';
-                    this.elements.identityNameEl.textContent = '-';
-                    this.elements.identityDescriptionEl.textContent = '-';
-                }
-            } else {
-                this.elements.identityAggrDetailsEl.textContent = '{}';
-                this.elements.identityNameEl.textContent = '-';
-                this.elements.identityDescriptionEl.textContent = '-';
+    private async updateTabTitleAndText({
+        span,
+        ibGib,
+        addr,
+    }: {
+        span: HTMLElement,
+        ibGib: IbGib_V1,
+        addr: string,
+    }): Promise<void> {
+        const details = await this.getKeystoneDetails(addr);
+        let name = details.username;
+        const maxTabLen = 16;
+        if (name) {
+            if (name.length > maxTabLen) {
+                name = name.substring(0, maxTabLen - 3) + '...';
             }
+            span.textContent = name;
         } else {
-            this.elements.identityAggrDetailsEl.textContent = '{}';
-            this.elements.identityNameEl.textContent = '-';
-            this.elements.identityDescriptionEl.textContent = '-';
+            let displayTab = addr;
+            if (displayTab.length > 12) {
+                displayTab = displayTab.substring(0, 5) + '...' + displayTab.substring(displayTab.length - 4);
+            }
+            span.textContent = displayTab;
         }
 
-        // Render Raw Timeline JSON
-        this.elements.rawKeystoneJsonEl.textContent = pretty(keystone);
-
-        // Render Challenge Pools
-        this.renderChallengePools(keystone.data?.challengePools || []);
-    }
-
-    private renderChallengePools(pools: any[]) {
-        if (!this.elements) return;
-        const container = this.elements.poolsContainerEl;
-        container.innerHTML = '';
-
-        if (!pools || pools.length === 0) {
-            container.innerHTML = `<p class="description">No challenge pools found in this keystone.</p>`;
-            return;
+        const tooltipParts: string[] = [];
+        if (details.username) {
+            tooltipParts.push(`User: ${details.username}`);
         }
-
-        for (const pool of pools) {
-            const card = document.createElement('div');
-            card.className = 'pool-card';
-
-            const config = pool.config || {};
-            const behavior = config.behavior || {};
-            const allowedVerbs = config.allowedVerbs || [];
-            const activeCount = pool.challenges ? Object.keys(pool.challenges).length : 0;
-            const isForeign = !!pool.isForeign;
-
-            // Generate HTML for the challenges list
-            const challenges = pool.challenges || {};
-            const challengeListHtml = Object.entries(challenges).map(([id, challenge]: [string, any]) => {
-                const truncatedHash = challenge.hash && challenge.hash.length > 20
-                    ? challenge.hash.substring(0, 10) + '...' + challenge.hash.substring(challenge.hash.length - 8)
-                    : challenge.hash || 'N/A';
-                return `
-                    <div class="pool-challenge-item">
-                        <span class="challenge-id">${id}</span>
-                        <span class="challenge-hash" title="${challenge.hash || ''}">${truncatedHash}</span>
-                    </div>
-                `;
-            }).join('');
-
-            card.innerHTML = `
-                <div class="pool-header">
-                    <span class="pool-title">${pool.id || 'Unnamed Pool'}</span>
-                    <span class="pool-tag ${isForeign ? 'foreign' : 'native'}">${isForeign ? 'Foreign' : 'Native'}</span>
-                </div>
-                <div class="pool-grid">
-                    <div class="pool-field">
-                        <label>Challenge Type</label>
-                        <span>${config.type || 'N/A'}</span>
-                    </div>
-                    <div class="pool-field">
-                        <label>Target Size</label>
-                        <span>${behavior.size ?? 'N/A'}</span>
-                    </div>
-                    <div class="pool-field">
-                        <label>Active Challenges</label>
-                        <span>${activeCount}</span>
-                    </div>
-                    <div class="pool-field">
-                        <label>Replenish Strategy</label>
-                        <span>${behavior.replenish || 'N/A'}</span>
-                    </div>
-                    <div class="pool-field">
-                        <label>Allowed Verbs</label>
-                        <span>${allowedVerbs.length > 0 ? allowedVerbs.join(', ') : 'Any'}</span>
-                    </div>
-                    <div class="pool-field">
-                        <label>FIFO / Random cost</label>
-                        <span>FIFO: ${behavior.selectSequentially ?? 0}, Rand: ${behavior.selectRandomly ?? 0}</span>
-                    </div>
-                </div>
-
-                <!-- Collapsible Challenges List -->
-                <details class="pool-details">
-                    <summary class="pool-details-summary">Challenges (${activeCount})</summary>
-                    <div class="pool-challenges-list">
-                        ${challengeListHtml || '<p class="placeholder-text" style="padding: 0.5rem; text-align: center;">No challenges active.</p>'}
-                    </div>
-                </details>
-            `;
-            container.appendChild(card);
+        if (details.description) {
+            const desc = details.description.length > 100
+                ? details.description.substring(0, 97) + '...'
+                : details.description;
+            tooltipParts.push(`Desc: ${desc}`);
         }
+        tooltipParts.push(`Addr: ${addr}`);
+        span.title = tooltipParts.join('\n');
     }
 
-    override async handleContextUpdated(): Promise<void> {
-        await this.renderUI();
+    protected async removeTabBtn({ tabInfo }: { tabInfo: IdentityTabInfo }): Promise<void> {
+        this.elements!.tabsListEl.removeChild(tabInfo.childBtnEl);
     }
 }