@ibgib/space-gib 0.0.5 → 0.0.7

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

@@ -0,0 +1,821 @@
+import styleCss from "../../style.css";
+import thisCss from "./keystone-details.css";
+import thisHtml from "./keystone-details.html";
+
+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/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
+import { spaceGibApiBridge } from "../../api/space-gib-api-bridge.mjs";
+import { updateSpecialIndex } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+
+import { GLOBAL_LOG_A_LOT, APP_CONFIG, } from "../../constants.mjs";
+import { getComponentCtorArg, getIbGibGlobalThis_SpaceGib } from "../../helpers.web.mjs";
+import { devLog } from "../../dev-tools.mjs";
+
+const logalot = GLOBAL_LOG_A_LOT || true;
+
+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: [styleCss, 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;
+    verificationStatusEl: HTMLDivElement;
+    rawAccordionHeaderEl: HTMLDivElement;
+    rawAccordionContentEl: HTMLDivElement;
+    rawKeystoneJsonEl: HTMLPreElement;
+    delegatesCardEl: HTMLDivElement;
+    delegatesListEl: HTMLTableSectionElement;
+    historicalWarningBannerEl: HTMLDivElement;
+    containerEl: HTMLDivElement;
+    ssoLinkCardEl: HTMLDivElement;
+    btnLinkGoogleEl: HTMLButtonElement;
+    btnLinkGithubEl: HTMLButtonElement;
+    ssoStatusMsgEl: 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 = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+        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 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.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 HTMLButtonElement;
+            this.elements.btnLinkGithubEl = shadow.getElementById('btn-link-github') as HTMLButtonElement;
+            this.elements.ssoStatusMsgEl = shadow.getElementById('sso-status-msg') 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 = (e: any) => {
+                this.globalActiveAddr = e.detail?.activeIdentityAddr || null;
+                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!.btnLinkGoogleEl.addEventListener('click', () => this.handleSSOLink('google'));
+        this.elements!.btnLinkGithubEl.addEventListener('click', () => this.handleSSOLink('github'));
+    }
+
+    private toggleAccordion() {
+        const header = this.elements!.rawAccordionHeaderEl;
+        const content = this.elements!.rawAccordionContentEl;
+        header.classList.toggle('expanded');
+        content.classList.toggle('expanded');
+    }
+
+    protected async handleVerifyIdentityChain() {
+        const lc = `${this.lc}[${this.handleVerifyIdentityChain.name}]`;
+        devLog(`${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 = getIbGibGlobalThis_SpaceGib(APP_CONFIG).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 = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+            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)`);
+            }
+
+            const resGet = await metaspace.get({ addrs: [this.ibGibAddr], 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 ${this.ibGibAddr}. 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;
+        } else {
+            this.elements.btnVerifyChainEl.disabled = false;
+            this.elements.btnSetActiveEl.disabled = isTimelineActive;
+        }
+    }
+
+    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 = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+            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 card (only if this is a primary keystone, hide delegates table & SSO card 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');
+            } else {
+                this.elements.delegatesCardEl.classList.add('hidden');
+                this.elements.ssoLinkCardEl.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 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;
+        }
+
+        for (const [delegateTjpAddr, info] of Object.entries(delegates)) {
+            const tr = document.createElement('tr');
+
+            const tdName = document.createElement('td');
+            tdName.textContent = 'Loading...';
+
+            const tdTjp = document.createElement('td');
+            tdTjp.textContent = delegateTjpAddr;
+            tdTjp.title = delegateTjpAddr;
+
+            const tdVerbs = document.createElement('td');
+            tdVerbs.textContent = info.allowedVerbs ? info.allowedVerbs.join(', ') : '-';
+            tdVerbs.title = tdVerbs.textContent;
+
+            const tdActions = document.createElement('td');
+            const btnView = document.createElement('button');
+            btnView.className = 'action-btn secondary small';
+            btnView.textContent = 'View Details';
+            btnView.addEventListener('click', () => {
+                if (info.delegateAddr) {
+                    this.dispatchEvent(new CustomEvent('ibgib-view-keystone-details', {
+                        detail: { addr: info.delegateAddr },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            });
+            tdActions.appendChild(btnView);
+
+            tr.appendChild(tdName);
+            tr.appendChild(tdTjp);
+            tr.appendChild(tdVerbs);
+            tr.appendChild(tdActions);
+            listEl.appendChild(tr);
+
+            if (info.delegateAddr) {
+                this.getKeystoneDetails(info.delegateAddr).then(details => {
+                    const textParts: string[] = [];
+                    if (details.username) textParts.push(details.username);
+                    if (details.description) textParts.push(details.description);
+                    tdName.textContent = textParts.join(' / ') || 'Unnamed Delegate';
+                    tdName.title = `Addr: ${info.delegateAddr}\n` + textParts.join('\n');
+                }).catch(err => {
+                    tdName.textContent = 'Unknown Delegate';
+                });
+            } else {
+                tdName.textContent = 'No Address';
+            }
+        }
+    }
+
+    override async handleContextUpdated(): Promise<void> {
+        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
+            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);
+                    await this.handleSSOLinkCallback(callbackData.code, stateObj, providerConfig.redirectUri);
+                }
+            };
+            window.addEventListener('message', messageListener);
+
+        } 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 to evolve locally
+            const masterSecret = prompt("Link successful! Enter your local Master Secret (Passphrase) to sign and register the custodian pool:");
+            if (!masterSecret) {
+                this.setSSOStatus("Link cancelled by user.", "info");
+                return;
+            }
+
+            this.setSSOStatus("Evolving identity locally and generating cryptographic signatures...", "info");
+
+            const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+            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 keystoneService = new KeystoneService_V1();
+            const evolvedParent = await keystoneService.addPools({
+                latestKeystone: this.ibGib!,
+                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 spaceGibApiBridge.putEvolveKeystone(
+                stateObj.parentTjpAddr,
+                evolvedParent,
+                [] // 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");
+        }
+    }
+}