@ibgib/space-gib 0.0.1

package/generate-version-file.js

@@ -0,0 +1,35 @@
+/**
+ * generate-version-file.js
+ *
+ * Writes `src/client/AUTO-GENERATED-version.mts` from the current
+ * package.json version. Called by the build orchestrator (build-space-gib.mts)
+ * during `createDynamicFiles()`.
+ *
+ * Run: node generate-version-file.js
+ */
+
+import * as pathUtils from 'path';
+import { writeFile } from 'node:fs/promises';
+
+import packageJson from './package.json' with { type: 'json' };
+
+const lc = `[${import.meta.url}]`;
+console.log(`${lc} starting...`);
+
+const filePath = pathUtils.resolve('./src/client/AUTO-GENERATED-version.mts');
+
+const contents = `/**
+ * @module auto-generated-version
+ *
+ * CHANGES TO THIS FILE WILL NOT BE SAVED.
+ * This is automatically updated during the build process.
+ */
+
+/**
+ * Version of space-gib, auto-updated by the build process.
+ */
+export const AUTO_GENERATED_VERSION = '${packageJson.version}';
+`;
+
+await writeFile(filePath, contents, { encoding: 'utf8' });
+console.log(`${lc} complete. wrote version: ${packageJson.version}`);

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ibgib/space-gib",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "ibgib storage and provider service — SaaS at ibgib.space",
+  "scripts": {
+    "clean": "node ../../node_modules/@ibgib/helper-gib/tools/clean.js ./dist",
+    "prepare:publish": "npm version patch && node ../../build/dist/concrete-build/build-space-gib.mjs --prod && npm run pack",
+    "pack": "npm pack --pack-destination=\"./published\"",
+    "pack:dryrun": "npm pack --dry-run",
+    "test:node:nobuild": "node dist/respec-gib.node.mjs --inspect",
+    "build:test": "tsc -p tsconfig.test.json"
+  },
+  "dependencies": {
+    "@ibgib/core-gib": "*",
+    "@ibgib/helper-gib": "*",
+    "@ibgib/ts-gib": "*",
+    "@ibgib/web-gib": "*",
+    "@ibgib/node-gib": "*"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/client/AUTO-GENERATED-version.mts

@@ -0,0 +1,11 @@
+/**
+ * @module auto-generated-version
+ *
+ * CHANGES TO THIS FILE WILL NOT BE SAVED.
+ * This is automatically updated during the build process.
+ */
+
+/**
+ * Version of space-gib, auto-updated by the build process.
+ */
+export const AUTO_GENERATED_VERSION = '0.0.1';

package/src/client/README.md

@@ -0,0 +1,19 @@
+# Space-Gib Client
+
+This directory contains the browser single-page application (SPA) frontend for `space-gib`.
+
+## Architecture
+
+* **Framework**: Built on top of `web-gib`, utilizing IbGib's vanilla web component architecture (no React/Vue/Angular).
+* **Styling**: Vanilla CSS utilizing dark glassmorphism and modern variables.
+* **State**: Interacts with the backend via a REST API bridge (`SpaceGibApiBridge`) and directly connects to the Node.js WebSocket endpoint for live peer synchronization.
+* **Build**: Bundled by `esbuild` using the monorepo's shared `build-space-gib.mts` script.
+
+## Core Structure
+* `index.html` & `style.css`: The static entry points.
+* `index.mts`: The JS entry point that initializes the global context and bootstraps the SPA.
+* `components/`: Contains dynamic UI components (`keystone-creator`, etc.).
+* `api/`: REST and WebSocket API communication layers.
+* `dev-tools.mts`: Utilities for rendering the local development test panel.
+
+For local development commands, please refer to the [Root space-gib README](../../README.md).

package/src/client/api/function-infos.web.mts

@@ -0,0 +1,38 @@
+/**
+ * @module function-infos.web.mts
+ *
+ * Web app-specific API function infos for space-gib.
+ * Initially minimal — grows as the app adds agent capabilities.
+ */
+
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { registerFunctionInfos } from "@ibgib/web-gib/dist/api/api-index.mjs";
+import { IbGibAPIFunctionInfos } from "@ibgib/web-gib/dist/api/commands/ibgib/ibgib-index.mjs";
+import { ChatAPIFunctionInfos } from "@ibgib/web-gib/dist/api/commands/chat/chat-index.mjs";
+import { TextAPIFunctionInfos } from "@ibgib/web-gib/dist/api/commands/text/text-index.mjs";
+
+import { GLOBAL_LOG_A_LOT } from "../constants.mjs";
+
+const logalot = GLOBAL_LOG_A_LOT;
+
+const AllFunctionInfos_Web = new Map([
+    ...ChatAPIFunctionInfos,
+    ...TextAPIFunctionInfos,
+    ...IbGibAPIFunctionInfos,
+].map(x => [x.nameOrId, x]));
+
+/**
+ * Call once during bootstrap to register all available agent API functions.
+ */
+export function registerDeprecatedFunctionNamesAndFunctionInfos_Web(): void {
+    const lc = `[${registerDeprecatedFunctionNamesAndFunctionInfos_Web.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: e6bad47eedd044beadadbd63361128ea)`); }
+        registerFunctionInfos({ functionInfos: AllFunctionInfos_Web });
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}

