@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/shell/space-gib-shell-service.mts

@@ -1,32 +1,96 @@
 import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
 import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
-import { IbGibDynamicComponentMeta } from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
-
-import { APP_CONFIG } from "../../constants.mjs";
-import { getIbGibGlobalThis_SpaceGib } from "../../helpers.web.mjs";
-import {
-    ID_APP_ROOT, ID_HEADER_PANEL, ID_LEFT_PANEL, ID_CENTER_PANEL,
-    ID_RIGHT_PANEL, ID_FOOTER_PANEL, ID_LEFT_RESIZER, ID_RIGHT_RESIZER,
-    ID_FOOTER_RESIZER, ID_BTN_LEFT_PANEL_TOGGLE, ID_BTN_RIGHT_PANEL_TOGGLE,
-    ID_BTN_CREATE_KEYSTONE, ID_CENTER_PANEL_CONTENT
-} from "./space-gib-shell-constants.mjs";
 import {
     EVENT_IBGIB_SHELL_READY, EVENT_IBGIB_UI_BUSY, EVENT_IBGIB_UI_MESSAGE,
-    UI_ACTION_SHOW_IDENTITY_MANAGER, UI_ACTION_SHOW_KEYSTONE_CREATOR,
-    UI_ACTION_SHOW_ADD_DEVICE, UI_ACTION_SHOW_PRIVACY_POLICY
+    EVENT_IBGIB_IDENTITY_CHANGED, UI_ACTION_SHOW_IDENTITY_MANAGER,
+    UI_ACTION_SHOW_KEYSTONE_CREATOR, UI_ACTION_SHOW_ADD_DEVICE,
+    UI_ACTION_SHOW_PRIVACY_POLICY
 } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
 import { showFullscreenDialog, FullscreenDialogController } from "@ibgib/web-gib/dist/ui/ui-helpers.mjs";
-import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { getKeystoneSyncService } from "@ibgib/web-gib/dist/identity/keystone-sync-service.mjs";
-import { PanelState } from "./space-gib-shell-types.mjs";
 import { registerStandardIdentityComponents } from "@ibgib/web-gib/dist/ui/component/identity/index.mjs";
 import { registerPrivacyPolicyComponent } from "@ibgib/web-gib/dist/ui/component/privacy-policy/index.mjs";
