@ibgib/space-gib 0.0.34 → 0.0.36

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

@@ -31,6 +31,10 @@ 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,
@@ -49,6 +53,10 @@ import {
 import {
     registerPitchComponent, PITCH_COMPONENT_NAME, PitchComponentInstance,
 } from "../component/pitch/index.mjs";
+import {
+    getTutorialController,
+    PITCH_TOUR_SCRIPT,
+} from "../component/tutorial/index.mjs";
 import {
     registerCodeEditorComponent, CODE_EDITOR_COMPONENT_NAME,
     CodeEditorComponentInstance,
@@ -69,20 +77,137 @@ 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 { prewarmPlaygroundMetaspace } from "../../cosmos/seed-cosmos-workspace.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;
@@ -92,6 +217,13 @@ export class SpaceGibShellService {
     private notesExplorerInstance?: NotesExplorerComponentInstance;
     private notesInspectorInstance?: NotesInspectorComponentInstance;
 
+    public getCosmosNavigator(): CosmosNavigatorComponentInstance | undefined {
+        return this.cosmosNavigatorInstance;
+    }
+    public getFileExplorer(): FileExplorerComponentInstance | undefined {
+        return this.fileExplorerInstance;
+    }
+
     // Panel States
     private leftPanelState: PanelState = 'collapsed';
     private rightPanelState: PanelState = 'collapsed';
@@ -100,6 +232,8 @@ export class SpaceGibShellService {
     private isResizingLeft = false;
     private isResizingRight = false;
     private isResizingFooter = false;
+    private isResizingExplorerChanges = false;
+    private isResizingChangesTimeline = false;
 
     // Playground Banner State
     private hasBigBangExploded = false;
@@ -114,6 +248,7 @@ export class SpaceGibShellService {
         await this.registerComponents();
         await this.initCosmosNavigator();
         await this.initFileExplorer();
+        await this.initChanges();
         await this.initTimeline();
         await this.initChatView();
         await this.initCodeEditor();
@@ -175,6 +310,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());
@@ -437,7 +610,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();
@@ -459,12 +632,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() {
@@ -479,6 +680,7 @@ export class SpaceGibShellService {
             await registerAdminReviewComponent();
             await registerCosmosNavigatorComponent();
             await registerFileExplorerComponent();
+            await registerChangesComponent();
             await registerTimelineComponent();
             await registerTimelineItemDetailsComponent();
             await registerChatViewComponent();
@@ -560,6 +762,27 @@ export class SpaceGibShellService {
         }
     }
 
+    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 {
@@ -594,49 +817,91 @@ export class SpaceGibShellService {
 
     private bindFileExplorerEvents(): void {
         window.addEventListener('space-gib-file-selected', (e: any) => {
-            const { branch, path, filename } = e.detail || {};
-            console.log(`${this.lc} File selected: ${path || filename} on worktree branch ${branch}`);
-            const fullFile = path || filename || 'src/index.ts';
+            const { 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 tipAddr = '7f8a1b2';
+            const galaxyName = galaxy || 'code-1';
+            const tipAddr = 'tip';
+
             this.chatViewInstance?.setTargetFile(fullFile, `${branchName} @ ${tipAddr}`);
             this.nestedChatInstance?.activateIbGib({ addr: `file ${fullFile}^${tipAddr}` });
 
-            let mockContent: string | undefined = undefined;
-            if (fullFile === 'src/helper.ts') {
-                mockContent = `/**\n * @module my-app/helper\n * Utility functions for space-gib in-memory VCS.\n */\n\nexport function add(a: number, b: number): number {\n    return a + b;\n}\n\nexport function multiply(a: number, b: number): number {\n    return a * b;\n}\n`;
-            } else if (fullFile === 'README.md') {
-                mockContent = `# my-app\n\nDecentralized version-controlled application running on **space-gib**.\n\n- Zero SaaS lock-in\n- Inverted soft rel8ns for living companion discussions\n- Merkle DAG branch worktrees\n`;
-            } else if (fullFile === 'tsconfig.json') {
-                mockContent = `{\n  "compilerOptions": {\n    "target": "ES2022",\n    "module": "NodeNext",\n    "strict": true,\n    "esModuleInterop": true\n  }\n}\n`;
-            }
+            this.showCode(fullFile, branchName, galaxyName);
 
-            this.showCode(fullFile, branchName).then(() => {
-                this.codeEditorInstance?.loadFile({
-                    filepath: fullFile,
+            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,
-                    tipAddr,
-                    content: mockContent,
+                    filePath: fullFile,
+                    ...(tenant ? { tenant } : {}),
                 });
-            });
+            }
+        });
 
-            // Reveal discussions in right panel
-            this.expandRightPanel();
+        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();
+                const tenant = this.getActiveTenant(activeCosmos);
                 getSpaceGibRouterSvc().navigate({
-                    kind: 'code-galaxy',
+                    kind: 'galaxy',
                     cosmos: activeCosmos.id || activeCosmos.name,
-                    galaxyId: 'code-1',
-                    branch: branchName,
-                    filePath: fullFile,
+                    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');
@@ -654,6 +919,117 @@ export class SpaceGibShellService {
         });
     }
 
+    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 {
@@ -781,7 +1157,7 @@ export class SpaceGibShellService {
         }
     }
 
-    public async showCode(filePath?: string, branch?: string): Promise<void> {
+    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);
@@ -790,6 +1166,10 @@ export class SpaceGibShellService {
                 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({
@@ -806,25 +1186,81 @@ export class SpaceGibShellService {
                     componentToInject: this.codeEditorInstance,
                 });
 
+                this.codeEditorInstance.setGalaxyAndBranch(targetGalaxy, targetBranch);
+
                 if (filePath) {
-                    let content: string | undefined = undefined;
-                    if (filePath === 'src/helper.ts') {
-                        content = `/**\n * @module my-app/helper\n * Utility functions for space-gib in-memory VCS.\n */\n\nexport function add(a: number, b: number): number {\n    return a + b;\n}\n\nexport function multiply(a: number, b: number): number {\n    return a * b;\n}\n`;
-                    } else if (filePath === 'README.md') {
-                        content = `# my-app\n\nDecentralized version-controlled application running on **space-gib**.\n\n- Zero SaaS lock-in\n- Inverted soft rel8ns for living companion discussions\n- Merkle DAG branch worktrees\n`;
-                    } else if (filePath === 'tsconfig.json') {
-                        content = `{\n  "compilerOptions": {\n    "target": "ES2022",\n    "module": "NodeNext",\n    "strict": true,\n    "esModuleInterop": true\n  }\n}\n`;
+                    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,
-                        branch: branch || 'main',
-                        tipAddr: '7f8a1b2',
+                        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'; }
@@ -1004,8 +1440,25 @@ export class SpaceGibShellService {
 
     private bindCodeEditorEvents(): void {
         window.addEventListener('space-gib-code-changed', (e: any) => {
-            const { filepath, lineCount } = e.detail || {};
-            console.log(`${this.lc} Code changed in ${filepath} (${lineCount} lines)`);
+            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) => {
@@ -1055,38 +1508,30 @@ export class SpaceGibShellService {
     }
 
     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;
-            }
+        await this.startPitchTour();
+    }
 
-            if (this.pitchInstance) {
-                const componentSvc = await getComponentSvc();
-                await componentSvc.inject({
-                    parentEl: centerPanel,
-                    componentToInject: this.pitchInstance,
-                });
+    public async startPitchTour(): Promise<void> {
+        const lc = `${this.lc}[${this.startPitchTour.name}]`;
+        console.log(`${lc} startPitchTour triggered.`);
+        try {
+            const tutorial = getTutorialController();
+            console.log(`${lc} tutorialController isActive = ${tutorial.isActive}`);
+            if (tutorial.isActive) {
+                await tutorial.next();
+            } else {
+                await tutorial.start(PITCH_TOUR_SCRIPT, this);
             }
-
-            this.collapsePanels();
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
         }
     }
 
     public closePitch(): void {
+        const tutorial = getTutorialController();
+        if (tutorial.isActive) {
+            tutorial.stop();
+        }
         this.showCosmos();
     }
 
@@ -1165,8 +1610,7 @@ export class SpaceGibShellService {
             if (activitySpaces) {
                 let matched = false;
                 activitySpaces.querySelectorAll('.activity-bar-btn').forEach(b => {
-                    const isMatch = b.getAttribute('data-space-id') === spaceId ||
-                                    b.getAttribute('data-space-type') === spaceId;
+                    const isMatch = b.getAttribute('data-space-id') === spaceId;
                     b.classList.toggle('active', isMatch);
                     if (isMatch) matched = true;
                 });
@@ -1269,10 +1713,33 @@ export class SpaceGibShellService {
                 }
                 if (space.type === 'code') {
                     this.showLeftPanelView('code', space.name);
-                    this.switchToReposMode();
+                    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);
+                    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',
+                        });
+                    }
                 }
             }
         });
@@ -1304,6 +1771,7 @@ export class SpaceGibShellService {
         const btnHeaderClone = document.getElementById('btn-header-clone');
 
         btnHeaderPitch?.addEventListener('click', () => {
+            console.log(`[SpaceGibShellService] #btn-header-pitch clicked! Triggering showPitch()...`);
             this.showPitch();
         });
 
@@ -1315,12 +1783,100 @@ export class SpaceGibShellService {
             this.openCloneModal(e.detail);
         });
 
-        window.addEventListener('space-gib-branch-requested', (e: any) => {
+        window.addEventListener('space-gib-branch-requested', async (e: any) => {
             const { galaxyName, sourceBranch, newBranchName, scope, itemPath } = e.detail || {};
-            const scopeDesc = scope === 'item' ? `item [${itemPath}]` : `worktree [${sourceBranch}]`;
-            console.log(`${this.lc} [Phase 2 Branch Stub] Created branch: [${newBranchName}] diverging from ${scopeDesc} in ${galaxyName || 'Code Galaxy'}`);
-            this.showLeftPanelView('code', 'Code Space');
-            this.fileExplorerInstance?.setBranch(newBranchName);
+            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', () => {
@@ -1413,9 +1969,9 @@ export class SpaceGibShellService {
 
         btnSideNewCosmos?.addEventListener('click', () => {
             this.switchToSpacesMode();
-            this.cosmosNavigatorInstance?.triggerBigBangSequence(() => {
+            this.cosmosNavigatorInstance?.triggerBigBangSequence(async () => {
                 const nextIdx = (this.cosmosNavigatorInstance?.getCosmoses().length || 0) + 1;
-                const newCosmos = this.cosmosNavigatorInstance?.createCosmos(`Cosmos ${nextIdx}`);
+                const newCosmos = await this.cosmosNavigatorInstance?.createCosmos(`cosmos-${nextIdx}`);
                 if (newCosmos) {
                     this.cosmosNavigatorInstance?.selectCosmos(newCosmos.id);
                 }
@@ -1461,13 +2017,14 @@ export class SpaceGibShellService {
                 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();
+                            this.switchToReposMode({ galaxyId: spaceId });
                         } else {
                             this.showLeftPanelView('text', name);
-                            this.switchToNotesMode(name);
+                            this.switchToNotesMode(name, { galaxyId: spaceId });
                         }
                     });
                 });
@@ -1492,10 +2049,10 @@ export class SpaceGibShellService {
 
                     if (type === 'code') {
                         this.showLeftPanelView('code', title);
-                        this.switchToReposMode();
+                        this.switchToReposMode({ galaxyId: spaceId });
                     } else {
                         this.showLeftPanelView('text', title);
-                        this.switchToNotesMode(title);
+                        this.switchToNotesMode(title, { galaxyId: spaceId });
                     }
                 });
             });
@@ -1603,12 +2160,12 @@ export class SpaceGibShellService {
         });
 
         const btnNew = menu.querySelector('#btn-header-menu-new-cosmos');
-        btnNew?.addEventListener('click', () => {
+        btnNew?.addEventListener('click', async () => {
             menu.classList.add('hidden');
             this.switchToSpacesMode();
             this.cosmosNavigatorInstance?.triggerBigBangExplosion();
             const nextIdx = cosmoses.length + 1;
-            const newC = this.cosmosNavigatorInstance?.createCosmos(`Cosmos ${nextIdx}`);
+            const newC = await this.cosmosNavigatorInstance?.createCosmos(`cosmos-${nextIdx}`);
             if (newC) {
                 setTimeout(() => {
                     this.cosmosNavigatorInstance?.selectCosmos(newC.id);
@@ -1623,17 +2180,25 @@ export class SpaceGibShellService {
         const viewCode = document.getElementById('left-panel-code-view');
         const viewText = document.getElementById('left-panel-text-view');
 
-        if (viewPoly) { viewPoly.style.display = viewName === 'polycosmos' ? 'block' : 'none'; }
-        if (viewCosmos) { viewCosmos.style.display = viewName === 'cosmos' ? 'block' : 'none'; }
+        if (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' ? 'block' : 'none';
+            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' ? 'block' : 'none';
+            viewText.style.display = viewName === 'text' ? 'flex' : 'none';
+            viewText.style.flexDirection = 'column';
             if (viewName === 'text') {
                 this.initNotesExplorer(title);
             }
@@ -1668,7 +2233,7 @@ export class SpaceGibShellService {
         this.setMode('spaces');
     }
 
-    private switchToReposMode(opts?: { skipNavigate?: boolean }): void {
+    private switchToReposMode(opts?: { skipNavigate?: boolean; galaxyId?: string }): void {
         this.setMode('repos');
         this.expandRightPanel();
         if (!opts?.skipNavigate && !this.isApplyingRoute) {
@@ -1676,9 +2241,11 @@ export class SpaceGibShellService {
             if (activeCosmos) {
                 const tenant = this.getActiveTenant(activeCosmos);
                 getSpaceGibRouterSvc().navigate({
-                    kind: 'code-galaxy',
+                    kind: 'galaxy',
                     cosmos: activeCosmos.id || activeCosmos.name,
-                    galaxyId: 'code-1',
+                    galaxy: opts?.galaxyId || 'code-1',
+                    topology: 'branching',
+                    discriminator: 'code',
                     branch: 'main',
                     ...(tenant ? { tenant } : {}),
                 });
@@ -1694,10 +2261,12 @@ export class SpaceGibShellService {
             if (activeCosmos) {
                 const tenant = this.getActiveTenant(activeCosmos);
                 getSpaceGibRouterSvc().navigate({
-                    kind: 'notes-galaxy',
+                    kind: 'galaxy',
                     cosmos: activeCosmos.id || activeCosmos.name,
-                    galaxyId: opts?.galaxyId || 'notes-1',
-                    ...(title ? { topicTjp: title } : {}),
+                    galaxy: opts?.galaxyId || 'notes-1',
+                    topology: 'linear',
+                    discriminator: 'notes',
+                    ...(title ? { topicTjp: title, trail: [title], trailMode: 'tjp' } : {}),
                     ...(tenant ? { tenant } : {}),
                 });
             }
@@ -1745,12 +2314,17 @@ export class SpaceGibShellService {
         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.
-            if (route.kind !== 'admin-review' && !route.tenant) {
+            // 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) {
@@ -1767,7 +2341,11 @@ export class SpaceGibShellService {
                 }
                 case 'cosmos': {
                     if (this.cosmosNavigatorInstance) {
-                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                        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);
                     }
@@ -1776,60 +2354,46 @@ export class SpaceGibShellService {
                     await this.showCosmos();
                     break;
                 }
-                case 'code-galaxy': {
+                case 'galaxy': {
+                    let cosmosInfo: CosmosInfo | undefined;
                     if (this.cosmosNavigatorInstance) {
-                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
-                        if (!cosmos.spaces.some(s => s.type === 'code' || s.id === route.galaxyId)) {
-                            cosmos.spaces.push({
-                                id: route.galaxyId || 'code-1',
-                                type: 'code',
-                                name: 'Code Space 1',
-                                shortLabel: 'Code 1',
-                                icon: '</>',
-                            });
+                        cosmosInfo = await this.cosmosNavigatorInstance.findCosmos(route.cosmos);
+                        if (!cosmosInfo) {
+                            this.show404(`Cosmos "${route.cosmos}" not found.`);
+                            return;
                         }
-                        this.cosmosNavigatorInstance.selectCosmos(cosmos.id);
-                        this.updateActiveCosmosDisplay(cosmos, 'code');
-                    }
-                    this.expandActivityBar();
-                    this.expandLeftPanel();
-                    this.setActiveActivityBarButton('space', 'code');
-                    this.showLeftPanelView('code', route.galaxyId);
-                    this.switchToReposMode({ skipNavigate: true });
-                    if (route.branch && this.fileExplorerInstance) {
-                        this.fileExplorerInstance.setBranch(route.branch);
-                    }
-                    if (route.filePath && this.fileExplorerInstance) {
-                        this.fileExplorerInstance.selectFile(route.filePath);
-                    }
-                    await this.showCode(route.filePath, route.branch);
-                    break;
-                }
-                case 'notes-galaxy': {
-                    if (this.cosmosNavigatorInstance) {
-                        const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
-                        if (!cosmos.spaces.some(s => s.type === 'text' || s.id === route.galaxyId)) {
-                            cosmos.spaces.push({
-                                id: route.galaxyId || 'notes-1',
-                                type: 'text',
-                                name: 'Text Space 1',
-                                shortLabel: 'Text 1',
-                                icon: '📝',
+                        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(cosmos.id);
-                        this.updateActiveCosmosDisplay(cosmos, 'text');
+                        this.cosmosNavigatorInstance.selectCosmos(cosmosInfo.id);
+                        this.updateActiveCosmosDisplay(cosmosInfo, route.galaxy || spaceType);
                     }
-                    this.expandActivityBar();
-                    this.expandLeftPanel();
-                    this.setActiveActivityBarButton('space', 'text');
-                    this.showLeftPanelView('text', route.galaxyId);
-                    this.switchToNotesMode(route.topicTjp || route.galaxyId, { skipNavigate: true, galaxyId: route.galaxyId });
-                    await this.showNotes(route.topicTjp || route.galaxyId, {
-                        trail: route.trail,
-                        trailMode: route.trailMode,
-                        query: route.query,
-                    });
+
+                    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': {
@@ -1858,7 +2422,11 @@ export class SpaceGibShellService {
         try {
             console.log(`${lc} Resolving raw snapshot route: cosmos=${route.cosmos}, spaceId=${route.spaceId}, addr=${route.ibGibAddr}`);
             if (this.cosmosNavigatorInstance) {
-                const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                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);
             }
@@ -1899,7 +2467,11 @@ export class SpaceGibShellService {
         try {
             console.log(`${lc} Resolving living tip route: cosmos=${route.cosmos}, spaceId=${route.spaceId}, tjp=${route.tjpAddr}`);
             if (this.cosmosNavigatorInstance) {
-                const cosmos = await this.cosmosNavigatorInstance.ensureCosmos(route.cosmos);
+                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);
             }