package/src/client/api/space-gib-api-bridge.mts

@@ -0,0 +1,85 @@
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+
+/**
+ * Handles communication with the SpaceGib REST API.
+ */
+export class SpaceGibApiBridge {
+    private lc: string = `[SpaceGibApiBridge]`;
+
+    /**
+     * Posts a single genesis keystone ibgib to the server to create a new domain.
+     * 
+     * @param keystoneIbGib The genesis keystone ibgib.
+     * @returns Promise resolving to the server response containing the addr.
+     */
+    public async postGenesisKeystone(keystoneIbGib: IbGib_V1): Promise<{ success: boolean; message?: string; addr?: string }> {
+        const lc = `${this.lc}[${this.postGenesisKeystone.name}]`;
+        try {
+            console.log(`${lc} [NAG][ibgib-paradigm] posting genesis keystone...`);
+            
+            const response = await fetch('/api/keystone/genesis', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ keystoneIbGib }),
+            });
+
+            const data = await response.json();
+            
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'Unknown error';
+                console.error(`${lc} [NAG][ibgib-paradigm] server rejected genesis keystone: ${errorMsg}`);
+                return { success: false, message: errorMsg, addr: data.addr };
+            }
+
+            console.log(`${lc} [NAG][ibgib-paradigm] genesis keystone posted successfully.`);
+            return { success: true, addr: data.addr };
+
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} [NAG][ibgib-paradigm] fetch error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
+
+    /**
+     * PUTs an evolved domain keystone and any related ibgibs (e.g. S^Stjp) to the server.
+     */
+    public async putEvolveKeystone(domainAddr: string, keystoneIbGib: IbGib_V1, relatedIbGibs: IbGib_V1[] = []): Promise<{ success: boolean; message?: string }> {
+        const lc = `${this.lc}[${this.putEvolveKeystone.name}]`;
+        try {
+            console.log(`${lc} posting evolved keystone...`);
+            
+            // Note: encodeURIComponent safely encodes the `^` if needed, though our regex handles both
+            const url = `/api/keystone/evolve/${encodeURIComponent(domainAddr)}`;
+            const response = await fetch(url, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ keystoneIbGib, relatedIbGibs }),
+            });
+
+            const data = await response.json();
+            
+            if (!response.ok) {
+                const errorMsg = data.message || data.error || 'Unknown error';
+                console.error(`${lc} server rejected keystone evolution: ${errorMsg}`);
+                return { success: false, message: errorMsg };
+            }
+
+            console.log(`${lc} keystone evolution accepted by server.`);
+            return { success: true };
+
+        } catch (error) {
+            const errorMsg = extractErrorMsg(error);
+            console.error(`${lc} fetch error: ${errorMsg}`);
+            return { success: false, message: errorMsg };
+        }
+    }
+}
+
+/** Singleton instance for the bridge. */
+export const spaceGibApiBridge = new SpaceGibApiBridge();

package/src/client/bootstrap.mts

