@ibgib/space-gib 0.0.34 → 0.0.36

package/src/client/ui/component/file-explorer/file-explorer.mts

@@ -1,11 +1,12 @@
 import thisCss from "./file-explorer.css";
 import thisHtml from "./file-explorer.html";
+import vcsStylesCss from "@ibgib/web-gib/dist/ui/component/vcs-styles.css";
 
 import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
 import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
 import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
-import { promptForText } from "@ibgib/web-gib/dist/helpers.web.mjs";
+import { promptForText, promptForConfirm } from "@ibgib/web-gib/dist/helpers.web.mjs";
 import {
     IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
 } from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
@@ -13,6 +14,24 @@ import {
     ElementsBase, IbGibDynamicComponentInstance,
 } from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
 import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+import { getPlaygroundMetaspaceAndSpace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+import {
+    getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib,
+    createFileInGalaxyBranch,
+    getFolderChildren,
+    getFileItemFromPath,
+} 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, getTjpAddr } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { getSpaceGibRouterSvc } from "../../router/index.mjs";
+import {
+    getAllBranchInfosFromGalaxy, getCompositeBranchTreeFromGalaxy,
+    validateBranchName,
+} from "@ibgib/core-gib/dist/cosmology/branching/branch/branch-helpers.mjs";
+import { CompositeBranchNode } from "@ibgib/core-gib/dist/cosmology/branching/branch/branch-types.mjs";
+import { getDeterministicColorInfo } from "@ibgib/web-gib/dist/helpers.mjs";
+import { GibColorInfo } from "@ibgib/web-gib/dist/types.mjs";
 
 export const FILE_EXPLORER_COMPONENT_NAME = 'space-gib-file-explorer';
 
@@ -44,26 +63,43 @@ export class FileExplorerComponentMeta extends IbGibDynamicComponentMetaBase {
             ibGibAddr: ibGibAddr || ROOT_ADDR,
             meta: this,
             html: thisHtml,
-            css: [thisCss],
+            css: [vcsStylesCss, thisCss],
         });
         return component;
     }
 }
 
