@ibgib/space-gib 0.0.34 → 0.0.36

package/src/client/ui/component/changes/changes.mts

@@ -0,0 +1,766 @@
+import thisCss from "./changes.css";
+import thisHtml from "./changes.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 { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    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,
+    commitChangesToGalaxyBranch,
+    ChangedFileInfo,
+} from "@ibgib/core-gib/dist/cosmology/branching/item/item-helpers.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 { promptForConfirm } from "@ibgib/web-gib/dist/helpers.web.mjs";
+import { getDeterministicColorInfo } from "@ibgib/web-gib/dist/helpers.mjs";
+import { GibColorInfo } from "@ibgib/web-gib/dist/types.mjs";
+
+export const CHANGES_COMPONENT_NAME = 'space-gib-changes';
+
+export interface WorkingTreeChange {
+    path: string;
+    status: 'untracked' | 'modified' | 'deleted';
+    content: string;
+    originalContent?: string;
+}
+
+/**
+ * Metadata factory for space-gib-changes Web Component.
+ */
+export class ChangesComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${ChangesComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${CHANGES_COMPONENT_NAME}$`);
+    componentName = CHANGES_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, ChangesComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as ChangesComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [vcsStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's Shadow Root.
+ */
+export interface ChangesElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    headerEl: HTMLDivElement;
+    btnToggleEl: HTMLButtonElement;
+    titleEl: HTMLSpanElement;
+    counterEl: HTMLSpanElement;
+    badgesContainerEl?: HTMLDivElement;
+    btnDiscardAllEl: HTMLButtonElement;
+    bodyContainerEl: HTMLDivElement;
+    emptyMsgEl: HTMLDivElement;
+    changesListEl: HTMLDivElement;
+    commitBoxEl: HTMLDivElement;
+    commitInputEl: HTMLTextAreaElement;
+    btnCommitEl: HTMLButtonElement;
+    commitBtnTextEl: HTMLSpanElement;
+}
+
+/**
+ * Concrete implementation of the Changes/Staging Accordion component.
+ */
+export class ChangesComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, ChangesElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, ChangesElements> {
+
+    protected lc: string = `[${ChangesComponentInstance.name}]`;
+
+    private galaxyName: string = '';
+    private branchName: string = 'main';
+    private viewMode: 'single' | 'composite' = 'single';
+    private isExpanded: boolean = true;
+    private branchChangesMap: Map<string, Map<string, WorkingTreeChange>> = new Map();
+    private branchColorCache: Map<string, GibColorInfo> = new Map();
+
+    public setViewMode(mode: 'single' | 'composite'): void {
+        this.viewMode = mode;
+        this.updateBranchColorStyling();
+        this.renderChanges();
+    }
+
+    public getViewMode(): 'single' | 'composite' {
+        return this.viewMode;
+    }
+
+    private getBranchKey(galaxyName: string = this.galaxyName, branchName: string = this.branchName): string {
+        return `${galaxyName || 'code-1'}~${branchName || 'main'}`;
+    }
+
+    public getWorkingTreeChangesMap(galaxyName: string = this.galaxyName, branchName: string = this.branchName): Map<string, WorkingTreeChange> {
+        const key = this.getBranchKey(galaxyName, branchName);
+        let map = this.branchChangesMap.get(key);
+        if (!map) {
+            map = new Map();
+            this.branchChangesMap.set(key, map);
+        }
+        return map;
+    }
+
+    get el(): ChangesElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    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;
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const shadow = this.shadowRoot!;
+            this.elements = {
+                rootEl: shadow.getElementById('changes-root') as HTMLDivElement,
+                headerEl: shadow.getElementById('changes-header') as HTMLDivElement,
+                btnToggleEl: shadow.getElementById('btn-changes-toggle') as HTMLButtonElement,
+                titleEl: shadow.getElementById('changes-title') as HTMLSpanElement,
+                counterEl: shadow.getElementById('changes-counter') as HTMLSpanElement,
+                badgesContainerEl: shadow.getElementById('changes-badges-container') as HTMLDivElement,
+                btnDiscardAllEl: shadow.getElementById('btn-discard-all') as HTMLButtonElement,
+                bodyContainerEl: shadow.getElementById('changes-body-container') as HTMLDivElement,
+                emptyMsgEl: shadow.getElementById('empty-changes-msg') as HTMLDivElement,
+                changesListEl: shadow.getElementById('changes-list') as HTMLDivElement,
+                commitBoxEl: shadow.getElementById('changes-commit-box') as HTMLDivElement,
+                commitInputEl: shadow.getElementById('commit-message-input') as HTMLTextAreaElement,
+                btnCommitEl: shadow.getElementById('btn-commit-changes') as HTMLButtonElement,
+                commitBtnTextEl: shadow.getElementById('commit-btn-text') as HTMLSpanElement,
+                contentEl: shadow.getElementById('changes-root') as HTMLDivElement,
+            };
+
+            this.toggleAttribute('collapsed', !this.isExpanded);
+            this.bindHandlers();
+            if (this.galaxyName) {
+                this.updateBranchColorStyling();
+            }
+            this.renderChanges();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindHandlers(): void {
+        this.el.headerEl.addEventListener('click', (e) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.action-btn')) return;
+            this.toggleAccordion();
+        });
+
+        this.el.btnDiscardAllEl.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            if (this.viewMode === 'single') {
+                const map = this.getWorkingTreeChangesMap();
+                if (map.size === 0) return;
+                const count = map.size;
+                const confirmed = await promptForConfirm({
+                    msg: `Discard all ${count} uncommitted change(s) on branch [${this.branchName}]? These changes cannot be recovered.`,
+                    yesLabel: 'Discard All',
+                    noLabel: 'Cancel',
+                });
+                if (confirmed) {
+                    this.discardAll(this.branchName);
+                }
+            } else {
+                const dirtyBranches = this.getDirtyBranchNames();
+                if (dirtyBranches.length === 0) return;
+                const confirmed = await promptForConfirm({
+                    msg: `Discard all uncommitted changes across all branches in this workspace? These changes cannot be recovered.`,
+                    yesLabel: 'Discard All',
+                    noLabel: 'Cancel',
+                });
+                if (confirmed) {
+                    this.discardAll();
+                }
+            }
+        });
+
+        this.el.btnCommitEl.addEventListener('click', () => {
+            this.commitChanges();
+        });
+
+        this.el.commitInputEl.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                e.preventDefault();
+                this.commitChanges();
+            }
+        });
+    }
+
+    public toggleAccordion(): void {
+        this.isExpanded = !this.isExpanded;
+        this.toggleAttribute('collapsed', !this.isExpanded);
+        const chevron = this.el.headerEl.querySelector('.chevron-icon');
+        if (this.isExpanded) {
+            this.el.headerEl.classList.remove('collapsed');
+            this.el.bodyContainerEl.classList.remove('hidden');
+            if (chevron) { chevron.textContent = '▼'; }
+        } else {
+            this.el.headerEl.classList.add('collapsed');
+            this.el.bodyContainerEl.classList.add('hidden');
+            if (chevron) { chevron.textContent = '▼'; }
+        }
+        this.dispatchEvent(new CustomEvent('space-gib-accordion-toggled', {
+            detail: { isExpanded: this.isExpanded },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public setGalaxyAndBranch(galaxyName: string, branchName: string = 'main', opts?: { carryOverChanges?: boolean; preserveChanges?: boolean }): void {
+        const oldKey = this.getBranchKey();
+        this.galaxyName = galaxyName;
+        this.branchName = branchName;
+        const newKey = this.getBranchKey();
+
+        // Carry-over is only triggered when explicitly requested (e.g. creating a new branch diverging from existing branch)
+        if (opts?.carryOverChanges && oldKey !== newKey) {
+            const oldMap = this.branchChangesMap.get(oldKey);
+            if (oldMap && oldMap.size > 0) {
+                const newMap = this.getWorkingTreeChangesMap(galaxyName, branchName);
+                for (const [p, change] of oldMap) {
+                    newMap.set(p, { ...change });
+                }
+                oldMap.clear();
+            }
+        }
+
+        if (this.el?.commitBtnTextEl) {
+            this.el.commitBtnTextEl.textContent = `Commit to [${branchName}]`;
+        }
+        if (this.el?.titleEl) {
+            this.el.titleEl.textContent = `Changes (${branchName})`;
+        }
+        this.updateBranchColorStyling();
+        this.renderChanges();
+    }
+
+    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
+        }
+
+        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 getGalaxyName(): string {
+        return this.galaxyName;
+    }
+
+    public getBranchName(): string {
+        return this.branchName;
+    }
+
+    public hasChanges(branchName?: string): boolean {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        return map.size > 0;
+    }
+
+    public getChangesCount(branchName?: string): number {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        return map.size;
+    }
+
+    public getChange(path: string, branchName?: string): WorkingTreeChange | undefined {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        return map.get(path);
+    }
+
+    public isUntracked(path: string, branchName?: string): boolean {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        return map.get(path)?.status === 'untracked';
+    }
+
+    public recordChange(change: { path: string; status: 'untracked' | 'modified' | 'deleted'; content?: string; originalContent?: string }, branchName?: string): void {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        const existing = map.get(change.path);
+        const status = existing?.status === 'untracked' ? 'untracked' : change.status;
+        map.set(change.path, {
+            path: change.path,
+            status,
+            content: change.content ?? existing?.content ?? '',
+            originalContent: existing?.originalContent ?? change.originalContent,
+        });
+        this.renderChanges();
+    }
+
+    public removeChange(path: string, branchName?: string): void {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName || this.branchName);
+        if (map.has(path)) {
+            map.delete(path);
+            this.renderChanges();
+        }
+    }
+
+    public getDirtyBranchNames(): string[] {
+        const branches: string[] = [];
+        for (const [key, map] of this.branchChangesMap) {
+            if (key.startsWith(`${this.galaxyName}~`) && map.size > 0) {
+                const b = key.split('~')[1];
+                if (b && !branches.includes(b)) {
+                    branches.push(b);
+                }
+            }
+        }
+        return branches;
+    }
+
+    public discardChange(path: string, branchName: string = this.branchName): void {
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, branchName);
+        const change = map.get(path);
+        if (!change) return;
+
+        map.delete(path);
+        this.renderChanges();
+
+        this.dispatchEvent(new CustomEvent('space-gib-change-discarded', {
+            detail: {
+                path,
+                galaxy: this.galaxyName,
+                branch: branchName,
+                originalContent: change.originalContent,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    public discardAll(branchName?: string): void {
+        const branchesToDiscard = branchName ? [branchName] : this.getDirtyBranchNames();
+        for (const b of branchesToDiscard) {
+            const map = this.getWorkingTreeChangesMap(this.galaxyName, b);
+            if (map.size === 0) continue;
+            const paths = Array.from(map.keys());
+            map.clear();
+            for (const path of paths) {
+                this.dispatchEvent(new CustomEvent('space-gib-change-discarded', {
+                    detail: {
+                        path,
+                        galaxy: this.galaxyName,
+                        branch: b,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        this.renderChanges();
+    }
+
+    public async commitChanges(targetBranchName: string = this.branchName, message?: string, btnEl?: HTMLButtonElement): Promise<void> {
+        const lc = `${this.lc}[${this.commitChanges.name}]`;
+        const map = this.getWorkingTreeChangesMap(this.galaxyName, targetBranchName);
+        if (map.size === 0) {
+            alert(`No changes to commit for branch [${targetBranchName}].`);
+            return;
+        }
+
+        const commitMessage = (message !== undefined ? message : this.el?.commitInputEl?.value)?.trim();
+        if (!commitMessage) {
+            alert(`Please enter a commit message for branch [${targetBranchName}].`);
+            return;
+        }
+
+        try {
+            if (btnEl) {
+                btnEl.disabled = true;
+                btnEl.textContent = 'Committing...';
+            } else if (this.el?.btnCommitEl) {
+                this.el.btnCommitEl.disabled = true;
+                this.el.btnCommitEl.textContent = 'Committing...';
+            }
+
+            const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+            const galaxyIbGib = await this.resolveGalaxyIbGib(this.galaxyName, space);
+            if (!galaxyIbGib) {
+                throw new Error(`Galaxy [${this.galaxyName}] not found in cosmos manifest`);
+            }
+
+            const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                galaxyIbGib,
+                branchName: targetBranchName,
+                metaspace,
+            });
+
+            const changesToCommit: ChangedFileInfo[] = Array.from(map.values()).map(c => ({
+                path: c.path,
+                status: c.status,
+                content: c.content,
+            }));
+
+            const commitRes = await commitChangesToGalaxyBranch({
+                metaspace,
+                branchSpace: branchAndRoot.branchSpace,
+                branchIbGib: branchAndRoot.branchIbGib,
+                rootFolderItem: branchAndRoot.rootItemIbGib_latest || branchAndRoot.rootItemIbGib,
+                changes: changesToCommit,
+                message: commitMessage,
+                author: 'You',
+                galaxyIbGib,
+                localSpace: space,
+            });
+
+            if (commitRes.updatedGalaxy) {
+                const newGalaxyAddr = getIbGibAddr({ ibGib: commitRes.updatedGalaxy });
+                const router = getSpaceGibRouterSvc();
+                for (const manifest of router.cosmosManifestCache?.values() || []) {
+                    const entry = manifest.data?.galaxies?.[this.galaxyName];
+                    if (entry) {
+                        entry.galaxyAddr = newGalaxyAddr;
+                    }
+                }
+            }
+
+            const shortHash = commitRes.newTipAddr.slice(commitRes.newTipAddr.lastIndexOf('^') + 1, commitRes.newTipAddr.lastIndexOf('^') + 8);
+
+            // Clear working tree changes for this branch
+            map.clear();
+            if (this.el?.commitInputEl && targetBranchName === this.branchName) {
+                this.el.commitInputEl.value = '';
+            }
+            await this.renderChanges();
+
+            // Dispatch commit event
+            this.dispatchEvent(new CustomEvent('space-gib-commit-created', {
+                detail: {
+                    galaxy: this.galaxyName,
+                    branch: targetBranchName,
+                    message: commitMessage,
+                    tipAddr: commitRes.newTipAddr,
+                    shortHash,
+                    committedFiles: changesToCommit,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+
+        } catch (err) {
+            console.error(`${lc} Commit failed: ${extractErrorMsg(err)}`);
+            alert(`Commit failed: ${extractErrorMsg(err)}`);
+        } finally {
+            if (btnEl) {
+                btnEl.disabled = false;
+                btnEl.innerHTML = `
+                    <span class="commit-btn-icon">✓</span>
+                    <span class="commit-btn-text">Commit to [${targetBranchName}]</span>
+                `;
+            } else if (this.el?.btnCommitEl) {
+                this.el.btnCommitEl.disabled = false;
+                this.el.btnCommitEl.innerHTML = `
+                    <span class="commit-btn-icon">✓</span>
+                    <span id="commit-btn-text" class="commit-btn-text">Commit to [${targetBranchName}]</span>
+                `;
+                this.el.commitBtnTextEl = this.el.btnCommitEl.querySelector('#commit-btn-text') as HTMLSpanElement;
+            }
+        }
+    }
+
+    public async renderChanges(): Promise<void> {
+        const dirtyBranches: { branchName: string; changesMap: Map<string, WorkingTreeChange> }[] = [];
+        let totalCount = 0;
+
+        if (this.viewMode === 'single') {
+            const map = this.getWorkingTreeChangesMap(this.galaxyName, this.branchName);
+            if (map.size > 0) {
+                dirtyBranches.push({ branchName: this.branchName, changesMap: map });
+                totalCount = map.size;
+            }
+        } else {
+            for (const [key, map] of this.branchChangesMap) {
+                if (key.startsWith(`${this.galaxyName}~`) && map.size > 0) {
+                    const b = key.split('~')[1];
+                    dirtyBranches.push({ branchName: b, changesMap: map });
+                    totalCount += map.size;
+                }
+            }
+        }
+
+        if (this.el?.counterEl) {
+            this.el.counterEl.style.display = 'none';
+        }
+
+        const badgesContainer = this.el?.badgesContainerEl;
+        if (badgesContainer) {
+            badgesContainer.innerHTML = '';
+            const allDirtyBranchInfos: { branchName: string; count: number }[] = [];
+            for (const [key, map] of this.branchChangesMap) {
+                if (key.startsWith(`${this.galaxyName}~`) && map.size > 0) {
+                    const b = key.split('~')[1];
+                    if (b && !allDirtyBranchInfos.some(x => x.branchName === b)) {
+                        allDirtyBranchInfos.push({ branchName: b, count: map.size });
+                    }
+                }
+            }
+
+            for (const info of allDirtyBranchInfos) {
+                const badge = document.createElement('span');
+                badge.className = 'changes-branch-badge';
+                badge.textContent = String(info.count);
+                badge.title = `Branch [${info.branchName}]: ${info.count} uncommitted change(s). Click to switch.`;
+
+                const bColor = await this.getBranchColor(info.branchName, this.galaxyName);
+                if (bColor) {
+                    badge.style.setProperty('--badge-accent-color', bColor.punctiliarColor);
+                    badge.style.setProperty('--badge-accent-translucent', bColor.punctiliarColorTranslucent);
+                }
+
+                badge.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    if (this.viewMode === 'single' && info.branchName !== this.branchName) {
+                        this.dispatchEvent(new CustomEvent('space-gib-branch-selected', {
+                            detail: {
+                                galaxyName: this.galaxyName,
+                                branchName: info.branchName,
+                            },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    } else if (this.viewMode === 'composite') {
+                        const group = this.shadowRoot?.querySelector(`.branch-changes-group[data-branch="${info.branchName}"]`);
+                        if (group) {
+                            group.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }
+                    }
+                });
+
+                badgesContainer.appendChild(badge);
+            }
+        }
+
+        if (this.el?.titleEl) {
+            this.el.titleEl.textContent = this.viewMode === 'single'
+                ? `Changes (${this.branchName})`
+                : 'Changes';
+        }
+
+        if (totalCount === 0) {
+            if (this.el?.emptyMsgEl) {
+                this.el.emptyMsgEl.style.display = 'block';
+                this.el.emptyMsgEl.textContent = this.viewMode === 'single'
+                    ? `No uncommitted changes on [${this.branchName}]`
+                    : 'No uncommitted changes in workspace';
+            }
+            if (this.el?.changesListEl) this.el.changesListEl.style.display = 'none';
+            if (this.el?.commitBoxEl) this.el.commitBoxEl.style.display = 'none';
+            return;
+        }
+
+        if (this.el?.emptyMsgEl) this.el.emptyMsgEl.style.display = 'none';
+        if (this.el?.changesListEl) this.el.changesListEl.style.display = 'flex';
+        if (this.el?.commitBoxEl) this.el.commitBoxEl.style.display = 'none'; // Branch groups handle their own commit boxes
+
+        const listEl = this.el.changesListEl;
+        listEl.innerHTML = '';
+
+        for (const { branchName, changesMap } of dirtyBranches) {
+            const groupEl = document.createElement('div');
+            groupEl.className = 'branch-changes-group';
+            groupEl.setAttribute('data-branch', branchName);
+
+            const colorInfo = await this.getBranchColor(branchName, this.galaxyName);
+            groupEl.style.setProperty('--group-accent-color', colorInfo?.punctiliarColor || '#78f87e');
+            groupEl.style.setProperty('--group-accent-translucent', colorInfo?.punctiliarColorTranslucent || 'rgba(120, 248, 126, 0.15)');
+
+            // Group Header
+            const headerEl = document.createElement('div');
+            headerEl.className = 'branch-group-header';
+            headerEl.innerHTML = `
+                <span class="branch-group-icon">🌿</span>
+                <span class="branch-group-title">${branchName}</span>
+                <span class="branch-group-badge">${changesMap.size}</span>
+                <button class="action-btn branch-group-discard-btn" type="button" title="Discard all on [${branchName}]">↺</button>
+            `;
+
+            const discardAllBtn = headerEl.querySelector('.branch-group-discard-btn');
+            discardAllBtn?.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const confirmed = await promptForConfirm({
+                    msg: `Discard all ${changesMap.size} changes on branch [${branchName}]? These changes cannot be recovered.`,
+                    yesLabel: 'Discard All',
+                    noLabel: 'Cancel',
+                });
+                if (confirmed) {
+                    this.discardAll(branchName);
+                }
+            });
+
+            // Group Files List
+            const filesContainer = document.createElement('div');
+            filesContainer.className = 'branch-group-files';
+
+            for (const [path, change] of changesMap) {
+                const row = document.createElement('div');
+                row.className = 'change-item';
+                row.setAttribute('data-path', path);
+
+                const badgeChar = change.status === 'untracked' ? 'U' : (change.status === 'modified' ? 'M' : 'D');
+                const badgeTitle = change.status === 'untracked' ? 'Untracked' : (change.status === 'modified' ? 'Modified' : 'Deleted');
+                const statusClass = change.status === 'untracked' ? 'vcs-untracked' : (change.status === 'modified' ? 'vcs-modified' : 'vcs-deleted');
+
+                row.innerHTML = `
+                    <span class="change-icon">📄</span>
+                    <span class="change-label ${statusClass}" title="${path}">${path}</span>
+                    <span class="vcs-status-badge ${change.status}" title="${badgeTitle}">${badgeChar}</span>
+                    <button class="change-item-discard-btn" type="button" title="Discard change">↺</button>
+                `;
+
+                row.addEventListener('click', (e) => {
+                    const target = e.target as HTMLElement;
+                    if (target.closest('.change-item-discard-btn')) return;
+                    this.dispatchEvent(new CustomEvent('space-gib-file-selected', {
+                        detail: {
+                            galaxy: this.galaxyName,
+                            branch: branchName,
+                            path: change.path,
+                            name: change.path,
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                });
+
+                const discardBtn = row.querySelector('.change-item-discard-btn');
+                discardBtn?.addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const confirmed = await promptForConfirm({
+                        msg: `Discard changes to "${path}" on branch [${branchName}]? These changes cannot be recovered.`,
+                        yesLabel: 'Discard',
+                        noLabel: 'Cancel',
+                    });
+                    if (confirmed) {
+                        this.discardChange(path, branchName);
+                    }
+                });
+
+                filesContainer.appendChild(row);
+            }
+
+            // Group Commit Box
+            const commitBoxEl = document.createElement('div');
+            commitBoxEl.className = 'branch-group-commit-box';
+            commitBoxEl.innerHTML = `
+                <textarea class="commit-message-input" placeholder="Commit message for [${branchName}] (Ctrl+Enter)..." rows="2"></textarea>
+                <button class="btn-commit" type="button">
+                    <span class="commit-btn-icon">✓</span>
+                    <span class="commit-btn-text">Commit to [${branchName}]</span>
+                </button>
+            `;
+
+            const commitInput = commitBoxEl.querySelector('.commit-message-input') as HTMLTextAreaElement;
+            const commitBtn = commitBoxEl.querySelector('.btn-commit') as HTMLButtonElement;
+
+            commitBtn.addEventListener('click', () => {
+                this.commitChanges(branchName, commitInput.value.trim(), commitBtn);
+            });
+
+            commitInput.addEventListener('keydown', (e: KeyboardEvent) => {
+                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                    e.preventDefault();
+                    this.commitChanges(branchName, commitInput.value.trim(), commitBtn);
+                }
+            });
+
+            groupEl.appendChild(headerEl);
+            groupEl.appendChild(filesContainer);
+            groupEl.appendChild(commitBoxEl);
+            listEl.appendChild(groupEl);
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}