@@ -0,0 +1,49 @@
+/**
+ * @module bootstrap
+ *
+ * Startup code for ibgib-specific things: initializing the metaspace and
+ * starting the space-gib app.
+ *
+ * Called dynamically by index.mts AFTER initial page render, so the heavy
+ * ibgib import graph doesn't block first paint.
+ */
+
+import { bootstrapIbGibApp } from "@ibgib/web-gib/dist/app-bootstrap/bootstrap.mjs";
+
+import { APP_CONFIG, GLOBAL_LOG_A_LOT } from "./constants.mjs";
+import { getIbGibGlobalThis_SpaceGib } from "./helpers.web.mjs";
+import { SpaceGibApp_V1 } from "./witness/app/space-gib/space-gib-app-v1.mjs";
+import { PARAM_INFOS } from "./witness/app/space-gib/space-gib-constants.mjs";
+import {
+    DEFAULT_SPACE_GIB_APP_DATA_V1,
+    DEFAULT_SPACE_GIB_APP_REL8NS_V1,
+} from "./witness/app/space-gib/space-gib-types.mjs";
+import { AUTO_GENERATED_VERSION } from "./AUTO-GENERATED-version.mjs";
+import { registerDeprecatedFunctionNamesAndFunctionInfos_Web } from "./api/function-infos.web.mjs";
+
+import { getSpaceGibShellSvc } from "./ui/shell/space-gib-shell-service.mjs";
+
+console.log(`[space-gib bootstrap] version: ${AUTO_GENERATED_VERSION}`);
+
+// ---------------------------------------------------------------------------
+// Main entry point
+// ---------------------------------------------------------------------------
+
+export async function bootstrapSpaceGibApp() {
+    await bootstrapIbGibApp({
+        config: APP_CONFIG,
+        getGlobalThis: getIbGibGlobalThis_SpaceGib,
+        AppClass: SpaceGibApp_V1,
+        defaultAppData: DEFAULT_SPACE_GIB_APP_DATA_V1,
+        paramInfos: PARAM_INFOS,
+        registerAgentFunctionInfos: registerDeprecatedFunctionNamesAndFunctionInfos_Web,
+        localSpaceNamePrefix: 'space_gib_',
+
+        onReady: async (app) => {
+            if (GLOBAL_LOG_A_LOT) { console.log(`[bootstrapSpaceGibApp] Engine ready. app: ${app?.ib}`); }
+
+            // Hand over control to the shell
+            await getSpaceGibShellSvc().onEngineReady();
+        },
+    });
+}

package/src/client/components/keystone-creator/keystone-creator.css

