@ibgib/web-gib 0.0.52 → 0.0.55

package/src/ui/component/identity/add-device/add-device.mts

@@ -0,0 +1,397 @@
+import thisCss from "./add-device.css";
+import thisHtml from "./add-device.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+
+import { delay, extractErrorMsg, getUUID } 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 { 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 { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
+import { KeystoneIbGib_V1 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import { KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT, KEYSTONE_USERNAME_REGEXP } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { deriveDelegateSecret } from "@ibgib/core-gib/dist/keystone/strategy/hash-reveal-v1/hash-reveal-v1.mjs";
+import { getTimelinesGroupedByTjp, toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { updateSpecialIndex } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
+
+import { getGlobalMetaspace_waitIfNeeded } from "../../../../helpers.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibFormInstanceBase,
+} from "../../ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "../../component-types.mjs";
+import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
+
+export const ADD_DEVICE_COMPONENT_NAME = 'ibgib-add-device';
+
+/**
+ * Metadata for the Add Device / Pairing component.
+ */
+export class AddDeviceComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[AddDeviceComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${ADD_DEVICE_COMPONENT_NAME}$`);
+    componentName = ADD_DEVICE_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, AddDeviceComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as AddDeviceComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+interface AddDeviceElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    titleEl: HTMLHeadingElement;
+    inputIdentifier: HTMLInputElement;
+    inputDeviceTag: HTMLInputElement;
+    inputPassphrase: HTMLInputElement;
+    checkboxMakeActive: HTMLInputElement;
+    btnAddDeviceEl: HTMLButtonElement;
+    statusArea: HTMLDivElement;
+    statusText: HTMLParagraphElement;
+    resultAreaEl: HTMLDivElement;
+    delegateAddrEl: HTMLElement;
+}
+
+/**
+ * Concrete implementation of the Add Device / Pairing component.
+ */
+export class AddDeviceComponentInstance
+    extends IbGibFormInstanceBase<IbGib_V1, AddDeviceElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, AddDeviceElements> {
+
+    protected lc: string = `[AddDeviceComponentInstance]`;
+
+    constructor() {
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        await super.initialize(opts);
+    }
+
+    override async created(): Promise<void> {
+        this.elements = {} as AddDeviceElements;
+
+        this.elements.containerEl = this.shadowRoot!.getElementById('container') as HTMLDivElement;
+        this.elements.titleEl = this.shadowRoot!.getElementById('title') as HTMLHeadingElement;
+        this.elements.inputIdentifier = this.shadowRoot!.getElementById('input-identifier') as HTMLInputElement;
+        this.elements.inputDeviceTag = (this.shadowRoot!.getElementById('input-device-tag') || this.shadowRoot!.getElementById('input-device-name')) as HTMLInputElement;
+        this.elements.inputPassphrase = this.shadowRoot!.getElementById('input-passphrase') as HTMLInputElement;
+        this.elements.checkboxMakeActive = this.shadowRoot!.getElementById('checkbox-make-active') as HTMLInputElement;
+        this.elements.btnAddDeviceEl = this.shadowRoot!.getElementById('btn-add-device') as HTMLButtonElement;
+        this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
+        this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
+        this.elements.resultAreaEl = this.shadowRoot!.getElementById('result-area') as HTMLDivElement;
+        this.elements.delegateAddrEl = this.shadowRoot!.getElementById('delegate-addr') as HTMLElement;
+
+        this.elements.contentEl = this.elements.containerEl;
+
+        this.initHandlers();
+        await this.renderUI();
+    }
+
+    override async disconnected(): Promise<void> {
+        // cleanup if needed
+    }
+
+    private initHandlers() {
+        this.elements!.btnAddDeviceEl.addEventListener('click', () => this.handleAddDevice());
+
+        this.shadowRoot!.getElementById('btn-switch-create-account')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_UI_MESSAGE, {
+                detail: { action: 'show-keystone-creator' },
+                bubbles: true,
+                composed: true
+            }));
+        });
+
+        this.elements!.inputIdentifier.addEventListener('input', () => {
+            this.elements!.inputIdentifier.classList.remove('invalid');
+        });
+        this.elements!.inputDeviceTag.addEventListener('input', () => {
+            this.elements!.inputDeviceTag.classList.remove('invalid');
+        });
+        this.elements!.inputPassphrase.addEventListener('input', () => {
+            this.elements!.inputPassphrase.classList.remove('invalid');
+        });
+    }
+
+    private setButtonLoading(isLoading: boolean) {
+        if (this.elements?.btnAddDeviceEl) {
+            this.elements.btnAddDeviceEl.disabled = isLoading;
+            this.elements.btnAddDeviceEl.textContent = isLoading ? 'Pairing...' : 'Pair & Add Device';
+        }
+    }
+
+    /**
+     * Executes the Phase 1 Add-Device pairing orchestration flow.
+     */
+    protected async handleAddDevice() {
+        const lc = `${this.lc}[${this.handleAddDevice.name}]`;
+        try {
+            const humanEyeDelay = 500;
+            this.setStatus("Initializing device pairing...", "info");
+
+            const identifier = this.elements!.inputIdentifier.value.trim();
+            this.elements!.inputIdentifier.value = identifier;
+            if (!identifier) {
+                this.elements!.inputIdentifier.classList.add('invalid');
+                this.setStatus("Please enter a registered username or email.", "error");
+                return;
+            }
+
+            const deviceTag = this.elements!.inputDeviceTag.value.trim();
+            this.elements!.inputDeviceTag.value = deviceTag;
+            if (!deviceTag || !KEYSTONE_USERNAME_REGEXP.test(deviceTag)) {
+                this.elements!.inputDeviceTag.classList.add('invalid');
+                this.setStatus("Please enter a valid Device Tag / Name (e.g. 'work-laptop').", "error");
+                return;
+            }
+
+            const masterSecret = this.elements!.inputPassphrase.value.trim();
+            this.elements!.inputPassphrase.value = masterSecret;
+            if (!masterSecret) {
+                this.elements!.inputPassphrase.classList.add('invalid');
+                this.setStatus("Please enter your master passphrase.", "error");
+                return;
+            }
+
+            this.setButtonLoading(true);
+            this.showBusy({
+                isBusy: true,
+                title: 'Locating Identity...',
+                msg: 'Searching for primary identity...',
+                animationEmoji: '🔍'
+            });
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (!space) { throw new Error("No default space found in metaspace."); }
+
+            const keystoneService = new KeystoneService_V1();
+
+            // 1a. First attempt to locate primary identity keystone locally in space
+            const keystonesIndex = await metaspace.getSpecialIbGib({
+                type: "keystones",
+                space,
+                initialize: true,
+            });
+            const registeredAddrs: string[] = keystonesIndex?.rel8ns?.keystone ?? [];
+
+            let primaryKeystone: KeystoneIbGib_V1 | undefined;
+            for (const addr of registeredAddrs) {
+                const res = await metaspace.get({ addrs: [addr], space });
+                const found = res?.ibGibs?.[0] as KeystoneIbGib_V1 | undefined;
+                if (found && found.data) {
+                    const username = found.data.frameDetails?.username ?? '';
+                    const emails = found.data.emails ?? found.data.frameDetails?.emails ?? [];
+                    if (username.toLowerCase() === identifier.toLowerCase() || emails.some((e: string) => e.toLowerCase() === identifier.toLowerCase())) {
+                        primaryKeystone = found;
+                        break;
+                    }
+                }
+            }
+
+            // 1b. If not found locally, query server identity index
+            if (!primaryKeystone) {
+                this.setStatus("Locating identity on server...", "info");
+                const resLookup = await getApiBridge().lookupPrimaryKeystone({ identifier });
+                if (resLookup.success && resLookup.primaryKeystoneIbGib) {
+                    const fetchedKeystone = resLookup.primaryKeystoneIbGib as KeystoneIbGib_V1;
+                    const domainAddr = resLookup.tjpAddr || getIbGibAddr({ ibGib: fetchedKeystone });
+                    
+                    // Fetch full domain graph from server so local space has all historical keystone frames
+                    const resGraph = await getApiBridge().getKeystoneGraph(domainAddr);
+                    if (resGraph.success && resGraph.graph) {
+                        const graphIbGibs = Object.values(resGraph.graph);
+                        await metaspace.put({ ibGibs: graphIbGibs, space });
+
+                        // Order timelines by TJP and register each frame in ascending order
+                        const timelinesMap = getTimelinesGroupedByTjp({ ibGibs: graphIbGibs });
+                        for (const tjpKey of Object.keys(timelinesMap)) {
+                            const timeline = timelinesMap[tjpKey];
+                            for (const frame of timeline) {
+                                await metaspace.registerNewIbGib({ ibGib: frame, space });
+                            }
+                        }
+
+                        // Set primaryKeystone to the latest frame in the domain timeline
+                        const domainTimeline = timelinesMap[domainAddr] || timelinesMap[Object.keys(timelinesMap)[0]];
+                        if (domainTimeline && domainTimeline.length > 0) {
+                            primaryKeystone = domainTimeline[domainTimeline.length - 1] as KeystoneIbGib_V1;
+                        } else {
+                            primaryKeystone = fetchedKeystone;
+                        }
+                    } else {
+                        await metaspace.put({ ibGibs: [fetchedKeystone], space });
+                        await metaspace.registerNewIbGib({ ibGib: fetchedKeystone, space });
+                        primaryKeystone = fetchedKeystone;
+                    }
+                }
+            }
+
+            if (!primaryKeystone) {
+                const msg = `No registered identity found for '${identifier}'. Please check your username/email or create a new account.`;
+                console.error(`${lc} ${msg}`);
+                this.setStatus(msg, "error");
+                this.showBusy({ isBusy: false });
+                this.setButtonLoading(false);
+                return;
+            }
+
+            const primaryUsername = primaryKeystone.data?.frameDetails?.username ?? 'user';
+
+            // 2. Generate local device delegate keystone
+            this.setStatus("Generating local device delegate...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Keys...',
+                msg: 'Generating cryptographic delegate keys for this device...',
+                animationEmoji: '🔑'
+            });
+
+            const delegateSecret = await deriveDelegateSecret({ masterSecret });
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+                .withUsername(`${primaryUsername}-sync-${deviceTag}`)
+                .withDescription(`Sync Delegate for ${primaryUsername} on ${deviceTag}`)
+                .withDetails({
+                    client: 'space-gib-web',
+                    role: 'sync-delegate',
+                    deviceTag
+                });
+            const delegateConfigs = await delegateBuilder.compileConfigs();
+
+            const delegateKeystone = await keystoneService.genesis({
+                masterSecret: delegateSecret,
+                configs: delegateConfigs,
+                metaspace,
+                space,
+                frameDetails: delegateBuilder.getFrameDetails()
+            });
+
+            const delegateAddr = getIbGibAddr({ ibGib: delegateKeystone });
+            console.log(`${lc} Local device delegate generated: ${delegateAddr}`);
+            await delay(humanEyeDelay);
+
+            // 3. Evolve parent primary keystone to register delegate
+            this.setStatus("Registering device on primary identity...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Device...',
+                msg: 'Updating primary identity with new device delegate...',
+                animationEmoji: '📝'
+            });
+
+            const evolvedPrimaryKeystone = await keystoneService.registerDelegate({
+                parentKeystone: primaryKeystone,
+                delegateKeystone,
+                masterSecret,
+                metaspace,
+                space,
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
+                deviceName: deviceTag,
+            });
+
+            const evolvedPrimaryAddr = getIbGibAddr({ ibGib: evolvedPrimaryKeystone });
+            console.log(`${lc} Primary identity evolved with delegate: ${evolvedPrimaryAddr}`);
+            await delay(humanEyeDelay);
+
+            // 4. Post evolved primary keystone + delegate to server
+            this.setStatus("Syncing device pairing to server...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: 'Posting device pairing to server sync node...',
+                animationEmoji: '🔄'
+            });
+
+            const primaryTjpAddr = getGibInfo({ ibGibAddr: getIbGibAddr({ ibGib: primaryKeystone }) }).tjpGib;
+            const domainAddr = primaryTjpAddr ? getIbGibAddr({ ibGib: primaryKeystone }) : getIbGibAddr({ ibGib: primaryKeystone });
+
+            const resEvolve = await getApiBridge().putEvolveKeystone({
+                domainAddr,
+                keystoneIbGib: evolvedPrimaryKeystone,
+                relatedKeystoneIbGibs: [delegateKeystone]
+            });
+
+            if (!resEvolve.success) {
+                const msg = `Server rejected device pairing: ${resEvolve.message}`;
+                console.error(`${lc} ${msg}`);
+                this.setStatus(msg, "error");
+                this.showBusy({ isBusy: false });
+                this.setButtonLoading(false);
+                return;
+            }
+
+            // 5. Update local keystones index
+            this.showBusy({
+                isBusy: true,
+                title: 'Updating Local Indexes...',
+                msg: 'Registering new device in local index...',
+                animationEmoji: '💾'
+            });
+
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [
+                            toDto({ ibGib: evolvedPrimaryKeystone }),
+                            toDto({ ibGib: delegateKeystone })
+                        ],
+                    },
+                ],
+                metaspace,
+                space,
+            });
+
+            // 6. Set as active identity if checked
+            if (this.elements!.checkboxMakeActive.checked) {
+                window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+                    detail: { activeIdentityAddr: evolvedPrimaryAddr },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+
+            this.showBusy({ isBusy: false });
+            this.setButtonLoading(false);
+            this.elements!.delegateAddrEl.innerText = delegateAddr;
+            this.elements!.resultAreaEl.classList.remove('collapsed');
+            this.setStatus("Device successfully paired!", "success");
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`, error);
+            this.setStatus(`Pairing failed: ${extractErrorMsg(error)}`, "error");
+            this.showBusy({ isBusy: false });
+            this.setButtonLoading(false);
+        }
+    }
+}

