@ibgib/space-gib 0.0.34 → 0.0.35

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.mts

@@ -1,25 +1,34 @@
 import thisCss from "./cosmos-navigator.css";
 import thisHtml from "./cosmos-navigator.html";
 
-import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { extractErrorMsg } 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 { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
-import {
-    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
-} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { getSpaceIdFromIb } from "@ibgib/core-gib/dist/witness/space/metaspace/metaspace-innerspace/metaspace-innerspace-helper.mjs";
+import { createCosmosIbGib, addGalaxyToCosmos } from "@ibgib/core-gib/dist/cosmology/cosmos/cosmos-helpers.mjs";
+import { getSpaceQualifiedIbGibAddr, getIbGibFromSpace } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { CosmosIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/cosmos/cosmos-types.mjs";
+import { GalaxyPresetType } from "@ibgib/core-gib/dist/cosmology/galaxy/galaxy-configs.mjs";
+import { createGalaxyIbGib } from "@ibgib/core-gib/dist/cosmology/galaxy/galaxy-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 "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
-import { seedInMemoryCosmosWorkspace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+import { promptForText } from "@ibgib/web-gib/dist/helpers.web.mjs";
+
+import { getPlaygroundMetaspaceAndSpace, seedInMemoryCosmosWorkspace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+import { executeVcsInit } from "@ibgib/core-gib/dist/cosmology/branching/commands/core-init-cmd.mjs";
+import { GalaxyIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/galaxy/galaxy-types.mjs";
+import { getSpaceGibRouterSvc } from "../../router/index.mjs";
 
 export const COSMOS_NAVIGATOR_COMPONENT_NAME = 'space-gib-cosmos-navigator';
 
 export interface AttachedSpace {
     id: string;
-    type: 'code' | 'text';
+    type: GalaxyPresetType | 'code' | 'text';
     name: string;
     shortLabel: string;
     icon: string;
@@ -28,6 +37,7 @@ export interface AttachedSpace {
 export interface CosmosInfo {
     id: string;
     name: string;
+    ibGibAddr?: IbGibAddr;
     spaces: AttachedSpace[];
     createdAt: number;
     isTemporary?: boolean;
@@ -89,8 +99,8 @@ export interface CosmosNavigatorElements extends ElementsBase {
     activeCosmosTitleCaptionEl: HTMLSpanElement;
     activeCosmosTempBadgeEl?: HTMLSpanElement;
     superspaceSatellitesEl: HTMLDivElement;
-    btnSatCodeEl: HTMLButtonElement;
-    btnSatTextEl: HTMLButtonElement;
+    btnSatCodeEl?: HTMLButtonElement;
+    btnSatTextEl?: HTMLButtonElement;
     nodeAgentWrapperEl: HTMLDivElement;
     btnNodeAgentEl: HTMLButtonElement;
 }
@@ -119,6 +129,8 @@ export class CosmosNavigatorComponentInstance
     private isSpaceLaunching: boolean = false;
 
     // Canvas & Starfield State
+    public hasBigBangExploded: boolean = false;
+    private starfieldFadeAlpha: number = 0;
     private ctx: CanvasRenderingContext2D | null = null;
     private animFrameId: number | null = null;
     private resizeObserver: ResizeObserver | null = null;
@@ -212,6 +224,8 @@ export class CosmosNavigatorComponentInstance
         this.cosmoses = [];
         this.activeCosmosId = null;
         this.zoomState = 'polycosmos';
+        this.hasBigBangExploded = false;
+        this.starfieldFadeAlpha = 0;
 
         // Clear any stale keys from earlier runs so reload presents a clean slate
         try {
@@ -319,22 +333,27 @@ export class CosmosNavigatorComponentInstance
 
         ctx.clearRect(0, 0, w, h);
 
-        // 1. Draw starfield
-        for (let i = 0; i < this.stars.length; i++) {
-            const s = this.stars[i];
-            s.phase += s.speed;
-            const currentAlpha = Math.max(0.1, Math.min(1.0, s.alpha + Math.sin(s.phase) * 0.35));
-
-            ctx.fillStyle = `rgba(255, 255, 255, ${currentAlpha})`;
-            ctx.beginPath();
-            ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
-            ctx.fill();
-
-            // Subtle drift
-            s.y -= 0.08;
-            if (s.y < 0) {
-                s.y = h;
-                s.x = Math.random() * w;
+        // 1. Draw starfield (only after Big Bang explosion)
+        if (this.hasBigBangExploded) {
+            if (this.starfieldFadeAlpha < 1.0) {
+                this.starfieldFadeAlpha = Math.min(1.0, this.starfieldFadeAlpha + 0.02);
+            }
+            for (let i = 0; i < this.stars.length; i++) {
+                const s = this.stars[i];
+                s.phase += s.speed;
+                const currentAlpha = Math.max(0.1, Math.min(1.0, s.alpha + Math.sin(s.phase) * 0.35)) * this.starfieldFadeAlpha;
+
+                ctx.fillStyle = `rgba(255, 255, 255, ${currentAlpha})`;
+                ctx.beginPath();
+                ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Subtle drift
+                s.y -= 0.08;
+                if (s.y < 0) {
+                    s.y = h;
+                    s.x = Math.random() * w;
+                }
             }
         }
 
@@ -380,6 +399,7 @@ export class CosmosNavigatorComponentInstance
     }
 
     public triggerBigBangExplosion(): void {
+        this.hasBigBangExploded = true;
         if (!this.el.canvasEl) return;
         const w = this.el.canvasEl.width;
         const h = this.el.canvasEl.height;
@@ -472,38 +492,17 @@ export class CosmosNavigatorComponentInstance
                         this.selectCosmos(seeded.id);
                     } catch (seedErr) {
                         console.error(`${this.lc} Failed to seed in-memory cosmos: ${extractErrorMsg(seedErr)}`);
-                        const fallback = this.createCosmos('welcome-cosmos');
-                        this.selectCosmos(fallback.id);
+                        throw seedErr;
                     }
                 } else {
                     const nextIndex = this.cosmoses.length + 1;
-                    const newCosmos = this.createCosmos(`cosmos-${nextIndex}`);
+                    const newCosmos = await this.createCosmos(`cosmos-${nextIndex}`);
                     this.selectCosmos(newCosmos.id);
                 }
-
             });
         });
 
-        // Satellites Click (Code Space & Text Space)
-        this.el.btnSatCodeEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.handleSpaceClick('code');
-        });
-
-        this.el.btnSatTextEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.handleSpaceClick('text');
-        });
 
-        // Hover over satellites pauses the orbit & cosmos galaxy spin (drifting buttons keep moving)
-        [this.el.btnSatCodeEl, this.el.btnSatTextEl].forEach(btn => {
-            btn?.addEventListener('mouseenter', () => {
-                this.el.activeCosmosStageEl?.classList.add('satellites-hovered');
-            });
-            btn?.addEventListener('mouseleave', () => {
-                this.el.activeCosmosStageEl?.classList.remove('satellites-hovered');
-            });
-        });
 
         // Pitch Node Click (💰)
         this.el.btnNodePitchEl?.addEventListener('click', (e) => {
@@ -522,6 +521,94 @@ export class CosmosNavigatorComponentInstance
             e.stopPropagation();
             this.handleAgentClick();
         });
+
+        // Code Galaxy Revolving Satellite Button Click (</>)
+        this.el.btnSatCodeEl?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            await this.handleSatCodeClick();
+        });
+
+        // Notes Galaxy Revolving Satellite Button Click (📝)
+        this.el.btnSatTextEl?.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            await this.handleSatTextClick();
+        });
+
+        // Hover pause on satellites
+        [this.el.btnSatCodeEl, this.el.btnSatTextEl].forEach(btn => {
+            btn?.addEventListener('mouseenter', () => {
+                this.el.activeCosmosStageEl?.classList.add('satellites-hovered');
+            });
+            btn?.addEventListener('mouseleave', () => {
+                this.el.activeCosmosStageEl?.classList.remove('satellites-hovered');
+            });
+        });
+    }
+
+    public async handleSatCodeClick(): Promise<void> {
+        const activeCosmos = this.getActiveCosmos();
+        if (!activeCosmos) return;
+
+        const count = activeCosmos.spaces.filter(s => s.type === 'code').length;
+        const defaultName = count === 0 ? 'code-1' : `code-${count + 1}`;
+        const galaxyName = await promptForText({
+            title: 'Create Code Galaxy',
+            msg: `Name of the new Code Galaxy for [${activeCosmos.name}]:`,
+            defaultValue: defaultName,
+            cancelable: true,
+        });
+
+        if (!galaxyName) return;
+
+        const sourceBtn = this.el.btnSatCodeEl || this.el.btnNodeSuperspaceEl;
+        const sourceWrapper = (sourceBtn?.closest('.satellite-wrapper') as HTMLElement) || sourceBtn;
+
+        let space = activeCosmos.spaces.find(s => s.id === galaxyName || s.name === galaxyName);
+        if (!space) {
+            space = await this.createAndAttachGalaxy({
+                cosmosId: activeCosmos.id,
+                galaxyName,
+                discriminator: GalaxyPresetType.code,
+                skipEvent: true,
+            });
+        }
+
+        if (space) {
+            this.handleSpaceClick(space, sourceBtn, sourceWrapper);
+        }
+    }
+
+    public async handleSatTextClick(): Promise<void> {
+        const activeCosmos = this.getActiveCosmos();
+        if (!activeCosmos) return;
+
+        const count = activeCosmos.spaces.filter(s => s.type === 'text' || s.type === GalaxyPresetType.notes).length;
+        const defaultName = count === 0 ? 'notes-1' : `notes-${count + 1}`;
+        const galaxyName = await promptForText({
+            title: 'Create Notes Galaxy',
+            msg: `Name of the new Notes Galaxy for [${activeCosmos.name}]:`,
+            defaultValue: defaultName,
+            cancelable: true,
+        });
+
+        if (!galaxyName) return;
+
+        const sourceBtn = this.el.btnSatTextEl || this.el.btnNodeSuperspaceEl;
+        const sourceWrapper = (sourceBtn?.closest('.satellite-wrapper') as HTMLElement) || sourceBtn;
+
+        let space = activeCosmos.spaces.find(s => s.id === galaxyName || s.name === galaxyName);
+        if (!space) {
+            space = await this.createAndAttachGalaxy({
+                cosmosId: activeCosmos.id,
+                galaxyName,
+                discriminator: GalaxyPresetType.notes,
+                skipEvent: true,
+            });
+        }
+
+        if (space) {
+            this.handleSpaceClick(space, sourceBtn, sourceWrapper);
+        }
     }
 
     private launchProjectile({
@@ -818,7 +905,11 @@ export class CosmosNavigatorComponentInstance
         }
     }
 