+/**
+ * A single command item in the file explorer popup command menu.
+ */
+export interface CommandMenuItem {
+    id: string;
+    icon: string;
+    label: string;
+    action: () => void | Promise<void>;
+    danger?: boolean;
+}
+
 /**
  * References to DOM elements within the component's Shadow Root.
  */
 export interface FileExplorerElements extends ElementsBase {
     rootEl: HTMLDivElement;
+    modeToolbarEl?: HTMLDivElement;
+    btnModeSingleEl?: HTMLButtonElement;
+    btnModeCompositeEl?: HTMLButtonElement;
+    btnRefreshExplorerEl?: HTMLButtonElement;
+    singleBranchViewEl?: HTMLDivElement;
+    compositeTreeContainerEl?: HTMLDivElement;
     branchHeaderEl: HTMLDivElement;
     btnBranchToggleEl: HTMLButtonElement;
+    btnBranchSelectEl: HTMLButtonElement;
     branchTitleEl: HTMLSpanElement;
+    branchDirtyBadgeEl?: HTMLSpanElement;
+    branchDropdownMenuEl: HTMLDivElement;
     fileTreeContainerEl: HTMLDivElement;
-    btnNewFileEl: HTMLButtonElement;
-    btnNewFolderEl: HTMLButtonElement;
-    btnCollapseAllEl: HTMLButtonElement;
-    btnBranchBranchEl?: HTMLButtonElement;
-    btnCloneBranchEl?: HTMLButtonElement;
+    btnBranchMenuEl?: HTMLButtonElement;
+    commandMenuPopupEl?: HTMLDivElement;
 }
 
 /**
@@ -75,9 +111,43 @@ export class FileExplorerComponentInstance
 
     protected lc: string = `[${FileExplorerComponentInstance.name}]`;
 
+    private galaxyName: string = '';
     private branchName: string = 'main';
-    private isBranchExpanded: boolean = true;
-    private selectedFilePath: string = 'src/index.ts';
+    private viewMode: 'single' | 'composite' = 'single';
+    private isSingleExpanded: boolean = true;
+    private isCompositeExpanded: boolean = true;
+    private isDropdownOpen: boolean = false;
+    private selectedFilePath: string = '';
+    private branchFileStatusMap: Map<string, Map<string, 'untracked' | 'modified'>> = new Map();
+    private branchColorCache: Map<string, GibColorInfo> = new Map();
+    private loadTreeSeq: number = 0;
+    private activeCommandMenuAnchor: HTMLElement | null = null;
+
+    private getBranchKey(galaxyName: string = this.galaxyName, branchName: string = this.branchName): string {
+        return `${galaxyName || 'code-1'}~${branchName || 'main'}`;
+    }
+
+    public getFileStatusMap(galaxyName: string = this.galaxyName, branchName: string = this.branchName): Map<string, 'untracked' | 'modified'> {
+        const key = this.getBranchKey(galaxyName, branchName);
+        let map = this.branchFileStatusMap.get(key);
+        if (!map) {
+            map = new Map();
+            this.branchFileStatusMap.set(key, map);
+        }
+        return map;
+    }
+
+    private async resolveGalaxyIbGib(galaxyName: string, space: any): Promise<B2tFSGalaxyIbGib_V1 | undefined> {
+        const router = getSpaceGibRouterSvc();
+        for (const manifest of router.cosmosManifestCache?.values() || []) {
+            const entry = manifest.data?.galaxies?.[galaxyName];
+            if (entry?.galaxyAddr) {
+                const gib = await getIbGibFromSpace<B2tFSGalaxyIbGib_V1>({ addr: entry.galaxyAddr, space });
+                if (gib) return gib;
+            }
+        }
+        return undefined;
+    }
 
     get el(): FileExplorerElements {
         if (!this.elements) {
@@ -86,25 +156,83 @@ export class FileExplorerComponentInstance
         return this.elements;
     }
 
+    private onWindowClick = (e: MouseEvent) => {
+        const path = e.composedPath();
+        if (this.isDropdownOpen) {
+            const insideSelector = path.some(
+                (target: any) => target.id === 'branch-selector-container' || (target.classList && target.classList.contains('branch-dropdown-menu'))
+            );
+            if (!insideSelector) {
+                this.closeBranchDropdown();
+            }
+        }
+
+        if (this.el?.commandMenuPopupEl && this.el.commandMenuPopupEl.style.display !== 'none') {
+            const insideMenu = path.some(
+                (target: any) => target.id === 'command-menu-popup' || (target.classList && target.classList.contains('branch-menu-btn'))
+            );
+            if (!insideMenu) {
+                this.closeCommandMenu();
+            }
+        }
+    };
+
+    private onWindowKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            if (this.isDropdownOpen) {
+                this.closeBranchDropdown();
+            }
+            this.closeCommandMenu();
+        }
+    };
+
+    private onCodeChanged = (e: any) => {
+        const { filepath, branch } = e.detail || {};
+        if (filepath) {
+            const statusMap = this.getFileStatusMap(this.galaxyName, branch || this.branchName);
+            if (!statusMap.has(filepath)) {
+                this.setFileStatus(filepath, 'modified', branch || this.branchName);
+            }
+        }
+    };
+
     override async created(): Promise<void> {
         const lc = `${this.lc}[${this.created.name}]`;
         try {
             const shadow = this.shadowRoot!;
             this.elements = {
                 rootEl: shadow.getElementById('file-explorer-root') as HTMLDivElement,
+                modeToolbarEl: shadow.getElementById('explorer-mode-toolbar') as HTMLDivElement,
+                btnModeSingleEl: shadow.getElementById('btn-mode-single') as HTMLButtonElement,
+                btnModeCompositeEl: shadow.getElementById('btn-mode-composite') as HTMLButtonElement,
+                btnRefreshExplorerEl: shadow.getElementById('btn-refresh-explorer') as HTMLButtonElement,
+                singleBranchViewEl: shadow.getElementById('single-branch-view') as HTMLDivElement,
+                compositeTreeContainerEl: shadow.getElementById('composite-tree-container') as HTMLDivElement,
                 branchHeaderEl: shadow.getElementById('branch-header') as HTMLDivElement,
                 btnBranchToggleEl: shadow.getElementById('btn-branch-toggle') as HTMLButtonElement,
+                btnBranchSelectEl: shadow.getElementById('btn-branch-select') as HTMLButtonElement,
                 branchTitleEl: shadow.getElementById('branch-title') as HTMLSpanElement,
+                branchDirtyBadgeEl: shadow.getElementById('branch-dirty-badge') as HTMLSpanElement,
+                branchDropdownMenuEl: shadow.getElementById('branch-dropdown-menu') as HTMLDivElement,
                 fileTreeContainerEl: shadow.getElementById('file-tree-container') as HTMLDivElement,
-                btnNewFileEl: shadow.getElementById('btn-new-file') as HTMLButtonElement,
-                btnNewFolderEl: shadow.getElementById('btn-new-folder') as HTMLButtonElement,
-                btnCollapseAllEl: shadow.getElementById('btn-collapse-all') as HTMLButtonElement,
-                btnBranchBranchEl: shadow.getElementById('btn-branch-branch') as HTMLButtonElement,
-                btnCloneBranchEl: shadow.getElementById('btn-clone-branch') as HTMLButtonElement,
+                btnBranchMenuEl: shadow.getElementById('btn-branch-menu') as HTMLButtonElement,
+                commandMenuPopupEl: shadow.getElementById('command-menu-popup') as HTMLDivElement,
                 contentEl: shadow.getElementById('file-explorer-root') as HTMLDivElement,
             };
 
+            const isExpanded = this.viewMode === 'single' ? this.isSingleExpanded : this.isCompositeExpanded;
+            this.toggleAttribute('collapsed', !isExpanded);
             this.bindHandlers();
+            if (this.galaxyName) {
+                this.updateBranchColorStyling();
+            }
+            if (this.el?.fileTreeContainerEl) {
+                this.el.fileTreeContainerEl.innerHTML = `<div class="empty-tree-msg">No galaxy selected</div>`;
+            }
+
+            window.addEventListener('click', this.onWindowClick);
+            window.addEventListener('keydown', this.onWindowKeyDown);
+            window.addEventListener('space-gib-code-changed', this.onCodeChanged);
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
         }
@@ -113,73 +241,39 @@ export class FileExplorerComponentInstance
     private bindHandlers(): void {
         const shadow = this.shadowRoot!;
 
+        // View Mode Switcher
+        this.el.btnModeSingleEl?.addEventListener('click', () => {
+            this.setViewMode('single');
+        });
+        this.el.btnModeCompositeEl?.addEventListener('click', () => {
+            this.setViewMode('composite');
+        });
+        this.el.btnRefreshExplorerEl?.addEventListener('click', () => {
+            if (this.viewMode === 'single') {
+                this.loadBranchTree(this.galaxyName, this.branchName);
+            } else {
+                this.loadCompositeBranchTree();
+            }
+        });
+
         // Branch header toggle
         this.el.branchHeaderEl.addEventListener('click', (e) => {
             const target = e.target as HTMLElement;
             if (target.closest('.action-btn')) return; // ignore action buttons
+            if (target.closest('#branch-selector-container')) return; // ignore branch selector
             this.toggleBranchAccordion();
         });
 
-        // Action buttons
-        this.el.btnNewFileEl.addEventListener('click', (e) => {
+        // Branch dropdown toggle
+        this.el.btnBranchSelectEl.addEventListener('click', (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new CustomEvent('space-gib-new-file-requested', {
-                detail: { branch: this.branchName },
-                bubbles: true,
-                composed: true,
-            }));
+            this.toggleBranchDropdown();
         });
 
-        this.el.btnNewFolderEl.addEventListener('click', (e) => {
+        // Single Branch Command Menu (⋮)
+        this.el.btnBranchMenuEl?.addEventListener('click', (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new CustomEvent('space-gib-new-folder-requested', {
-                detail: { branch: this.branchName },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-
-        this.el.btnCollapseAllEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.collapseAllFolders();
-        });
-
-        // Worktree Branch action
-        this.el.btnBranchBranchEl?.addEventListener('click', async (e) => {
-            e.stopPropagation();
-            const newBranchName = await promptForText({
-                title: 'Branch from Worktree',
-                msg: `Create new branch diverging from [${this.branchName}]:`,
-                defaultValue: `feature/branch-from-${this.branchName}`,
-                cancelable: true,
-            });
-            if (newBranchName) {
-                console.log(`${this.lc} New branch created from worktree [${this.branchName}]: ${newBranchName}`);
-                this.setBranch(newBranchName);
-                this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
-                    detail: {
-                        galaxyName: 'Code Galaxy',
-                        sourceBranch: this.branchName,
-                        newBranchName,
-                        scope: 'branch',
-                    },
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        });
-
-        // Branch Clone action
-        this.el.btnCloneBranchEl?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new CustomEvent('space-gib-clone-requested', {
-                detail: {
-                    galaxyName: 'Code Galaxy',
-                    branchName: this.branchName,
-                },
-                bubbles: true,
-                composed: true,
-            }));
+            this.showCommandMenu(this.el.btnBranchMenuEl!, this.getBranchCommandMenuItems(this.branchName));
         });
 
         // Single Item Branch actions
@@ -190,31 +284,41 @@ export class FileExplorerComponentInstance
                 const path = treeItem?.getAttribute('data-path') || treeItem?.getAttribute('data-folder') || '';
                 const isDir = treeItem?.classList.contains('folder') || false;
                 const filename = path.split('/').pop() || path;
-                const defaultBranch = `feature/branch-${filename.replace(/[^a-zA-Z0-9]/g, '-')}`;
-
-                const newBranchName = await promptForText({
-                    title: `Branch from ${isDir ? 'Directory' : 'File'} Item`,
-                    msg: `Create new branch isolating and diverging from item [${path}]:`,
-                    defaultValue: defaultBranch,
-                    cancelable: true,
-                });
+                let candidateName = `feature-branch-${filename.replace(/[^a-zA-Z0-9_.-]/g, '-')}`;
+                let promptMsg = `Create new branch isolating and diverging from item [${path}]:`;
+                let cleanBranchName = '';
 
-                if (newBranchName) {
-                    console.log(`${this.lc} New branch created from item [${path}]: ${newBranchName}`);
-                    this.setBranch(newBranchName);
-                    this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
-                        detail: {
-                            galaxyName: 'Code Galaxy',
-                            sourceBranch: this.branchName,
-                            itemPath: path,
-                            isDir,
-                            newBranchName,
-                            scope: 'item',
-                        },
-                        bubbles: true,
-                        composed: true,
-                    }));
+                while (true) {
+                    const newBranchName = await promptForText({
+                        title: `Branch from ${isDir ? 'Directory' : 'File'} Item`,
+                        msg: promptMsg,
+                        defaultValue: candidateName,
+                        cancelable: true,
+                    });
+                    if (!newBranchName || !newBranchName.trim()) return;
+                    cleanBranchName = newBranchName.trim();
+                    const validation = validateBranchName(cleanBranchName);
+                    if (!validation.isValid) {
+                        candidateName = cleanBranchName;
+                        promptMsg = `Invalid branch name: ${validation.error}\n\nPlease enter a valid branch name:`;
+                        continue;
+                    }
+                    break;
                 }
+
+                console.log(`${this.lc} New branch requested from item [${path}]: ${cleanBranchName}`);
+                this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                    detail: {
+                        galaxyName: this.galaxyName,
+                        sourceBranch: this.branchName,
+                        itemPath: path,
+                        isDir,
+                        newBranchName: cleanBranchName,
+                        scope: 'item',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
             });
         });
 
@@ -281,9 +385,161 @@ export class FileExplorerComponentInstance
         });
     }
 
+    public toggleBranchDropdown(): void {
+        if (this.isDropdownOpen) {
+            this.closeBranchDropdown();
+        } else {
+            this.openBranchDropdown();
+        }
+    }
+
+    public async openBranchDropdown(): Promise<void> {
+        if (!this.el?.branchDropdownMenuEl) return;
+        this.isDropdownOpen = true;
+        this.el.branchDropdownMenuEl.style.display = 'flex';
+        await this.populateBranchDropdown();
+    }
+
+    public closeBranchDropdown(): void {
+        if (!this.el?.branchDropdownMenuEl) return;
+        this.isDropdownOpen = false;
+        this.el.branchDropdownMenuEl.style.display = 'none';
+    }
+
+    public async populateBranchDropdown(): Promise<void> {
+        const menu = this.el?.branchDropdownMenuEl;
+        if (!menu) return;
+        menu.innerHTML = '<div class="branch-dropdown-item" style="color: #64748b; cursor: default;">Loading branches...</div>';
+
+        try {
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            const galaxyIbGib = await this.resolveGalaxyIbGib(this.galaxyName, space);
+            if (!galaxyIbGib) {
+                menu.innerHTML = '<div class="branch-dropdown-item" style="color: #ef4444; cursor: default;">No galaxy found</div>';
+                return;
+            }
+
+            const branchInfos = await getAllBranchInfosFromGalaxy({ galaxyIbGib, metaspace }).catch(() => []);
+            if (branchInfos.length === 0) {
+                menu.innerHTML = '<div class="branch-dropdown-item" style="color: #64748b; cursor: default;">No branches found</div>';
+                return;
+            }
+
+            // Sort: 'main' first, then alphabetical
+            branchInfos.sort((a, b) => {
+                if (a.branchName === 'main') return -1;
+                if (b.branchName === 'main') return 1;
+                return a.branchName.localeCompare(b.branchName);
+            });
+
+            menu.innerHTML = '';
+            for (const info of branchInfos) {
+                const itemEl = document.createElement('div');
+                const isActive = info.branchName === this.branchName;
+                itemEl.className = `branch-dropdown-item ${isActive ? 'active' : ''}`;
+                itemEl.setAttribute('data-branch', info.branchName);
+
+                // Dot color derived from branch TJP
+                const colorInfo = await this.getBranchColor(info.branchName);
+                const dotEl = document.createElement('span');
+                dotEl.className = 'branch-color-dot';
+                dotEl.style.backgroundColor = colorInfo.punctiliarColor;
+
+                const nameEl = document.createElement('span');
+                nameEl.className = 'branch-item-name';
+                nameEl.textContent = info.branchName;
+
+                itemEl.appendChild(dotEl);
+                itemEl.appendChild(nameEl);
+
+                if (isActive) {
+                    const checkEl = document.createElement('span');
+                    checkEl.className = 'branch-dropdown-check';
+                    checkEl.textContent = '✓';
+                    itemEl.appendChild(checkEl);
+                }
+
+                itemEl.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.closeBranchDropdown();
+                    if (info.branchName !== this.branchName) {
+                        this.dispatchEvent(new CustomEvent('space-gib-branch-switched', {
+                            detail: {
+                                galaxy: this.galaxyName,
+                                branch: info.branchName,
+                            },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    }
+                });
+
+                menu.appendChild(itemEl);
+            }
+        } catch (err) {
+            menu.innerHTML = `<div class="branch-dropdown-item" style="color: #ef4444; cursor: default;">Error loading branches</div>`;
+            console.error(`${this.lc} Error populating branch dropdown: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    public clearBranchColorCache(): void {
+        this.branchColorCache.clear();
+    }
+
+    public async getBranchColor(branchName: string, galaxyName: string = this.galaxyName): Promise<GibColorInfo> {
+        const cacheKey = `${galaxyName || 'unknown'}~${branchName}`;
+        let colorInfo = this.branchColorCache.get(cacheKey);
+        if (colorInfo) return colorInfo;
+
+        let branchAddrOrTjp: string | undefined;
+        try {
+            if (galaxyName) {
+                const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+                const galaxyIbGib = await this.resolveGalaxyIbGib(galaxyName, space);
+                if (galaxyIbGib) {
+                    const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                        galaxyIbGib,
+                        branchName,
+                        metaspace,
+                    }).catch(() => undefined);
+                    if (branchAndRoot?.branchIbGib) {
+                        branchAddrOrTjp = getTjpAddr({ ibGib: branchAndRoot.branchIbGib }) || branchAndRoot.branchInfo?.branchAddr;
+                    }
+                }
+            }
+        } catch (err) {
+            // ignore and fallback
+        }
+
+        colorInfo = getDeterministicColorInfo({
+            ibGibAddr: branchAddrOrTjp,
+            gib: branchAddrOrTjp ? undefined : branchName,
+            translucentAlpha: 18,
+        });
+        if (galaxyName && branchAddrOrTjp) {
+            this.branchColorCache.set(cacheKey, colorInfo);
+        }
+        return colorInfo;
+    }
+
+    public async updateBranchColorStyling(): Promise<void> {
+        try {
+            if (!this.galaxyName) return;
+            const colorInfo = await this.getBranchColor(this.branchName, this.galaxyName);
+            if (colorInfo) {
+                this.style.setProperty('--branch-accent-color', colorInfo.punctiliarColor);
+                this.style.setProperty('--branch-accent-translucent', colorInfo.punctiliarColorTranslucent);
+                this.style.setProperty('--branch-accent-contrast', colorInfo.punctiliarColorContrast);
+            }
+        } catch (err) {
+            console.warn(`${this.lc} Error updating branch color styling: ${extractErrorMsg(err)}`);
+        }
+    }
+
     public toggleBranchAccordion(): void {
-        this.isBranchExpanded = !this.isBranchExpanded;
-        if (this.isBranchExpanded) {
+        this.isSingleExpanded = !this.isSingleExpanded;
+        this.toggleAttribute('collapsed', !this.isSingleExpanded);
+        if (this.isSingleExpanded) {
             this.el.branchHeaderEl.classList.remove('collapsed');
             this.el.branchHeaderEl.classList.add('expanded');
             this.el.fileTreeContainerEl.classList.remove('collapsed');
@@ -292,6 +548,30 @@ export class FileExplorerComponentInstance
             this.el.branchHeaderEl.classList.remove('expanded');
             this.el.fileTreeContainerEl.classList.add('collapsed');
         }
+        this.dispatchEvent(new CustomEvent('space-gib-accordion-toggled', {
+            detail: { isExpanded: this.isSingleExpanded },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public toggleCompositeRootAccordion(headerEl: HTMLElement, bodyEl: HTMLElement): void {
+        this.isCompositeExpanded = !this.isCompositeExpanded;
+        this.toggleAttribute('collapsed', !this.isCompositeExpanded);
+        if (this.isCompositeExpanded) {
+            headerEl.classList.remove('collapsed');
+            headerEl.classList.add('expanded');
+            bodyEl.style.display = 'flex';
+        } else {
+            headerEl.classList.add('collapsed');
+            headerEl.classList.remove('expanded');
+            bodyEl.style.display = 'none';
+        }
+        this.dispatchEvent(new CustomEvent('space-gib-accordion-toggled', {
+            detail: { isExpanded: this.isCompositeExpanded },
+            bubbles: true,
+            composed: true,
+        }));
     }
 
     public collapseAllFolders(): void {
@@ -300,7 +580,6 @@ export class FileExplorerComponentInstance
             const folderName = folderEl.getAttribute('data-folder');
             folderEl.classList.remove('expanded');
             const chevron = folderEl.querySelector('.tree-chevron');
-            // if (chevron) chevron.textContent = '▶';
             if (chevron) { chevron.textContent = '▼'; }
             if (folderName) {
                 shadow.querySelectorAll(`.child-of-${folderName}`).forEach(child => child.classList.add('hidden'));
@@ -320,25 +599,812 @@ export class FileExplorerComponentInstance
         });
     }
 
-    public setBranch(branchName: string): void {
+    public setGalaxyAndBranch(galaxyName: string, branchName: string = 'main', forceReload: boolean = false): void {
+        const changed = this.galaxyName !== galaxyName || this.branchName !== branchName;
+        this.galaxyName = galaxyName;
+        this.branchName = branchName;
+        if (this.el?.branchTitleEl) {
+            this.el.branchTitleEl.textContent = branchName;
+        }
+        this.updateBranchColorStyling();
+        this.updateDirtyBadges();
+        if (changed || forceReload) {
+            if (this.viewMode === 'composite') {
+                this.loadCompositeBranchTree();
+            } else {
+                this.loadBranchTree(galaxyName, branchName);
+            }
+        }
+    }
+
+    public async loadBranchTree(galaxyName: string = this.galaxyName, branchName: string = this.branchName): Promise<void> {
+        const seq = ++this.loadTreeSeq;
+        this.galaxyName = galaxyName;
         this.branchName = branchName;
         if (this.el?.branchTitleEl) {
             this.el.branchTitleEl.textContent = branchName;
         }
+
+        const container = this.el?.fileTreeContainerEl;
+        if (!container) return;
+
+        if (!galaxyName) {
+            container.innerHTML = '<div class="empty-tree-msg">No galaxy selected</div>';
+            return;
+        }
+
+        try {
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            if (seq !== this.loadTreeSeq) return;
+
+            const galaxyIbGib = await this.resolveGalaxyIbGib(galaxyName, space);
+            if (seq !== this.loadTreeSeq) return;
+
+            if (!galaxyIbGib) {
+                container.innerHTML = `<div class="empty-tree-msg">Galaxy [${galaxyName}] not found in cosmos manifest</div>`;
+                return;
+            }
+
+            const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                galaxyIbGib,
+                branchName,
+                metaspace,
+            });
+            if (seq !== this.loadTreeSeq) return;
+
+            const branchSpace = branchAndRoot.branchSpace;
+            const rootItem = branchAndRoot.rootItemIbGib_latest || branchAndRoot.rootItemIbGib;
+
+            const children = await getFolderChildren({ branchSpace, folderItem: rootItem });
+            if (seq !== this.loadTreeSeq) return;
+
+            const committedNames = new Set(children.map(c => c.data.name));
+
+            // Merge untracked working-tree files not yet in CAS for this specific branch
+            const statusMap = this.getFileStatusMap(galaxyName, branchName);
+            const untrackedNames: string[] = [];
+            for (const [filePath, status] of statusMap) {
+                if (status === 'untracked' && !committedNames.has(filePath)) {
+                    untrackedNames.push(filePath);
+                }
+            }
+
+            if (children.length === 0 && untrackedNames.length === 0) {
+                const emptyMsg = document.createElement('div');
+                emptyMsg.className = 'empty-tree-msg';
+                emptyMsg.innerHTML = `No files in worktree yet.<br/>Click <span class="highlight">📄+</span> to create a file.`;
+                if (seq !== this.loadTreeSeq) return;
+                container.replaceChildren(emptyMsg);
+                return;
+            }
+
+            const createRow = (name: string, isDir: boolean): HTMLElement => {
+                const itemEl = document.createElement('div');
+                itemEl.className = `tree-item ${isDir ? 'folder' : 'file'} ${name === this.selectedFilePath ? 'selected' : ''}`;
+                itemEl.setAttribute(isDir ? 'data-folder' : 'data-path', name);
+                itemEl.setAttribute('data-name', name);
+                itemEl.tabIndex = 0;
+
+                const icon = isDir ? '📁' : (name.endsWith('.md') ? '📝' : (name.endsWith('.json') ? '⚙️' : '📄'));
+                const status = !isDir ? statusMap.get(name) : undefined;
+                const statusClass = status ? (status === 'untracked' ? 'vcs-untracked' : 'vcs-modified') : '';
+                const badgeHtml = status ? `<span class="vcs-status-badge ${status}" title="${status === 'untracked' ? 'Untracked' : 'Modified'}">${status === 'untracked' ? 'U' : 'M'}</span>` : '';
+
+                itemEl.innerHTML = `
+                    <span class="tree-indent tree-indent-2"></span>
+                    <span class="tree-icon">${icon}</span>
+                    <span class="tree-label ${statusClass}">${name}</span>
+                    ${badgeHtml}
+                `;
+
+                if (!isDir) {
+                    itemEl.addEventListener('click', () => {
+                        this.selectFile(name);
+                        this.dispatchEvent(new CustomEvent('space-gib-file-selected', {
+                            detail: {
+                                galaxy: this.galaxyName,
+                                branch: this.branchName,
+                                path: name,
+                                name: name,
+                            },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    });
+                }
+
+                return itemEl;
+            };
+
+            interface ExplorerItem {
+                name: string;
+                isDir: boolean;
+            }
+            const allItems: ExplorerItem[] = [
+                ...children.map(c => ({ name: c.data.name, isDir: c.data.fsType === 'folder' })),
+                ...untrackedNames.map(name => ({ name, isDir: false })),
+            ];
+
+            if (this.selectedFilePath && !allItems.some(i => i.name === this.selectedFilePath)) {
+                this.selectedFilePath = '';
+            }
+
+            // Sort: folders first, then alphabetically by name (case-insensitive, natural numeric sort)
+            allItems.sort((a, b) => {
+                if (a.isDir !== b.isDir) {
+                    return a.isDir ? -1 : 1;
+                }
+                return a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true });
+            });
+
+            const fragment = document.createDocumentFragment();
+            for (const item of allItems) {
+                fragment.appendChild(createRow(item.name, item.isDir));
+            }
+
+            if (seq !== this.loadTreeSeq) return;
+            container.replaceChildren(fragment);
+            this.updateDirtyBadges();
+        } catch (err) {
+            console.error(`${this.lc} Failed to load branch tree: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    public isUntracked(filepath: string, branchName: string = this.branchName, galaxyName: string = this.galaxyName): boolean {
+        return this.getFileStatusMap(galaxyName, branchName).get(filepath) === 'untracked';
+    }
+
+    public removeFile(filepath: string, branchName: string = this.branchName, galaxyName: string = this.galaxyName): void {
+        this.getFileStatusMap(galaxyName, branchName).delete(filepath);
+        if (this.selectedFilePath === filepath && branchName === this.branchName) {
+            this.selectedFilePath = '';
+        }
+        if (branchName === this.branchName && galaxyName === this.galaxyName) {
+            this.loadBranchTree(this.galaxyName, this.branchName);
+        }
+        this.updateDirtyBadges();
+    }
+
+    public setFileStatus(filepath: string, status?: 'untracked' | 'modified', branchName: string = this.branchName, galaxyName: string = this.galaxyName): void {
+        const statusMap = this.getFileStatusMap(galaxyName, branchName);
+        if (status) {
+            statusMap.set(filepath, status);
+        } else {
+            statusMap.delete(filepath);
+        }
+
+        this.updateDirtyBadges();
+
+        // Only update DOM badges if this is the currently viewed branch
+        if (branchName !== this.branchName || galaxyName !== this.galaxyName) {
+            return;
+        }
+
+        const shadow = this.shadowRoot;
+        if (!shadow) return;
+        const fileEl = shadow.querySelector(`.tree-item.file[data-path="${filepath}"]`);
+        if (!fileEl) return;
+        const labelEl = fileEl.querySelector('.tree-label');
+        let badgeEl = fileEl.querySelector('.vcs-status-badge');
+        if (!status) {
+            labelEl?.classList.remove('vcs-untracked', 'vcs-modified');
+            badgeEl?.remove();
+            return;
+        }
+        labelEl?.classList.remove('vcs-untracked', 'vcs-modified');
+        labelEl?.classList.add(status === 'untracked' ? 'vcs-untracked' : 'vcs-modified');
+        if (!badgeEl) {
+            badgeEl = document.createElement('span');
+            fileEl.appendChild(badgeEl);
+        }
+        badgeEl.className = `vcs-status-badge ${status}`;
+        badgeEl.textContent = status === 'untracked' ? 'U' : 'M';
+        badgeEl.setAttribute('title', status === 'untracked' ? 'Untracked' : 'Modified');
+    }
+
+    public clearAllStatusBadges(branchName: string = this.branchName, galaxyName: string = this.galaxyName): void {
+        this.getFileStatusMap(galaxyName, branchName).clear();
+        this.updateDirtyBadges();
+        if (branchName === this.branchName && galaxyName === this.galaxyName) {
+            this.loadBranchTree(this.galaxyName, this.branchName);
+        }
+    }
+
+    public setBranch(branchName: string): void {
+        this.setGalaxyAndBranch(this.galaxyName, branchName);
     }
 
     public getBranch(): string {
         return this.branchName;
     }
 
+    public getBranchName(): string {
+        return this.branchName;
+    }
+
+    public getGalaxyName(): string {
+        return this.galaxyName;
+    }
+
     public getSelectedFilePath(): string {
         return this.selectedFilePath;
     }
 
+    public setViewMode(mode: 'single' | 'composite'): void {
+        this.viewMode = mode;
+        this.closeCommandMenu();
+        if (this.el.btnModeSingleEl) {
+            this.el.btnModeSingleEl.classList.toggle('active', mode === 'single');
+        }
+        if (this.el.btnModeCompositeEl) {
+            this.el.btnModeCompositeEl.classList.toggle('active', mode === 'composite');
+        }
+        if (this.el.singleBranchViewEl) {
+            this.el.singleBranchViewEl.style.display = mode === 'single' ? 'flex' : 'none';
+            this.el.singleBranchViewEl.style.flexDirection = 'column';
+        }
+        if (this.el.compositeTreeContainerEl) {
+            this.el.compositeTreeContainerEl.style.display = mode === 'composite' ? 'flex' : 'none';
+            this.el.compositeTreeContainerEl.style.flexDirection = 'column';
+        }
+
+        const isExpanded = mode === 'single' ? this.isSingleExpanded : this.isCompositeExpanded;
+        this.toggleAttribute('collapsed', !isExpanded);
+
+        this.dispatchEvent(new CustomEvent('space-gib-view-mode-changed', {
+            detail: { mode },
+            bubbles: true,
+            composed: true,
+        }));
+
+        this.dispatchEvent(new CustomEvent('space-gib-accordion-toggled', {
+            detail: { isExpanded },
+            bubbles: true,
+            composed: true,
+        }));
+
+        if (mode === 'composite') {
+            this.loadCompositeBranchTree();
+        } else {
+            this.loadBranchTree(this.galaxyName, this.branchName);
+        }
+    }
+
+    public getViewMode(): 'single' | 'composite' {
+        return this.viewMode;
+    }
+
+    public getBranchCommandMenuItems(branchName: string): CommandMenuItem[] {
+        const items: CommandMenuItem[] = [
+            {
+                id: 'new-sub-branch',
+                icon: '🌿+',
+                label: `New Sub-Branch...`,
+                action: () => this.handleNewSubBranch(branchName),
+            },
+            {
+                id: 'new-file',
+                icon: '📄+',
+                label: `New File...`,
+                action: () => this.handleNewFile(branchName),
+            },
+            {
+                id: 'new-folder',
+                icon: '📁+',
+                label: `New Folder...`,
+                action: () => this.handleNewFolder(branchName),
+            },
+            {
+                id: 'clone-branch',
+                icon: '⤓',
+                label: `Clone / Export Worktree...`,
+                action: () => this.handleCloneBranch(branchName),
+            },
+        ];
+
+        if (this.viewMode === 'single' || branchName === this.branchName) {
+            items.push({
+                id: 'collapse-all',
+                icon: '⇱',
+                label: 'Collapse Folders',
+                action: () => this.collapseAllFolders(),
+            });
+        }
+
+        return items;
+    }
+
+    public showCommandMenu(anchorEl: HTMLElement, items: CommandMenuItem[]): void {
+        const menuEl = this.el?.commandMenuPopupEl;
+        if (!menuEl) return;
+
+        if (this.activeCommandMenuAnchor === anchorEl && menuEl.style.display !== 'none') {
+            this.closeCommandMenu();
+            return;
+        }
+
+        this.closeCommandMenu();
+        this.activeCommandMenuAnchor = anchorEl;
+        anchorEl.classList.add('active');
+        menuEl.innerHTML = '';
+
+        for (const item of items) {
+            const row = document.createElement('div');
+            row.className = `command-menu-item ${item.danger ? 'danger' : ''}`;
+            row.innerHTML = `
+                <span class="cmd-icon">${item.icon}</span>
+                <span class="cmd-label">${item.label}</span>
+            `;
+            row.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                this.closeCommandMenu();
+                await item.action();
+            });
+            menuEl.appendChild(row);
+        }
+
+        // Calculate absolute position inside file-explorer-root
+        const rootRect = this.el.rootEl.getBoundingClientRect();
+        const anchorRect = anchorEl.getBoundingClientRect();
+
+        const top = anchorRect.bottom - rootRect.top + 4;
+        const right = rootRect.right - anchorRect.right;
+
+        menuEl.style.top = `${Math.max(0, top)}px`;
+        menuEl.style.right = `${Math.max(4, right)}px`;
+        menuEl.style.left = 'auto';
+        menuEl.style.display = 'flex';
+    }
+
+    public closeCommandMenu(): void {
+        if (!this.el?.commandMenuPopupEl) return;
+        this.el.commandMenuPopupEl.style.display = 'none';
+        if (this.activeCommandMenuAnchor) {
+            this.activeCommandMenuAnchor.classList.remove('active');
+            this.activeCommandMenuAnchor = null;
+        }
+    }
+
+    public async handleNewSubBranch(sourceBranchName: string): Promise<void> {
+        let candidateName = `feature-from-${sourceBranchName}`;
+        let promptMsg = `Create new branch diverging from [${sourceBranchName}]:`;
+        let cleanBranchName = '';
+
+        while (true) {
+            const newBranchName = await promptForText({
+                title: 'Branch from Worktree',
+                msg: promptMsg,
+                defaultValue: candidateName,
+                cancelable: true,
+            });
+            if (!newBranchName || !newBranchName.trim()) return;
+            cleanBranchName = newBranchName.trim();
+            const validation = validateBranchName(cleanBranchName);
+            if (!validation.isValid) {
+                candidateName = cleanBranchName;
+                promptMsg = `Invalid branch name: ${validation.error}\n\nPlease enter a valid branch name:`;
+                continue;
+            }
+            break;
+        }
+
+        console.log(`${this.lc} New branch requested from worktree [${sourceBranchName}]: ${cleanBranchName}`);
+        this.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+            detail: {
+                galaxyName: this.galaxyName,
+                sourceBranch: sourceBranchName,
+                newBranchName: cleanBranchName,
+                scope: 'branch',
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public async handleNewFile(targetBranchName: string): Promise<void> {
+        const filename = await promptForText({
+            title: 'New File',
+            msg: `Create new file on branch [${targetBranchName}]:`,
+            defaultValue: '',
+            cancelable: true,
+        });
+
+        if (!filename || !filename.trim()) return;
+        const cleanFilename = filename.trim();
+
+        try {
+            const statusMap = this.getFileStatusMap(this.galaxyName, targetBranchName);
+            if (statusMap.has(cleanFilename)) {
+                alert(`A file named "${cleanFilename}" already exists in your working tree on branch [${targetBranchName}].`);
+                return;
+            }
+
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            const galaxyIbGib = await this.resolveGalaxyIbGib(this.galaxyName, space);
+            if (galaxyIbGib) {
+                const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                    galaxyIbGib,
+                    branchName: targetBranchName,
+                    metaspace,
+                });
+                const existing = await getFileItemFromPath({
+                    branchSpace: branchAndRoot.branchSpace,
+                    rootItem: branchAndRoot.rootItemIbGib_latest || branchAndRoot.rootItemIbGib,
+                    filePath: cleanFilename,
+                });
+                if (existing) {
+                    alert(`A file or folder named "${cleanFilename}" already exists on branch [${targetBranchName}].`);
+                    return;
+                }
+            }
+
+            // Add to working tree as untracked for this branch
+            statusMap.set(cleanFilename, 'untracked');
+
+            if (this.viewMode === 'composite') {
+                await this.loadCompositeBranchTree();
+            } else {
+                if (targetBranchName !== this.branchName) {
+                    this.setGalaxyAndBranch(this.galaxyName, targetBranchName);
+                } else {
+                    await this.loadBranchTree(this.galaxyName, targetBranchName);
+                }
+                this.selectFile(cleanFilename);
+            }
+            this.updateDirtyBadges();
+
+            this.dispatchEvent(new CustomEvent('space-gib-file-created', {
+                detail: {
+                    galaxy: this.galaxyName,
+                    branch: targetBranchName,
+                    path: cleanFilename,
+                    content: '',
+                },
+                bubbles: true,
+                composed: true,
+            }));
+
+            this.dispatchEvent(new CustomEvent('space-gib-file-selected', {
+                detail: {
+                    galaxy: this.galaxyName,
+                    branch: targetBranchName,
+                    path: cleanFilename,
+                    name: cleanFilename,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        } catch (err) {
+            console.error(`${this.lc} Failed to create file: ${extractErrorMsg(err)}`);
+            alert(`Failed to create file: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    public handleNewFolder(targetBranchName: string): void {
+        this.dispatchEvent(new CustomEvent('space-gib-new-folder-requested', {
+            detail: { branch: targetBranchName, galaxy: this.galaxyName },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public handleCloneBranch(targetBranchName: string): void {
+        this.dispatchEvent(new CustomEvent('space-gib-clone-requested', {
+            detail: {
+                galaxyName: this.galaxyName,
+                branchName: targetBranchName,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public getDirtyCount(galaxyName: string = this.galaxyName, branchName: string = this.branchName): number {
+        const map = this.getFileStatusMap(galaxyName, branchName);
+        let count = 0;
+        for (const [_, status] of map) {
+            if (status === 'modified' || status === 'untracked') {
+                count++;
+            }
+        }
+        return count;
+    }
+
+    public updateDirtyBadges(): void {
+        const shadow = this.shadowRoot;
+        if (!shadow) return;
+
+        // 1. Single branch header dirty badge
+        const singleCount = this.getDirtyCount(this.galaxyName, this.branchName);
+        if (this.el.branchDirtyBadgeEl) {
+            if (singleCount > 0) {
+                this.el.branchDirtyBadgeEl.style.display = 'inline-flex';
+                this.el.branchDirtyBadgeEl.textContent = `● ${singleCount}`;
+            } else {
+                this.el.branchDirtyBadgeEl.style.display = 'none';
+            }
+        }
+
+        // 2. Composite tree branch nodes dirty badges
+        const badges = shadow.querySelectorAll('.composite-tree-container .branch-dirty-badge');
+        badges.forEach((badge) => {
+            const bName = badge.getAttribute('data-branch');
+            if (!bName) return;
+            const count = this.getDirtyCount(this.galaxyName, bName);
+            const htmlBadge = badge as HTMLElement;
+            if (count > 0) {
+                htmlBadge.style.display = 'inline-flex';
+                htmlBadge.textContent = `● ${count}`;
+            } else {
+                htmlBadge.style.display = 'none';
+            }
+        });
+    }
+
+    public async loadCompositeBranchTree(): Promise<void> {
+        const container = this.el?.compositeTreeContainerEl;
+        if (!container) return;
+
+        if (!this.galaxyName) {
+            container.innerHTML = '<div class="empty-tree-msg">No galaxy selected</div>';
+            return;
+        }
+
+        try {
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            const galaxyIbGib = await this.resolveGalaxyIbGib(this.galaxyName, space);
+            if (!galaxyIbGib) {
+                container.innerHTML = `<div class="empty-tree-msg">Galaxy [${this.galaxyName}] not found</div>`;
+                return;
+            }
+
+            const rootNode = await getCompositeBranchTreeFromGalaxy({
+                galaxyIbGib,
+                metaspace,
+            });
+
+            if (!rootNode) {
+                container.innerHTML = '<div class="empty-tree-msg">No branches in composite tree</div>';
+                return;
+            }
+
+            container.innerHTML = '';
+            await this.renderCompositeBranchNode(rootNode, container, metaspace, space, galaxyIbGib);
+            this.updateDirtyBadges();
+        } catch (err) {
+            container.innerHTML = `<div class="empty-tree-msg" style="color: #ef4444;">Error loading composite branch tree: ${extractErrorMsg(err)}</div>`;
+            console.error(`${this.lc} Error loading composite branch tree: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    private async renderCompositeBranchNode(
+        node: CompositeBranchNode,
+        containerEl: HTMLElement,
+        metaspace: any,
+        space: any,
+        galaxyIbGib: B2tFSGalaxyIbGib_V1
+    ): Promise<void> {
+        const branchName = node.branchInfo.branchName;
+        const colorInfo = await this.getBranchColor(branchName, this.galaxyName);
+
+        const nodeEl = document.createElement('div');
+        nodeEl.className = 'composite-branch-node';
+        nodeEl.setAttribute('data-branch', branchName);
+
+        // Header
+        const headerEl = document.createElement('div');
+        headerEl.className = `composite-branch-header ${branchName === this.branchName ? 'active' : ''}`;
+        const branchColor = colorInfo?.punctiliarColor || '#818cf8';
+        const branchTranslucent = colorInfo?.punctiliarColorTranslucent || 'rgba(129, 140, 248, 0.15)';
+        headerEl.style.setProperty('--node-accent-color', branchColor);
+        headerEl.style.setProperty('--node-accent-translucent', branchTranslucent);
+        headerEl.style.setProperty('--branch-accent-color', branchColor);
+        headerEl.style.setProperty('--branch-accent-translucent', branchTranslucent);
+        headerEl.style.paddingLeft = `${node.depth * 14 + 6}px`;
+
+        const toggleBtn = document.createElement('button');
+        toggleBtn.className = 'branch-toggle-btn';
+        toggleBtn.type = 'button';
+        toggleBtn.setAttribute('aria-label', `Toggle Branch ${branchName}`);
+        const chevronEl = document.createElement('span');
+        chevronEl.className = 'chevron-icon';
+        chevronEl.textContent = '▼';
+        toggleBtn.appendChild(chevronEl);
+
+        const iconEl = document.createElement('span');
+        iconEl.className = 'branch-icon composite-branch-icon';
+        iconEl.textContent = '🌿';
+        iconEl.style.color = branchColor;
+
+        const titleEl = document.createElement('span');
+        titleEl.className = 'branch-title composite-branch-title';
+        titleEl.textContent = branchName;
+        titleEl.style.color = branchColor;
+
+        headerEl.appendChild(toggleBtn);
+        headerEl.appendChild(iconEl);
+        headerEl.appendChild(titleEl);
+
+        if (node.scopedItemPath) {
+            const scopedEl = document.createElement('span');
+            scopedEl.className = 'composite-scoped-badge';
+            scopedEl.textContent = `↳ ${node.scopedItemPath}`;
+            scopedEl.title = `Scoped to item: ${node.scopedItemPath}`;
+            headerEl.appendChild(scopedEl);
+        }
+
+        const dirtyBadge = document.createElement('span');
+        dirtyBadge.className = 'branch-dirty-badge';
+        dirtyBadge.setAttribute('data-branch', branchName);
+        dirtyBadge.style.display = 'none';
+        dirtyBadge.style.marginLeft = 'auto';
+        dirtyBadge.style.marginRight = '0.25rem';
+        dirtyBadge.style.setProperty('--branch-accent-color', colorInfo?.punctiliarColor || '#fbbf24');
+        dirtyBadge.style.setProperty('--branch-accent-translucent', colorInfo?.punctiliarColorTranslucent || 'rgba(234, 179, 8, 0.18)');
+        headerEl.appendChild(dirtyBadge);
+
+        // DRY Branch actions menu (⋮)
+        const actionsEl = document.createElement('div');
+        actionsEl.className = 'branch-actions';
+
+        const menuBtn = document.createElement('button');
+        menuBtn.className = 'action-btn branch-menu-btn';
+        menuBtn.type = 'button';
+        menuBtn.title = `Branch actions for [${branchName}] (⋮)`;
+        menuBtn.textContent = '⋮';
+        menuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.showCommandMenu(menuBtn, this.getBranchCommandMenuItems(branchName));
+        });
+        actionsEl.appendChild(menuBtn);
+        headerEl.appendChild(actionsEl);
+
+        // Body (Files + Children)
+        const bodyEl = document.createElement('div');
+        bodyEl.className = 'composite-branch-body';
+
+        if (node.depth === 0) {
+            if (this.isCompositeExpanded) {
+                headerEl.classList.remove('collapsed');
+                headerEl.classList.add('expanded');
+                bodyEl.style.display = 'flex';
+            } else {
+                headerEl.classList.add('collapsed');
+                headerEl.classList.remove('expanded');
+                bodyEl.style.display = 'none';
+            }
+
+            headerEl.addEventListener('click', (e) => {
+                const target = e.target as HTMLElement;
+                if (target.closest('.action-btn') || target.closest('.branch-menu-btn')) return;
+                this.toggleCompositeRootAccordion(headerEl, bodyEl);
+            });
+        } else {
+            headerEl.addEventListener('click', (e) => {
+                const target = e.target as HTMLElement;
+                if (target.closest('.action-btn') || target.closest('.branch-menu-btn')) return;
+                const isCollapsed = headerEl.classList.toggle('collapsed');
+                headerEl.classList.toggle('expanded', !isCollapsed);
+                bodyEl.style.display = isCollapsed ? 'none' : 'flex';
+            });
+        }
+
+        // Files container for this branch
+        const filesEl = document.createElement('div');
+        filesEl.className = 'composite-branch-files';
+
+        // Load files for this branch
+        try {
+            const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                galaxyIbGib,
+                branchName,
+                metaspace,
+            });
+            const rootItem = branchAndRoot.rootItemIbGib_latest || branchAndRoot.rootItemIbGib;
+            const children = await getFolderChildren({ branchSpace: branchAndRoot.branchSpace, folderItem: rootItem });
+            const committedNames = new Set(children.map(c => c.data.name));
+
+            const statusMap = this.getFileStatusMap(this.galaxyName, branchName);
+            const untrackedNames: string[] = [];
+            for (const [filePath, status] of statusMap) {
+                if (status === 'untracked' && !committedNames.has(filePath)) {
+                    untrackedNames.push(filePath);
+                }
+            }
+
+            if (children.length === 0 && untrackedNames.length === 0) {
+                const emptyFileEl = document.createElement('div');
+                emptyFileEl.className = 'file-item-empty';
+                emptyFileEl.textContent = '(no files)';
+                emptyFileEl.style.cssText = 'color: #64748b; font-size: 0.72rem; padding: 2px 6px; font-style: italic;';
+                filesEl.appendChild(emptyFileEl);
+            } else {
+                for (const child of children) {
+                    const fileRow = this.createCompositeFileRow(child.data.name, branchName, false);
+                    filesEl.appendChild(fileRow);
+                }
+                for (const untrackedPath of untrackedNames) {
+                    const fileRow = this.createCompositeFileRow(untrackedPath, branchName, true);
+                    filesEl.appendChild(fileRow);
+                }
+            }
+        } catch (err) {
+            console.warn(`${this.lc} Could not load files for branch [${branchName}]: ${extractErrorMsg(err)}`);
+        }
+
+        bodyEl.appendChild(filesEl);
+
+        // Nested sub-branches
+        if (node.children && node.children.length > 0) {
+            const subBranchesEl = document.createElement('div');
+            subBranchesEl.className = 'composite-branch-children';
+            for (const childNode of node.children) {
+                await this.renderCompositeBranchNode(childNode, subBranchesEl, metaspace, space, galaxyIbGib);
+            }
+            bodyEl.appendChild(subBranchesEl);
+        }
+
+        nodeEl.appendChild(headerEl);
+        nodeEl.appendChild(bodyEl);
+        containerEl.appendChild(nodeEl);
+    }
+
+    private createCompositeFileRow(filePath: string, branchName: string, isUntracked: boolean): HTMLElement {
+        const fileEl = document.createElement('div');
+        fileEl.className = `tree-item file ${filePath === this.selectedFilePath && branchName === this.branchName ? 'selected' : ''}`;
+        fileEl.setAttribute('data-path', filePath);
+        fileEl.setAttribute('data-branch', branchName);
+
+        const statusMap = this.getFileStatusMap(this.galaxyName, branchName);
+        const status = isUntracked ? 'untracked' : statusMap.get(filePath);
+
+        const iconEl = document.createElement('span');
+        iconEl.className = 'tree-icon';
+        iconEl.textContent = filePath.endsWith('.md') ? '📝' : (filePath.endsWith('.json') ? '⚙️' : '📄');
+
+        const labelEl = document.createElement('span');
+        labelEl.className = `tree-label ${status === 'untracked' ? 'vcs-untracked' : (status === 'modified' ? 'vcs-modified' : '')}`;
+        labelEl.textContent = filePath;
+        labelEl.title = `${filePath} [${branchName}]`;
+
+        fileEl.appendChild(iconEl);
+        fileEl.appendChild(labelEl);
+
+        if (status) {
+            const badgeEl = document.createElement('span');
+            badgeEl.className = `vcs-status-badge ${status}`;
+            badgeEl.textContent = status === 'untracked' ? 'U' : 'M';
+            badgeEl.title = status === 'untracked' ? 'Untracked' : 'Modified';
+            fileEl.appendChild(badgeEl);
+        }
+
+        fileEl.addEventListener('click', () => {
+            this.selectedFilePath = filePath;
+            const shadow = this.shadowRoot;
+            shadow?.querySelectorAll('.tree-item.file').forEach(el => el.classList.remove('selected'));
+            fileEl.classList.add('selected');
+
+            this.dispatchEvent(new CustomEvent('space-gib-file-selected', {
+                detail: {
+                    galaxy: this.galaxyName,
+                    branch: branchName,
+                    path: filePath,
+                    name: filePath,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        return fileEl;
+    }
+
     override async disconnected(): Promise<void> {
         const lc = `${this.lc}[${this.disconnected.name}]`;
         try {
-            // cleanup if needed
+            window.removeEventListener('click', this.onWindowClick);
+            window.removeEventListener('keydown', this.onWindowKeyDown);
+            window.removeEventListener('space-gib-code-changed', this.onCodeChanged);
         } catch (error) {
             console.error(`${lc} ${extractErrorMsg(error)}`);
         }