@ibgib/web-gib 0.0.52 → 0.0.55

package/dist/ui/component/identity/add-device/add-device.mjs

@@ -0,0 +1,321 @@
+import thisCss from "./add-device.css";
+import thisHtml from "./add-device.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+import { delay, extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.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 { 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 { 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 {
+    lc = `[AddDeviceComponentMeta]`;
+    routeRegExp = 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 }) {
+        const component = document.createElement(this.componentName);
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+/**
+ * Concrete implementation of the Add Device / Pairing component.
+ */
+export class AddDeviceComponentInstance extends IbGibFormInstanceBase {
+    lc = `[AddDeviceComponentInstance]`;
+    constructor() {
+        super();
+    }
+    async initialize(opts) {
+        await super.initialize(opts);
+    }
+    async created() {
+        this.elements = {};
+        this.elements.containerEl = this.shadowRoot.getElementById('container');
+        this.elements.titleEl = this.shadowRoot.getElementById('title');
+        this.elements.inputIdentifier = this.shadowRoot.getElementById('input-identifier');
+        this.elements.inputDeviceTag = (this.shadowRoot.getElementById('input-device-tag') || this.shadowRoot.getElementById('input-device-name'));
+        this.elements.inputPassphrase = this.shadowRoot.getElementById('input-passphrase');
+        this.elements.checkboxMakeActive = this.shadowRoot.getElementById('checkbox-make-active');
+        this.elements.btnAddDeviceEl = this.shadowRoot.getElementById('btn-add-device');
+        this.elements.statusArea = this.shadowRoot.getElementById('status-area');
+        this.elements.statusText = this.shadowRoot.getElementById('status-text');
+        this.elements.resultAreaEl = this.shadowRoot.getElementById('result-area');
+        this.elements.delegateAddrEl = this.shadowRoot.getElementById('delegate-addr');
+        this.elements.contentEl = this.elements.containerEl;
+        this.initHandlers();
+        await this.renderUI();
+    }
+    async disconnected() {
+        // cleanup if needed
+    }
+    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');
+        });
+    }
+    setButtonLoading(isLoading) {
+        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.
+     */
+    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 = keystonesIndex?.rel8ns?.keystone ?? [];
+            let primaryKeystone;
+            for (const addr of registeredAddrs) {
+                const res = await metaspace.get({ addrs: [addr], space });
+                const found = res?.ibGibs?.[0];
+                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) => 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;
+                    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];
+                        }
+                        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);
+        }
+    }
+}
+//# sourceMappingURL=add-device.mjs.map

package/dist/ui/component/identity/add-device/add-device.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-device.mjs","sourceRoot":"","sources":["../../../../../src/ui/component/identity/add-device/add-device.mts"],"names":[],"mappings":"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"}

package/dist/ui/component/identity/identity-header/identity-header.css