+import { registerAdminReviewComponent } from "@ibgib/web-gib/dist/ui/component/admin/admin-review/index.mjs";
+
+import { APP_CONFIG } from "../../constants.mjs";
+import { getIbGibGlobalThis_SpaceGib } from "../../helpers.web.mjs";
+import {
+    ID_HEADER_PANEL, ID_LEFT_PANEL, ID_CENTER_PANEL, ID_RIGHT_PANEL,
+    ID_FOOTER_PANEL, ID_LEFT_RESIZER, ID_RIGHT_RESIZER, ID_FOOTER_RESIZER,
+    ID_BTN_LEFT_PANEL_TOGGLE, ID_BTN_RIGHT_PANEL_TOGGLE, ID_BTN_CREATE_KEYSTONE,
+    ID_CENTER_PANEL_CONTENT,
+} from "./space-gib-shell-constants.mjs";
+import { PanelState } from "./space-gib-shell-types.mjs";
+import {
+    registerCosmosNavigatorComponent, COSMOS_NAVIGATOR_COMPONENT_NAME,
+    CosmosNavigatorComponentInstance, CosmosInfo,
+} from "../component/cosmos-navigator/index.mjs";
+import {
+    registerFileExplorerComponent, FILE_EXPLORER_COMPONENT_NAME,
+    FileExplorerComponentInstance,
+} from "../component/file-explorer/index.mjs";
+import {
+    registerTimelineComponent, TIMELINE_COMPONENT_NAME,
+    TimelineComponentInstance, TimelineItem,
+} from "../component/timeline/index.mjs";
+import {
+    registerTimelineItemDetailsComponent, TIMELINE_ITEM_DETAILS_COMPONENT_NAME,
+    TimelineItemDetailsComponentInstance,
+} from "../component/timeline-item-details/index.mjs";
+import {
+    registerChatViewComponent, ChatViewComponentInstance,
+} from "../component/chat-view/index.mjs";
+import {
+    registerNestedChatComponent, NESTED_CHAT_COMPONENT_NAME,
+    NestedChatComponentInstance,
+} from "../component/nested-chat/index.mjs";
+import {
+    registerPitchComponent, PITCH_COMPONENT_NAME, PitchComponentInstance,
+} from "../component/pitch/index.mjs";
+import {
+    registerCodeEditorComponent, CODE_EDITOR_COMPONENT_NAME,
+    CodeEditorComponentInstance,
+} from "../component/code-editor/index.mjs";
+import {
+    registerCloneComponent, CLONE_COMPONENT_NAME, CloneComponentInstance,
+    CloneModalOptions, EVENT_SPACE_GIB_CLONE_CLOSED,
+} from "../component/clone/index.mjs";
+import {
+    registerNotesExplorerComponent, NOTES_EXPLORER_COMPONENT_NAME,
+    NotesExplorerComponentInstance,
+} from "../component/notes-explorer/index.mjs";
+import {
+    registerNotesInspectorComponent, NOTES_INSPECTOR_COMPONENT_NAME,
+    NotesInspectorComponentInstance,
+} from "../component/notes-inspector/index.mjs";
+import {
+    getSpaceGibRouterSvc,
+    SpaceGibRouteInfo,
+    SpaceGibTenant,
+    RawAddrRouteInfo,
+    RawTjpRouteInfo,
+} from "../router/index.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.mjs";
+import { prewarmPlaygroundMetaspace } from "../../cosmos/seed-cosmos-workspace.mjs";
+
 
 export class SpaceGibShellService {
     private lc: string = `[SpaceGibShellService]`;
 
     public initialized: Promise<void>;
+    private isApplyingRoute: boolean = false;
+    private cosmosNavigatorInstance?: CosmosNavigatorComponentInstance;
+    private fileExplorerInstance?: FileExplorerComponentInstance;
+    private timelineInstance?: TimelineComponentInstance;
+    private timelineItemDetailsInstance?: TimelineItemDetailsComponentInstance;
+    private chatViewInstance?: ChatViewComponentInstance;
+    private nestedChatInstance?: NestedChatComponentInstance;
+    private pitchInstance?: PitchComponentInstance;
+    private codeEditorInstance?: CodeEditorComponentInstance;
+    private notesExplorerInstance?: NotesExplorerComponentInstance;
+    private notesInspectorInstance?: NotesInspectorComponentInstance;
 
     // Panel States
     private leftPanelState: PanelState = 'collapsed';
@@ -37,6 +101,9 @@ export class SpaceGibShellService {
     private isResizingRight = false;
     private isResizingFooter = false;
 
+    // Playground Banner State
+    private hasBigBangExploded = false;
+
     constructor() {
         this.initialized = this.initialize();
     }
@@ -45,6 +112,12 @@ export class SpaceGibShellService {
         this.initElements();
         this.initEventHandlers();
         await this.registerComponents();
+        await this.initCosmosNavigator();
+        await this.initFileExplorer();
+        await this.initTimeline();
+        await this.initChatView();
+        await this.initCodeEditor();
+        await this.initPitch();
     }
 
     private initElements(): void {
@@ -60,6 +133,14 @@ export class SpaceGibShellService {
     private initEventHandlers(): void {
         const lc = `${this.lc}[${this.initEventHandlers.name}]`;
         try {
+            // Playground Mode Banner actions
+            const btnBannerCreate = document.getElementById('btn-banner-create-identity');
+            if (btnBannerCreate) {
+                btnBannerCreate.addEventListener('click', () => {
+                    this.showKeystoneCreator();
+                });
+            }
+
             // Left Panel Toggle
             const btnLeft = document.getElementById(ID_BTN_LEFT_PANEL_TOGGLE);
             if (btnLeft) {
@@ -123,6 +204,8 @@ export class SpaceGibShellService {
                     this.showAddDevice();
                 } else if (action === UI_ACTION_SHOW_PRIVACY_POLICY) {
                     this.showPrivacyPolicy();
+                } else if (action === 'show-admin-review' || action === 'admin-review') {
+                    this.showAdminReview();
                 }
             });
 
@@ -162,11 +245,47 @@ export class SpaceGibShellService {
                 }
             });
 
+            // Mode Switcher (Spaces vs Repositories)
+            this.initModeSwitcher();
+
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
         }
     }
 
+    private currentMode: 'spaces' | 'repos' | 'notes' = 'spaces';
+
+    private setMode(mode: 'spaces' | 'repos' | 'notes', notesTitle?: string): void {
+        this.currentMode = mode;
+        if (mode === 'repos') {
+            this.showCode();
+        } else if (mode === 'notes') {
+            this.showNotes(notesTitle);
+        } else {
+            this.showCosmos();
+        }
+    }
+
+    private initModeSwitcher(): void {
+        const lc = `${this.lc}[${this.initModeSwitcher.name}]`;
+        try {
+            // URL param mode check (spaces by default, in-memory)
+            let initialMode: 'spaces' | 'repos' = 'spaces';
+            try {
+                const urlParams = new URLSearchParams(window.location.search);
+                const urlMode = urlParams.get('mode');
+                if (urlMode === 'repos') {
+                    initialMode = 'repos';
+                }
+            } catch {
+                // ignore
+            }
+            this.setMode(initialMode);
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)} (E: c8e054e0639221c7b673949d9b2a2d26)`);
+        }
+    }
+
     public async showIdentityManager() {
         const lc = `${this.lc}[${this.showIdentityManager.name}]`;
         try {
@@ -262,6 +381,37 @@ export class SpaceGibShellService {
         }
     }
 
+    public async showAdminReview(tjpGib?: string) {
+        const lc = `${this.lc}[${this.showAdminReview.name}]`;
+        try {
+            const componentSvc = await getComponentSvc();
+
+            // create the component
+            const adminReviewComponent = await componentSvc.getComponentInstance({
+                path: 'ibgib-admin-review',
+                ibGibAddr: ROOT_ADDR, // Virtual address for initial render
+                useRegExpPrefilter: true,
+            });
+            if (!adminReviewComponent) { throw new Error(`(UNEXPECTED) adminReviewComponent falsy? (E: 8392a019bb2819827364810293847199)`); }
+
+            if (tjpGib && typeof (adminReviewComponent as any).setTjpGib === 'function') {
+                (adminReviewComponent as any).setTjpGib(tjpGib);
+            }
+
+            // get a ref to the parent container
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) { throw new Error(`(UNEXPECTED) centerPanel falsy? (E: 9392a019bb2819827364810293847199)`); }
+
+            // inject via componentSvc
+            await componentSvc.inject({
+                parentEl: centerPanel,
+                componentToInject: adminReviewComponent
+            });
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
     private toggleLeftPanel() {
         this.leftPanelState = this.leftPanelState === 'expanded' ? 'collapsed' : 'expanded';
         const panel = document.getElementById(ID_LEFT_PANEL);
@@ -326,40 +476,1587 @@ export class SpaceGibShellService {
         try {
             await registerStandardIdentityComponents();
             await registerPrivacyPolicyComponent();
+            await registerAdminReviewComponent();
+            await registerCosmosNavigatorComponent();
+            await registerFileExplorerComponent();
+            await registerTimelineComponent();
+            await registerTimelineItemDetailsComponent();
+            await registerChatViewComponent();
+            await registerNestedChatComponent();
+            await registerPitchComponent();
+            await registerCodeEditorComponent();
+            await registerCloneComponent();
+            await registerNotesExplorerComponent();
+            await registerNotesInspectorComponent();
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
         }
     }
 
-    public async onEngineReady(): Promise<void> {
-        const lc = `${this.lc}[${this.onEngineReady.name}]`;
+    private async initCosmosNavigator(): Promise<void> {
+        const lc = `${this.lc}[${this.initCosmosNavigator.name}]`;
         try {
-            await this.initialized;
-            console.log(`${lc} SpaceGib Shell Service is ready.`);
+            const componentSvc = await getComponentSvc();
+            this.cosmosNavigatorInstance = await componentSvc.getComponentInstance({
+                path: COSMOS_NAVIGATOR_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as CosmosNavigatorComponentInstance;
 
-            // Ensure the UI removes the loading text
-            const statusSection = document.getElementById('status-section');
-            if (statusSection) {
-                statusSection.style.display = 'none';
+            if (!this.cosmosNavigatorInstance) {
+                throw new Error(`Failed to instantiate ${COSMOS_NAVIGATOR_COMPONENT_NAME}`);
+            }
+
+            this.bindCosmosNavigatorEvents();
+            this.bindCosmosChromeEvents();
+
+            // Initial state sync
+            const activeCosmos = this.cosmosNavigatorInstance.getActiveCosmos();
+            if (activeCosmos) {
+                this.updateActiveCosmosDisplay(activeCosmos);
+            }
+            const allCosmoses = this.cosmosNavigatorInstance.getCosmoses();
+            if (allCosmoses.length > 0) {
+                this.revealChrome();
+            }
+            this.updatePolycosmosList(allCosmoses, activeCosmos?.id || null);
+
+            // Inject directly into center panel on startup
+            await this.showCosmos();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public async showCosmos(): Promise<void> {
+        const lc = `${this.lc}[${this.showCosmos.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) {
+                console.warn(`${lc} ${ID_CENTER_PANEL_CONTENT} element not found.`);
+                return;
+            }
+
+            if (!this.cosmosNavigatorInstance) {
+                const componentSvc = await getComponentSvc();
+                this.cosmosNavigatorInstance = await componentSvc.getComponentInstance({
+                    path: COSMOS_NAVIGATOR_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as CosmosNavigatorComponentInstance;
+            }
+
+            if (this.cosmosNavigatorInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.cosmosNavigatorInstance,
+                });
+                this.cosmosNavigatorInstance.ensureStars();
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private async initFileExplorer(): Promise<void> {
+        const lc = `${this.lc}[${this.initFileExplorer.name}]`;
+        try {
+            const container = document.getElementById('code-file-explorer-container');
+            if (!container) {
+                console.warn(`${lc} code-file-explorer-container element not found.`);
+                return;
             }
 
-            // Mount identity-header component in the header bar
             const componentSvc = await getComponentSvc();
-            const identityHeader = await componentSvc.getComponentInstance({
-                path: 'ibgib-identity-header',
+            this.fileExplorerInstance = await componentSvc.getComponentInstance({
+                path: FILE_EXPLORER_COMPONENT_NAME,
                 ibGibAddr: ROOT_ADDR,
                 useRegExpPrefilter: true,
+            }) as FileExplorerComponentInstance;
+
+            if (!this.fileExplorerInstance) {
+                throw new Error(`Failed to instantiate ${FILE_EXPLORER_COMPONENT_NAME}`);
+            }
+
+            await componentSvc.inject({
+                parentEl: container,
+                componentToInject: this.fileExplorerInstance,
             });
 
-            const headerContainer = document.getElementById('identity-header-container');
-            if (headerContainer && identityHeader) {
-                headerContainer.innerHTML = '';
-                headerContainer.appendChild(identityHeader as any);
+            this.bindFileExplorerEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindFileExplorerEvents(): void {
+        window.addEventListener('space-gib-file-selected', (e: any) => {
+            const { branch, path, filename } = e.detail || {};
+            console.log(`${this.lc} File selected: ${path || filename} on worktree branch ${branch}`);
+            const fullFile = path || filename || 'src/index.ts';
+            const branchName = branch || 'main';
+            const tipAddr = '7f8a1b2';
+            this.chatViewInstance?.setTargetFile(fullFile, `${branchName} @ ${tipAddr}`);
+            this.nestedChatInstance?.activateIbGib({ addr: `file ${fullFile}^${tipAddr}` });
+
+            let mockContent: string | undefined = undefined;
+            if (fullFile === 'src/helper.ts') {
+                mockContent = `/**\n * @module my-app/helper\n * Utility functions for space-gib in-memory VCS.\n */\n\nexport function add(a: number, b: number): number {\n    return a + b;\n}\n\nexport function multiply(a: number, b: number): number {\n    return a * b;\n}\n`;
+            } else if (fullFile === 'README.md') {
+                mockContent = `# my-app\n\nDecentralized version-controlled application running on **space-gib**.\n\n- Zero SaaS lock-in\n- Inverted soft rel8ns for living companion discussions\n- Merkle DAG branch worktrees\n`;
+            } else if (fullFile === 'tsconfig.json') {
+                mockContent = `{\n  "compilerOptions": {\n    "target": "ES2022",\n    "module": "NodeNext",\n    "strict": true,\n    "esModuleInterop": true\n  }\n}\n`;
             }
 
-            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_SHELL_READY, { detail: { timestamp: Date.now() } }));
+            this.showCode(fullFile, branchName).then(() => {
+                this.codeEditorInstance?.loadFile({
+                    filepath: fullFile,
+                    branch: branchName,
+                    tipAddr,
+                    content: mockContent,
+                });
+            });
+
+            // Reveal discussions in right panel
+            this.expandRightPanel();
+
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                const tenant = this.getActiveTenant();
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'code-galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxyId: 'code-1',
+                    branch: branchName,
+                    filePath: fullFile,
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        });
+
+        window.addEventListener('space-gib-new-file-requested', (e: any) => {
+            const { branch } = e.detail || {};
+            const filename = prompt(`Create new file on branch [${branch || 'main'}]:`, 'untitled.ts');
+            if (filename) {
+                console.log(`${this.lc} New file requested: ${filename} on branch ${branch}`);
+            }
+        });
+
+        window.addEventListener('space-gib-new-folder-requested', (e: any) => {
+            const { branch } = e.detail || {};
+            const foldername = prompt(`Create new folder on branch [${branch || 'main'}]:`, 'components');
+            if (foldername) {
+                console.log(`${this.lc} New folder requested: ${foldername} on branch ${branch}`);
+            }
+        });
+    }
+
+    private async initTimeline(): Promise<void> {
+        const lc = `${this.lc}[${this.initTimeline.name}]`;
+        try {
+            const container = document.getElementById('code-timeline-container');
+            if (!container) {
+                console.warn(`${lc} code-timeline-container element not found.`);
+                return;
+            }
+
+            const componentSvc = await getComponentSvc();
+            this.timelineInstance = await componentSvc.getComponentInstance({
+                path: TIMELINE_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as TimelineComponentInstance;
+
+            if (!this.timelineInstance) {
+                throw new Error(`Failed to instantiate ${TIMELINE_COMPONENT_NAME}`);
+            }
+
+            await componentSvc.inject({
+                parentEl: container,
+                componentToInject: this.timelineInstance,
+            });
+
+            this.bindTimelineEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindTimelineEvents(): void {
+        window.addEventListener('space-gib-timeline-item-selected', (e: any) => {
+            const item: TimelineItem = e.detail?.item;
+            if (item) {
+                console.log(`${this.lc} Timeline snapshot selected: ${item.shortHash} - ${item.message}`);
+                this.showTimelineItemDetails(item);
+            }
+        });
+
+        window.addEventListener('space-gib-timeline-details-closed', () => {
+            console.log(`${this.lc} Timeline details closed. Returning to previous view.`);
+            const currentRoute = getSpaceGibRouterSvc().getCurrentRoute();
+            if (currentRoute && (currentRoute.kind === 'raw-addr' || currentRoute.kind === 'raw-tjp')) {
+                const tenant = this.getActiveTenant() || currentRoute.tenant;
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'cosmos',
+                    cosmos: currentRoute.cosmos,
+                    ...(tenant ? { tenant } : {}),
+                });
+            } else {
+                this.showCode();
+            }
+        });
+    }
+
+    private async initChatView(): Promise<void> {
+        const lc = `${this.lc}[${this.initChatView.name}]`;
+        try {
+            const container = document.getElementById('code-chat-view-container');
+            if (!container) {
+                console.warn(`${lc} code-chat-view-container element not found.`);
+                return;
+            }
+
+            const componentSvc = await getComponentSvc();
+            this.nestedChatInstance = await componentSvc.getComponentInstance({
+                path: NESTED_CHAT_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as NestedChatComponentInstance;
+
+            if (!this.nestedChatInstance) {
+                throw new Error(`Failed to instantiate ${NESTED_CHAT_COMPONENT_NAME}`);
+            }
+
+            await componentSvc.inject({
+                parentEl: container,
+                componentToInject: this.nestedChatInstance,
+            });
+
+            this.bindChatViewEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindChatViewEvents(): void {
+        window.addEventListener('space-gib-chat-close-requested', () => {
+            this.toggleRightPanel();
+        });
+
+        window.addEventListener('space-gib-chat-closed', () => {
+            if (this.rightPanelState === 'expanded') {
+                this.toggleRightPanel();
+            }
+        });
+
+        window.addEventListener('space-gib-chat-message-sent', (e: any) => {
+            const { message, targetFile, contextAddr } = e.detail || {};
+            console.log(`${this.lc} Chat message sent on context ${contextAddr || targetFile}:`, message);
+        });
+    }
+
+    private async initCodeEditor(): Promise<void> {
+        const lc = `${this.lc}[${this.initCodeEditor.name}]`;
+        try {
+            const componentSvc = await getComponentSvc();
+            this.codeEditorInstance = await componentSvc.getComponentInstance({
+                path: CODE_EDITOR_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as CodeEditorComponentInstance;
+
+            if (!this.codeEditorInstance) {
+                throw new Error(`Failed to instantiate ${CODE_EDITOR_COMPONENT_NAME}`);
+            }
+
+            this.bindCodeEditorEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public async showCode(filePath?: string, branch?: string): Promise<void> {
+        const lc = `${this.lc}[${this.showCode.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) {
+                console.warn(`${lc} ${ID_CENTER_PANEL_CONTENT} element not found.`);
+                return;
+            }
+
+            if (!this.codeEditorInstance) {
+                const componentSvc = await getComponentSvc();
+                this.codeEditorInstance = await componentSvc.getComponentInstance({
+                    path: CODE_EDITOR_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as CodeEditorComponentInstance;
+            }
+
+            if (this.codeEditorInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.codeEditorInstance,
+                });
+
+                if (filePath) {
+                    let content: string | undefined = undefined;
+                    if (filePath === 'src/helper.ts') {
+                        content = `/**\n * @module my-app/helper\n * Utility functions for space-gib in-memory VCS.\n */\n\nexport function add(a: number, b: number): number {\n    return a + b;\n}\n\nexport function multiply(a: number, b: number): number {\n    return a * b;\n}\n`;
+                    } else if (filePath === 'README.md') {
+                        content = `# my-app\n\nDecentralized version-controlled application running on **space-gib**.\n\n- Zero SaaS lock-in\n- Inverted soft rel8ns for living companion discussions\n- Merkle DAG branch worktrees\n`;
+                    } else if (filePath === 'tsconfig.json') {
+                        content = `{\n  "compilerOptions": {\n    "target": "ES2022",\n    "module": "NodeNext",\n    "strict": true,\n    "esModuleInterop": true\n  }\n}\n`;
+                    }
+
+                    this.codeEditorInstance.loadFile({
+                        filepath: filePath,
+                        branch: branch || 'main',
+                        tipAddr: '7f8a1b2',
+                        content,
+                    });
+                }
+            }
+
+            const codeChatContainer = document.getElementById('code-chat-view-container');
+            const notesInspectorContainer = document.getElementById('notes-inspector-container');
+            if (notesInspectorContainer) { notesInspectorContainer.style.display = 'none'; }
+            if (codeChatContainer) {
+                codeChatContainer.style.display = 'block';
+                if (this.nestedChatInstance && this.nestedChatInstance.parentElement !== codeChatContainer) {
+                    codeChatContainer.appendChild(this.nestedChatInstance as any);
+                }
+            }
+
+            this.expandRightPanel();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public async showNotes(
+        title?: string,
+        opts?: {
+            trail?: string[];
+            trailMode?: 'tjp' | 'addr';
+            query?: Record<string, string | undefined>;
+        }
+    ): Promise<void> {
+        const lc = `${this.lc}[${this.showNotes.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) {
+                console.warn(`${lc} ${ID_CENTER_PANEL_CONTENT} element not found.`);
+                return;
+            }
+
+            // In Notes mode, Center Panel is the primary nested chat topic stream!
+            if (!this.nestedChatInstance) {
+                const componentSvc = await getComponentSvc();
+                this.nestedChatInstance = await componentSvc.getComponentInstance({
+                    path: NESTED_CHAT_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as NestedChatComponentInstance;
+            }
+
+            if (this.nestedChatInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.nestedChatInstance,
+                });
+
+                if (opts?.trail && opts.trail.length > 0) {
+                    for (const step of opts.trail) {
+                        const stepAddr = opts.trailMode === 'addr' ? step : `topic ${step}^gib_notes`;
+                        await this.nestedChatInstance.activateIbGib({ addr: stepAddr });
+                    }
+                } else {
+                    await this.nestedChatInstance.activateIbGib({ addr: `topic ${title || 'Notes Space 1'}^gib_notes` });
+                }
+            }
+
+            // In Notes mode, Right Panel is the contextual inspector!
+            await this.initNotesInspector();
+            const codeChatContainer = document.getElementById('code-chat-view-container');
+            const notesInspectorContainer = document.getElementById('notes-inspector-container');
+            if (codeChatContainer) { codeChatContainer.style.display = 'none'; }
+            if (notesInspectorContainer) { notesInspectorContainer.style.display = 'block'; }
+
+            if (opts?.query?.inspect && this.notesInspectorInstance) {
+                const inspectVal = opts.query.inspect;
+                if (inspectVal.includes('#L')) {
+                    const [file, lineStr] = inspectVal.split('#L');
+                    this.notesInspectorInstance.inspectFileAnchor({
+                        file,
+                        line: Number(lineStr) || 1,
+                        snippet: `// Anchor in ${file} at line ${lineStr}`,
+                    });
+                } else {
+                    this.notesInspectorInstance.inspectNode({ addr: inspectVal });
+                }
+            }
+
+            this.expandRightPanel();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private async initNotesExplorer(title?: string): Promise<void> {
+        const lc = `${this.lc}[${this.initNotesExplorer.name}]`;
+        try {
+            const container = document.getElementById('notes-explorer-container');
+            if (!container) {
+                console.warn(`${lc} notes-explorer-container element not found.`);
+                return;
+            }
+
+            if (!this.notesExplorerInstance) {
+                const componentSvc = await getComponentSvc();
+                this.notesExplorerInstance = await componentSvc.getComponentInstance({
+                    path: NOTES_EXPLORER_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as NotesExplorerComponentInstance;
+
+                if (this.notesExplorerInstance) {
+                    await componentSvc.inject({
+                        parentEl: container,
+                        componentToInject: this.notesExplorerInstance,
+                    });
+                }
+            }
+
+            if (title && this.notesExplorerInstance) {
+                this.notesExplorerInstance.setTitle(title);
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private async initNotesInspector(): Promise<void> {
+        const lc = `${this.lc}[${this.initNotesInspector.name}]`;
+        try {
+            const container = document.getElementById('notes-inspector-container');
+            if (!container) { return; }
+
+            if (!this.notesInspectorInstance) {
+                const componentSvc = await getComponentSvc();
+                this.notesInspectorInstance = await componentSvc.getComponentInstance({
+                    path: NOTES_INSPECTOR_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as NotesInspectorComponentInstance;
+
+                if (this.notesInspectorInstance) {
+                    await componentSvc.inject({
+                        parentEl: container,
+                        componentToInject: this.notesInspectorInstance,
+                    });
+                }
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public async showTimelineItemDetails(item: TimelineItem): Promise<void> {
+        const lc = `${this.lc}[${this.showTimelineItemDetails.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) {
+                console.warn(`${lc} ${ID_CENTER_PANEL_CONTENT} element not found.`);
+                return;
+            }
+
+            if (!this.timelineItemDetailsInstance) {
+                const componentSvc = await getComponentSvc();
+                this.timelineItemDetailsInstance = await componentSvc.getComponentInstance({
+                    path: TIMELINE_ITEM_DETAILS_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as TimelineItemDetailsComponentInstance;
+            }
+
+            if (this.timelineItemDetailsInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.timelineItemDetailsInstance,
+                });
+
+                this.timelineItemDetailsInstance.setTimelineItem(item);
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindCodeEditorEvents(): void {
+        window.addEventListener('space-gib-code-changed', (e: any) => {
+            const { filepath, lineCount } = e.detail || {};
+            console.log(`${this.lc} Code changed in ${filepath} (${lineCount} lines)`);
+        });
+
+        window.addEventListener('space-gib-code-copied', (e: any) => {
+            const { filepath } = e.detail || {};
+            console.log(`${this.lc} Code copied from ${filepath}`);
+        });
+    }
+
+    private async initPitch(): Promise<void> {
+        const lc = `${this.lc}[${this.initPitch.name}]`;
+        try {
+            const componentSvc = await getComponentSvc();
+            this.pitchInstance = await componentSvc.getComponentInstance({
+                path: PITCH_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as PitchComponentInstance;
+
+            if (!this.pitchInstance) {
+                throw new Error(`Failed to instantiate ${PITCH_COMPONENT_NAME}`);
+            }
+
+            this.bindPitchEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindPitchEvents(): void {
+        window.addEventListener('space-gib-pitch-closed', () => {
+            this.closePitch();
+        });
+    }
+
+    public collapsePanels(): void {
+        this.leftPanelState = 'collapsed';
+        const leftPanel = document.getElementById(ID_LEFT_PANEL);
+        if (leftPanel) {
+            leftPanel.classList.add('collapsed');
+        }
+        this.rightPanelState = 'collapsed';
+        const rightPanel = document.getElementById(ID_RIGHT_PANEL);
+        if (rightPanel) {
+            rightPanel.classList.add('collapsed');
+        }
+    }
+
+    public async showPitch(): Promise<void> {
+        const lc = `${this.lc}[${this.showPitch.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) {
+                console.warn(`${lc} ${ID_CENTER_PANEL_CONTENT} element not found.`);
+                return;
+            }
+
+            if (!this.pitchInstance) {
+                const componentSvc = await getComponentSvc();
+                this.pitchInstance = await componentSvc.getComponentInstance({
+                    path: PITCH_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as PitchComponentInstance;
+            }
+
+            if (this.pitchInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.pitchInstance,
+                });
+            }
+
+            this.collapsePanels();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public closePitch(): void {
+        this.showCosmos();
+    }
+
+    public async openCloneModal(options?: CloneModalOptions): Promise<void> {
+        const lc = `${this.lc}[${this.openCloneModal.name}]`;
+        try {
+            const componentSvc = await getComponentSvc();
+            const cloneInstance = await componentSvc.getComponentInstance({
+                path: CLONE_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as CloneComponentInstance;
+
+            if (!cloneInstance) {
+                throw new Error(`Failed to instantiate ${CLONE_COMPONENT_NAME}`);
+            }
+
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            const effectiveOpts: CloneModalOptions = {
+                cosmosId: activeCosmos?.id || 'cosmos-1',
+                cosmosName: activeCosmos?.name || 'Cosmos 1',
+                ...options,
+            };
+            cloneInstance.setOptions(effectiveOpts);
+
+            document.body.appendChild(cloneInstance);
+
+            cloneInstance.addEventListener(EVENT_SPACE_GIB_CLONE_CLOSED, () => {
+                cloneInstance.remove();
+            });
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public revealChrome(): void {
+        const header = document.getElementById(ID_HEADER_PANEL);
+        const footer = document.getElementById(ID_FOOTER_PANEL);
+        const footerResizer = document.getElementById(ID_FOOTER_RESIZER);
+
+        header?.classList.remove('pre-bang-hidden');
+        header?.classList.add('chrome-fade-in');
+
+        footer?.classList.remove('pre-bang-hidden');
+        footer?.classList.add('chrome-fade-in');
+
+        footerResizer?.classList.remove('pre-bang-hidden');
+        footerResizer?.classList.add('chrome-fade-in');
+
+        setTimeout(() => {
+            header?.classList.remove('chrome-fade-in');
+            header?.classList.add('chrome-revealed');
+            footer?.classList.remove('chrome-fade-in');
+            footer?.classList.add('chrome-revealed');
+            footerResizer?.classList.remove('chrome-fade-in');
+            footerResizer?.classList.add('chrome-revealed');
+        }, 2500);
+    }
+
+    public setActiveActivityBarButton(type: 'polycosmos' | 'cosmos' | 'space', spaceId?: string): void {
+        const btnPoly = document.getElementById('activity-btn-polycosmos');
+        const btnCosmos = document.getElementById('activity-btn-cosmos');
+        const activitySpaces = document.getElementById('activity-spaces-container');
+
+        if (type === 'polycosmos') {
+            btnPoly?.classList.add('active');
+            btnCosmos?.classList.remove('active');
+            activitySpaces?.querySelectorAll('.activity-bar-btn').forEach(b => b.classList.remove('active'));
+        } else if (type === 'cosmos') {
+            btnCosmos?.classList.add('active');
+            btnPoly?.classList.remove('active');
+            activitySpaces?.querySelectorAll('.activity-bar-btn').forEach(b => b.classList.remove('active'));
+        } else if (type === 'space') {
+            btnPoly?.classList.remove('active');
+            btnCosmos?.classList.remove('active');
+            if (activitySpaces) {
+                let matched = false;
+                activitySpaces.querySelectorAll('.activity-bar-btn').forEach(b => {
+                    const isMatch = b.getAttribute('data-space-id') === spaceId ||
+                                    b.getAttribute('data-space-type') === spaceId;
+                    b.classList.toggle('active', isMatch);
+                    if (isMatch) matched = true;
+                });
+                if (!matched && (spaceId === 'code' || spaceId === 'text')) {
+                    const firstOfType = activitySpaces.querySelector(`.activity-bar-btn[data-space-type="${spaceId}"]`);
+                    firstOfType?.classList.add('active');
+                }
+            }
+        }
+    }
+
+    private bindCosmosNavigatorEvents(): void {
+        window.addEventListener('space-gib-big-bang-exploded', () => {
+            this.hasBigBangExploded = true;
+            this.revealChrome();
+            this.updatePlaygroundBannerVisibility();
+        });
+
+        window.addEventListener('space-gib-identity-docked', () => {
+            const identityContainer = document.getElementById('identity-header-container');
+            if (identityContainer) {
+                if (!this.hasActiveIdentity()) {
+                    identityContainer.classList.add('identity-active-highlight');
+                }
+                const btn = identityContainer.querySelector('button') || identityContainer;
+                (btn as HTMLElement).focus?.();
+            }
+        });
+
+        window.addEventListener(EVENT_IBGIB_IDENTITY_CHANGED, () => {
+            const identityContainer = document.getElementById('identity-header-container');
+            if (this.hasActiveIdentity()) {
+                identityContainer?.classList.remove('identity-active-highlight');
+            }
+            this.updatePlaygroundBannerVisibility();
+        });
+
+        window.addEventListener('space-gib-agent-docked', () => {
+            const btnAgent = document.getElementById('btn-footer-agent');
+            if (btnAgent) {
+                btnAgent.classList.add('is-docked');
+                btnAgent.classList.add('agent-btn-docked-pulse');
+                setTimeout(() => {
+                    btnAgent.classList.remove('agent-btn-docked-pulse');
+                }, 1800);
+            }
+        });
+
+        window.addEventListener('space-gib-pitch-docked', () => {
+            const btnPitch = document.getElementById('btn-header-pitch');
+            if (btnPitch) {
+                btnPitch.classList.add('is-docked');
+                btnPitch.classList.add('pitch-btn-active-pulse');
+                setTimeout(() => {
+                    btnPitch.classList.remove('pitch-btn-active-pulse');
+                }, 2000);
+            }
+        });
+
+        window.addEventListener('space-gib-pitch-requested', () => {
+            this.showPitch();
+        });
+
+        window.addEventListener('space-gib-cosmos-selected', (e: any) => {
+            const cosmos: CosmosInfo = e.detail?.cosmos;
+            if (cosmos) {
+                this.updateActiveCosmosDisplay(cosmos);
+                this.showLeftPanelView('cosmos');
+                if (!this.isApplyingRoute) {
+                    const tenant = this.getActiveTenant() || (cosmos.isTemporary ? { type: 'username', siteUsername: 'playground' } : undefined);
+                    getSpaceGibRouterSvc().navigate({
+                        kind: 'cosmos',
+                        cosmos: cosmos.name || cosmos.id,
+                        ...(tenant ? { tenant } : {}),
+                    });
+                }
+            }
+        });
+
+        window.addEventListener('space-gib-activity-bar-expand-requested', () => {
+            this.expandActivityBar();
+        });
+
+        window.addEventListener('space-gib-space-added', (e: any) => {
+            const { space, cosmos } = e.detail;
+            if (cosmos) {
+                this.updateActiveCosmosDisplay(cosmos, space?.id || space?.type);
+            }
+            this.expandActivityBar();
+            this.expandLeftPanel();
+
+            if (space) {
+                this.setActiveActivityBarButton('space', space.id);
+                const dockedBtn = document.querySelector(`.activity-space-btn[data-space-id="${space.id}"]`);
+                if (dockedBtn) {
+                    dockedBtn.classList.add('space-btn-docked-pulse');
+                    setTimeout(() => {
+                        dockedBtn.classList.remove('space-btn-docked-pulse');
+                    }, 1800);
+                }
+                if (space.type === 'code') {
+                    this.showLeftPanelView('code', space.name);
+                    this.switchToReposMode();
+                } else if (space.type === 'text') {
+                    this.showLeftPanelView('text', space.name);
+                    this.switchToNotesMode(space.name);
+                }
+            }
+        });
+
+        window.addEventListener('space-gib-polycosmos-activated', (e: any) => {
+            const { cosmoses, activeCosmosId } = e.detail;
+            this.updatePolycosmosDisplay(cosmoses || [], activeCosmosId);
+            this.showLeftPanelView('polycosmos');
+            if (!this.isApplyingRoute) {
+                const tenant = this.getActiveTenant();
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'polycosmos',
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        });
+    }
+
+    private bindCosmosChromeEvents(): void {
+        const btnHeaderPolycosmos = document.getElementById('btn-header-polycosmos');
+        const btnHeaderCosmosSelect = document.getElementById('btn-header-cosmos-select');
+        const headerCosmosMenu = document.getElementById('header-cosmos-menu');
+        const activityBtnPolycosmos = document.getElementById('activity-btn-polycosmos');
+        const activityBtnCosmos = document.getElementById('activity-btn-cosmos');
+        const btnSideNewCosmos = document.getElementById('btn-side-new-cosmos');
+        const brandGalaxy = document.getElementById('header-brand-galaxy');
+        const btnFooterAgent = document.getElementById('btn-footer-agent');
+        const btnHeaderPitch = document.getElementById('btn-header-pitch');
+        const btnHeaderClone = document.getElementById('btn-header-clone');
+
+        btnHeaderPitch?.addEventListener('click', () => {
+            this.showPitch();
+        });
+
+        btnHeaderClone?.addEventListener('click', () => {
+            this.openCloneModal();
+        });
+
+        window.addEventListener('space-gib-clone-requested', (e: any) => {
+            this.openCloneModal(e.detail);
+        });
+
+        window.addEventListener('space-gib-branch-requested', (e: any) => {
+            const { galaxyName, sourceBranch, newBranchName, scope, itemPath } = e.detail || {};
+            const scopeDesc = scope === 'item' ? `item [${itemPath}]` : `worktree [${sourceBranch}]`;
+            console.log(`${this.lc} [Phase 2 Branch Stub] Created branch: [${newBranchName}] diverging from ${scopeDesc} in ${galaxyName || 'Code Galaxy'}`);
+            this.showLeftPanelView('code', 'Code Space');
+            this.fileExplorerInstance?.setBranch(newBranchName);
+        });
+
+        btnFooterAgent?.addEventListener('click', () => {
+            alert('🤖 ibgib Agent: "Hello! I am your AI assistant across superspaces. How can I help you today?"');
+        });
+
+        const goToPolycosmos = () => {
+            this.switchToSpacesMode();
+            this.cosmosNavigatorInstance?.setZoomState('polycosmos');
+            this.setActiveActivityBarButton('polycosmos');
+            this.showLeftPanelView('polycosmos');
+            const allCosmoses = this.cosmosNavigatorInstance?.getCosmoses() || [];
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            this.updatePolycosmosDisplay(allCosmoses, activeCosmos?.id || null);
+
+            const tenant = this.getActiveTenant();
+            getSpaceGibRouterSvc().navigate({
+                kind: 'polycosmos',
+                ...(tenant ? { tenant } : {}),
+            });
+        };
+
+        const goToCosmos = () => {
+            this.switchToSpacesMode();
+            this.cosmosNavigatorInstance?.setZoomState('cosmos');
+            this.setActiveActivityBarButton('cosmos');
+            this.showLeftPanelView('cosmos');
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                this.updateActiveCosmosDisplay(activeCosmos);
+                const tenant = this.getActiveTenant() || (activeCosmos.isTemporary ? { type: 'username', siteUsername: 'playground' } : undefined);
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'cosmos',
+                    cosmos: activeCosmos.name || activeCosmos.id,
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        };
+
+        window.addEventListener('space-gib-new-note-requested', async (e: any) => {
+            const { title } = e.detail || {};
+            await this.showNotes();
+            this.nestedChatInstance?.enterNewTopicMode(title);
+        });
+
+        window.addEventListener('space-gib-note-selected', (e: any) => {
+            const { file, line } = e.detail || {};
+            if (file) {
+                this.notesInspectorInstance?.inspectFileAnchor({ file, line });
+            }
+        });
+
+        window.addEventListener('space-gib-jump-to-code-requested', (e: any) => {
+            const { file, line } = e.detail || {};
+            this.showLeftPanelView('code', 'Code Galaxy 1');
+            this.showCode(file);
+            this.setActiveActivityBarButton('space', 'space-code-1');
+        });
+
+        window.addEventListener('space-gib-inspector-close-requested', () => {
+            this.toggleRightPanel();
+        });
+
+        btnHeaderPolycosmos?.addEventListener('click', () => goToPolycosmos());
+        activityBtnPolycosmos?.addEventListener('click', () => goToPolycosmos());
+        brandGalaxy?.addEventListener('click', (e) => {
+            e.preventDefault();
+            goToPolycosmos();
+        });
+        const brandTitle = document.querySelector('.brand-title');
+        brandTitle?.addEventListener('click', (e) => {
+            e.preventDefault();
+            goToPolycosmos();
+        });
+
+        activityBtnCosmos?.addEventListener('click', () => goToCosmos());
+
+        btnHeaderCosmosSelect?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (headerCosmosMenu) {
+                headerCosmosMenu.classList.toggle('hidden');
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (headerCosmosMenu && !headerCosmosMenu.contains(e.target as Node)) {
+                headerCosmosMenu.classList.add('hidden');
+            }
+        });
+
+        btnSideNewCosmos?.addEventListener('click', () => {
+            this.switchToSpacesMode();
+            this.cosmosNavigatorInstance?.triggerBigBangSequence(() => {
+                const nextIdx = (this.cosmosNavigatorInstance?.getCosmoses().length || 0) + 1;
+                const newCosmos = this.cosmosNavigatorInstance?.createCosmos(`Cosmos ${nextIdx}`);
+                if (newCosmos) {
+                    this.cosmosNavigatorInstance?.selectCosmos(newCosmos.id);
+                }
+            });
+        });
+
+        const btnSideAddSpace = document.getElementById('btn-side-add-space');
+        btnSideAddSpace?.addEventListener('click', () => {
+            this.cosmosNavigatorInstance?.handleSpaceClick('code');
+        });
+    }
+
+    private updateActiveCosmosDisplay(cosmos: CosmosInfo, activeSpaceIdOrType?: string): void {
+        const headerName = document.getElementById('header-active-cosmos-name');
+        if (headerName) { headerName.textContent = cosmos.name; }
+
+        const headerBadge = document.getElementById('header-temp-badge');
+        if (headerBadge) {
+            headerBadge.style.display = cosmos.isTemporary ? 'inline-flex' : 'none';
+        }
+
+        const projectName = document.getElementById('cosmos-project-name');
+        if (projectName) { projectName.textContent = cosmos.name; }
+
+        const spacesCount = document.getElementById('cosmos-spaces-count');
+        if (spacesCount) { spacesCount.textContent = String(cosmos.spaces.length); }
+
+        const spacesList = document.getElementById('cosmos-spaces-list');
+        if (spacesList) {
+            if (cosmos.spaces.length === 0) {
+                spacesList.innerHTML = `<p class="empty-list-note">No spaces added yet.<br>Click Code or Text in Cosmos to attach a space.</p>`;
+            } else {
+                spacesList.innerHTML = cosmos.spaces.map(s => `
+                    <div class="cosmos-space-item" data-space-id="${s.id}" data-space-type="${s.type}">
+                        <span class="space-item-icon">${s.type === 'code' ? '&lt;/&gt;' : (s.icon || '📦')}</span>
+                        <div class="space-item-info">
+                            <span class="space-item-name">${s.name}</span>
+                            <span class="space-item-sub">${s.type === 'code' ? 'Code Repository' : 'Metatext Discussion'}</span>
+                        </div>
+                    </div>
+                `).join('');
+
+                spacesList.querySelectorAll('.cosmos-space-item').forEach(el => {
+                    el.addEventListener('click', () => {
+                        const type = el.getAttribute('data-space-type');
+                        const name = el.querySelector('.space-item-name')?.textContent || '';
+                        if (type === 'code') {
+                            this.showLeftPanelView('code', name);
+                            this.switchToReposMode();
+                        } else {
+                            this.showLeftPanelView('text', name);
+                            this.switchToNotesMode(name);
+                        }
+                    });
+                });
+            }
+        }
+
+        const activitySpaces = document.getElementById('activity-spaces-container');
+        if (activitySpaces) {
+            activitySpaces.innerHTML = cosmos.spaces.map(s => `
+                <button class="activity-bar-btn activity-space-btn" type="button" title="${s.name}" data-space-id="${s.id}" data-space-type="${s.type}">
+                    <span class="activity-icon">${s.type === 'code' ? '&lt;/&gt;' : (s.icon || '📦')}</span>
+                    <span class="activity-label">${s.shortLabel}</span>
+                </button>
+            `).join('');
+
+            activitySpaces.querySelectorAll('.activity-space-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const type = btn.getAttribute('data-space-type');
+                    const title = btn.getAttribute('title') || '';
+                    const spaceId = btn.getAttribute('data-space-id') || '';
+                    this.setActiveActivityBarButton('space', spaceId);
+
+                    if (type === 'code') {
+                        this.showLeftPanelView('code', title);
+                        this.switchToReposMode();
+                    } else {
+                        this.showLeftPanelView('text', title);
+                        this.switchToNotesMode(title);
+                    }
+                });
+            });
+        }
+
+        if (activeSpaceIdOrType) {
+            this.setActiveActivityBarButton('space', activeSpaceIdOrType);
+        } else {
+            this.setActiveActivityBarButton('cosmos');
+        }
+
+        if (cosmos.spaces.length > 0) {
+            this.expandActivityBar();
+        }
+
+        const allCosmoses = this.cosmosNavigatorInstance?.getCosmoses() || [];
+        this.updateHeaderCosmosMenu(allCosmoses, cosmos.id);
+        this.updatePlaygroundBannerVisibility();
+    }
+
+    public updatePlaygroundBannerVisibility(): void {
+        const banner = document.getElementById('playground-banner');
+        if (!banner) { return; }
+
+        if (this.hasActiveIdentity()) {
+            banner.classList.add('hidden');
+            return;
+        }
+
+        // On bare landing before the big bang explosion, do not show the banner
+        const currentRoute = getSpaceGibRouterSvc().getCurrentRoute();
+        const isBareLanding = !currentRoute || currentRoute.kind === 'polycosmos';
+        if (isBareLanding && !this.hasBigBangExploded) {
+            banner.classList.add('hidden');
+            return;
+        }
+
+        // In playground mode (no authenticated identity), the banner is ALWAYS visible
+        banner.classList.remove('hidden');
+    }
+
+    private updatePolycosmosDisplay(cosmoses: CosmosInfo[], activeId: string | null): void {
+        const polyCount = document.getElementById('polycosmos-total-count');
+        if (polyCount) { polyCount.textContent = String(cosmoses.length); }
+
+        this.updatePolycosmosList(cosmoses, activeId);
+        this.setActiveActivityBarButton('polycosmos');
+    }
+
+    private updatePolycosmosList(cosmoses: CosmosInfo[], activeId: string | null): void {
+        const listEl = document.getElementById('polycosmos-projects-list');
+        if (!listEl) { return; }
+
+        if (cosmoses.length === 0) {
+            listEl.innerHTML = `<p class="empty-list-note">No cosmos projects yet.<br>Click "Initiate Big Bang" in the center to create your first cosmos!</p>`;
+            return;
+        }
+
+        listEl.innerHTML = cosmoses.map(c => `
+            <div class="cosmos-space-item ${c.id === activeId ? 'active' : ''}" data-cosmos-id="${c.id}">
+                <span class="space-item-icon">🌌</span>
+                <div class="space-item-info">
+                    <span class="space-item-name">${c.name}</span>
+                    <span class="space-item-sub">${c.spaces.length} space${c.spaces.length === 1 ? '' : 's'}</span>
+                </div>
+            </div>
+        `).join('');
+
+        listEl.querySelectorAll('.cosmos-space-item').forEach(el => {
+            el.addEventListener('click', () => {
+                const id = el.getAttribute('data-cosmos-id');
+                if (id) {
+                    this.cosmosNavigatorInstance?.selectCosmos(id);
+                }
+            });
+        });
+    }
+
+    private updateHeaderCosmosMenu(cosmoses: CosmosInfo[], activeId: string | null): void {
+        const menu = document.getElementById('header-cosmos-menu');
+        if (!menu) { return; }
+
+        menu.innerHTML = `
+            ${cosmoses.map(c => `
+                <button type="button" class="header-menu-item ${c.id === activeId ? 'active' : ''}" data-cosmos-id="${c.id}">
+                    <span>🌌 ${c.name}</span>
+                    <span class="orbit-cosmos-badge" style="font-size:0.7rem; padding:1px 6px;">${c.spaces.length}</span>
+                </button>
+            `).join('')}
+            <div class="header-menu-divider"></div>
+            <button type="button" class="header-menu-item" id="btn-header-menu-new-cosmos">
+                <span>+ New Cosmos</span>
+            </button>
+        `;
+
+        menu.querySelectorAll('.header-menu-item[data-cosmos-id]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.getAttribute('data-cosmos-id');
+                if (id) {
+                    menu.classList.add('hidden');
+                    this.switchToSpacesMode();
+                    this.cosmosNavigatorInstance?.selectCosmos(id);
+                }
+            });
+        });
+
+        const btnNew = menu.querySelector('#btn-header-menu-new-cosmos');
+        btnNew?.addEventListener('click', () => {
+            menu.classList.add('hidden');
+            this.switchToSpacesMode();
+            this.cosmosNavigatorInstance?.triggerBigBangExplosion();
+            const nextIdx = cosmoses.length + 1;
+            const newC = this.cosmosNavigatorInstance?.createCosmos(`Cosmos ${nextIdx}`);
+            if (newC) {
+                setTimeout(() => {
+                    this.cosmosNavigatorInstance?.selectCosmos(newC.id);
+                }, 300);
+            }
+        });
+    }
+
+    private showLeftPanelView(viewName: 'polycosmos' | 'cosmos' | 'code' | 'text', title?: string): void {
+        const viewPoly = document.getElementById('left-panel-polycosmos-view');
+        const viewCosmos = document.getElementById('left-panel-cosmos-view');
+        const viewCode = document.getElementById('left-panel-code-view');
+        const viewText = document.getElementById('left-panel-text-view');
+
+        if (viewPoly) { viewPoly.style.display = viewName === 'polycosmos' ? 'block' : 'none'; }
+        if (viewCosmos) { viewCosmos.style.display = viewName === 'cosmos' ? 'block' : 'none'; }
+        if (viewCode) {
+            viewCode.style.display = viewName === 'code' ? 'block' : 'none';
+            if (title) {
+                const titleEl = document.getElementById('left-code-space-title');
+                if (titleEl) { titleEl.textContent = title; }
+            }
+        }
+        if (viewText) {
+            viewText.style.display = viewName === 'text' ? 'block' : 'none';
+            if (viewName === 'text') {
+                this.initNotesExplorer(title);
+            }
+        }
+    }
+
+    private expandActivityBar(): void {
+        const bar = document.getElementById('activity-bar');
+        if (bar) {
+            bar.classList.remove('collapsed');
+            bar.classList.add('expanded');
+        }
+    }
+
+    private expandLeftPanel(): void {
+        const panel = document.getElementById(ID_LEFT_PANEL);
+        if (panel) {
+            panel.classList.remove('collapsed');
+            this.leftPanelState = 'expanded';
+        }
+    }
+
+    public expandRightPanel(): void {
+        const panel = document.getElementById(ID_RIGHT_PANEL);
+        if (panel) {
+            panel.classList.remove('collapsed');
+            this.rightPanelState = 'expanded';
+        }
+    }
+
+    private switchToSpacesMode(): void {
+        this.setMode('spaces');
+    }
+
+    private switchToReposMode(opts?: { skipNavigate?: boolean }): void {
+        this.setMode('repos');
+        this.expandRightPanel();
+        if (!opts?.skipNavigate && !this.isApplyingRoute) {
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                const tenant = this.getActiveTenant(activeCosmos);
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'code-galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxyId: 'code-1',
+                    branch: 'main',
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        }
+    }
+
+    private switchToNotesMode(title?: string, opts?: { skipNavigate?: boolean; galaxyId?: string }): void {
+        this.setMode('notes', title);
+        this.expandRightPanel();
+        if (!opts?.skipNavigate && !this.isApplyingRoute) {
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                const tenant = this.getActiveTenant(activeCosmos);
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'notes-galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxyId: opts?.galaxyId || 'notes-1',
+                    ...(title ? { topicTjp: title } : {}),
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        }
+    }
+
+    public getActiveTenant(cosmos?: CosmosInfo | string): SpaceGibTenant | undefined {
+        const domainIdentity = (globalThis as any).ibgib?.identity?.domainIdentity;
+        if (domainIdentity) {
+            const siteUsername = domainIdentity.data?.siteUsername || domainIdentity.data?.name || domainIdentity.data?.username;
+            if (siteUsername) {
+                return { type: 'username', siteUsername };
+            }
+            const tjpAddr = domainIdentity.data?.tjp?.tjpAddr || domainIdentity.data?.tjpGib;
+            if (tjpAddr) {
+                return { type: 'keystone', keystoneTjp: tjpAddr };
+            }
+        }
+        // Without an active authenticated identity, all workspaces and routes are playground-scoped
+        return { type: 'username', siteUsername: 'playground' };
+    }
+
+    private async initRouterIntegration(): Promise<void> {
+        const lc = `${this.lc}[${this.initRouterIntegration.name}]`;
+        try {
+            const router = getSpaceGibRouterSvc();
+
+            // 1. Subscribe to route changes (popstate, direct navigation)
+            router.subscribe(async (route) => {
+                await this.handleRouteActivation(route);
+            });
+
+            // 2. Load current URL from address bar
+            const initialRoute = await router.loadCurrentURL();
+            console.log(`${lc} Initial route activated:`, initialRoute);
+        } catch (err) {
+            console.error(`${lc} Failed to initialize router integration: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    public async handleRouteActivation(route: SpaceGibRouteInfo): Promise<void> {
+        const lc = `${this.lc}[${this.handleRouteActivation.name}]`;
+        if (this.isApplyingRoute) { return; }
+        this.isApplyingRoute = true;
+        try {
+            if (route.kind !== 'polycosmos') {
+                this.hasBigBangExploded = true;
+                this.revealChrome();
+            }
+
+            // If the route omitted a tenant specifier but the user is authenticated (or in playground),
+            // canonicalize the URL in the address bar so copying and sharing is always fully qualified.
+            if (route.kind !== 'admin-review' && !route.tenant) {
+                const cosmosName = 'cosmos' in route ? route.cosmos : undefined;
+                const activeTenant = this.getActiveTenant(cosmosName);
+                if (activeTenant) {
+                    route.tenant = activeTenant;
+                    getSpaceGibRouterSvc().navigate(route, { replace: true, silent: true });
+                }
+            }
+
+            switch (route.kind) {
+                case 'polycosmos': {
+                    await this.showCosmos();
+                    this.cosmosNavigatorInstance?.setZoomState('polycosmos');
+                    break;
+                }
+                case 'cosmos': {
+                    if (this.cosmosNavigatorInstance) {
+                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                        this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                        this.updateActiveCosmosDisplay(cosmos);
+                    }
+                    this.showLeftPanelView('cosmos');
+                    this.expandLeftPanel();
+                    await this.showCosmos();
+                    break;
+                }
+                case 'code-galaxy': {
+                    if (this.cosmosNavigatorInstance) {
+                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                        if (!cosmos.spaces.some(s => s.type === 'code' || s.id === route.galaxyId)) {
+                            cosmos.spaces.push({
+                                id: route.galaxyId || 'code-1',
+                                type: 'code',
+                                name: 'Code Space 1',
+                                shortLabel: 'Code 1',
+                                icon: '</>',
+                            });
+                        }
+                        this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                        this.updateActiveCosmosDisplay(cosmos, 'code');
+                    }
+                    this.expandActivityBar();
+                    this.expandLeftPanel();
+                    this.setActiveActivityBarButton('space', 'code');
+                    this.showLeftPanelView('code', route.galaxyId);
+                    this.switchToReposMode({ skipNavigate: true });
+                    if (route.branch && this.fileExplorerInstance) {
+                        this.fileExplorerInstance.setBranch(route.branch);
+                    }
+                    if (route.filePath && this.fileExplorerInstance) {
+                        this.fileExplorerInstance.selectFile(route.filePath);
+                    }
+                    await this.showCode(route.filePath, route.branch);
+                    break;
+                }
+                case 'notes-galaxy': {
+                    if (this.cosmosNavigatorInstance) {
+                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                        if (!cosmos.spaces.some(s => s.type === 'text' || s.id === route.galaxyId)) {
+                            cosmos.spaces.push({
+                                id: route.galaxyId || 'notes-1',
+                                type: 'text',
+                                name: 'Text Space 1',
+                                shortLabel: 'Text 1',
+                                icon: '📝',
+                            });
+                        }
+                        this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                        this.updateActiveCosmosDisplay(cosmos, 'text');
+                    }
+                    this.expandActivityBar();
+                    this.expandLeftPanel();
+                    this.setActiveActivityBarButton('space', 'text');
+                    this.showLeftPanelView('text', route.galaxyId);
+                    this.switchToNotesMode(route.topicTjp || route.galaxyId, { skipNavigate: true, galaxyId: route.galaxyId });
+                    await this.showNotes(route.topicTjp || route.galaxyId, {
+                        trail: route.trail,
+                        trailMode: route.trailMode,
+                        query: route.query,
+                    });
+                    break;
+                }
+                case 'raw-addr': {
+                    await this.handleRawAddrSnapshotRoute(route);
+                    break;
+                }
+                case 'raw-tjp': {
+                    await this.handleRawTjpRoute(route);
+                    break;
+                }
+                case 'admin-review': {
+                    await this.showAdminReview(route.tjpGib);
+                    break;
+                }
+            }
+        } catch (err) {
+            console.error(`${lc} Failed to apply route: ${extractErrorMsg(err)}`);
+        } finally {
+            this.isApplyingRoute = false;
+            this.updatePlaygroundBannerVisibility();
+        }
+    }
+
+    private async handleRawAddrSnapshotRoute(route: RawAddrRouteInfo): Promise<void> {
+        const lc = `${this.lc}[${this.handleRawAddrSnapshotRoute.name}]`;
+        try {
+            console.log(`${lc} Resolving raw snapshot route: cosmos=${route.cosmos}, spaceId=${route.spaceId}, addr=${route.ibGibAddr}`);
+            if (this.cosmosNavigatorInstance) {
+                const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                this.updateActiveCosmosDisplay(cosmos);
+            }
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            let space = (metaspace as any).localUserSpaces?.find((s: any) => s.data?.uuid === route.spaceId || s.data?.name === route.spaceId);
+            if (!space) {
+                space = (metaspace as any).spaces?.find((s: any) => s.data?.uuid === route.spaceId || s.data?.name === route.spaceId);
+            }
+
+            let targetIbGib: any;
+            if (space) {
+                const getRes = await space.get({ addr: route.ibGibAddr });
+                targetIbGib = getRes?.ibGibs?.[0];
+            }
+
+            if (!targetIbGib) {
+                try {
+                    const domainAddr = route.tenant?.type === 'username' ? route.tenant.siteUsername : route.cosmos;
+                    const res = await fetch(`/api/ibgib/${encodeURIComponent(domainAddr)}/${encodeURIComponent(route.ibGibAddr)}`);
+                    if (res.ok) {
+                        const payload = await res.json();
+                        targetIbGib = payload?.ibGib;
+                    }
+                } catch (netErr) {
+                    console.warn(`${lc} Server fetch for raw addr failed: ${extractErrorMsg(netErr)}`);
+                }
+            }
+
+            await this.showRawSnapshot(route.ibGibAddr, targetIbGib);
+        } catch (err) {
+            console.error(`${lc} ${extractErrorMsg(err)}`);
+        }
+    }
+
+    private async handleRawTjpRoute(route: RawTjpRouteInfo): Promise<void> {
+        const lc = `${this.lc}[${this.handleRawTjpRoute.name}]`;
+        try {
+            console.log(`${lc} Resolving living tip route: cosmos=${route.cosmos}, spaceId=${route.spaceId}, tjp=${route.tjpAddr}`);
+            if (this.cosmosNavigatorInstance) {
+                const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                this.updateActiveCosmosDisplay(cosmos);
+            }
+
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            let space = (metaspace as any).localUserSpaces?.find((s: any) => s.data?.uuid === route.spaceId || s.data?.name === route.spaceId);
+            if (!space) {
+                space = (metaspace as any).spaces?.find((s: any) => s.data?.uuid === route.spaceId || s.data?.name === route.spaceId);
+            }
+
+            let tipAddr = route.tjpAddr;
+            let targetIbGib: any;
+            if (space && typeof (space as any).getLatestIbGib === 'function') {
+                const latest = await (space as any).getLatestIbGib({ tjpAddr: route.tjpAddr });
+                if (latest) {
+                    targetIbGib = latest;
+                    tipAddr = (latest as any).ibGibAddr || getIbGibAddr({ ibGib: latest }) || tipAddr;
+                }
+            }
+
+            if (!targetIbGib) {
+                try {
+                    const domainAddr = route.tenant?.type === 'username' ? route.tenant.siteUsername : route.cosmos;
+                    const res = await fetch(`/api/ibgib/${encodeURIComponent(domainAddr)}/${encodeURIComponent(route.tjpAddr)}`);
+                    if (res.ok) {
+                        const payload = await res.json();
+                        targetIbGib = payload?.ibGib;
+                        if (targetIbGib) {
+                            tipAddr = (targetIbGib as any).ibGibAddr || getIbGibAddr({ ibGib: targetIbGib }) || tipAddr;
+                        }
+                    }
+                } catch (netErr) {
+                    console.warn(`${lc} Server fetch for raw tjp failed: ${extractErrorMsg(netErr)}`);
+                }
+            }
+
+            await this.showRawSnapshot(tipAddr, targetIbGib, { isLivingTip: true, tjpAddr: route.tjpAddr });
+        } catch (err) {
+            console.error(`${lc} ${extractErrorMsg(err)}`);
+        }
+    }
+
+    public async showRawSnapshot(
+        addr: string,
+        ibGib?: any,
+        opts?: { isLivingTip?: boolean; tjpAddr?: string }
+    ): Promise<void> {
+        const lc = `${this.lc}[${this.showRawSnapshot.name}]`;
+        try {
+            const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+            if (!centerPanel) { return; }
+
+            if (!this.timelineItemDetailsInstance) {
+                const componentSvc = await getComponentSvc();
+                this.timelineItemDetailsInstance = await componentSvc.getComponentInstance({
+                    path: TIMELINE_ITEM_DETAILS_COMPONENT_NAME,
+                    ibGibAddr: ROOT_ADDR,
+                    useRegExpPrefilter: true,
+                }) as TimelineItemDetailsComponentInstance;
+            }
+
+            if (this.timelineItemDetailsInstance) {
+                const componentSvc = await getComponentSvc();
+                await componentSvc.inject({
+                    parentEl: centerPanel,
+                    componentToInject: this.timelineItemDetailsInstance,
+                });
+
+                const shortHash = addr.slice(0, 10);
+                const isLiving = opts?.isLivingTip;
+                const message = isLiving
+                    ? `🌱 Living Tip: ${addr.split('^')[0] || addr}`
+                    : `📌 Snapshot (Pinned): ${addr.split('^')[0] || addr}`;
+                const timestamp = isLiving ? 'Latest tip' : 'Pinned point-in-time';
+                const branch = isLiving ? 'living-tip' : 'snapshot';
+
+                let rawData: string;
+                if (ibGib?.data) {
+                    if (typeof ibGib.data.text === 'string') {
+                        rawData = ibGib.data.text;
+                    } else if (typeof ibGib.data.content === 'string') {
+                        rawData = ibGib.data.content;
+                    } else {
+                        rawData = JSON.stringify(ibGib.data, null, 2);
+                    }
+                } else if (ibGib) {
+                    rawData = JSON.stringify(ibGib, null, 2);
+                } else {
+                    rawData = `Address: ${addr}\n(Content not loaded)`;
+                }
+
+                this.timelineItemDetailsInstance.setTimelineItem({
+                    hash: addr,
+                    shortHash: shortHash,
+                    message,
+                    author: ibGib?.rel8ns?.ancestor?.[0] || (isLiving ? 'ibgib living tip' : 'ibgib snapshot'),
+                    timestamp,
+                    branch,
+                    diffPreview: rawData,
+                    changedFiles: [
+                        { path: addr, status: 'A', additions: 1, deletions: 0 }
+                    ]
+                });
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    public hasActiveIdentity(): boolean {
+        return Boolean((globalThis as any).ibgib?.identity?.domainIdentity);
+    }
+
+    public async onEngineReady(): Promise<void> {
+        const lc = `${this.lc}[${this.onEngineReady.name}]`;
+        try {
+            await this.initialized;
+            console.log(`${lc} SpaceGib Shell Service is ready.`);
+
+            // Ensure the UI removes the loading text
+            const statusSection = document.getElementById('status-section');
+            if (statusSection) {
+                statusSection.style.display = 'none';
+            }
+
+            // Mount identity-header component in the header bar
+            const componentSvc = await getComponentSvc();
+            const identityHeader = await componentSvc.getComponentInstance({
+                path: 'ibgib-identity-header',
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            });
+
+            const headerContainer = document.getElementById('identity-header-container');
+            if (headerContainer && identityHeader) {
+                headerContainer.innerHTML = '';
+                headerContainer.appendChild(identityHeader as any);
+                if (this.hasActiveIdentity()) {
+                    headerContainer.classList.remove('identity-active-highlight');
+                }
+            }
+
+            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_SHELL_READY, { detail: { timestamp: Date.now() } }));
+
+            // Connect HTML5 History API router and activate current URL
+            await this.initRouterIntegration();
+
+            // Update playground mode banner visibility
+            this.updatePlaygroundBannerVisibility();
+
+            // Pre-warm in-memory temporary metaspace in background for snappy tutorial/playground mode
+            prewarmPlaygroundMetaspace().catch(err => {
+                console.warn(`${lc} Background prewarm of temporary metaspace failed: ${extractErrorMsg(err)}`);
+            });
+
+            // Trigger 1 (App Boot): On onEngineReady, if active identity exists, check for updates.
 
-            // Trigger 1 (App Boot): On onEngineReady, if active identity exists, check for updates.
             const domainIdentity = (globalThis as any).ibgib?.identity?.domainIdentity;
             if (domainIdentity) {
                 const activePrimaryAddr = getIbGibAddr({ ibGib: domainIdentity });