@ibgib/space-gib 0.0.3 → 0.0.4

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

@@ -0,0 +1,767 @@
+import styleCss from "../../style.css";
+import thisCss from "./identity-manager.css";
+import thisHtml from "./identity-manager.html";
+
+import { extractErrorMsg, pretty } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.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 { SettingsType } from "@ibgib/web-gib/dist/common/settings/settings-constants.mjs";
+import { Settings_General } from "@ibgib/web-gib/dist/common/settings/settings-types.mjs";
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_IDENTITY_CHANGED } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
+
+import { getComponentCtorArg, getIbGibGlobalThis_SpaceGib } from "../../helpers.web.mjs";
+import { APP_CONFIG } from "../../constants.mjs";
+import { devLog } from "../../dev-tools.mjs";
+
+export const IDENTITY_MANAGER_COMPONENT_NAME = 'ibgib-identity-manager';
+
+/**
+ * Metadata for the Identity Manager component.
+ */
+export class IdentityManagerComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[IdentityManagerComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${IDENTITY_MANAGER_COMPONENT_NAME}$`);
+    componentName = IDENTITY_MANAGER_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, IdentityManagerComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as IdentityManagerComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [styleCss, thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's shadow root.
+ */
+interface IdentityManagerElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    titleEl: HTMLHeadingElement;
+    tabsListEl: HTMLDivElement;
+    btnAddIdentityEl: HTMLButtonElement;
+    noIdentityPlaceholderEl: HTMLDivElement;
+    btnCreatePlaceholderEl: HTMLButtonElement;
+    identityDetailsViewEl: HTMLDivElement;
+    identityAddrEl: HTMLElement;
+    identityGenEl: HTMLElement;
+    identityTimestampEl: HTMLElement;
+    identityUuidEl: HTMLElement;
+    identityNameEl: HTMLElement;
+    identityDescriptionEl: HTMLElement;
+    identityFrameDetailsEl: HTMLPreElement;
+    identityAggrDetailsEl: HTMLPreElement;
+
+    // Scrubber elements
+    btnScrubFirstEl: HTMLButtonElement;
+    btnScrubPrev10El: HTMLButtonElement;
+    btnScrubPrevEl: HTMLButtonElement;
+    scrubberStatusEl: HTMLSpanElement;
+    btnScrubNextEl: HTMLButtonElement;
+    btnScrubNext10El: HTMLButtonElement;
+    btnScrubLatestEl: HTMLButtonElement;
+
+    poolsContainerEl: HTMLDivElement;
+    btnVerifyChainEl: HTMLButtonElement;
+    // btnSyncIdentityEl: HTMLButtonElement;
+    btnSetActiveEl: HTMLButtonElement;
+    verificationStatusEl: HTMLDivElement;
+    replicasListEl: HTMLDivElement;
+    // inputReplicaUrlEl: HTMLInputElement;
+    // btnAddReplicaEl: HTMLButtonElement;
+    rawAccordionHeaderEl: HTMLDivElement;
+    rawAccordionContentEl: HTMLDivElement;
+    rawKeystoneJsonEl: HTMLPreElement;
+}
+
+/**
+ * Concrete implementation of the Identity Manager component.
+ */
+export class IdentityManagerComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, IdentityManagerElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, IdentityManagerElements> {
+
+    protected lc: string = `[IdentityManagerComponentInstance]`;
+
+    private activeAddr: string | null = null;
+    private globalActiveAddr: string | null = null;
+    private _onIdentityChanged: ((e: any) => void) | null = null;
+    private history: any[] = [];
+    private currentFrameIndex: number = -1;
+    private lastLoadedHistoryAddr: string | null = null;
+    private keystoneCache: Map<string, { username: string, description: string }> = new Map();
+
+    constructor() {
+        super();
+    }
+
+    private async getKeystoneDetails(addr: string): Promise<{ username: string, description: string }> {
+        const cached = this.keystoneCache.get(addr);
+        if (cached) return cached;
+
+        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+        if (!metaspace) return { username: '', description: '' };
+        const space = await metaspace.getLocalUserSpace({ lock: false });
+        if (!space) return { username: '', description: '' };
+
+        try {
+            const res = await metaspace.get({ addr, space });
+            if (res.success && res.ibGibs && res.ibGibs.length > 0) {
+                const keystone = res.ibGibs[0] as KeystoneIbGib_V1;
+                const keystoneSvc = new KeystoneService_V1();
+                const aggregated = await keystoneSvc.getAggregateDetails({
+                    latestKeystone: keystone,
+                    metaspace,
+                    space
+                });
+                const username = aggregated?.username || aggregated?.profile?.name || aggregated?.name || '';
+                const description = aggregated?.description || aggregated?.profile?.description || '';
+                const details = { username, description };
+                this.keystoneCache.set(addr, details);
+                return details;
+            }
+        } catch (err) {
+            console.warn(`Error getting details for keystone ${addr}: ${extractErrorMsg(err)}`);
+        }
+
+        return { username: '', description: '' };
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        await super.initialize(opts);
+    }
+
+    override async created(): Promise<void> {
+        this.elements = {} as IdentityManagerElements;
+
+        const shadow = this.shadowRoot!;
+        this.elements.containerEl = shadow.getElementById('container') as HTMLDivElement;
+        this.elements.titleEl = shadow.getElementById('title') as HTMLHeadingElement;
+        this.elements.tabsListEl = shadow.getElementById('identity-tabs') as HTMLDivElement;
+        this.elements.btnAddIdentityEl = shadow.getElementById('btn-add-identity') as HTMLButtonElement;
+        this.elements.noIdentityPlaceholderEl = shadow.getElementById('no-identity-placeholder') as HTMLDivElement;
+        this.elements.btnCreatePlaceholderEl = shadow.getElementById('btn-create-placeholder') as HTMLButtonElement;
+        this.elements.identityDetailsViewEl = shadow.getElementById('identity-details-view') as HTMLDivElement;
+        this.elements.identityAddrEl = shadow.getElementById('identity-addr') as HTMLElement;
+        this.elements.identityGenEl = shadow.getElementById('identity-gen') as HTMLSpanElement;
+        this.elements.identityTimestampEl = shadow.getElementById('identity-timestamp') as HTMLSpanElement;
+        this.elements.identityUuidEl = shadow.getElementById('identity-uuid') as HTMLSpanElement;
+        this.elements.identityNameEl = shadow.getElementById('identity-name') as HTMLElement;
+        this.elements.identityDescriptionEl = shadow.getElementById('identity-description') as HTMLElement;
+        this.elements.identityFrameDetailsEl = shadow.getElementById('identity-frame-details') as HTMLPreElement;
+        this.elements.identityAggrDetailsEl = shadow.getElementById('identity-aggr-details') as HTMLPreElement;
+
+        // Scrubber elements
+        this.elements.btnScrubFirstEl = shadow.getElementById('btn-scrub-first') as HTMLButtonElement;
+        this.elements.btnScrubPrev10El = shadow.getElementById('btn-scrub-prev10') as HTMLButtonElement;
+        this.elements.btnScrubPrevEl = shadow.getElementById('btn-scrub-prev') as HTMLButtonElement;
+        this.elements.scrubberStatusEl = shadow.getElementById('scrubber-status') as HTMLSpanElement;
+        this.elements.btnScrubNextEl = shadow.getElementById('btn-scrub-next') as HTMLButtonElement;
+        this.elements.btnScrubNext10El = shadow.getElementById('btn-scrub-next10') as HTMLButtonElement;
+        this.elements.btnScrubLatestEl = shadow.getElementById('btn-scrub-latest') as HTMLButtonElement;
+
+        this.elements.poolsContainerEl = shadow.getElementById('pools-container') as HTMLDivElement;
+        this.elements.btnVerifyChainEl = shadow.getElementById('btn-verify-chain') as HTMLButtonElement;
+        // this.elements.btnSyncIdentityEl = shadow.getElementById('btn-sync-identity') as HTMLButtonElement;
+        this.elements.btnSetActiveEl = shadow.getElementById('btn-set-active') as HTMLButtonElement;
+        this.elements.verificationStatusEl = shadow.getElementById('verification-status') as HTMLDivElement;
+        this.elements.replicasListEl = shadow.getElementById('replicas-list') as HTMLDivElement;
+        // this.elements.inputReplicaUrlEl = shadow.getElementById('input-replica-url') as HTMLInputElement;
+        // this.elements.btnAddReplicaEl = shadow.getElementById('btn-add-replica') as HTMLButtonElement;
+        this.elements.rawAccordionHeaderEl = shadow.getElementById('raw-accordion-header') as HTMLDivElement;
+        this.elements.rawAccordionContentEl = shadow.getElementById('raw-accordion-content') as HTMLDivElement;
+        this.elements.rawKeystoneJsonEl = shadow.getElementById('raw-keystone-json') as HTMLPreElement;
+
+        // ElementBase requires contentEl (points to the main container/body area)
+        this.elements.contentEl = shadow.getElementById('identity-manager-content') as HTMLDivElement;
+
+        this.initHandlers();
+
+        // Subscribe to global active identity changes
+        this._onIdentityChanged = (e: any) => {
+            this.globalActiveAddr = e.detail?.activeIdentityAddr || null;
+            this.renderUI();
+        };
+        window.addEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+
+        if (this.ibGibAddr === ROOT_ADDR || !this.ibGib) {
+            await this.loadKeystonesIndex();
+        } else {
+            await this.initSettings();
+        }
+        await this.renderUI();
+    }
+
+    override async disconnected(): Promise<void> {
+        if (this._onIdentityChanged) {
+            window.removeEventListener(EVENT_IBGIB_IDENTITY_CHANGED, this._onIdentityChanged);
+        }
+    }
+
+    private async loadKeystonesIndex(): Promise<void> {
+        const lc = `${this.lc}[loadKeystonesIndex]`;
+        try {
+            const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+            if (!metaspace) { return; }
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (!space) { return; }
+            const keystonesIndex = await metaspace.getSpecialIbGib({
+                type: "keystones",
+                space,
+                initialize: true,
+            });
+            if (keystonesIndex) {
+                this.ibGibAddr = getIbGibAddr({ ibGib: keystonesIndex });
+                await this.loadIbGib();
+                await this.initSettings();
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+
+
+    private initHandlers() {
+        // Setup raw JSON accordion toggle
+        this.elements!.rawAccordionHeaderEl.addEventListener('click', () => this.toggleAccordion());
+
+        // Buttons
+        this.elements!.btnAddIdentityEl.addEventListener('click', () => this.handleAddNewIdentityFlow());
+        this.elements!.btnCreatePlaceholderEl.addEventListener('click', () => this.handleAddNewIdentityFlow());
+        this.elements!.btnVerifyChainEl.addEventListener('click', () => this.handleVerifyIdentityChain());
+        // this.elements!.btnSyncIdentityEl.addEventListener('click', () => this.handleSyncIdentity());
+        this.elements!.btnSetActiveEl.addEventListener('click', () => this.handleSetActiveIdentity());
+        // this.elements!.btnAddReplicaEl.addEventListener('click', () => this.handleAddReplicaSpace());
+
+        // Scrubber Buttons
+        this.elements!.btnScrubFirstEl.addEventListener('click', () => this.scrubFirst());
+        this.elements!.btnScrubPrev10El.addEventListener('click', () => this.scrubPrev10());
+        this.elements!.btnScrubPrevEl.addEventListener('click', () => this.scrubPrev());
+        this.elements!.btnScrubNextEl.addEventListener('click', () => this.scrubNext());
+        this.elements!.btnScrubNext10El.addEventListener('click', () => this.scrubNext10());
+        this.elements!.btnScrubLatestEl.addEventListener('click', () => this.scrubLatest());
+
+        // Convert vertical mouse wheel scrolling into horizontal scroll for tabs
+        this.elements!.tabsListEl.addEventListener('wheel', (e: WheelEvent) => {
+            if (e.deltaY !== 0) {
+                e.preventDefault();
+                // this.elements!.tabsListEl.scrollLeft += e.deltaY;
+                this.elements!.tabsListEl.scrollBy({ left: e.deltaY, behavior: 'smooth' });
+            }
+        }, { passive: false });
+    }
+
+    private toggleAccordion() {
+        const header = this.elements!.rawAccordionHeaderEl;
+        const content = this.elements!.rawAccordionContentEl;
+        header.classList.toggle('expanded');
+        content.classList.toggle('expanded');
+    }
+
+    protected async handleAddNewIdentityFlow() {
+        const lc = `${this.lc}[${this.handleAddNewIdentityFlow.name}]`;
+        devLog(`${lc} Triggering identity creation/import flow...`);
+        try {
+            const componentSvc = await getComponentSvc();
+            const creator = await componentSvc.getComponentInstance({
+                path: 'ibgib-keystone-creator',
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            });
+            if (creator) {
+                // Hide placeholder and details panel
+                this.elements!.noIdentityPlaceholderEl.classList.add('hidden');
+                this.elements!.identityDetailsViewEl.classList.add('hidden');
+
+                // Clear any previous creator
+                const existing = this.elements!.contentEl.querySelector('ibgib-keystone-creator');
+                if (existing) { existing.remove(); }
+
+                this.elements!.contentEl.appendChild(creator as any);
+                devLog(`${lc} Mounted ibgib-keystone-creator successfully.`);
+            } else {
+                throw new Error("Could not find meta for ibgib-keystone-creator");
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.setVerificationStatus(`Failed to load creator: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    protected async handleVerifyIdentityChain() {
+        const lc = `${this.lc}[${this.handleVerifyIdentityChain.name}]`;
+        devLog(`${lc} Verifying identity keystone timeline...`);
+        this.setVerificationStatus("Verification request sent...", "info");
+        try {
+            // Skeleton logic placeholder
+            this.setVerificationStatus("Verification complete. Root Keystone is verified (Genesis phase 1).", "success");
+        } catch (error) {
+            this.setVerificationStatus(`Verification failed: ${extractErrorMsg(error)}`, "error");
+        }
+    }
+
+    // leave this in
+    // protected async handleSyncIdentity() {
+    //     const lc = `${this.lc}[${this.handleSyncIdentity.name}]`;
+    //     devLog(`${lc} Starting Peer-to-Peer sync saga...`);
+    //     this.setVerificationStatus("Starting synchronization session...", "info");
+    // }
+
+    // leave this in
+    // protected async handleAddReplicaSpace() {
+    //     const lc = `${this.lc}[${this.handleAddReplicaSpace.name}]`;
+    //     const url = this.elements!.inputReplicaUrlEl.value;
+    //     if (!url) {
+    //         this.setVerificationStatus("Please enter a valid space replication URL.", "error");
+    //         return;
+    //     }
+    //     devLog(`${lc} Registering replica space: ${url}`);
+
+    //     // Add to UI list for verification
+    //     const replicaItem = document.createElement('div');
+    //     replicaItem.className = 'address-code';
+    //     replicaItem.style.marginTop = '0.5rem';
+    //     replicaItem.textContent = url;
+    //     this.elements!.replicasListEl.appendChild(replicaItem);
+
+    //     this.elements!.inputReplicaUrlEl.value = '';
+    //     this.setVerificationStatus(`Registered replica endpoint: ${url}`, "success");
+    // }
+
+    /**
+     * dispatches the event to set {@link activeAddr} (if truthy) as the active
+     * identity. IOW, this "logs it in".
+     */
+    protected async handleSetActiveIdentity() {
+        if (!this.activeAddr) { return; }
+        window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+            detail: { activeIdentityAddr: this.activeAddr },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    private setVerificationStatus(msg: string, type: 'info' | 'success' | 'error') {
+        const statusEl = this.elements!.verificationStatusEl;
+        statusEl.textContent = msg;
+        statusEl.className = `status-msg ${type}`;
+    }
+
+    private async viewIdentityDetails(addr: string): Promise<void> {
+        this.activeAddr = addr;
+        await this.renderUI();
+    }
+
+    private async resolveActiveIdentity() {
+        const lc = `${this.lc}[resolveActiveIdentity]`;
+        try {
+            if (!this.settings) {
+                this.activeAddr = null;
+                this.globalActiveAddr = null;
+                return;
+            }
+            const generalSettings = await this.getSettings<Settings_General>({
+                settingsType: SettingsType.general,
+                useCase: 'current',
+            });
+            const activeAddrInSettings = (generalSettings as any)?.activeIdentityAddr;
+
+            const registeredKeystones = this.ibGib?.rel8ns?.keystone ?? [];
+            if (activeAddrInSettings && registeredKeystones.includes(activeAddrInSettings)) {
+                this.globalActiveAddr = activeAddrInSettings;
+            } else if (registeredKeystones.length > 0) {
+                this.globalActiveAddr = registeredKeystones[0];
+            } else {
+                this.globalActiveAddr = null;
+            }
+
+            if (!this.activeAddr) {
+                this.activeAddr = this.globalActiveAddr;
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+            this.globalActiveAddr = null;
+        }
+    }
+
+    protected override async renderUI(): Promise<void> {
+        const lc = `${this.lc}[${this.renderUI.name}]`;
+        if (!this.elements) { return; }
+
+        // always resolve the current active identity, even if we aren't
+        // necessarily rendering the details for that identity (if it isn't
+        // this.activeAddr)
+        await this.resolveActiveIdentity();
+
+        const keystones = this.ibGib?.rel8ns?.keystone ?? [];
+
+        if (keystones.length === 0) {
+            this.elements.tabsListEl.innerHTML = '';
+            this.elements.noIdentityPlaceholderEl.classList.remove('hidden');
+            this.elements.identityDetailsViewEl.classList.add('hidden');
+
+            const existing = this.elements.contentEl.querySelector('ibgib-keystone-creator');
+            if (existing && !this.elements.noIdentityPlaceholderEl.classList.contains('hidden')) {
+                existing.remove();
+            }
+            return; /* <<<< returns early */
+        }
+
+        this.elements.noIdentityPlaceholderEl.classList.add('hidden');
+
+        // Render Tabs
+        this.elements.tabsListEl.innerHTML = '';
+        for (const addr of keystones) {
+            const tabEl = document.createElement('button');
+            tabEl.className = `tab-btn ${addr === this.activeAddr ? 'active' : ''} ${addr === this.globalActiveAddr ? 'global-active' : ''}`;
+
+            // Initial fallback label and tooltip
+            let displayTab = addr;
+            if (displayTab.length > 12) {
+                displayTab = displayTab.substring(0, 5) + '...' + displayTab.substring(displayTab.length - 4);
+            }
+            tabEl.textContent = displayTab;
+            tabEl.title = addr;
+
+            // Fetch details and update tab text/tooltip
+            const details = await this.getKeystoneDetails(addr);
+            let name = details.username;
+            const maxTabLen = 16;
+            if (name) {
+                if (name.length > maxTabLen) {
+                    name = name.substring(0, maxTabLen - 3) + '...';
+                }
+                tabEl.textContent = name;
+            }
+
+            const tooltipParts: string[] = [];
+            if (details.username) {
+                tooltipParts.push(`User: ${details.username}`);
+            }
+            if (details.description) {
+                const desc = details.description.length > 100
+                    ? details.description.substring(0, 97) + '...'
+                    : details.description;
+                tooltipParts.push(`Desc: ${desc}`);
+            }
+            tooltipParts.push(`Addr: ${addr}`);
+            tabEl.title = tooltipParts.join('\n');
+
+            tabEl.addEventListener('click', async () => {
+                await this.viewIdentityDetails(addr);
+            });
+            this.elements.tabsListEl.appendChild(tabEl);
+        }
+
+        if (this.activeAddr) {
+            const existing = this.elements.contentEl.querySelector('ibgib-keystone-creator');
+            if (existing) { existing.remove(); }
+
+            this.elements.identityDetailsViewEl.classList.remove('hidden');
+
+            // Update Set Active button state
+            if (this.activeAddr === this.globalActiveAddr) {
+                this.elements.btnSetActiveEl.disabled = true;
+                this.elements.btnSetActiveEl.textContent = "Active Identity";
+                this.elements.btnSetActiveEl.classList.add('active-primary');
+            } else {
+                this.elements.btnSetActiveEl.disabled = false;
+                this.elements.btnSetActiveEl.textContent = "Set as Active Identity";
+                this.elements.btnSetActiveEl.classList.remove('active-primary');
+            }
+
+            if (this.activeAddr !== this.lastLoadedHistoryAddr) {
+                await this.loadHistory(this.activeAddr);
+                this.lastLoadedHistoryAddr = this.activeAddr;
+            }
+
+            await this.updateFrameDetailsView();
+        } else {
+            this.elements.identityDetailsViewEl.classList.add('hidden');
+            this.clearActiveDetails();
+        }
+    }
+
+    private clearActiveDetails() {
+        if (!this.elements) return;
+        this.elements.identityGenEl.textContent = '-';
+        this.elements.identityTimestampEl.textContent = '-';
+        this.elements.identityUuidEl.textContent = '-';
+        this.elements.identityNameEl.textContent = '-';
+        this.elements.identityDescriptionEl.textContent = '-';
+        this.elements.identityFrameDetailsEl.textContent = '{}';
+        this.elements.identityAggrDetailsEl.textContent = '{}';
+        this.elements.scrubberStatusEl.textContent = 'Frame - / -';
+        this.elements.poolsContainerEl.innerHTML = '';
+        this.history = [];
+        this.currentFrameIndex = -1;
+    }
+
+    private async loadHistory(tipAddr: string): Promise<void> {
+        const lc = `${this.lc}[loadHistory]`;
+        this.history = [];
+        this.currentFrameIndex = -1;
+
+        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+        if (!metaspace) return;
+        const space = await metaspace.getLocalUserSpace({ lock: false });
+        if (!space) return;
+
+        let currentAddr: string | undefined = tipAddr;
+        const tempHistory: KeystoneIbGib_V1[] = [];
+
+        while (currentAddr) {
+            const res = await metaspace.get({ addr: currentAddr, space });
+            if (!res.success || !res.ibGibs || res.ibGibs.length === 0) {
+                console.warn(`${lc} Could not find frame at ${currentAddr}`);
+                break;
+            }
+            const keystone = res.ibGibs[0] as KeystoneIbGib_V1;
+            tempHistory.push(keystone);
+
+            if (keystone.data?.n === 0) {
+                break;
+            }
+
+            const past = keystone.rel8ns?.past;
+            currentAddr = (past && past.length > 0) ? past[past.length - 1] : undefined;
+        }
+
+        this.history = tempHistory.reverse();
+        this.currentFrameIndex = this.history.length - 1;
+    }
+
+    private scrubTo(index: number) {
+        if (this.history.length === 0) return;
+        this.currentFrameIndex = Math.max(0, Math.min(index, this.history.length - 1));
+        this.updateFrameDetailsView();
+    }
+
+    private scrubFirst() {
+        this.scrubTo(0);
+    }
+
+    private scrubPrev10() {
+        this.scrubTo(this.currentFrameIndex - 10);
+    }
+
+    private scrubPrev() {
+        this.scrubTo(this.currentFrameIndex - 1);
+    }
+
+    private scrubNext() {
+        this.scrubTo(this.currentFrameIndex + 1);
+    }
+
+    private scrubNext10() {
+        this.scrubTo(this.currentFrameIndex + 10);
+    }
+
+    private scrubLatest() {
+        this.scrubTo(this.history.length - 1);
+    }
+
+    private async updateFrameDetailsView(): Promise<void> {
+        const lc = `${this.lc}[updateFrameDetailsView]`;
+        if (!this.elements) return;
+
+        if (this.history.length === 0 || this.currentFrameIndex < 0 || this.currentFrameIndex >= this.history.length) {
+            this.clearActiveDetails();
+            return;
+        }
+
+        const keystone = this.history[this.currentFrameIndex];
+        const keystoneAddr = getIbGibAddr({ ibGib: keystone });
+
+        // Update Verifiable Address
+        this.elements.identityAddrEl.textContent = keystoneAddr;
+
+        // Update Generation
+        this.elements.identityGenEl.textContent = keystone.data?.n !== undefined ? String(keystone.data.n) : '0 (Genesis)';
+
+        // Update Timestamp
+        const timestampStr = keystone.data?.timestamp;
+        let formattedTimestamp = 'N/A';
+        if (timestampStr) {
+            const parsed = parseInt(timestampStr);
+            if (!isNaN(parsed)) {
+                formattedTimestamp = new Date(parsed).toLocaleString();
+            } else {
+                formattedTimestamp = new Date(timestampStr).toLocaleString();
+            }
+        }
+        this.elements.identityTimestampEl.textContent = formattedTimestamp;
+
+        // Update UUID
+        this.elements.identityUuidEl.textContent = keystone.data?.uuid || 'N/A';
+
+        // Update Scrubber Status
+        this.elements.scrubberStatusEl.textContent = `Frame ${this.currentFrameIndex + 1} / ${this.history.length}`;
+
+        // Disable/enable scrubber buttons based on boundaries
+        this.elements.btnScrubFirstEl.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubPrev10El.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubPrevEl.disabled = this.currentFrameIndex === 0;
+        this.elements.btnScrubNextEl.disabled = this.currentFrameIndex === this.history.length - 1;
+        this.elements.btnScrubNext10El.disabled = this.currentFrameIndex === this.history.length - 1;
+        this.elements.btnScrubLatestEl.disabled = this.currentFrameIndex === this.history.length - 1;
+
+        // 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
+        const metaspace = getIbGibGlobalThis_SpaceGib(APP_CONFIG).metaspace;
+        if (metaspace) {
+            const space = await metaspace.getLocalUserSpace({ lock: false });
+            if (space) {
+                try {
+                    const keystoneSvc = new KeystoneService_V1();
+                    const aggregated = await keystoneSvc.getAggregateDetails({
+                        latestKeystone: keystone,
+                        metaspace,
+                        space
+                    });
+
+                    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 = '-';
+        }
+
+        // Render Raw Timeline JSON
+        this.elements.rawKeystoneJsonEl.textContent = pretty(keystone);
+
+        // Render Challenge Pools
+        this.renderChallengePools(keystone.data?.challengePools || []);
+    }
+
+    private renderChallengePools(pools: any[]) {
+        if (!this.elements) return;
+        const container = this.elements.poolsContainerEl;
+        container.innerHTML = '';
+
+        if (!pools || pools.length === 0) {
+            container.innerHTML = `<p class="description">No challenge pools found in this keystone.</p>`;
+            return;
+        }
+
+        for (const pool of pools) {
+            const card = document.createElement('div');
+            card.className = 'pool-card';
+
+            const config = pool.config || {};
+            const behavior = config.behavior || {};
+            const allowedVerbs = config.allowedVerbs || [];
+            const activeCount = pool.challenges ? Object.keys(pool.challenges).length : 0;
+            const isForeign = !!pool.isForeign;
+
+            // Generate HTML for the challenges list
+            const challenges = pool.challenges || {};
+            const challengeListHtml = Object.entries(challenges).map(([id, challenge]: [string, any]) => {
+                const truncatedHash = challenge.hash && challenge.hash.length > 20
+                    ? challenge.hash.substring(0, 10) + '...' + challenge.hash.substring(challenge.hash.length - 8)
+                    : challenge.hash || 'N/A';
+                return `
+                    <div class="pool-challenge-item">
+                        <span class="challenge-id">${id}</span>
+                        <span class="challenge-hash" title="${challenge.hash || ''}">${truncatedHash}</span>
+                    </div>
+                `;
+            }).join('');
+
+            card.innerHTML = `
+                <div class="pool-header">
+                    <span class="pool-title">${pool.id || 'Unnamed Pool'}</span>
+                    <span class="pool-tag ${isForeign ? 'foreign' : 'native'}">${isForeign ? 'Foreign' : 'Native'}</span>
+                </div>
+                <div class="pool-grid">
+                    <div class="pool-field">
+                        <label>Challenge Type</label>
+                        <span>${config.type || 'N/A'}</span>
+                    </div>
+                    <div class="pool-field">
+                        <label>Target Size</label>
+                        <span>${behavior.size ?? 'N/A'}</span>
+                    </div>
+                    <div class="pool-field">
+                        <label>Active Challenges</label>
+                        <span>${activeCount}</span>
+                    </div>
+                    <div class="pool-field">
+                        <label>Replenish Strategy</label>
+                        <span>${behavior.replenish || 'N/A'}</span>
+                    </div>
+                    <div class="pool-field">
+                        <label>Allowed Verbs</label>
+                        <span>${allowedVerbs.length > 0 ? allowedVerbs.join(', ') : 'Any'}</span>
+                    </div>
+                    <div class="pool-field">
+                        <label>FIFO / Random cost</label>
+                        <span>FIFO: ${behavior.selectSequentially ?? 0}, Rand: ${behavior.selectRandomly ?? 0}</span>
+                    </div>
+                </div>
+
+                <!-- Collapsible Challenges List -->
+                <details class="pool-details">
+                    <summary class="pool-details-summary">Challenges (${activeCount})</summary>
+                    <div class="pool-challenges-list">
+                        ${challengeListHtml || '<p class="placeholder-text" style="padding: 0.5rem; text-align: center;">No challenges active.</p>'}
+                    </div>
+                </details>
+            `;
+            container.appendChild(card);
+        }
+    }
+
+    override async handleContextUpdated(): Promise<void> {
+        await this.renderUI();
+    }
+}