@@ -0,0 +1,317 @@
+:host {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+}
+
+.header-widget-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+}
+
+/* Top control pill button */
+.identity-pill-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.8rem;
+    background: var(--tab-background-color-active, rgba(255, 255, 255, 0.08));
+    border: 1px solid var(--tab-border-color-active, rgba(80, 250, 123, 0.3));
+    border-radius: var(--radius-lg, 20px);
+    color: var(--clr-text-primary, #ffffff);
+    font-family: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    outline: none;
+}
+
+.identity-pill-btn:hover, .identity-pill-btn.locked {
+    background: rgba(80, 250, 123, 0.15);
+    border-color: var(--clr-accent, #50fa7b);
+    box-shadow: 0 2px 8px rgba(80, 250, 123, 0.15);
+}
+
+.identity-pill-btn.unauth {
+    background: rgba(255, 204, 68, 0.05);
+    border: 1px dashed var(--clr-warn, #ffcc44);
+    color: var(--clr-warn, #ffcc44);
+}
+
+.identity-pill-btn.unauth:hover, .identity-pill-btn.unauth.locked {
+    background: rgba(255, 204, 68, 0.15);
+    border-color: var(--clr-warn, #ffcc44);
+    box-shadow: 0 0 10px rgba(255, 204, 68, 0.25);
+}
+
+.pill-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.avatar-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    background: var(--clr-accent, #50fa7b);
+    color: #11111b;
+    flex-shrink: 0;
+}
+
+.username-text {
+    font-weight: 600;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.unauth-text {
+    font-weight: 600;
+}
+
+.caret {
+    font-size: 0.75rem;
+    transition: transform 0.2s ease;
+}
+
+.identity-pill-btn.locked .caret {
+    transform: rotate(180deg);
+}
+
+/* Glassmorphic Dropdown Menu Popup */
+.dropdown-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    min-width: 220px;
+    background: var(--clr-bg-surface, rgba(30, 30, 46, 0.95));
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.12));
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+/* Invisible hover buffer to prevent drop gap */
+.dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 0;
+    width: 100%;
+    height: 10px;
+}
+
+.dropdown-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.dropdown-header-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--clr-text-muted, #9399b2);
+    padding: 0.3rem 0.6rem 0.2rem 0.6rem;
+}
+
+.dropdown-divider {
+    border: 0;
+    height: 1px;
+    background: var(--clr-border, rgba(255, 255, 255, 0.12));
+    margin: 0.4rem 0;
+}
+
+.dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    width: 100%;
+    padding: 0.55rem 0.75rem;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--clr-text-primary, #cdd6f4);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease, color 0.15s ease;
+    box-sizing: border-box;
+}
+
+.dropdown-item:hover:not(.disabled) {
+    background: var(--clr-accent-hover, rgba(137, 180, 250, 0.15));
+    color: var(--clr-accent, #89b4fa);
+}
+
+.dropdown-item.active-identity {
+    background: rgba(80, 250, 123, 0.12);
+    font-weight: 600;
+    color: var(--clr-accent, #50fa7b);
+}
+
+.dropdown-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.dropdown-item .icon {
+    font-size: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.2rem;
+}
+
+.identity-badge-active {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--clr-accent, #50fa7b);
+}
+
+.update-item {
+    color: #ffb703;
+    background: rgba(255, 183, 3, 0.1);
+    font-weight: 600;
+}
+
+.update-item:hover {
+    background: rgba(255, 183, 3, 0.25) !important;
+    color: #ffc107 !important;
+}
+
+/* Glowing amber notification dot / badge */
+.update-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    animation: pulse-amber 2s infinite ease-in-out;
+}
+
+@keyframes pulse-amber {
+    0% {
+        transform: scale(1);
+        filter: drop-shadow(0 0 2px #ffb703);
+    }
+    50% {
+        transform: scale(1.25);
+        filter: drop-shadow(0 0 8px #ffb703);
+    }
+    100% {
+        transform: scale(1);
+        filter: drop-shadow(0 0 2px #ffb703);
+    }
+}
+
+/* Modal Sync Progress Overlay */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-card {
+    background: #1e1e2e;
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.15));
+    border-radius: 16px;
+    padding: 2rem;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+    box-sizing: border-box;
+}
+
+.modal-spinner {
+    font-size: 2.5rem;
+    animation: spin-pulse 2s infinite ease-in-out;
+    display: inline-block;
+}
+
+@keyframes spin-pulse {
+    0% {
+        transform: rotate(0deg) scale(1);
+    }
+    50% {
+        transform: rotate(180deg) scale(1.15);
+    }
+    100% {
+        transform: rotate(360deg) scale(1);
+    }
+}
+
+.modal-title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--clr-text-primary, #ffffff);
+}
+
+.modal-msg {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--clr-text-muted, #a6adc8);
+    line-height: 1.4;
+}
+
+.modal-status {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 0.4rem 0.8rem;
+    font-family: monospace;
+    font-size: 0.85rem;
+    color: var(--clr-accent, #50fa7b);
+}
+
+.modal-close-btn {
+    padding: 0.5rem 1.5rem;
+    background: var(--clr-accent, #50fa7b);
+    color: #11111b;
+    border: none;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.1s ease;
+}
+
+.modal-close-btn:hover {
+    background: #62ff88;
+    transform: translateY(-1px);
+}
+
+.hidden {
+    display: none !important;
+}
+