@@ -0,0 +1,139 @@
+:host {
+    display: block;
+    width: 100%;
+    max-width: 600px;
+    margin: 2rem auto;
+}
+
+.component-container {
+    padding: 2rem;
+    background: var(--clr-bg-glass);
+    backdrop-filter: blur(16px);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--clr-border);
+    color: var(--clr-text-primary);
+    box-shadow: var(--shadow-card);
+}
+
+h2 {
+    margin-top: 0;
+    font-size: 1.5rem;
+    color: var(--clr-accent);
+}
+
+.content {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.action-row {
+    display: flex;
+    justify-content: center;
+}
+
+.action-btn {
+    padding: 0.75rem 1.5rem;
+    background: var(--clr-accent);
+    color: var(--clr-bg-deep);
+    border: none;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+
+.action-btn:hover {
+    background: #9fffa5;
+    transform: translateY(-1px);
+    box-shadow: 0 0 16px var(--clr-accent-glow);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-group label {
+    font-size: 0.85rem;
+    color: var(--clr-text-secondary);
+}
+
+.secret-input {
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    color: var(--clr-text-primary);
+    font-family: var(--font-mono);
+}
+
+.secret-input:focus {
+    outline: none;
+    border-color: var(--clr-accent);
+}
+
+.status-area {
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.status-area.hidden {
+    display: none;
+}
+
+.status-msg {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.status-msg.info { color: var(--clr-text-secondary); }
+.status-msg.success { color: var(--clr-accent); }
+.status-msg.error { color: var(--clr-warn); }
+
+.action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--clr-border);
+}
+
+.result-area {
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    transition: opacity var(--t-med);
+}
+
+.result-area.collapsed {
+    display: none;
+}
+
+.address-label {
+    font-size: 0.8rem;
+    color: var(--clr-text-secondary);
+    margin: 0;
+}
+
+.keystone-addr {
+    display: block;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    word-break: break-all;
+    color: var(--clr-accent);
+}
+
+.warning {
+    font-size: 0.8rem;
+    color: var(--clr-warn);
+    margin: 0.5rem 0 0;
+}

package/src/client/components/keystone-creator/keystone-creator.html

@@ -0,0 +1,26 @@
+<div id="container" class="component-container">
+    <h2 id="title">Keystone Creator</h2>
+    <div class="content">
+        <p>This will generate a new root keystone (identity) for your space.</p>
+        
+        <div class="input-group">
+            <label for="input-secret">Master Secret (Keep this private!)</label>
+            <input type="password" id="input-secret" placeholder="Enter your master secret..." class="secret-input">
+        </div>
+
+        <div class="action-row">
+            <button id="btn-generate" class="action-btn">Generate Identity Keystone</button>
+        </div>
+
+        <div id="status-area" class="status-area hidden">
+            <p id="status-text" class="status-msg"></p>
+        </div>
+
+        <div id="result-area" class="result-area collapsed">
+            <h3>New Keystone Generated!</h3>
+            <p class="address-label">Address:</p>
+            <code id="keystone-addr" class="keystone-addr"></code>
+            <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,229 @@
+import thisCss from "./keystone-creator.css";
+import thisHtml from "./keystone-creator.html";
+
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { HashAlgorithm } 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 { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-service-v1.mjs";
+import {
+    KeystonePoolConfig, KeystoneChallengeType, KeystoneReplenishStrategy
+} from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.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 { getComponentCtorArg } from "../../helpers.web.mjs";
+import { spaceGibApiBridge } from "../../api/space-gib-api-bridge.mjs";
+import { devLog } from "../../dev-tools.mjs";
+
+export const KEYSTONE_CREATOR_COMPONENT_NAME = 'space-gib-keystone-creator';
+
+/**
+ * Metadata for the Keystone Creator component.
+ */
+export class KeystoneCreatorComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[KeystoneCreatorComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${KEYSTONE_CREATOR_COMPONENT_NAME}$`);
+    componentName = KEYSTONE_CREATOR_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, KeystoneCreatorComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as KeystoneCreatorComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's shadow root.
+ */
+interface KeystoneCreatorElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    titleEl: HTMLHeadingElement;
+    btnGenerateEl: HTMLButtonElement;
+    resultAreaEl: HTMLDivElement;
+    keystoneAddrEl: HTMLElement;
+    inputSecret: HTMLInputElement;
+    statusArea: HTMLDivElement;
+    statusText: HTMLParagraphElement;
+}
+
+/**
+ * Concrete implementation of the Keystone Creator component.
+ */
+export class KeystoneCreatorComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, KeystoneCreatorElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, KeystoneCreatorElements> {
+
+    protected lc: string = `[KeystoneCreatorComponentInstance]`;
+
+    constructor() {
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        await super.initialize(opts);
+    }
+
+    override async created(): Promise<void> {
+        this.elements = {} as KeystoneCreatorElements;
+
+        this.elements.containerEl = this.shadowRoot!.getElementById('container') as HTMLDivElement;
+        this.elements.titleEl = this.shadowRoot!.getElementById('title') as HTMLHeadingElement;
+        this.elements.btnGenerateEl = this.shadowRoot!.getElementById('btn-generate') as HTMLButtonElement;
+        this.elements.resultAreaEl = this.shadowRoot!.getElementById('result-area') as HTMLDivElement;
+        this.elements.keystoneAddrEl = this.shadowRoot!.getElementById('keystone-addr') as HTMLElement;
+        this.elements.inputSecret = this.shadowRoot!.getElementById('input-secret') as HTMLInputElement;
+        this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
+        this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
+
+        // ElementBase requires contentEl
+        this.elements.contentEl = this.elements.containerEl;
+
+        this.initHandlers();
+
+        if (this.ibGibAddr && !this.ibGib) {
+            await this.loadIbGib();
+        }
+        await this.renderUI();
+    }
+
+    override async disconnected(): Promise<void> {
+        // cleanup if needed
+    }
+
+    private initHandlers() {
+        this.elements!.btnGenerateEl.addEventListener('click', () => this.handleGenerate());
+    }
+
+    /**
+     * Triggered by the "Generate" button.
+     * Orchestrates: Secret -> Local Genesis -> Graph Collection -> Server Sync.
+     */
+    protected async handleGenerate() {
+        const lc = `${this.lc}[${this.handleGenerate.name}]`;
+        try {
+            console.log(`${lc} [NAG][ibgib-paradigm] starting genesis orchestration...`);
+            this.setLoading(true);
+            this.setStatus("Initializing genesis...", "info");
+
+            devLog('Starting local genesis orchestration...');
+            const masterSecret = this.elements!.inputSecret.value;
+            if (!masterSecret) {
+                this.setStatus("Please enter a master secret.", "error");
+                devLog('✗ Please enter a master secret.');
+                return;
+            }
+
+            // 1. Prepare Keystone Configs (Standard Phase 1 config)
+            const configs: KeystonePoolConfig[] = [
+                {
+                    id: 'primary',
+                    type: KeystoneChallengeType.hash_reveal_v1,
+                    salt: 'primary_pool_salt',
+                    algo: HashAlgorithm.sha_256,
+                    rounds: 1,
+                    behavior: {
+                        size: 3,
+                        replenish: KeystoneReplenishStrategy.topUp,
+                        selectSequentially: 1,
+                        selectRandomly: 0,
+                        targetBindingChars: 0,
+                    },
+                    allowedVerbs: [], // General purpose
+                }
+            ];
+
+            // 2. Get local services
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (!space) { throw new Error("No default space found in metaspace."); }
+
+            // 3. Perform Genesis (Local)
+            const keystoneService = new KeystoneService_V1();
+            const keystoneIbGib = await keystoneService.genesis({
+                masterSecret,
+                configs,
+                metaspace,
+                space,
+                frameDetails: { client: 'space-gib-web', timestamp: Date.now() }
+            });
+
+            const addr = getIbGibAddr({ ibGib: keystoneIbGib });
+            console.log(`${lc} [NAG][ibgib-paradigm] local genesis complete: ${addr}`);
+            this.setStatus("Local genesis complete. Syncing to server...", "info");
+            devLog(`✓ Local genesis complete: ${addr}`);
+            
+            // Expose for dev tools
+            (window as any).dev_domainI = keystoneIbGib;
+            (window as any).dev_domainIMasterSecret = masterSecret;
+
+            // 4. Post to Server
+            devLog(`Posting genesis keystone to server...`);
+            const resSync = await spaceGibApiBridge.postGenesisKeystone(keystoneIbGib);
+            if (!resSync.success) {
+                this.setStatus(`Sync failed: ${resSync.message}`, "error");
+                devLog(`✗ Server rejected genesis keystone: ${resSync.message}`);
+                return;
+            }
+
+            // 5. Success
+            this.elements!.keystoneAddrEl.textContent = addr;
+            this.elements!.statusArea.classList.remove('hidden');
+            this.setStatus("Keystone successfully created and synced!", "success");
+            devLog(`✓ Keystone successfully created and synced!`);
+
+        } catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`);
+            this.setStatus(`Error: ${emsg}`, "error");
+            devLog(`✗ Error: ${emsg}`);
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    private setLoading(loading: boolean) {
+        this.elements!.btnGenerateEl.disabled = loading;
+        this.elements!.btnGenerateEl.textContent = loading ? "Generating..." : "Generate Identity Keystone";
+    }
+
+    private setStatus(msg: string, type: 'info' | 'success' | 'error') {
+        this.elements!.statusText.textContent = msg;
+        this.elements!.statusText.className = `status-msg ${type}`;
+    }
+
+    protected override async renderUI(): Promise<void> {
+        // No complex rendering needed for this simple creator component yet
+    }
+
+    override async handleContextUpdated(): Promise<void> {
+        await this.renderUI();
+    }
+}