@ibgib/web-gib 0.0.52 → 0.0.55

package/src/ui/component/identity/identity-manager/identity-manager.mts

@@ -0,0 +1,675 @@
+import thisCss from "./identity-manager.css";
+import thisHtml from "./identity-manager.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+
+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 { 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 { 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_ParentOfTabs,
+} from "../../ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, ChildInfoBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "../../component-types.mjs";
+import { getDeterministicColorInfo, getGlobalMetaspace_waitIfNeeded } from "../../../../helpers.mjs";
+import { SettingsType } from "../../../../common/settings/settings-constants.mjs";
+import { Settings_General, Settings_IdentityManager } from "../../../../common/settings/settings-types.mjs";
+import { getSectionName } from "../../../../common/settings/settings-helpers.mjs";
+import { getComponentSvc } from "../../ibgib-component-service.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
+import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
+import { KEYSTONE_ATOM } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+
+export const IDENTITY_MANAGER_COMPONENT_NAME = 'ibgib-identity-manager';
+
+/**
+ * Metadata for the Identity Manager component.
+ */
+export class IdentityManagerComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[IdentityManagerComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${IDENTITY_MANAGER_COMPONENT_NAME}$`);
+    componentName = IDENTITY_MANAGER_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, IdentityManagerComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as IdentityManagerComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+interface IdentityTabInfo extends ChildInfoBase<IbGibDynamicComponentInstance<any, any>> {
+}
+
+/**
+ * References to DOM elements within the component's shadow root.
+ */
+interface IdentityManagerElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    titleEl: HTMLHeadingElement;
+    tabsListEl: HTMLDivElement;
+    btnAddIdentityEl: HTMLButtonElement;
+    noIdentityPlaceholderEl: HTMLDivElement;
+    btnCreatePlaceholderEl: HTMLButtonElement;
+}
+
+/**
+ * Concrete implementation of the Identity Manager component.
+ */
+export class IdentityManagerComponentInstance
+    extends IbGibDynamicComponentInstanceBase_ParentOfTabs<Settings_IdentityManager, IbGib_V1, IdentityManagerElements, IdentityTabInfo>
+    implements IbGibDynamicComponentInstance<IbGib_V1, IdentityManagerElements> {
+
+    protected override lc: string = `[IdentityManagerComponentInstance]`;
+
+    private globalActiveAddr: string | null = null;
+    private _onIdentityChanged: ((e: any) => void) | null = null;
+    private _onUiMessage: ((e: any) => void) | null = null;
+    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, isPrimary: boolean, n: number }> {
+        const cached = this.keystoneCache.get(addr);
+        if (cached) return cached;
+
+        const metaspace = await getGlobalMetaspace_waitIfNeeded();
+        if (!metaspace) return { username: '', description: '', isPrimary: false, n: 0 };
+        const space = await metaspace.getLocalUserSpace({ lock: false });
+        if (!space) return { username: '', description: '', isPrimary: false, n: 0 };
+
+        try {
+            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;
+            }
+        } catch (err) {
+            console.warn(`Error getting details for keystone ${addr}: ${extractErrorMsg(err)}`);
+        }
+
+        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);
+    }
+
+    override async created(): Promise<void> {
+        this.elements = {} as IdentityManagerElements;
+
+        const shadow = this.shadowRoot!;
+        this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
+        this.elements.titleEl = shadow.getElementById('title') as HTMLHeadingElement;
+        this.elements.tabsListEl = shadow.getElementById('identity-tabs') as HTMLDivElement;
+        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;
+
+        // ElementBase requires contentEl
+        this.elements.contentEl = shadow.getElementById('identity-manager-content') as HTMLDivElement;
+
+        this.initHandlers();
+
+        // Subscribe to global active identity changes
+        this._onIdentityChanged = async (e: any) => {
+            this.globalActiveAddr = e.detail?.activeIdentityAddr || null;
+            this.keystoneCache.clear();
+            await this.loadKeystonesIndex();
+            if (this.childInfos) {
+                for (const childInfo of this.childInfos) {
+                    if (childInfo.component) {
+                        try {
+                            const comp = childInfo.component as any;
+                            if (typeof comp.loadIbGib === 'function') {
+                                await comp.loadIbGib({ getLatest: true });
+                            }
+                        } catch (err) {
+                            console.warn(`[IdentityManager] Error reloading child component: ${extractErrorMsg(err)}`);
+                        }
+                    }
+                }
+            }
+            await this.renderUI();
+        };
+        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 });
+            }
+        });
+
+        // Listen for requests to switch to keystone-creator or add-device
+        if (this._onUiMessage) {
+            window.removeEventListener(EVENT_IBGIB_UI_MESSAGE, this._onUiMessage);
+        }
+        this._onUiMessage = (e: any) => {
+            const action = e.detail?.action;
+            const subAction = e.detail?.subAction;
+            if (action === 'show-keystone-creator' || subAction === 'show-keystone-creator') {
+                this.handleAddNewIdentityFlow('ibgib-keystone-creator');
+            } else if (action === 'show-add-device' || subAction === 'show-add-device') {
+                this.handleAddNewIdentityFlow('ibgib-add-device');
+            }
+        };
+        window.addEventListener(EVENT_IBGIB_UI_MESSAGE, this._onUiMessage);
+
+        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 = await getGlobalMetaspace_waitIfNeeded();
+                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> {
+        if (this._onIdentityChanged) {
+            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+            this._onIdentityChanged = null;
+        }
+        if (this._onUiMessage) {
+            window.removeEventListener(EVENT_IBGIB_UI_MESSAGE, this._onUiMessage);
+            this._onUiMessage = null;
+        }
+    }
+
+    private async loadKeystonesIndex(): Promise<void> {
+        const lc = `${this.lc}[loadKeystonesIndex]`;
+        try {
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) { return; }
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { return; }
+            const keystonesIndex = await metaspace.getSpecialIbGib({
+                type: "keystones",
+                space,
+                initialize: true,
+            });
+            if (keystonesIndex) {
+                this.ibGibAddr = getIbGibAddr({ ibGib: keystonesIndex });
+                await this.loadIbGib({ getLatest: true });
+                await this.initSettings();
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private initHandlers() {
+        // Buttons
+        this.elements!.btnAddIdentityEl.addEventListener('click', () => this.handleAddNewIdentityFlow('ibgib-keystone-creator'));
+        this.elements!.btnCreatePlaceholderEl.addEventListener('click', () => this.handleAddNewIdentityFlow('ibgib-keystone-creator'));
+
+        // 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.scrollBy({ left: e.deltaY, behavior: 'smooth' });
+            }
+        }, { passive: false });
+    }
+
+    protected async handleAddNewIdentityFlow(componentPath: 'ibgib-keystone-creator' | 'ibgib-add-device' = 'ibgib-keystone-creator') {
+        const lc = `${this.lc}[${this.handleAddNewIdentityFlow.name}]`;
+        console.log(`${lc} Triggering identity creation/import flow (${componentPath})...`);
+        try {
+            const componentSvc = await getComponentSvc();
+            const childComp = await componentSvc.getComponentInstance({
+                path: componentPath,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            });
+            if (childComp) {
+                // Hide placeholder
+                this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
+
+                // Clear any previous creator/details/add-device
+                const existingCreator = this.elements!.contentEl.querySelector('ibgib-keystone-creator');
+                if (existingCreator) { existingCreator.remove(); }
+                const existingAddDevice = this.elements!.contentEl.querySelector('ibgib-add-device');
+                if (existingAddDevice) { existingAddDevice.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(childComp as any);
+                console.log(`${lc} Mounted ${componentPath} successfully.`);
+            } else {
+                throw new Error(`Could not find meta for ${componentPath}`);
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private async resolveActiveIdentity() {
+        const lc = `${this.lc}[resolveActiveIdentity]`;
+        try {
+            if (!this.settings) {
+                this.globalActiveAddr = null;
+                return;
+            }
+            const generalSettings = await this.getSettings<Settings_General>({
+                settingsType: SettingsType.general,
+                useCase: 'current',
+            });
+            const activeAddrInSettings = (generalSettings as any)?.activeIdentityAddr;
+
+            const registeredKeystones = this.ibGib?.rel8ns?.keystone ?? [];
+            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 (primaryKeystones.length > 0) {
+                this.globalActiveAddr = primaryKeystones[0];
+            } else {
+                this.globalActiveAddr = null;
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.globalActiveAddr = null;
+        }
+    }
+
+    protected override async renderUI(): Promise<void> {
+        const lc = `${this.lc}[${this.renderUI.name}]`;
+        if (!this.elements) { return; }
+
+        await this.resolveActiveIdentity();
+
+        const keystones = this.ibGib?.rel8ns?.keystone ?? [];
+        if (keystones.length === 0 && this.childInfos.length === 0) {
+            this.elements.noIdentityPlaceholderEl.classList.remove('hidden');
+            this.elements.contentEl.innerHTML = '';
+            return;
+        }
+
+        this.elements.noIdentityPlaceholderEl.classList.add('hidden');
+
+        // 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' : ''}`;
+        }
+    }
+
+    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);
+            return { addr, isPrimary: details?.isPrimary ?? false };
+        });
+        const resolvedDetails = await Promise.all(detailsPromises);
+        const primaryKeystones = resolvedDetails
+            .filter(item => item.isPrimary)
+            .map(item => item.addr);
+
+        if (primaryKeystones.length === 0) {
+            this.elements!.noIdentityPlaceholderEl.classList.remove('hidden');
+            return;
+        }
+
+        this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
+
+        this.reloadingTabs = true;
+        try {
+            for (const addr of primaryKeystones) {
+                await this.activateIbGib({ addr });
+            }
+        } finally {
+            this.reloadingTabs = false;
+        }
+
+        // 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 });
+    }
+
+    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)`); }
+
+            await super.activateIbGib({ addr, ibGib });
+
+
+            if (!this.activeChildInfo) { throw new Error(`(UNEXPECTED) activeChildInfo falsy after activateIbGib? (E: d76bd8bc300f3fdc486d50c8b2644826)`); }
+
+            ibGib ??= this.activeChildInfo.component?.ibGib;
+
+            if (!ibGib) { throw new Error(`(UNEXPECTED) ibGib falsy? (E: 5b6ec745dd32fd2128635728e3f35e26)`); }
+
+            if (!ibGib.ib.startsWith(KEYSTONE_ATOM)) {
+                throw new Error(`ibGib.ib (${ibGib.ib}) does not start with keystone atom (${KEYSTONE_ATOM}) (E: e0df410381c8e569eb6da996e79b6826)`);
+            }
+
+            this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
+
+            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 = await getGlobalMetaspace_waitIfNeeded();
+                        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,
+                                        }
+                                    },
+                                },
+                            });
+                        }
+                    }
+                }
+            }
+
+            await this.renderUI();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    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;
+            }
+
+            let tabInfo: IdentityTabInfo;
+
+            const filtered = this.childInfos.filter(x => {
+                const tabGibInfo = getGibInfo({ ibGibAddr: x.addr });
+                const tabTjpGib = tabGibInfo.tjpGib ?? getIbAndGib({ ibGibAddr: x.addr }).gib;
+                return tabTjpGib === tjpGib;
+            });
+
+            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: ibGib! });
+                tabInfo = {
+                    addr,
+                    childBtnEl: tabBtnEl,
+                    component: detailsComponent,
+                    active: false,
+                };
+                this.childInfos.push(tabInfo);
+            }
+
+            return tabInfo;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        }
+    }
+
+    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}`);
+            }
+            if (!this.elements) { throw new Error(`(UNEXPECTED) this.elements falsy?`); }
+            const { tabsListEl } = this.elements;
+
+            addr ??= getIbGibAddr({ ibGib });
+
+            const childBtnEl = document.createElement('button');
+            childBtnEl.className = 'tab-btn';
+            childBtnEl.id = `identity-tab-button-${addr}`;
+
+            await this.updateTabTitleAndText({ span: childBtnEl, ibGib, addr });
+
+            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 });
+                });
+            }
+
+            tabsListEl.appendChild(childBtnEl);
+            childBtnEl.addEventListener('click', async (event) => {
+                await this.activateIbGib({ addr });
+            });
+
+            return childBtnEl;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        }
+    }
+
+    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 {
+            let displayTab = addr;
+            if (displayTab.length > 12) {
+                displayTab = displayTab.substring(0, 5) + '...' + displayTab.substring(displayTab.length - 4);
+            }
+            span.textContent = displayTab;
+        }
+
+        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}`);
+        span.title = tooltipParts.join('\n');
+    }
+
+    protected async removeTabBtn({ tabInfo }: { tabInfo: IdentityTabInfo }): Promise<void> {
+        this.elements!.tabsListEl.removeChild(tabInfo.childBtnEl);
+    }
+}