@ibgib/web-gib 0.0.52 → 0.0.56

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

@@ -0,0 +1,1506 @@
+import thisCss from "./keystone-details.css";
+import thisHtml from "./keystone-details.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+
+import { 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 { 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 {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "../../ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "../../component-types.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED } from "../../../ui-constants.mjs";
+import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
+import { getKeystoneSyncService } from "../../../../identity/keystone-sync-service.mjs";
+import { updateSpecialIndex } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { getTjpAddr, toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { parseSpaceIb } from "@ibgib/core-gib/dist/witness/space/space-helper.mjs";
+
+import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
+import { promptForSecret } from "../../../../helpers.web.mjs";
+import { isSsoProviderLinked } from "../../../../identity/sso/sso-helpers.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "../../../../helpers.mjs";
+
+const logalot = false;
+
+export const KEYSTONE_DETAILS_COMPONENT_NAME = 'ibgib-keystone-details';
+
+export class KeystoneDetailsComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected override lc: string = `[KeystoneDetailsComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${KEYSTONE_DETAILS_COMPONENT_NAME}$`);
+    componentName = KEYSTONE_DETAILS_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, KeystoneDetailsComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as KeystoneDetailsComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+interface KeystoneDetailsElements extends ElementsBase {
+    identityDetailsViewEl: HTMLDivElement;
+    identityAddrEl: HTMLElement;
+    identityGenEl: HTMLElement;
+    identityTimestampEl: HTMLElement;
+    identityUuidEl: HTMLElement;
+    identityNameEl: HTMLElement;
+    identityDescriptionEl: HTMLElement;
+    identityFrameDetailsEl: HTMLPreElement;
+    identityAggrDetailsEl: HTMLPreElement;
+
+    poolsContainerEl: HTMLDivElement;
+    btnVerifyChainEl: HTMLButtonElement;
+    btnSetActiveEl: HTMLButtonElement;
+    btnCheckUpdatesEl: HTMLButtonElement;
+    btnUpdateIdentityEl: HTMLButtonElement;
+    syncStatusMsgEl: HTMLDivElement;
+    verificationStatusEl: HTMLDivElement;
+    rawAccordionHeaderEl: HTMLDivElement;
+    rawAccordionContentEl: HTMLDivElement;
+    rawKeystoneJsonEl: HTMLPreElement;
+    delegatesCardEl: HTMLDivElement;
+    delegatesListEl: HTMLTableSectionElement;
+    historicalWarningBannerEl: HTMLDivElement;
+    containerEl: HTMLDivElement;
+    ssoLinkCardEl: HTMLDivElement;
+    btnLinkGoogleEl: HTMLDivElement;
+    btnLinkGithubEl: HTMLDivElement;
+    ssoStatusMsgEl: HTMLDivElement;
+    inputCurrentPassphraseEl: HTMLInputElement;
+    inputNewPassphraseEl: HTMLInputElement;
+    inputConfirmPassphraseEl: HTMLInputElement;
+    btnChangePassphraseEl: HTMLButtonElement;
+    changePassphraseStatusEl: HTMLDivElement;
+    changePassphraseCardEl: HTMLDivElement;
+}
+
+export class KeystoneDetailsComponentInstance
+    extends IbGibDynamicComponentInstanceBase<KeystoneIbGib_V1, KeystoneDetailsElements>
+    implements IbGibDynamicComponentInstance<KeystoneIbGib_V1, KeystoneDetailsElements> {
+
+    protected override lc: string = `[KeystoneDetailsComponentInstance]`;
+
+    private staticIbGib: KeystoneIbGib_V1 | undefined;
+
+    override get ibGib(): KeystoneIbGib_V1 | undefined {
+        return this.staticIbGib;
+    }
+
+    private globalActiveAddr: string | null = null;
+    private isHistoricalFrame: boolean = false;
+    private _onIdentityChanged: ((e: any) => void) | null = null;
+    private keystoneCache: Map<string, { username: string, description: string, isPrimary: boolean, n: number }> = new Map();
+
+    constructor() {
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        const lc = `${this.lc}[${this.initialize.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 4c9328643a18e56b56e57292c87bd226)`); }
+
+            await super.initialize(opts);
+            // await this.loadIbGib({ getLatest: false });
+            await this.loadIbGib({ getLatest: false });
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    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;
+            } else {
+                console.warn(`[getKeystoneDetails] Keystone common info not found in local space for addr: ${addr}`);
+            }
+        } catch (err) {
+            console.warn(`Error getting details for keystone ${addr}: ${extractErrorMsg(err)}`);
+        }
+
+        return { username: '', description: '', isPrimary: false, n: 0 };
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 0b2c6debcdac9db9b7928aa8695ed826)`); }
+
+            this.elements = {} as KeystoneDetailsElements;
+
+            const shadow = this.shadowRoot!;
+            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;
+
+            this.elements.poolsContainerEl = shadow.getElementById('pools-container') as HTMLDivElement;
+            this.elements.btnVerifyChainEl = shadow.getElementById('btn-verify-chain') as HTMLButtonElement;
+            this.elements.btnSetActiveEl = shadow.getElementById('btn-set-active') as HTMLButtonElement;
+            this.elements.btnCheckUpdatesEl = shadow.getElementById('btn-check-updates') as HTMLButtonElement;
+            this.elements.btnUpdateIdentityEl = shadow.getElementById('btn-update-identity') as HTMLButtonElement;
+            this.elements.syncStatusMsgEl = shadow.getElementById('sync-status-msg') as HTMLDivElement;
+            this.elements.verificationStatusEl = shadow.getElementById('verification-status') as HTMLDivElement;
+            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.delegatesCardEl = shadow.getElementById('delegates-card') as HTMLDivElement;
+            this.elements.delegatesListEl = shadow.getElementById('delegates-list') as HTMLTableSectionElement;
+            this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
+            this.elements.historicalWarningBannerEl = shadow.getElementById('historical-warning-banner') as HTMLDivElement;
+            this.elements.ssoLinkCardEl = shadow.getElementById('sso-link-card') as HTMLDivElement;
+            this.elements.btnLinkGoogleEl = shadow.getElementById('btn-link-google') as HTMLDivElement;
+            this.elements.btnLinkGithubEl = shadow.getElementById('btn-link-github') as HTMLDivElement;
+            this.elements.ssoStatusMsgEl = shadow.getElementById('sso-status-msg') as HTMLDivElement;
+            this.elements.inputCurrentPassphraseEl = shadow.getElementById('input-current-passphrase') as HTMLInputElement;
+            this.elements.inputNewPassphraseEl = shadow.getElementById('input-new-passphrase') as HTMLInputElement;
+            this.elements.inputConfirmPassphraseEl = shadow.getElementById('input-confirm-passphrase') as HTMLInputElement;
+            this.elements.btnChangePassphraseEl = shadow.getElementById('btn-change-passphrase') as HTMLButtonElement;
+            this.elements.changePassphraseStatusEl = shadow.getElementById('change-passphrase-status') as HTMLDivElement;
+            this.elements.changePassphraseCardEl = shadow.getElementById('change-passphrase-card') as HTMLDivElement;
+
+            // ElementBase requires contentEl
+            this.elements.contentEl = shadow.getElementById('identity-details-view') 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.updateFrameDetailsView();
+                this.updateActiveButtonState();
+            };
+            window.addEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+
+            await this.resolveActiveIdentity();
+            await this.loadIbGib({ getLatest: false });
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        if (this._onIdentityChanged) {
+            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+        }
+    }
+
+    private initHandlers() {
+        // Setup raw JSON accordion toggle
+        this.elements!.rawAccordionHeaderEl.addEventListener('click', () => this.toggleAccordion());
+
+        // Buttons
+        this.elements!.btnVerifyChainEl.addEventListener('click', () => this.handleVerifyIdentityChain());
+        this.elements!.btnSetActiveEl.addEventListener('click', () => this.handleSetActiveIdentity());
+        this.elements!.btnCheckUpdatesEl.addEventListener('click', () => this.handleCheckForUpdates());
+        this.elements!.btnUpdateIdentityEl.addEventListener('click', () => this.handleUpdateIdentity());
+        this.elements!.btnLinkGoogleEl.addEventListener('click', () => this.handleSSOClick('google'));
+        this.elements!.btnLinkGithubEl.addEventListener('click', () => this.handleSSOClick('github'));
+        this.elements!.btnChangePassphraseEl.addEventListener('click', () => this.handleChangePassphrase());
+    }
+
+    private toggleAccordion() {
+        const header = this.elements!.rawAccordionHeaderEl;
+        const content = this.elements!.rawAccordionContentEl;
+        header.classList.toggle('expanded');
+        content.classList.toggle('expanded');
+    }
+
+    private setSyncStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const statusEl = this.elements!.syncStatusMsgEl;
+        statusEl.textContent = msg;
+        statusEl.className = `status-msg ${type}`;
+        statusEl.classList.remove('hidden');
+    }
+
+    protected async handleCheckForUpdates(): Promise<void> {
+        const lc = `${this.lc}[${this.handleCheckForUpdates.name}]`;
+        if (!this.ibGibAddr) { return; }
+        this.setSyncStatus("Checking server for keystone updates...", "info");
+        try {
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = metaspace ? await metaspace.getLocalUserSpace({ lock: false }) : undefined;
+            const syncSvc = getKeystoneSyncService();
+            const res = await syncSvc.checkForKeystoneUpdate({
+                activePrimaryAddr: this.ibGibAddr,
+                metaspace,
+                space
+            });
+            if (res.hasUpdate) {
+                this.setSyncStatus(`Update Available (Server n=${res.serverN}, Local n=${res.localN})`, "info");
+            } else {
+                this.setSyncStatus(`Up to Date (n=${res.localN})`, "success");
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.setSyncStatus(`Check failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    protected async handleUpdateIdentity(): Promise<void> {
+        const lc = `${this.lc}[${this.handleUpdateIdentity.name}]`;
+        if (!this.ibGibAddr) { return; }
+        this.setSyncStatus("Updating identity keystone from server...", "info");
+        try {
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = metaspace ? await metaspace.getLocalUserSpace({ lock: false }) : undefined;
+            const syncSvc = getKeystoneSyncService();
+            const updatedFrame = await syncSvc.updateActiveKeystone({
+                activePrimaryAddr: this.ibGibAddr,
+                metaspace,
+                space
+            });
+            if (updatedFrame) {
+                const newAddr = getIbGibAddr({ ibGib: updatedFrame });
+                this.ibGibAddr = newAddr;
+                this.staticIbGib = updatedFrame;
+                this.setSyncStatus(`Identity updated successfully to n=${updatedFrame.data?.n ?? 0}`, "success");
+                await this.loadIbGib({ getLatest: true });
+            } else {
+                this.setSyncStatus("Identity is already up to date.", "info");
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.setSyncStatus(`Update failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    protected async handleVerifyIdentityChain() {
+        const lc = `${this.lc}[${this.handleVerifyIdentityChain.name}]`;
+        console.log(`${lc} Verifying identity keystone timeline...`);
+        this.setVerificationStatus("Verification request sent...", "info");
+        try {
+            this.setVerificationStatus("Verification complete. Root Keystone is verified (Genesis phase 1).", "success");
+        } catch (error) {
+            this.setVerificationStatus(`Verification failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    protected async handleSetActiveIdentity() {
+        if (!this.ibGibAddr) { return; }
+        window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+            detail: { activeIdentityAddr: this.ibGibAddr },
+            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}`;
+        statusEl.classList.remove('hidden');
+    }
+
+    private async resolveActiveIdentity() {
+        const lc = `${this.lc}[resolveActiveIdentity]`;
+        try {
+            const domainIdentity = (globalThis as any).ibgib?.identity?.domainIdentity;
+            this.globalActiveAddr = domainIdentity ? getIbGibAddr({ ibGib: domainIdentity }) : null;
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.globalActiveAddr = null;
+        }
+    }
+
+    override async loadIbGib(opts?: { getLatest?: boolean }): Promise<void> {
+        const lc = `${this.lc}[${this.loadIbGib.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: f0f7e8d52cbdc37bec844b2875996e26)`); }
+
+            if (!this.ibGibAddr) { return; }
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) {
+                throw new Error(`(UNEXPECTED) metaspace falsy? (E: a9864dbbaefc1082ce7bd228ebd67c26)`);
+            }
+            let space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) {
+                throw new Error(`(UNEXPECTED) space falsy and we couldn't get default local user space from metaspace? (E: fa298edcecbda889cfd7b228fbd57c26)`);
+            }
+
+            let loadAddr = this.ibGibAddr;
+            if (opts?.getLatest) {
+                const latest = await metaspace.getLatestAddr({ addr: this.ibGibAddr, space });
+                if (latest) {
+                    loadAddr = latest;
+                    this.ibGibAddr = latest;
+                }
+            }
+
+            const resGet = await metaspace.get({ addrs: [loadAddr], space });
+
+            if (resGet.success && resGet.ibGibs && resGet.ibGibs.length === 1) {
+                this.staticIbGib = resGet.ibGibs[0] as KeystoneIbGib_V1;
+            } else {
+                const resIbGib = resGet.rawResultIbGib as any;
+                const addrsNotFound = resIbGib?.data?.addrsNotFound ?? 'unknown';
+                throw new Error(`couldn't find address ${loadAddr}. addrsNotFound: ${addrsNotFound}? resGet.errorMsg: ${resGet.errorMsg} (E: e0e5c9b7de2837bc902fa88390cd9f26)`);
+            }
+
+            await this.updateFrameDetailsView();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+    protected override async renderUI(): Promise<void> {
+        const lc = `${this.lc}[${this.renderUI.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: c8aa086352d8079708e00f78b6ac0826)`); }
+            await super.renderUI();
+            // await this.updateFrameDetailsView();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    private updateActiveButtonState() {
+        if (!this.elements) { return; }
+
+        const tjpGib = getGibInfo({ ibGibAddr: this.ibGibAddr }).tjpGib ?? getIbAndGib({ ibGibAddr: this.ibGibAddr }).gib;
+        const activeTjpGib = this.globalActiveAddr
+            ? (getGibInfo({ ibGibAddr: this.globalActiveAddr }).tjpGib ?? getIbAndGib({ ibGibAddr: this.globalActiveAddr }).gib)
+            : null;
+
+        const isTimelineActive = !!(this.globalActiveAddr && tjpGib === activeTjpGib);
+
+        if (isTimelineActive) {
+            this.elements.btnSetActiveEl.textContent = "Active Identity";
+            this.elements.btnSetActiveEl.classList.add('active-primary');
+        } else {
+            this.elements.btnSetActiveEl.textContent = "Set as Active Identity";
+            this.elements.btnSetActiveEl.classList.remove('active-primary');
+        }
+
+        // Disable buttons if historical
+        if (this.isHistoricalFrame) {
+            this.elements.btnSetActiveEl.disabled = true;
+            this.elements.btnVerifyChainEl.disabled = true;
+            this.elements.btnLinkGoogleEl.classList.add('disabled');
+            this.elements.btnLinkGithubEl.classList.add('disabled');
+        } else {
+            this.elements.btnVerifyChainEl.disabled = false;
+            this.elements.btnSetActiveEl.disabled = isTimelineActive;
+            this.elements.btnLinkGoogleEl.classList.remove('disabled');
+            this.elements.btnLinkGithubEl.classList.remove('disabled');
+
+            // Check if already linked
+            const isGoogleLinked = isSsoProviderLinked({ keystone: this.ibGib, providerId: 'google' });
+            const isGithubLinked = isSsoProviderLinked({ keystone: this.ibGib, providerId: 'github' });
+
+            // Google Card States
+            const googleCard = this.elements.btnLinkGoogleEl;
+            const googleLabel = googleCard.querySelector('.toggle-state-text')!;
+            if (isGoogleLinked) {
+                googleCard.classList.remove('unlinked');
+                googleCard.classList.add('linked');
+                googleLabel.textContent = "Google Linked ✅";
+            } else {
+                googleCard.classList.remove('linked');
+                googleCard.classList.add('unlinked');
+                googleLabel.textContent = "Unlinked";
+            }
+
+            // GitHub Card States
+            const githubCard = this.elements.btnLinkGithubEl;
+            const githubLabel = githubCard.querySelector('.toggle-state-text')!;
+            if (isGithubLinked) {
+                githubCard.classList.remove('unlinked');
+                githubCard.classList.add('linked');
+                githubLabel.textContent = "GitHub Linked ✅";
+            } else {
+                githubCard.classList.remove('linked');
+                githubCard.classList.add('unlinked');
+                githubLabel.textContent = "Unlinked";
+            }
+        }
+    }
+
+    private async updateFrameDetailsView(): Promise<void> {
+        const lc = `${this.lc}[${this.updateFrameDetailsView.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 1fa9e66d2e78fb100874573e2db71d26)`); }
+
+            if (!this.elements) { return; }
+
+            const keystone = this.ibGib;
+            if (!keystone) {
+                this.clearActiveDetails();
+                return;
+            }
+            const keystoneAddr = this.ibGibAddr;
+
+            // 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();
+                }
+            }
+            this.elements.identityTimestampEl.textContent = formattedTimestamp;
+
+            // Update UUID
+            this.elements.identityUuidEl.textContent = keystone.data?.uuid || 'N/A';
+
+            // Show Frame Details
+            const frameDetails = keystone.data?.frameDetails;
+            this.elements.identityFrameDetailsEl.textContent = frameDetails ? pretty(frameDetails) : '{}';
+
+            // Get and Show Aggregated details up to the scrolled-to frame
+            let isHistorical = false;
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (metaspace) {
+                const space = await metaspace.getLocalUserSpace({ lock: false });
+                if (space) {
+                    try {
+                        const latestAddr = await metaspace.getLatestAddr({ addr: this.ibGibAddr, space });
+                        if (latestAddr && latestAddr !== this.ibGibAddr) {
+                            isHistorical = true;
+                        }
+                    } catch (err) {
+                        console.warn(`${lc} Error checking latest address: ${extractErrorMsg(err)}`);
+                    }
+
+                    try {
+                        const keystoneSvc = new KeystoneService_V1();
+                        const aggregated = await keystoneSvc.getAggregateDetails({
+                            latestKeystone: keystone,
+                            metaspace,
+                            space
+                        });
+
+                        this.elements.identityAggrDetailsEl.textContent = aggregated ? pretty(aggregated) : '{}';
+
+                        // 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 = '-';
+                }
+            } else {
+                this.elements.identityAggrDetailsEl.textContent = '{}';
+                this.elements.identityNameEl.textContent = '-';
+                this.elements.identityDescriptionEl.textContent = '-';
+            }
+
+            // Update historical warning state
+            this.isHistoricalFrame = isHistorical;
+            const banner = this.elements.historicalWarningBannerEl;
+            const container = this.elements.containerEl;
+            if (banner && container) {
+                if (isHistorical) {
+                    banner.classList.remove('hidden');
+                    container.classList.add('is-historical');
+                } else {
+                    banner.classList.add('hidden');
+                    container.classList.remove('is-historical');
+                }
+            }
+
+            // Render Raw Timeline JSON
+            this.elements.rawKeystoneJsonEl.textContent = pretty(keystone);
+
+            // Render Challenge Pools
+            this.renderChallengePools(keystone.data?.challengePools || []);
+
+            // Render Delegates, SSO link, and Passphrase Change cards (only if this is a primary keystone, hide them for delegate/session keystones)
+            const details = await this.getKeystoneDetails(this.ibGibAddr);
+            if (details.isPrimary) {
+                this.elements.delegatesCardEl.classList.remove('hidden');
+                await this.renderDelegates(keystone.data?.delegates);
+                this.elements.ssoLinkCardEl.classList.remove('hidden');
+                this.elements.changePassphraseCardEl.classList.remove('hidden');
+            } else {
+                this.elements.delegatesCardEl.classList.add('hidden');
+                this.elements.ssoLinkCardEl.classList.add('hidden');
+                this.elements.changePassphraseCardEl.classList.add('hidden');
+            }
+
+            this.updateActiveButtonState();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    private clearActiveDetails() {
+        if (!this.elements) { return; }
+        this.isHistoricalFrame = false;
+        if (this.elements.historicalWarningBannerEl) {
+            this.elements.historicalWarningBannerEl.classList.add('hidden');
+        }
+        if (this.elements.containerEl) {
+            this.elements.containerEl.classList.remove('is-historical');
+        }
+        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.poolsContainerEl.innerHTML = '';
+        if (this.elements.delegatesListEl) {
+            this.elements.delegatesListEl.innerHTML = '';
+        }
+    }
+
+    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;
+        }
+
+        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>Verbs Allowed</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);
+        }
+    }
+
+    private showRemoteDelegateModal(info: any) {
+        const shadow = this.shadowRoot!;
+        let modalOverlay = shadow.getElementById('remote-delegate-modal-overlay');
+        if (modalOverlay) {
+            modalOverlay.remove();
+        }
+
+        modalOverlay = document.createElement('div');
+        modalOverlay.id = 'remote-delegate-modal-overlay';
+        modalOverlay.className = 'modal-overlay';
+        modalOverlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+        `;
+
+        const modalContent = document.createElement('div');
+        modalContent.className = 'modal-card card';
+        modalContent.style.cssText = `
+            background: var(--clr-bg-card, #1e1e1e);
+            color: var(--clr-text-primary, #ffffff);
+            padding: 1.5rem;
+            border-radius: 8px;
+            max-width: 550px;
+            width: 90%;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            font-family: inherit;
+        `;
+
+        const deviceNameText = info.deviceName || info.details?.deviceTag || info.details?.name || 'Device Delegate';
+        const nameText = info.username || info.name || info.details?.name || info.details?.username || 'Remote Delegate';
+        const descText = info.description || info.details?.description || 'N/A';
+        const spaceIdText = info.spaceId || info.details?.spaceId || 'N/A';
+        const allowedVerbsText = info.allowedVerbs ? info.allowedVerbs.join(', ') : 'None';
+        const tjpAddrText = info.delegateTjpAddr || 'N/A';
+
+        modalContent.innerHTML = `
+            <h3 style="margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;">
+                <span>Remote Delegate Metadata</span>
+                <span class="badge badge-remote-device" style="background-color: #0d47a1; color: #90caf9; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: bold;">Remote Device</span>
+            </h3>
+            <p style="color: var(--clr-text-secondary, #b3b3b3); font-size: 0.875rem; margin-bottom: 1rem;">
+                This delegate origin is a remote device. Full timeline history stays isolated on the origin device unless explicitly synced.
+            </p>
+            <div class="kv-grid" style="display: grid; grid-template-columns: 120px 1fr; gap: 0.5rem 1rem; margin-bottom: 1.5rem; font-size: 0.9rem;">
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">Device Name</div>
+                <div>💻 ${deviceNameText}</div>
+
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">Name</div>
+                <div>${nameText}</div>
+
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">Description</div>
+                <div>${descText}</div>
+
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">Space ID</div>
+                <code style="word-break: break-all; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px;">${spaceIdText}</code>
+
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">Allowed Verbs</div>
+                <div>${allowedVerbsText}</div>
+
+                <div style="font-weight: bold; color: var(--clr-text-secondary, #b3b3b3);">TJP Address</div>
+                <code style="word-break: break-all; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px;">${tjpAddrText}</code>
+            </div>
+            <div style="display: flex; justify-content: flex-end;">
+                <button id="close-remote-modal-btn" class="action-btn secondary">Close</button>
+            </div>
+        `;
+
+        modalOverlay.appendChild(modalContent);
+        shadow.appendChild(modalOverlay);
+
+        const closeBtn = modalContent.querySelector('#close-remote-modal-btn');
+        closeBtn?.addEventListener('click', () => {
+            modalOverlay?.remove();
+        });
+
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) {
+                modalOverlay?.remove();
+            }
+        });
+    }
+
+    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="4" style="text-align: center; color: var(--clr-text-secondary, #b3b3b3);">
+                        No registered delegates.
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        const metaspace = await getGlobalMetaspace_waitIfNeeded();
+        let localSpaceId: string | undefined;
+        if (metaspace) {
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (space?.ib) {
+                localSpaceId = parseSpaceIb({ spaceIb: space.ib }).spaceId;
+            }
+        }
+
+        for (const [delegateTjpAddr, info] of Object.entries(delegates)) {
+            const tr = document.createElement('tr');
+
+            const deviceName = info.deviceName || info.details?.deviceTag || info.details?.name || 'Device Delegate';
+            const tdName = document.createElement('td');
+
+            const delegateSpaceId = info.spaceId || info.details?.spaceId;
+            let badgeEl: HTMLSpanElement | null = null;
+
+            if (delegateSpaceId) {
+                badgeEl = document.createElement('span');
+                badgeEl.style.marginLeft = '0.5rem';
+                badgeEl.style.padding = '0.15rem 0.4rem';
+                badgeEl.style.borderRadius = '4px';
+                badgeEl.style.fontSize = '0.75rem';
+                badgeEl.style.fontWeight = 'bold';
+                if (localSpaceId && delegateSpaceId === localSpaceId) {
+                    badgeEl.textContent = 'This Device';
+                    badgeEl.className = 'badge badge-this-device';
+                    badgeEl.style.backgroundColor = '#1b5e20';
+                    badgeEl.style.color = '#a5d6a7';
+                } else {
+                    badgeEl.textContent = 'Remote Device';
+                    badgeEl.className = 'badge badge-remote-device';
+                    badgeEl.style.backgroundColor = '#0d47a1';
+                    badgeEl.style.color = '#90caf9';
+                }
+            }
+
+            const applyNameAndBadge = (displayName: string, hoverText?: string) => {
+                tdName.innerHTML = '';
+                const textSpan = document.createElement('span');
+                textSpan.textContent = displayName;
+                tdName.appendChild(textSpan);
+                if (badgeEl) {
+                    tdName.appendChild(badgeEl);
+                }
+                tdName.title = hoverText || displayName;
+            };
+
+            const displayName = `💻 ${deviceName}`;
+            applyNameAndBadge(displayName, `TJP: ${delegateTjpAddr}\nDevice: ${deviceName}`);
+
+            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;
+
+            const isRemote = !!(delegateSpaceId && localSpaceId && delegateSpaceId !== localSpaceId);
+
+            const tdActions = document.createElement('td');
+            const btnView = document.createElement('button');
+            btnView.className = 'action-btn secondary small';
+            btnView.textContent = 'View Details';
+            btnView.addEventListener('click', async () => {
+                const lc = `${this.lc}[renderDelegates.click]`;
+                if (isRemote) {
+                    this.showRemoteDelegateModal(info);
+                } else {
+                    if (info.delegateAddr) {
+                        let addrToLoad = info.delegateAddr;
+                        if (metaspace) {
+                            const space = await metaspace.getLocalUserSpace({ lock: false });
+                            if (space) {
+                                try {
+                                    const latest = await metaspace.getLatestAddr({ addr: delegateTjpAddr, space });
+                                    if (latest) {
+                                        addrToLoad = latest;
+                                    }
+                                } catch (err) {
+                                    console.warn(`${lc} Error resolving latest delegate address: ${extractErrorMsg(err)}`);
+                                }
+                            }
+                        }
+                        this.dispatchEvent(new CustomEvent('ibgib-view-keystone-details', {
+                            detail: { addr: addrToLoad },
+                            bubbles: true,
+                            composed: true
+                        }));
+                    } else {
+                        this.showRemoteDelegateModal(info);
+                    }
+                }
+            });
+            tdActions.appendChild(btnView);
+
+            const btnRevoke = document.createElement('button');
+            btnRevoke.className = 'action-btn danger small';
+            btnRevoke.style.marginLeft = '0.4rem';
+            btnRevoke.textContent = 'Revoke';
+            btnRevoke.addEventListener('click', async () => {
+                await this.handleRevokeDelegate(delegateTjpAddr, deviceName);
+            });
+            tdActions.appendChild(btnRevoke);
+
+            tr.appendChild(tdName);
+            tr.appendChild(tdTjp);
+            tr.appendChild(tdVerbs);
+            tr.appendChild(tdActions);
+            listEl.appendChild(tr);
+        }
+    }
+
+    protected async handleRevokeDelegate(delegateTjpAddr: string, deviceName: string): Promise<void> {
+        const lc = `${this.lc}[${this.handleRevokeDelegate.name}]`;
+        try {
+            let masterSecret: string;
+            try {
+                masterSecret = await promptForSecret({
+                    msg: `Enter Master Passphrase to revoke delegate '${deviceName}':`,
+                    confirm: false
+                });
+            } catch (err) {
+                // User cancelled prompt
+                return;
+            }
+            if (!masterSecret) { return; }
+
+            this.setSyncStatus("Revoking delegate device...", "info");
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { throw new Error("Local space not found"); }
+
+            const keystoneSvc = new KeystoneService_V1();
+
+            // Unregister delegate from parent keystone
+            const evolvedParent = await keystoneSvc.unregisterDelegate({
+                parentKeystone: this.ibGib!,
+                delegateTjpAddr,
+                masterSecret,
+                metaspace,
+                space
+            });
+
+            // Put evolved parent keystone to server via putEvolveKeystone
+            const parentTjp = getTjpAddr({ ibGib: this.ibGib! }) || getIbGibAddr({ ibGib: this.ibGib! });
+            const syncRes = await getApiBridge().putEvolveKeystone({
+                domainAddr: parentTjp,
+                keystoneIbGib: evolvedParent,
+                relatedKeystoneIbGibs: []
+            });
+
+            if (!syncRes.success) {
+                throw new Error(`Server rejected delegate revocation: ${syncRes.message}`);
+            }
+
+            // Save evolved parent to space and update local index
+            await metaspace.put({ ibGibs: [evolvedParent], space });
+            await metaspace.registerNewIbGib({ ibGib: evolvedParent, space });
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                    }
+                ],
+                metaspace,
+                space
+            });
+
+            const evolvedAddr = getIbGibAddr({ ibGib: evolvedParent });
+
+            // Dispatch EVENT_IBGIB_IDENTITY_CHANGED
+            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_CHANGED, {
+                detail: { activeIdentityAddr: evolvedAddr },
+                bubbles: true,
+                composed: true
+            }));
+
+            this.setSyncStatus(`Successfully revoked device '${deviceName}'!`, "success");
+
+            // Refresh the view
+            this.ibGibAddr = evolvedAddr;
+            this.staticIbGib = evolvedParent;
+            await this.loadIbGib({ getLatest: true });
+
+        } catch (error) {
+            console.error(`${lc} Delegate revocation failed: ${extractErrorMsg(error)}`);
+            this.setSyncStatus(`Revocation failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    override async handleContextUpdated(): Promise<void> {
+        const lc = `${this.lc}[${this.handleContextUpdated.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: 243a88c1d4689c779bbbf2a4abd5da26)`); }
+
+            // don't do anything when the context is updated?
+
+            // is this hit? no. leave this as a no-op
+            console.warn(`${lc} this component currently designed expecting that this does not hit (W: 95dc018b87027287e860de0826146826)`);
+
+            await super.handleContextUpdated();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    protected override async handleNewContextChild({ childIbGib }: { childIbGib: IbGib_V1; }): Promise<void> {
+        const lc = `${this.lc}[${this.handleNewContextChild.name}]`;
+        try {
+            if (logalot) { console.log(`${lc} starting... (I: b04dc63842f871658840233485659726)`); }
+            // is this hit? no
+            await super.handleNewContextChild({ childIbGib });
+
+            console.warn(`${lc} this component currently designed expecting that this does not hit (W: 95dc018b87027287e860de0826146826)`);
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            throw error;
+        } finally {
+            if (logalot) { console.log(`${lc} complete.`); }
+        }
+    }
+
+    protected async handleSSOLink(providerId: 'google' | 'github') {
+        const lc = `${this.lc}[${this.handleSSOLink.name}]`;
+        this.setSSOStatus(`Linking ${providerId}...`, "info");
+
+        try {
+            // 1. Fetch public SSO configs from server
+            const res = await fetch('/api/identity/sso/config');
+            if (!res.ok) {
+                throw new Error(`Failed to fetch SSO config from server: ${res.statusText}`);
+            }
+            const data = await res.json();
+            if (!data.success || !data.providers) {
+                throw new Error(`SSO configuration fetch failed: ${data.message || 'unknown error'}`);
+            }
+
+            const providerConfig = data.providers.find((p: any) => p.providerId === providerId);
+            if (!providerConfig) {
+                throw new Error(`SSO provider '${providerId}' is not configured on the server.`);
+            }
+
+            // 2. Generate a secure, high-entropy user nonce
+            const userNonce = (Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)).substring(0, 32);
+
+            // 3. Construct state payload
+            const stateObj = {
+                providerId,
+                parentTjpAddr: this.ibGibAddr,
+                userNonce
+            };
+            const state = btoa(JSON.stringify(stateObj));
+
+            // 4. Construct Auth URL
+            const authUrl = `${providerConfig.authUrl}?client_id=${providerConfig.clientId}&redirect_uri=${encodeURIComponent(providerConfig.redirectUri)}&response_type=code&scope=${encodeURIComponent(providerConfig.scope)}&state=${encodeURIComponent(state)}`;
+
+            // 5. Open popup window
+            const popup = window.open(
+                authUrl,
+                'sso-oauth-popup',
+                'width=600,height=700,status=yes,toolbar=no,menubar=no,location=yes'
+            );
+            if (!popup) {
+                throw new Error("Popup blocked by browser. Please enable popups for this site.");
+            }
+
+            // 6. Listen for callback from pop-up
+            let checkClosedInterval: any;
+            const messageListener = async (event: MessageEvent) => {
+                if (event.origin !== window.location.origin) return;
+                const callbackData = event.data;
+                if (callbackData && callbackData.type === 'sso-oauth-callback') {
+                    window.removeEventListener('message', messageListener);
+                    clearInterval(checkClosedInterval);
+                    await this.handleSSOLinkCallback(callbackData.code, stateObj, providerConfig.redirectUri);
+                }
+            };
+            window.addEventListener('message', messageListener);
+
+            // 7. Poll for manual closure of the popup window
+            checkClosedInterval = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(checkClosedInterval);
+                    window.removeEventListener('message', messageListener);
+                    const statusEl = this.elements!.ssoStatusMsgEl;
+                    if (statusEl.textContent && statusEl.textContent.startsWith('Linking')) {
+                        this.setSSOStatus('Linking cancelled (window closed).', 'error');
+                    }
+                }
+            }, 500);
+
+        } catch (error) {
+            console.error(`${lc} SSO link initiation failed: ${extractErrorMsg(error)}`);
+            this.setSSOStatus(`Link failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    private setSSOStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const statusEl = this.elements!.ssoStatusMsgEl;
+        statusEl.textContent = msg;
+        statusEl.className = `status-msg ${type}`;
+        statusEl.classList.remove('hidden');
+    }
+
+    protected async handleSSOLinkCallback(code: string, stateObj: any, redirectUri: string) {
+        const lc = `${this.lc}[${this.handleSSOLinkCallback.name}]`;
+        this.setSSOStatus("Retrieving challenge pool configuration from server...", "info");
+
+        try {
+            // 1. Exchange OAuth code for custodian public pool config
+            const res = await fetch('/api/identity/sso/link', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    code,
+                    providerId: stateObj.providerId,
+                    parentTjpAddr: stateObj.parentTjpAddr,
+                    userNonce: stateObj.userNonce,
+                    redirectUri
+                })
+            });
+            if (!res.ok) {
+                const errBody = await res.json().catch(() => ({}));
+                throw new Error(`Server link exchange failed: ${errBody.message || res.statusText}`);
+            }
+
+            const linkData = await res.json();
+            if (!linkData.success || !linkData.custodianPool) {
+                throw new Error(`Failed to retrieve custodian challenge pool: ${linkData.message || 'unknown error'}`);
+            }
+
+            const custodianPool = linkData.custodianPool;
+
+            // 2. Prompt user for master secret and verify it
+            const keystoneService = new KeystoneService_V1();
+            let masterSecret: string | undefined;
+            let isCorrect = false;
+            let tries = 0;
+            const maxTries = 8;
+
+            while (tries < maxTries && !isCorrect) {
+                try {
+                    const promptMsg = tries === 0
+                        ? "Link successful! Enter your local Master Secret (Passphrase) to sign and register the custodian pool"
+                        : `Incorrect passphrase. Please try again (${maxTries - tries} tries remaining):`;
+                    masterSecret = await promptForSecret({
+                        msg: promptMsg,
+                        confirm: false
+                    });
+                } catch (error) {
+                    // cancelled
+                    if (logalot) { console.log(`${lc}[promptForSecret] user cancelled (I: 911ff1fb0234949228481968e9087626)`); }
+                    masterSecret = undefined;
+                    break;
+                }
+
+                if (!masterSecret) {
+                    break;
+                }
+
+                // Verify secret using verifySigningSecret (requires manage poolId)
+                isCorrect = await keystoneService.verifySigningSecret({
+                    keystoneIbGib: this.ibGib!,
+                    signingSecret: masterSecret,
+                    poolId: 'manage'
+                });
+
+                if (!isCorrect) {
+                    tries++;
+                }
+            }
+
+            if (!isCorrect) {
+                this.setSSOStatus("Link cancelled or failed (incorrect passphrase).", "error");
+                return;
+            }
+
+            this.setSSOStatus("Evolving identity locally and generating cryptographic signatures...", "info");
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { throw new Error("Local space not found"); }
+
+            // 3. Evolve parent keystone to include the custodian pool
+            const evolvedParent = await keystoneService.addPools({
+                latestKeystone: this.ibGib!,
+                masterSecret: masterSecret!,
+                newPools: [custodianPool],
+                metaspace,
+                space
+            });
+
+            // 4. Sync evolved parent keystone back to server
+            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
+            const syncRes = await getApiBridge().putEvolveKeystone({
+                domainAddr: stateObj.parentTjpAddr,
+                keystoneIbGib: evolvedParent,
+                relatedKeystoneIbGibs: [] // No outward delegate timelines
+            });
+            if (!syncRes.success) {
+                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+            }
+
+            // 5. Update index locally
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                    }
+                ],
+                metaspace,
+                space
+            });
+
+            this.setSSOStatus(`Successfully linked with ${stateObj.providerId}!`, "success");
+            await this.loadIbGib({ getLatest: false });
+
+        } catch (error) {
+            console.error(`${lc} SSO callback processing failed: ${extractErrorMsg(error)}`);
+            this.setSSOStatus(`Link failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    protected async handleSSOClick(providerId: 'google' | 'github') {
+        const isLinked = isSsoProviderLinked({ keystone: this.ibGib, providerId });
+        if (isLinked) {
+            await this.handleSSOUnlink(providerId);
+        } else {
+            await this.handleSSOLink(providerId);
+        }
+    }
+
+    protected async handleSSOUnlink(providerId: 'google' | 'github') {
+        const lc = `${this.lc}[${this.handleSSOUnlink.name}]`;
+        this.setSSOStatus(`Unlinking ${providerId}...`, "info");
+
+        try {
+            // 1. Prompt user for passphrase
+            const keystoneService = new KeystoneService_V1();
+            let masterSecret: string | undefined;
+            let isCorrect = false;
+            let tries = 0;
+            const maxTries = 8;
+
+            while (tries < maxTries && !isCorrect) {
+                try {
+                    const promptMsg = tries === 0
+                        ? `Are you sure you want to unlink your ${providerId} account? If so, enter your local Master Secret (Passphrase) to authorize. Otherwise, click Cancel.`
+                        : `Incorrect passphrase. Please try again (${maxTries - tries} tries remaining):`;
+                    masterSecret = await promptForSecret({
+                        msg: promptMsg,
+                        confirm: false
+                    });
+                } catch (error) {
+                    masterSecret = undefined;
+                    break;
+                }
+
+                if (!masterSecret) {
+                    break;
+                }
+
+                // Verify secret using verifySigningSecret (requires manage poolId)
+                isCorrect = await keystoneService.verifySigningSecret({
+                    keystoneIbGib: this.ibGib!,
+                    signingSecret: masterSecret,
+                    poolId: 'manage'
+                });
+
+                if (!isCorrect) {
+                    tries++;
+                }
+            }
+
+            if (!isCorrect) {
+                this.setSSOStatus("Unlink cancelled or failed (incorrect passphrase).", "error");
+                return;
+            }
+
+            this.setSSOStatus("Evolving identity locally and removing custodian pool...", "info");
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { throw new Error("Local space not found"); }
+
+            // 2. Evolve parent keystone to remove the custodian pool
+            const targetPoolId = `custodian-manage-${providerId}`;
+            const evolvedParent = await keystoneService.removePools({
+                latestKeystone: this.ibGib!,
+                masterSecret: masterSecret!,
+                poolIds: [targetPoolId],
+                metaspace,
+                space
+            });
+
+            // 3. Sync evolved parent keystone back to server
+            this.setSSOStatus("Publishing evolved identity keystone to server...", "info");
+            const syncRes = await getApiBridge().putEvolveKeystone({
+                domainAddr: getIbGibAddr({ ibGib: this.ibGib! }),
+                keystoneIbGib: evolvedParent,
+                relatedKeystoneIbGibs: [] // No outward delegate timelines
+            });
+            if (!syncRes.success) {
+                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+            }
+
+            // 4. Update index locally
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: evolvedParent })]
+                    }
+                ],
+                metaspace,
+                space
+            });
+
+            this.setSSOStatus(`Successfully unlinked ${providerId}!`, "success");
+            await this.loadIbGib({ getLatest: true });
+
+        } catch (error) {
+            console.error(`${lc} SSO unlink failed: ${extractErrorMsg(error)}`);
+            this.setSSOStatus(`Unlink failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    private setChangePassphraseStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const el = this.elements!.changePassphraseStatusEl;
+        el.textContent = msg;
+        el.className = `status-msg ${type}`;
+        el.classList.remove('hidden');
+    }
+
+    protected async handleChangePassphrase(): Promise<void> {
+        const lc = `${this.lc}[${this.handleChangePassphrase.name}]`;
+        this.setChangePassphraseStatus("Validating entries...", "info");
+
+        try {
+            const currentPassphrase = this.elements!.inputCurrentPassphraseEl.value;
+            const newPassphrase = this.elements!.inputNewPassphraseEl.value;
+            const confirmPassphrase = this.elements!.inputConfirmPassphraseEl.value;
+
+            if (!currentPassphrase) {
+                this.setChangePassphraseStatus("Current passphrase is required.", "error");
+                return;
+            }
+            if (!newPassphrase) {
+                this.setChangePassphraseStatus("New passphrase is required.", "error");
+                return;
+            }
+            if (newPassphrase !== confirmPassphrase) {
+                this.setChangePassphraseStatus("New passphrase and confirmation do not match.", "error");
+                return;
+            }
+
+            const keystoneService = new KeystoneService_V1();
+
+            // 1. Verify current passphrase against parent manage pool
+            const isMatch = await keystoneService.verifySigningSecret({
+                keystoneIbGib: this.ibGib!,
+                signingSecret: currentPassphrase,
+                poolId: 'manage'
+            });
+            if (!isMatch) {
+                this.setChangePassphraseStatus("Incorrect current passphrase.", "error");
+                return;
+            }
+
+            this.setChangePassphraseStatus("Evolving primary identity keystone...", "info");
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            if (!metaspace) throw new Error("Metaspace not found");
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { throw new Error("Local space not found"); }
+
+            // 2. Rotate parent identity
+            debugger; // walk through this...looking for delegate failure
+            const { newKeystone: evolvedParent, newDelegates: evolvedDelegates } = await keystoneService.changePassword({
+                keystoneIbGib: this.ibGib!,
+                newMasterSecret: newPassphrase,
+                signingSecret: currentPassphrase,
+                signingPoolId: 'manage',
+                metaspace,
+                space
+            });
+            debugger; // look at evolvedDelegates
+
+            this.setChangePassphraseStatus("Resolving and rotating delegate keystones...", "info");
+
+            // // 3. Evolve registered delegate keystones (preserving custodian/foreign delegate secrets)
+            // const delegates = this.ibGib!.data?.delegates || {};
+            // const evolvedDelegates: KeystoneIbGib_V1[] = [];
+
+            // for (const delegateInfo of Object.values(delegates)) {
+            //     const delegateAddr = delegateInfo.delegateAddr;
+            //     const delegateKeystone = await keystoneService.getLatestKeystone({
+            //         addr: delegateAddr,
+            //         metaspace,
+            //         space,
+            //     });
+
+            //     // Identify user-owned challenge pools in the delegate that match the old passphrase
+            //     const poolsToRotate: string[] = [];
+            //     for (const pool of delegateKeystone.data?.challengePools ?? []) {
+            //         if (!pool.isForeign) {
+            //             /**
+            //              * WARNING: There is an extreme edge case that if two pools
+            //              * happen to be owned by different parties but share the
+            //              * same secret, this will change the wrong pool's secret
+            //              * also. For V1, this shouldn't matter. But we need a
+            //              * better way of tracking pool ownership for V2 (or even
+            //              * V1 if we have multi-party support). (DO NOT REMOVE
+            //              * THIS COMMENT UNTIL THIS IS ADDRESSED)
+            //              */
+            //             const isPoolMatch = await keystoneService.verifySigningSecret({
+            //                 keystoneIbGib: delegateKeystone,
+            //                 signingSecret: currentPassphrase,
+            //                 poolId: pool.id
+            //             });
+            //             if (isPoolMatch) { poolsToRotate.push(pool.id); }
+            //         }
+            //     }
+
+            //     if (poolsToRotate.length > 0) {
+            //         console.log(`${lc} Rotating pools in delegate ${delegateInfo.delegateTjpAddr}: ${poolsToRotate.join(', ')}`);
+            //         const {newKeystone: evolvedDelegate} = await keystoneService.changePassword({
+            //             keystoneIbGib: delegateKeystone,
+            //             newMasterSecret: newPassphrase,
+            //             signingSecret: currentPassphrase,
+            //             signingPoolId: 'manage',
+            //             poolIds: poolsToRotate,
+            //             metaspace,
+            //             space
+            //         });
+            //         evolvedDelegates.push(evolvedDelegate);
+            //     }
+            // }
+
+            // 4. Sync evolved parent and all evolved delegate keystones atomically
+            this.setChangePassphraseStatus("Syncing evolved keystones to server...", "info");
+            const parentTjp = getIbGibAddr({ ibGib: this.ibGib! }); // is this.ibGib the tjp always? or is it the latest in the keystone line? Does it matter?
+
+            const syncRes = await getApiBridge().putEvolveKeystone({
+                domainAddr: parentTjp,
+                keystoneIbGib: evolvedParent,
+                relatedKeystoneIbGibs: evolvedDelegates,
+            });
+            if (!syncRes.success) {
+                throw new Error(`Server synchronization rejected: ${syncRes.message}`);
+            }
+
+            // 5. Update index locally
+            this.setChangePassphraseStatus("Updating local indexes...", "info");
+            const newKeystoneIbGibs = [toDto({ ibGib: evolvedParent })];
+            if (evolvedDelegates) {
+                evolvedDelegates.forEach(d => {
+                    newKeystoneIbGibs.push(toDto({ ibGib: d }));
+                });
+            }
+            const rel8nInfos = [
+                {
+                    rel8nName: "keystone",
+                    ibGibs: newKeystoneIbGibs,
+                }
+            ];
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos,
+                metaspace,
+                space
+            });
+
+            // Clear inputs
+            this.elements!.inputCurrentPassphraseEl.value = "";
+            this.elements!.inputNewPassphraseEl.value = "";
+            this.elements!.inputConfirmPassphraseEl.value = "";
+
+            this.setChangePassphraseStatus("Passphrase updated successfully!", "success");
+            await this.loadIbGib({ getLatest: true });
+
+        } catch (error) {
+            console.error(`${lc} Passphrase rotation failed: ${extractErrorMsg(error)}`);
+            this.setChangePassphraseStatus(`Update failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+}