package/src/ui/component/identity/identity-header/IMPLEMENTATION.md

@@ -0,0 +1,45 @@
+# Identity Header Component - Implementation Spec
+
+This document details the layout, styling, and behavior for the `identity-header` component (`ibgib-identity-header`). It is rendered inside the app shell's header and acts as a status indicator and shortcut route for the user's active identity.
+
+## Requirements
+
+1. **State-Driven Display**:
+   - **Active Identity Mode**: If an active Domain Identity (Keystone) address exists in settings and is resolved in the local space, the component displays an identity pill showing a truncated version of the address.
+   - **Inactive/Default Mode**: If no identity is resolved, the component renders a prominent "Create Identity" button.
+2. **Interactive Routing**:
+   - Clicking either the identity pill or the fallback "Create Identity" button calls `SpaceGibShellService.showIdentityManager()` to load the full `<ibgib-identity-manager>` component in the center view panel.
+3. **Agent-Themeable Styles**:
+   - The layout must be highly compact to fit inside a standard horizontal header panel.
+   - All styling must prioritize valid theme CSS variables (e.g., `--button-background-color-base`, `--tab-text-color-active`) to remain dynamic and styleable by runtime agents.
+4. **Shared Settings Scope**:
+   - It is initialized with the virtual `ROOT_ADDR` and manually binds to the `"keystones"` index `ibgib`.
+   - It initializes its coupled settings via `this.initSettings()`. Since both this component and the manager share the `"keystones"` index backing model, they automatically resolve the exact same coupled settings `ibgib` and settings timeline, reactively syncing active identity selection changes.
+   - For detailed data schema, see [identity-manager IMPLEMENTATION.md](../identity-manager/IMPLEMENTATION.md).
+
+---
+
+## Component Structure
+
+* **[identity-header.mts](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-header/identity-header.mts)**: Element definition, lifecycle events, active identity resolution, shell service navigation call.
+* **[identity-header.html](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-header/identity-header.html)**: Compact HTML structures for the pill and fallback button.
+* **[identity-header.css](file:///c:/Users/billm/antigravity/ibgib/apps/space-gib/src/client/components/identity-header/identity-header.css)**: Glassmorphic pill styling matching current themes.
+
+---
+
+## Implementation Checklist
+
+### Phase 1: Basic Scaffolding & Setup
+- [x] Scaffold `identity-header.mts`, `.html`, and `.css` files.
+- [x] Register `IdentityHeaderComponentMeta` with `IbGibComponentService`.
+- [x] Mount `<ibgib-identity-header>` inside the header panel in `SpaceGibShellService`.
+
+### Phase 2: Navigation & Identity State
+- [x] Wire up click handlers to trigger center-panel navigation to `ibgib-identity-manager`.
+- [x] Resolve settings and check the `"keystones"` index to render the appropriate active/inactive view mode.
+
+### Phase 3: Visual Polish & Bugs
+- [ ] Ensure the header component has an initial size/button and is visible while the page is initializing.
+
+### Testing Note
+- [ ] **Manual Testing Only**: Visual integration and navigation behavior will be verified manually by the developer to limit token consumption.