@ibgib/space-gib 0.0.33 → 0.0.35

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

@@ -1,32 +1,217 @@
 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 {
+    registerChangesComponent, CHANGES_COMPONENT_NAME,
+    ChangesComponentInstance,
+} from "../component/changes/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,
+    GalaxyRouteInfo,
+    RawAddrRouteInfo,
+    RawTjpRouteInfo,
+} from "../router/index.mjs";
+import { GalaxyPolicy } from "@ibgib/core-gib/dist/cosmology/galaxy/galaxy-types.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.mjs";
+import { getPlaygroundMetaspaceAndSpace, prewarmPlaygroundMetaspace } from "../../cosmos/seed-cosmos-workspace.mjs";
+import {
+    getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib,
+    getFileItemFromPath,
+    getFileContent,
+} from "@ibgib/core-gib/dist/cosmology/branching/item/item-helpers.mjs";
+import { GalaxyIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/galaxy/galaxy-types.mjs";
+import { B2tFSGalaxyIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/branching/repo/b2tfs-repo-types.mjs";
+import { getIbGibFromSpace } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import {
+    executeVcsBranch,
+    executeVcsCheckout,
+} from "@ibgib/core-gib/dist/cosmology/branching/commands/index.mjs";
+import { validateBranchName } from "@ibgib/core-gib/dist/cosmology/branching/branch/branch-helpers.mjs";
+
+export interface PanelLoadContext {
+    route: GalaxyRouteInfo;
+    cosmosName: string;
+    galaxyName: string;
+    discriminator?: string;
+    policy: GalaxyPolicy;
+    cosmosInfo?: CosmosInfo;
+    shell: SpaceGibShellService;
+}
+
+export type PanelName = 'LeftPanel' | 'CenterPanel' | 'RightPanel';
+
+export type PanelLoaderFn = (route: GalaxyRouteInfo, context: PanelLoadContext) => Promise<void>;
+
+export type PanelLoaderMap = {
+    [K in PanelName as `loadRouteFor${K}`]: PanelLoaderFn;
+};
 
 export class SpaceGibShellService {
     private lc: string = `[SpaceGibShellService]`;
 
+    /**
+     * Default convention panel loaders for Branching Galaxies (Class I Substrate / Code).
+     */
+    protected branchingPanelLoaders: PanelLoaderMap = {
+        loadRouteForLeftPanel: async (route, context) => {
+            this.expandActivityBar();
+            this.expandLeftPanel();
+            this.setActiveActivityBarButton('space', route.galaxy);
+            this.showLeftPanelView('code', route.galaxy);
+            if (this.fileExplorerInstance) {
+                this.fileExplorerInstance.setGalaxyAndBranch(route.galaxy, route.branch || 'main');
+                if (route.filePath) {
+                    this.fileExplorerInstance.selectFile(route.filePath);
+                }
+            }
+            if (this.changesInstance) {
+                this.changesInstance.setGalaxyAndBranch(route.galaxy, route.branch || 'main', { preserveChanges: true });
+            }
+            if (this.codeEditorInstance) {
+                this.codeEditorInstance.setGalaxyAndBranch(route.galaxy, route.branch || 'main');
+            }
+            if (this.timelineInstance) {
+                this.timelineInstance.setBranch(route.branch || 'main');
+            }
+        },
+        loadRouteForCenterPanel: async (route, context) => {
+            this.switchToReposMode({ skipNavigate: true });
+            await this.showCode(route.filePath, route.branch, route.galaxy);
+        },
+        loadRouteForRightPanel: async (route, context) => {
+            if (route.query?.inspect) {
+                this.expandRightPanel();
+            }
+        },
+    };
+
+    /**
+     * Default convention panel loaders for Linear Galaxies (Class IV Discourse / Notes).
+     */
+    protected linearPanelLoaders: PanelLoaderMap = {
+        loadRouteForLeftPanel: async (route, context) => {
+            this.expandActivityBar();
+            this.expandLeftPanel();
+            this.setActiveActivityBarButton('space', route.galaxy);
+            this.showLeftPanelView('text', route.galaxy);
+        },
+        loadRouteForCenterPanel: async (route, context) => {
+            this.switchToNotesMode(route.topicTjp || route.galaxy, { skipNavigate: true, galaxyId: route.galaxy });
+            await this.showNotes(route.topicTjp || route.galaxy, {
+                trail: route.trail,
+                trailMode: route.trailMode,
+                query: route.query,
+            });
+        },
+        loadRouteForRightPanel: async (route, context) => {
+            if (route.query?.inspect) {
+                this.expandRightPanel();
+            }
+        },
+    };
+
+    /**
+     * Registry of convention panel loaders keyed by topology or discriminator.
+     */
+    protected panelLoaderRegistry: Record<string, PanelLoaderMap> = {
+        branching: this.branchingPanelLoaders,
+        linear: this.linearPanelLoaders,
+    };
+
+    public registerPanelLoaders(key: string, loaders: PanelLoaderMap): void {
+        this.panelLoaderRegistry[key] = loaders;
+    }
+
+    public async loadRouteForPanels(route: GalaxyRouteInfo, context: PanelLoadContext): Promise<void> {
+        const loaders =
+            (context.discriminator ? this.panelLoaderRegistry[context.discriminator] : undefined) ||
+            this.panelLoaderRegistry[context.policy.topology] ||
+            this.branchingPanelLoaders;
+
+        await loaders.loadRouteForLeftPanel(route, context);
+        await loaders.loadRouteForCenterPanel(route, context);
+        await loaders.loadRouteForRightPanel(route, context);
+    }
+
     public initialized: Promise<void>;
+    private isApplyingRoute: boolean = false;
+    private cosmosNavigatorInstance?: CosmosNavigatorComponentInstance;
+    private fileExplorerInstance?: FileExplorerComponentInstance;
+    private changesInstance?: ChangesComponentInstance;
+    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';
@@ -36,6 +221,11 @@ export class SpaceGibShellService {
     private isResizingLeft = false;
     private isResizingRight = false;
     private isResizingFooter = false;
+    private isResizingExplorerChanges = false;
+    private isResizingChangesTimeline = false;
+
+    // Playground Banner State
+    private hasBigBangExploded = false;
 
     constructor() {
         this.initialized = this.initialize();
@@ -45,6 +235,13 @@ export class SpaceGibShellService {
         this.initElements();
         this.initEventHandlers();
         await this.registerComponents();
+        await this.initCosmosNavigator();
+        await this.initFileExplorer();
+        await this.initChanges();
+        await this.initTimeline();
+        await this.initChatView();
+        await this.initCodeEditor();
+        await this.initPitch();
     }
 
     private initElements(): void {
@@ -60,6 +257,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) {
@@ -94,6 +299,44 @@ export class SpaceGibShellService {
                 footerResizer.addEventListener('mousedown', () => this.isResizingFooter = true);
             }
 
+            // Accordion Horizontal Resizers (Left Panel)
+            const resizerExplorerChanges = document.getElementById('resizer-explorer-changes');
+            if (resizerExplorerChanges) {
+                resizerExplorerChanges.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    this.isResizingExplorerChanges = true;
+                    resizerExplorerChanges.classList.add('active');
+                });
+                resizerExplorerChanges.addEventListener('dblclick', () => {
+                    const explorerEl = document.getElementById('code-file-explorer-container');
+                    if (explorerEl) {
+                        explorerEl.style.flex = '';
+                        explorerEl.style.height = '';
+                    }
+                });
+            }
+
+            const resizerChangesTimeline = document.getElementById('resizer-changes-timeline');
+            if (resizerChangesTimeline) {
+                resizerChangesTimeline.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    this.isResizingChangesTimeline = true;
+                    resizerChangesTimeline.classList.add('active');
+                });
+                resizerChangesTimeline.addEventListener('dblclick', () => {
+                    const changesEl = document.getElementById('code-changes-container');
+                    const timelineEl = document.getElementById('code-timeline-container');
+                    if (changesEl) {
+                        changesEl.style.flex = '';
+                        changesEl.style.height = '';
+                    }
+                    if (timelineEl) {
+                        timelineEl.style.flex = '';
+                        timelineEl.style.height = '';
+                    }
+                });
+            }
+
             // Window mouse events for dragging
             window.addEventListener('mousemove', (e) => this.handleMouseMove(e));
             window.addEventListener('mouseup', () => this.handleMouseUp());
@@ -123,6 +366,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 +407,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 +543,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);
@@ -287,7 +599,7 @@ export class SpaceGibShellService {
     }
 
     private handleMouseMove(e: MouseEvent) {
-        if (!this.isResizingLeft && !this.isResizingRight && !this.isResizingFooter) return;
+        if (!this.isResizingLeft && !this.isResizingRight && !this.isResizingFooter && !this.isResizingExplorerChanges && !this.isResizingChangesTimeline) return;
 
         // Prevent text selection while dragging
         e.preventDefault();
@@ -309,12 +621,40 @@ export class SpaceGibShellService {
             let newHeight = Math.max(24, Math.min(window.innerHeight - e.clientY, 400));
             document.documentElement.style.setProperty('--footer-panel-height', `${newHeight}px`);
         }
+
+        if (this.isResizingExplorerChanges) {
+            const explorerEl = document.getElementById('code-file-explorer-container');
+            if (explorerEl) {
+                const rect = explorerEl.getBoundingClientRect();
+                const parentHeight = explorerEl.parentElement?.clientHeight || 600;
+                const maxExplorerHeight = parentHeight - 75;
+                const newHeight = Math.max(76, Math.min(e.clientY - rect.top, maxExplorerHeight));
+                explorerEl.style.flex = 'none';
+                explorerEl.style.height = `${newHeight}px`;
+            }
+        }
+
+        if (this.isResizingChangesTimeline) {
+            const changesEl = document.getElementById('code-changes-container');
+            if (changesEl) {
+                const rect = changesEl.getBoundingClientRect();
+                const parentHeight = changesEl.parentElement?.clientHeight || 600;
+                const maxChangesHeight = parentHeight - (changesEl.offsetTop || 0) - 35;
+                const newHeight = Math.max(35, Math.min(e.clientY - rect.top, maxChangesHeight));
+                changesEl.style.flex = 'none';
+                changesEl.style.height = `${newHeight}px`;
+            }
+        }
     }
 
     private handleMouseUp() {
         this.isResizingLeft = false;
         this.isResizingRight = false;
         this.isResizingFooter = false;
+        this.isResizingExplorerChanges = false;
+        this.isResizingChangesTimeline = false;
+        document.getElementById('resizer-explorer-changes')?.classList.remove('active');
+        document.getElementById('resizer-changes-timeline')?.classList.remove('active');
     }
 
     private updateCssVariables() {
@@ -326,40 +666,1965 @@ export class SpaceGibShellService {
         try {
             await registerStandardIdentityComponents();
             await registerPrivacyPolicyComponent();
+            await registerAdminReviewComponent();
+            await registerCosmosNavigatorComponent();
+            await registerFileExplorerComponent();
+            await registerChangesComponent();
+            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)}`);
+        }
+    }
+
+    public show404(message: string): void {
+        const centerPanel = document.getElementById(ID_CENTER_PANEL_CONTENT);
+        if (centerPanel) {
+            centerPanel.innerHTML = `
+                <div class="cosmos-not-found-view" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #94a3b8; text-align: center; padding: 2rem; font-family: sans-serif;">
+                    <div style="font-size: 3.5rem; margin-bottom: 1rem;">🌌 404</div>
+                    <h2 style="font-size: 1.5rem; color: #fff; margin-bottom: 0.5rem; font-weight: 600;">Cosmos Not Found</h2>
+                    <p style="margin-bottom: 1.5rem; max-width: 420px; font-size: 0.95rem; line-height: 1.5;">${message}</p>
+                    <button id="btn-404-return" type="button" style="padding: 10px 22px; border-radius: 8px; background: rgba(124, 92, 252, 0.2); border: 1px solid rgba(124, 92, 252, 0.4); color: #c4b5fd; cursor: pointer; font-weight: 500; font-size: 0.95rem; transition: background 0.2s;">
+                        Return to Polycosmos
+                    </button>
+                </div>
+            `;
+            const returnBtn = document.getElementById('btn-404-return');
+            returnBtn?.addEventListener('click', () => {
+                getSpaceGibRouterSvc().navigate({ kind: 'polycosmos' });
+            });
+        }
+        this.collapsePanels();
+    }
+
+    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, galaxy } = e.detail || {};
+            console.log(`${this.lc} File selected: ${path || filename} on worktree branch ${branch} in galaxy ${galaxy}`);
+            const fullFile = path || filename;
+            if (!fullFile) {
+                return;
             }
+            const branchName = branch || 'main';
+            const galaxyName = galaxy || 'code-1';
+            const tipAddr = 'tip';
 
-            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_SHELL_READY, { detail: { timestamp: Date.now() } }));
+            this.chatViewInstance?.setTargetFile(fullFile, `${branchName} @ ${tipAddr}`);
+            this.nestedChatInstance?.activateIbGib({ addr: `file ${fullFile}^${tipAddr}` });
+
+            this.showCode(fullFile, branchName, galaxyName);
+
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                const tenant = this.getActiveTenant();
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxy: galaxyName,
+                    topology: 'branching',
+                    discriminator: 'code',
+                    branch: branchName,
+                    filePath: fullFile,
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        });
+
+        window.addEventListener('space-gib-branch-switched', async (e: any) => {
+            const { galaxy, branch } = e.detail || {};
+            const targetGalaxy = galaxy || this.fileExplorerInstance?.getGalaxyName() || 'code-1';
+            const targetBranch = branch || 'main';
+
+            console.log(`${this.lc} Branch switched: [${targetGalaxy}] -> [${targetBranch}]`);
+
+            // 1. Update File Explorer, Changes, Timeline, Code Editor
+            this.fileExplorerInstance?.setGalaxyAndBranch(targetGalaxy, targetBranch);
+            this.changesInstance?.setGalaxyAndBranch(targetGalaxy, targetBranch, { preserveChanges: true });
+            this.codeEditorInstance?.setGalaxyAndBranch(targetGalaxy, targetBranch);
+            this.timelineInstance?.setBranch(targetBranch);
+
+            // 2. Refresh active file under new branch context
+            const activePath = this.fileExplorerInstance?.getSelectedFilePath() || this.codeEditorInstance?.getFilepath();
+            if (activePath) {
+                await this.showCode(activePath, targetBranch, targetGalaxy);
+            } else {
+                await this.showCode(undefined, targetBranch, targetGalaxy);
+            }
+
+            // 3. Update router navigation
+            const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+            if (activeCosmos) {
+                const tenant = this.getActiveTenant(activeCosmos);
+                getSpaceGibRouterSvc().navigate({
+                    kind: 'galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxy: targetGalaxy,
+                    topology: 'branching',
+                    discriminator: 'code',
+                    branch: targetBranch,
+                    ...(activePath ? { filePath: activePath } : {}),
+                    ...(tenant ? { tenant } : {}),
+                });
+            }
+        });
+
+        window.addEventListener('space-gib-view-mode-changed', (e: any) => {
+            const { mode } = e.detail || {};
+            if (mode) {
+                this.changesInstance?.setViewMode(mode);
+            }
+        });
+
+        window.addEventListener('space-gib-accordion-toggled', () => {
+            const explorerEl = document.getElementById('code-file-explorer-container');
+            const changesEl = document.getElementById('code-changes-container');
+            const timelineEl = document.getElementById('code-timeline-container');
+            if (explorerEl) { explorerEl.style.flex = ''; explorerEl.style.height = ''; }
+            if (changesEl) { changesEl.style.flex = ''; changesEl.style.height = ''; }
+            if (timelineEl) { timelineEl.style.flex = ''; timelineEl.style.height = ''; }
+        });
+
+        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 initChanges(): Promise<void> {
+        const lc = `${this.lc}[${this.initChanges.name}]`;
+        try {
+            const container = document.getElementById('code-changes-container');
+            if (!container) {
+                console.warn(`${lc} code-changes-container element not found.`);
+                return;
+            }
+
+            const componentSvc = await getComponentSvc();
+            this.changesInstance = await componentSvc.getComponentInstance({
+                path: CHANGES_COMPONENT_NAME,
+                ibGibAddr: ROOT_ADDR,
+                useRegExpPrefilter: true,
+            }) as ChangesComponentInstance;
+
+            if (!this.changesInstance) {
+                throw new Error(`Failed to instantiate ${CHANGES_COMPONENT_NAME}`);
+            }
+
+            await componentSvc.inject({
+                parentEl: container,
+                componentToInject: this.changesInstance,
+            });
+
+            if (this.fileExplorerInstance) {
+                this.changesInstance.setViewMode(this.fileExplorerInstance.getViewMode());
+            }
+
+            this.bindChangesEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindChangesEvents(): void {
+        window.addEventListener('space-gib-commit-created', (e: any) => {
+            const { branch, message, tipAddr, shortHash } = e.detail || {};
+            console.log(`${this.lc} Commit created: [${shortHash}] "${message}" on branch [${branch}]`);
+
+            // 1. Clear status badges in file explorer for this branch
+            this.fileExplorerInstance?.clearAllStatusBadges(branch);
+            this.fileExplorerInstance?.updateDirtyBadges();
+
+            // 2. Add snapshot to timeline
+            this.timelineInstance?.addSnapshot({
+                hash: tipAddr,
+                shortHash: shortHash || (tipAddr ? tipAddr.slice(-8) : 'unknown'),
+                message: message || 'Update',
+                author: 'You',
+                timestamp: 'Just now',
+                branch: branch || 'main',
+                isTip: true,
+            });
+
+            // 3. Update breadcrumb tip and mark committed in code editor
+            if (this.codeEditorInstance) {
+                if (shortHash) {
+                    this.codeEditorInstance.setTipAddr(shortHash);
+                }
+                const activePath = this.codeEditorInstance.getFilepath();
+                if (activePath) {
+                    this.codeEditorInstance.markAsCommitted(shortHash || tipAddr);
+                }
+            }
+        });
+
+        window.addEventListener('space-gib-file-created', (e: any) => {
+            const { path, content, galaxy, branch } = e.detail || {};
+            if (galaxy || branch) {
+                const g = galaxy || this.changesInstance?.getGalaxyName() || 'code-1';
+                const b = branch || this.changesInstance?.getBranchName() || 'main';
+                this.changesInstance?.setGalaxyAndBranch(g, b, { preserveChanges: true });
+                this.codeEditorInstance?.setGalaxyAndBranch(g, b);
+            }
+            if (path) {
+                this.changesInstance?.recordChange({
+                    path,
+                    status: 'untracked',
+                    content: content ?? '',
+                });
+                this.fileExplorerInstance?.updateDirtyBadges();
+            }
+        });
+
+        window.addEventListener('space-gib-change-discarded', (e: any) => {
+            const { path, originalContent, branch, galaxy } = e.detail || {};
+            if (path) {
+                const b = branch || this.fileExplorerInstance?.getBranchName() || 'main';
+                const g = galaxy || this.fileExplorerInstance?.getGalaxyName() || 'code-1';
+                if (this.fileExplorerInstance?.isUntracked(path, b, g)) {
+                    this.fileExplorerInstance.removeFile(path, b, g);
+                    if (this.codeEditorInstance && this.codeEditorInstance.getFilepath() === path) {
+                        this.codeEditorInstance.clearFile({ repo: g, branch: b });
+                    }
+                } else {
+                    this.fileExplorerInstance?.setFileStatus(path, undefined, b, g);
+                    if (this.codeEditorInstance && this.codeEditorInstance.getFilepath() === path) {
+                        if (originalContent !== undefined) {
+                            this.codeEditorInstance.setContent(originalContent);
+                        } else {
+                            this.showCode(path, b, g);
+                        }
+                    }
+                }
+                this.fileExplorerInstance?.updateDirtyBadges();
+            }
+        });
+    }
+
+    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, galaxy?: 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;
+            }
+
+            const currentRoute = getSpaceGibRouterSvc().getCurrentRoute();
+            const targetGalaxy = galaxy || (currentRoute && 'galaxy' in currentRoute ? (currentRoute as any).galaxy : undefined) || this.fileExplorerInstance?.getGalaxyName() || this.changesInstance?.getGalaxyName() || 'code-1';
+            const targetBranch = branch || (currentRoute && 'branch' in currentRoute ? (currentRoute as any).branch : undefined) || this.fileExplorerInstance?.getBranchName() || this.changesInstance?.getBranchName() || 'main';
+
+            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,
+                });
+
+                this.codeEditorInstance.setGalaxyAndBranch(targetGalaxy, targetBranch);
+
+                if (filePath) {
+                    let casContent: string | undefined = undefined;
+                    let tipAddr: string = 'tip';
+
+                    try {
+                        const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+                        const router = getSpaceGibRouterSvc();
+                        let galaxyIbGib: B2tFSGalaxyIbGib_V1 | undefined;
+                        for (const manifest of router.cosmosManifestCache?.values() || []) {
+                            const entry = manifest.data?.galaxies?.[targetGalaxy];
+                            if (entry?.galaxyAddr) {
+                                galaxyIbGib = await getIbGibFromSpace<B2tFSGalaxyIbGib_V1>({ addr: entry.galaxyAddr, space });
+                                if (galaxyIbGib) break;
+                            }
+                        }
+                        if (galaxyIbGib) {
+                            const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                                galaxyIbGib,
+                                branchName: targetBranch,
+                                metaspace,
+                            });
+                            tipAddr = branchAndRoot.branchIbGib.gib || 'tip';
+                            const rootItem = branchAndRoot.rootItemIbGib_latest || branchAndRoot.rootItemIbGib;
+                            const fileItem = await getFileItemFromPath({
+                                branchSpace: branchAndRoot.branchSpace,
+                                rootItem,
+                                filePath,
+                            });
+                            if (fileItem) {
+                                casContent = await getFileContent({ branchSpace: branchAndRoot.branchSpace, fileItem });
+                            }
+                        }
+                    } catch (readErr) {
+                        console.warn(`${lc} Error reading file [${filePath}] from branch space: ${extractErrorMsg(readErr)}`);
+                    }
+
+                    const workingChange = this.changesInstance?.getChange(filePath, targetBranch);
+                    const isUntrackedInExplorer = this.fileExplorerInstance?.isUntracked(filePath, targetBranch, targetGalaxy);
+                    const fileExistsInCas = casContent !== undefined;
+                    const hasWorkingTreeChange = workingChange !== undefined;
+
+                    // If file doesn't exist in CAS, and is neither in working tree nor marked untracked in explorer, clear editor
+                    if (!fileExistsInCas && !hasWorkingTreeChange && !isUntrackedInExplorer) {
+                        this.codeEditorInstance.clearFile({
+                            repo: targetGalaxy,
+                            branch: targetBranch,
+                        });
+                        this.fileExplorerInstance?.selectFile('');
+                        return;
+                    }
+
+                    const isUntracked = !fileExistsInCas;
+                    const content = workingChange?.content ?? casContent ?? '';
+
+                    this.codeEditorInstance.loadFile({
+                        filepath: filePath,
+                        repo: targetGalaxy,
+                        branch: targetBranch,
+                        tipAddr,
+                        content,
+                        originalContent: casContent,
+                        isUntracked,
+                    });
+                } else {
+                    this.codeEditorInstance.clearFile({
+                        repo: targetGalaxy,
+                        branch: targetBranch,
+                    });
+                }
+            }
+
+            this.changesInstance?.setGalaxyAndBranch(targetGalaxy, targetBranch, { preserveChanges: true });
+
+            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, content, lineCount, isReverted, isUntracked: isUntrackedProp, branch, repo } = e.detail || {};
+            const targetBranch = branch || this.changesInstance?.getBranchName() || 'main';
+            const targetGalaxy = repo || this.changesInstance?.getGalaxyName() || 'code-1';
+            console.log(`${this.lc} Code changed in ${filepath} on branch [${targetBranch}] (${lineCount} lines, isReverted=${isReverted})`);
+            if (filepath) {
+                if (isReverted) {
+                    this.changesInstance?.removeChange(filepath, targetBranch);
+                    this.fileExplorerInstance?.setFileStatus(filepath, undefined, targetBranch, targetGalaxy);
+                } else {
+                    const isUntracked = Boolean(isUntrackedProp || this.changesInstance?.isUntracked(filepath, targetBranch) || this.fileExplorerInstance?.isUntracked(filepath, targetBranch, targetGalaxy));
+                    const status = isUntracked ? 'untracked' : 'modified';
+                    this.changesInstance?.recordChange({
+                        path: filepath,
+                        status,
+                        content: content ?? '',
+                    }, targetBranch);
+                    this.fileExplorerInstance?.setFileStatus(filepath, status, targetBranch, targetGalaxy);
+                }
+            }
+        });
+
+        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.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({ skipNavigate: true, galaxyId: space.name });
+                    if (!this.isApplyingRoute && cosmos?.name) {
+                        const tenant = this.getActiveTenant(cosmos.name);
+                        getSpaceGibRouterSvc().navigate({
+                            kind: 'galaxy',
+                            ...(tenant ? { tenant } : {}),
+                            cosmos: cosmos.name,
+                            galaxy: space.name,
+                            topology: 'branching',
+                            discriminator: 'code',
+                            branch: 'main',
+                        });
+                    }
+                } else if (space.type === 'text') {
+                    this.showLeftPanelView('text', space.name);
+                    this.switchToNotesMode(space.name, { skipNavigate: true, galaxyId: space.name });
+                    if (!this.isApplyingRoute && cosmos?.name) {
+                        const tenant = this.getActiveTenant(cosmos.name);
+                        getSpaceGibRouterSvc().navigate({
+                            kind: 'galaxy',
+                            ...(tenant ? { tenant } : {}),
+                            cosmos: cosmos.name,
+                            galaxy: space.name,
+                            topology: 'linear',
+                            discriminator: 'notes',
+                        });
+                    }
+                }
+            }
+        });
+
+        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', async (e: any) => {
+            const { galaxyName, sourceBranch, newBranchName, scope, itemPath } = e.detail || {};
+            const cleanGalaxy = galaxyName || 'code-1';
+            const cleanSourceBranch = sourceBranch || 'main';
+            const cleanNewBranch = newBranchName?.trim();
+            if (!cleanNewBranch) return;
+
+            const validation = validateBranchName(cleanNewBranch);
+            if (!validation.isValid) {
+                alert(`Invalid branch name: ${validation.error}`);
+                return;
+            }
+
+            const lc = `${this.lc}[space-gib-branch-requested]`;
+            try {
+                const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+                const router = getSpaceGibRouterSvc();
+
+                // 1. Resolve GalaxyIbGib
+                let galaxyIbGib: B2tFSGalaxyIbGib_V1 | undefined;
+                for (const manifest of router.cosmosManifestCache?.values() || []) {
+                    const entry = manifest.data?.galaxies?.[cleanGalaxy];
+                    if (entry?.galaxyAddr) {
+                        galaxyIbGib = await getIbGibFromSpace<B2tFSGalaxyIbGib_V1>({ addr: entry.galaxyAddr, space });
+                        if (galaxyIbGib) break;
+                    }
+                }
+
+                if (!galaxyIbGib) {
+                    throw new Error(`Galaxy [${cleanGalaxy}] not found in cosmos manifest.`);
+                }
+
+                // 2. Resolve source branch space
+                const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                    galaxyIbGib,
+                    branchName: cleanSourceBranch,
+                    metaspace,
+                });
+
+                const activeBranchSpace = branchAndRoot.branchSpace;
+
+                // 3. Execute isomorphic VCS branch creation
+                const branchRes = await executeVcsBranch({
+                    metaspace,
+                    localSpace: space,
+                    sourceBranchSpace: activeBranchSpace,
+                    galaxyIbGib,
+                    branchName: cleanNewBranch,
+                    sourceBranchName: cleanSourceBranch,
+                    itemPath: scope === 'item' ? itemPath : undefined,
+                });
+
+                const finalGalaxy = branchRes.updatedGalaxy || galaxyIbGib;
+                const finalGalaxyAddr = getIbGibAddr({ ibGib: finalGalaxy });
+
+                // 4. Update router cosmos manifest cache with updated galaxy address
+                for (const manifest of router.cosmosManifestCache?.values() || []) {
+                    if (manifest.data?.galaxies?.[cleanGalaxy]) {
+                        manifest.data.galaxies[cleanGalaxy].galaxyAddr = finalGalaxyAddr;
+                        break;
+                    }
+                }
+
+                // 5. Broadcast new galaxy IbGib to metaspace subscribers
+                await (metaspace as any).registerNewIbGib?.({ ibGib: finalGalaxy, space });
+
+                // 6. Update Changes, File Explorer & Code Editor
+                this.changesInstance?.setGalaxyAndBranch(cleanGalaxy, cleanNewBranch);
+                this.fileExplorerInstance?.setGalaxyAndBranch(cleanGalaxy, cleanNewBranch);
+                this.codeEditorInstance?.setGalaxyAndBranch(cleanGalaxy, cleanNewBranch);
+                this.timelineInstance?.setBranch(cleanNewBranch);
+
+                // 8. Navigate router to new branch
+                const activeCosmos = this.cosmosNavigatorInstance?.getActiveCosmos();
+                const activePath = this.codeEditorInstance?.getFilepath();
+                if (activeCosmos) {
+                    const tenant = this.getActiveTenant(activeCosmos);
+                    router.navigate({
+                        kind: 'galaxy',
+                        cosmos: activeCosmos.id || activeCosmos.name,
+                        galaxy: cleanGalaxy,
+                        topology: 'branching',
+                        discriminator: 'code',
+                        branch: cleanNewBranch,
+                        ...(activePath ? { filePath: activePath } : {}),
+                        ...(tenant ? { tenant } : {}),
+                    });
+                }
+
+                console.log(`${lc} Successfully diverged to new branch [${cleanNewBranch}] from ${scope === 'item' ? `item [${itemPath}]` : `worktree [${cleanSourceBranch}]`} in galaxy [${cleanGalaxy}]`);
+            } catch (err) {
+                console.error(`${lc} Failed to branch: ${extractErrorMsg(err)}`);
+                alert(`Failed to create branch: ${extractErrorMsg(err)}`);
+            }
+        });
+
+        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(async () => {
+                const nextIdx = (this.cosmosNavigatorInstance?.getCosmoses().length || 0) + 1;
+                const newCosmos = await 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 spaceId = el.getAttribute('data-space-id') || '';
+                        const name = el.querySelector('.space-item-name')?.textContent || '';
+                        if (type === 'code') {
+                            this.showLeftPanelView('code', name);
+                            this.switchToReposMode({ galaxyId: spaceId });
+                        } else {
+                            this.showLeftPanelView('text', name);
+                            this.switchToNotesMode(name, { galaxyId: spaceId });
+                        }
+                    });
+                });
+            }
+        }
+
+        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({ galaxyId: spaceId });
+                    } else {
+                        this.showLeftPanelView('text', title);
+                        this.switchToNotesMode(title, { galaxyId: spaceId });
+                    }
+                });
+            });
+        }
+
+        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', async () => {
+            menu.classList.add('hidden');
+            this.switchToSpacesMode();
+            this.cosmosNavigatorInstance?.triggerBigBangExplosion();
+            const nextIdx = cosmoses.length + 1;
+            const newC = await 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' ? 'flex' : 'none';
+            viewPoly.style.flexDirection = 'column';
+        }
+        if (viewCosmos) {
+            viewCosmos.style.display = viewName === 'cosmos' ? 'flex' : 'none';
+            viewCosmos.style.flexDirection = 'column';
+        }
+        if (viewCode) {
+            viewCode.style.display = viewName === 'code' ? 'flex' : 'none';
+            viewCode.style.flexDirection = 'column';
+            if (title) {
+                const titleEl = document.getElementById('left-code-space-title');
+                if (titleEl) { titleEl.textContent = title; }
+            }
+        }
+        if (viewText) {
+            viewText.style.display = viewName === 'text' ? 'flex' : 'none';
+            viewText.style.flexDirection = 'column';
+            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; galaxyId?: string }): 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: 'galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxy: opts?.galaxyId || 'code-1',
+                    topology: 'branching',
+                    discriminator: 'code',
+                    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: 'galaxy',
+                    cosmos: activeCosmos.id || activeCosmos.name,
+                    galaxy: opts?.galaxyId || 'notes-1',
+                    topology: 'linear',
+                    discriminator: 'notes',
+                    ...(title ? { topicTjp: title, trail: [title], trailMode: 'tjp' } : {}),
+                    ...(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;
+                if (this.cosmosNavigatorInstance) {
+                    this.cosmosNavigatorInstance.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.
+            // Exception: For bare landing ('polycosmos'), do not attach tenant or redirect to /@playground/polycosmos
+            // so the URL remains bare (e.g. https://local.ibgib.space) to keep full focus on Big Bang.
+            if (route.kind !== 'admin-review' && route.kind !== 'polycosmos' && !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.findCosmos(route.cosmos);
+                        if (!cosmos) {
+                            this.show404(`Cosmos "${route.cosmos}" not found.`);
+                            return;
+                        }
+                        this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
+                        this.updateActiveCosmosDisplay(cosmos);
+                    }
+                    this.showLeftPanelView('cosmos');
+                    this.expandLeftPanel();
+                    await this.showCosmos();
+                    break;
+                }
+                case 'galaxy': {
+                    let cosmosInfo: CosmosInfo | undefined;
+                    if (this.cosmosNavigatorInstance) {
+                        cosmosInfo = await this.cosmosNavigatorInstance.findCosmos(route.cosmos);
+                        if (!cosmosInfo) {
+                            this.show404(`Cosmos "${route.cosmos}" not found.`);
+                            return;
+                        }
+                        const spaceType = route.topology === 'branching' ? 'code' : 'text';
+                        if (!cosmosInfo.spaces.some(s => s.id === route.galaxy)) {
+                            cosmosInfo.spaces.push({
+                                id: route.galaxy,
+                                type: spaceType,
+                                name: route.galaxy,
+                                shortLabel: route.galaxy,
+                                icon: route.topology === 'branching' ? '</>' : '📝',
+                            });
+                        }
+                        this.cosmosNavigatorInstance.selectCosmos(cosmosInfo.id);
+                        this.updateActiveCosmosDisplay(cosmosInfo, route.galaxy || spaceType);
+                    }
+
+                    const policy: GalaxyPolicy = {
+                        topology: route.topology,
+                        role: route.topology === 'branching' ? 'intrinsic' : 'extrinsic',
+                        storageMode: 'text',
+                        defaultBranch: 'main',
+                    };
+
+                    const context: PanelLoadContext = {
+                        route,
+                        cosmosName: route.cosmos,
+                        galaxyName: route.galaxy,
+                        discriminator: route.discriminator,
+                        policy,
+                        cosmosInfo,
+                        shell: this,
+                    };
+
+                    await this.loadRouteForPanels(route, context);
+                    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.findCosmos(route.cosmos);
+                if (!cosmos) {
+                    this.show404(`Cosmos "${route.cosmos}" not found.`);
+                    return;
+                }
+                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.findCosmos(route.cosmos);
+                if (!cosmos) {
+                    this.show404(`Cosmos "${route.cosmos}" not found.`);
+                    return;
+                }
+                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 });