-    public handleSpaceClick(type: 'code' | 'text'): AttachedSpace | null {
+    public handleSpaceClick(
+        typeOrSpace: AttachedSpace | 'code' | 'text',
+        sourceBtn?: HTMLElement,
+        sourceWrapper?: HTMLElement
+    ): AttachedSpace | null {
         if (!this.activeCosmosId) return null;
         const activeCosmos = this.getActiveCosmos();
         if (!activeCosmos) { return null; }
@@ -828,9 +919,12 @@ export class CosmosNavigatorComponentInstance
         this.initialOnboardingDone = true;
         this.isSpaceLaunching = true;
 
+        const type = typeof typeOrSpace === 'string' ? typeOrSpace : typeOrSpace.type;
+        const space = typeof typeOrSpace === 'object' ? typeOrSpace : undefined;
+
         const count = activeCosmos.spaces.filter(s => s.type === type).length;
         const existingSpacesCount = activeCosmos.spaces.length;
-        const newSpace: AttachedSpace = {
+        const newSpace: AttachedSpace = space || {
             id: `${type}-space-${count + 1}-${Date.now()}`,
             type,
             name: type === 'code' ? `Code Space ${count + 1}` : `Text Space ${count + 1}`,
@@ -838,11 +932,13 @@ export class CosmosNavigatorComponentInstance
             icon: type === 'code' ? '</>' : '📝',
         };
 
-        activeCosmos.spaces.push(newSpace);
-        this.saveState();
+        if (!activeCosmos.spaces.some(s => s.id === newSpace.id)) {
+            activeCosmos.spaces.push(newSpace);
+            this.saveState();
+        }
 
-        const sourceBtnEl = type === 'code' ? this.el.btnSatCodeEl : this.el.btnSatTextEl;
-        const sourceWrapperEl = (sourceBtnEl?.closest('.satellite-wrapper') as HTMLElement) || sourceBtnEl;
+        const sourceBtnEl = sourceBtn || (this.el.superspaceSatellitesEl?.querySelector('.satellite-node-btn') as HTMLElement) || this.el.btnNodeSuperspaceEl;
+        const sourceWrapperEl = sourceWrapper || (sourceBtnEl?.closest('.satellite-wrapper') as HTMLElement) || sourceBtnEl;
 
         const headerH = document.getElementById('main-header')?.getBoundingClientRect().height || 60;
         const targetTop = headerH + 128 + (existingSpacesCount * 50);
@@ -878,8 +974,8 @@ export class CosmosNavigatorComponentInstance
                 sourceWrapperEl,
                 sourceBtnEl,
                 fallbackTarget,
-                emoji: type === 'code' ? '</>' : '📝',
-                projectileType: type,
+                emoji: newSpace.icon || (type === 'code' ? '</>' : '📝'),
+                projectileType: type === 'code' ? 'code' : 'text',
                 duration: 1400,
                 onDocked: () => {
                     this.isSpaceLaunching = false;
@@ -900,21 +996,134 @@ export class CosmosNavigatorComponentInstance
         return newSpace;
     }
 
-    public createCosmos(name?: string, isTemporary?: boolean): CosmosInfo {
-        const id = `cosmos-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+    public async createAndAttachGalaxy({
+        cosmosId,
+        galaxyName,
+        discriminator,
+        skipEvent = false,
+    }: {
+        cosmosId?: string;
+        galaxyName: string;
+        discriminator?: GalaxyPresetType | 'code' | 'notes';
+        skipEvent?: boolean;
+    }): Promise<AttachedSpace | undefined> {
+        const cosmos = cosmosId ? this.cosmoses.find(c => c.id === cosmosId) : this.getActiveCosmos();
+        if (!cosmos) return undefined;
+
+        try {
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            const spaceId = space?.ib ? getSpaceIdFromIb(space.ib) || 'temp_space' : 'temp_space';
+
+            // 1. Fetch Cosmos IbGib
+            let cosmosIbGib: CosmosIbGib_V1 | undefined;
+            if (cosmos.ibGibAddr) {
+                cosmosIbGib = await getIbGibFromSpace<CosmosIbGib_V1>({ addr: cosmos.ibGibAddr, space });
+            }
+            if (!cosmosIbGib) {
+                // Try by name in router cache
+                const router = getSpaceGibRouterSvc();
+                cosmosIbGib = router.cosmosManifestCache?.get(cosmos.name);
+            }
+            if (!cosmosIbGib) {
+                throw new Error(`cosmosIbGib not found for cosmos "${cosmos.name}" (addr: ${cosmos.ibGibAddr || 'none'}). (E: 661ab8c2b7b8800be247f588b17ee726)`);
+            }
+
+            // 2. Create Galaxy IbGib
+            let galaxyIbGib: GalaxyIbGib_V1;
+            const isCode = discriminator === GalaxyPresetType.code;
+            if (isCode) {
+                const initRes = await executeVcsInit({
+                    metaspace,
+                    localSpace: space,
+                    galaxyName,
+                    branchName: 'main',
+                });
+                galaxyIbGib = initRes.galaxyIbGib;
+            } else {
+                galaxyIbGib = await createGalaxyIbGib({
+                    galaxyName,
+                    discriminator: GalaxyPresetType.notes,
+                    space,
+                    metaspace,
+                });
+            }
+
+            // 3. Add galaxy to cosmos manifest
+            const sqGalaxyAddr = getSpaceQualifiedIbGibAddr({
+                spaceId,
+                ibGibAddr: getIbGibAddr({ ibGib: galaxyIbGib }),
+            });
+            cosmosIbGib = await addGalaxyToCosmos({
+                cosmosIbGib,
+                sqGalaxyAddr,
+                galaxyIbGib,
+                space,
+                metaspace,
+            });
+
+            // 4. Update cosmos ibGibAddr and router manifest cache
+            cosmos.ibGibAddr = getIbGibAddr({ ibGib: cosmosIbGib });
+            getSpaceGibRouterSvc().setCosmosManifest(cosmos.name, cosmosIbGib);
+
+            // 5. Update local cosmos state
+            const newSpace: AttachedSpace = {
+                id: galaxyName,
+                type: isCode ? GalaxyPresetType.code : GalaxyPresetType.notes,
+                name: galaxyName,
+                shortLabel: galaxyName,
+                icon: isCode ? '</>' : '📝',
+            };
+            if (!cosmos.spaces.some(s => s.id === galaxyName)) {
+                cosmos.spaces.push(newSpace);
+            }
+            this.saveState();
+
+            // 7. Dispatch space added event if not skipped (e.g. handleSpaceClick dispatches on projectile dock)
+            if (!skipEvent) {
+                this.dispatchEvent(new CustomEvent('space-gib-space-added', {
+                    detail: {
+                        cosmosId: cosmos.id,
+                        space: newSpace,
+                        cosmos,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+
+            return newSpace;
+        } catch (err) {
+            console.error(`${this.lc} Failed to create and attach galaxy: ${extractErrorMsg(err)}`);
+            throw err;
+        }
+    }
+
+    public async createCosmos(name?: string, isTemporary?: boolean): Promise<CosmosInfo> {
         const cosmosName = name || `cosmos-${this.cosmoses.length + 1}`;
         const hasIdentity = Boolean((globalThis as any).ibgib?.identity?.domainIdentity);
         const temp = isTemporary !== undefined ? isTemporary : !hasIdentity;
+
+        const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+        const cosmosIbGib = await createCosmosIbGib({
+            cosmosName,
+            description: `${cosmosName} Cosmos`,
+            space,
+            metaspace,
+        });
+        const ibGibAddr = getIbGibAddr({ ibGib: cosmosIbGib });
+        getSpaceGibRouterSvc().setCosmosManifest(cosmosName, cosmosIbGib);
+
         const newCosmos: CosmosInfo = {
-            id,
+            id: cosmosName,
             name: cosmosName,
+            ibGibAddr,
             isTemporary: temp,
             spaces: [],
             createdAt: Date.now(),
         };
 
         this.cosmoses.push(newCosmos);
-        this.activeCosmosId = id;
+        this.activeCosmosId = newCosmos.id;
         this.saveState();
         return newCosmos;
     }
@@ -928,11 +1137,11 @@ export class CosmosNavigatorComponentInstance
         this.setZoomState('cosmos', cosmos.id);
     }
 
-    public async ensureCosmos(cosmosId: string): Promise<CosmosInfo> {
-        let existing = this.cosmoses.find(c => c.id === cosmosId || c.name === cosmosId);
+    public async findCosmos(cosmosNameOrId: string): Promise<CosmosInfo | undefined> {
+        let existing = this.cosmoses.find(c => c.id === cosmosNameOrId || c.name === cosmosNameOrId);
         if (existing) { return existing; }
 
-        if (cosmosId === 'welcome-cosmos' || cosmosId === 'my-cosmos') {
+        if (cosmosNameOrId === 'welcome-cosmos') {
             const seeded = await seedInMemoryCosmosWorkspace();
             if (!this.cosmoses.some(c => c.id === seeded.id)) {
                 this.cosmoses.push(seeded);
@@ -940,7 +1149,26 @@ export class CosmosNavigatorComponentInstance
             return seeded;
         }
 
-        return this.createCosmos(cosmosId);
+        const router = getSpaceGibRouterSvc();
+        const cachedManifest = router.getCachedCosmosManifest(cosmosNameOrId);
+        if (cachedManifest) {
+            const ibGibAddr = getIbGibAddr({ ibGib: cachedManifest });
+            const restoredCosmos: CosmosInfo = {
+                id: cosmosNameOrId,
+                name: cosmosNameOrId,
+                ibGibAddr,
+                spaces: [],
+                createdAt: Date.now(),
+            };
+            this.cosmoses.push(restoredCosmos);
+            return restoredCosmos;
+        }
+
+        return undefined;
+    }
+
+    public async ensureCosmos(cosmosId: string): Promise<CosmosInfo | undefined> {
+        return this.findCosmos(cosmosId);
     }
 
     public setZoomState(state: 'polycosmos' | 'cosmos', cosmosId?: string): void {
@@ -971,6 +1199,11 @@ export class CosmosNavigatorComponentInstance
     }
 
     private renderCurrentState(): void {
+        if (this.zoomState === 'cosmos' || this.cosmoses.length > 0) {
+            this.hasBigBangExploded = true;
+            this.starfieldFadeAlpha = 1.0;
+        }
+
         if (this.zoomState === 'polycosmos') {
             this.clearAutoDockTimer();
             this.el.rootEl.classList.remove('zoom-cosmos');