@ibgib/space-gib 0.0.33 → 0.0.35

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

@@ -0,0 +1,648 @@
+import thisCss from "./clone.css";
+import thisHtml from "./clone.html";
+
+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 { validateBranchName } from "@ibgib/core-gib/dist/cosmology/branching/branch/branch-helpers.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 {
+    CLONE_COMPONENT_NAME, EVENT_SPACE_GIB_CLONE_CLOSED,
+    EVENT_SPACE_GIB_CLONE_EXECUTED, CLONE_SCOPE_COSMOS, CLONE_SCOPE_GALAXY,
+    CLONE_SCOPE_ITEM, CLONE_MODALITY_CLI, CLONE_MODALITY_ZIP,
+    CLONE_MODALITY_DAG,
+} from "./clone-constants.mjs";
+import {
+    CloneScope, CloneModality, CloneItemContext, CloneTreeState,
+    CloneModalOptions,
+} from "./clone-types.mjs";
+
+/**
+ * Metadata factory for space-gib-clone Web Component.
+ */
+export class CloneComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${CloneComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${CLONE_COMPONENT_NAME}$`);
+    componentName = CLONE_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, CloneComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as CloneComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * DOM Elements interface for CloneComponentInstance
+ */
+export interface CloneElements extends ElementsBase {
+    contentEl: HTMLDivElement;
+    backdropEl: HTMLDivElement;
+    dialogEl: HTMLDivElement;
+    headerEl: HTMLDivElement;
+    btnCloseEl: HTMLButtonElement;
+    targetTitleEl: HTMLSpanElement;
+
+    // Scopes
+    scopeCosmosLabelEl: HTMLLabelElement;
+    scopeGalaxyLabelEl: HTMLLabelElement;
+    scopeItemLabelEl: HTMLLabelElement;
+    scopeCosmosRadioEl: HTMLInputElement;
+    scopeGalaxyRadioEl: HTMLInputElement;
+    scopeItemRadioEl: HTMLInputElement;
+
+    // Tree / Item
+    treeContainerEl: HTMLDivElement;
+    singleItemContainerEl: HTMLDivElement;
+    selectionSummaryEl: HTMLSpanElement;
+
+    // Modality Tabs
+    tabCliEl: HTMLButtonElement;
+    tabZipEl: HTMLButtonElement;
+    tabDagEl: HTMLButtonElement;
+
+    // Panels
+    panelCliEl: HTMLDivElement;
+    panelZipEl: HTMLDivElement;
+    panelDagEl: HTMLDivElement;
+
+    // CLI actions
+    cmdPreviewEl: HTMLElement;
+    btnCopyEl: HTMLButtonElement;
+
+    // Download actions
+    btnDownloadZipEl: HTMLButtonElement;
+    btnDownloadDagEl: HTMLButtonElement;
+
+    // Status
+    statusMessageEl: HTMLDivElement;
+}
+
+/**
+ * space-gib-clone Web Component Instance.
+ * Implements Cosmos, Galaxy, and Single Item cloning via CLI or direct downloads.
+ */
+export class CloneComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, CloneElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, CloneElements> {
+    protected override lc: string = `[${CloneComponentInstance.name}]`;
+
+    get el(): CloneElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    protected activeScope: CloneScope = CLONE_SCOPE_COSMOS;
+    protected activeModality: CloneModality = CLONE_MODALITY_CLI;
+
+    // Tree state populated either from context or sample cosmos hierarchy
+    protected treeState: CloneTreeState = {
+        cosmosId: 'cosmos-1',
+        cosmosName: 'Cosmos 1',
+        selected: true,
+        galaxies: [
+            {
+                id: 'galaxy-code',
+                name: 'Code Galaxy',
+                icon: '</>',
+                type: 'code',
+                selected: true,
+                branches: [
+                    { id: 'branch-main', name: 'main', isCanonical: true, selected: true },
+                    { id: 'branch-feat', name: 'feature/cosmos-drift', isCanonical: false, selected: false },
+                ],
+            },
+            {
+                id: 'galaxy-notes',
+                name: 'Notes Galaxy',
+                icon: '📝',
+                type: 'notes',
+                selected: true,
+                branches: [
+                    { id: 'branch-notes-main', name: 'main', isCanonical: true, selected: true },
+                ],
+            },
+        ],
+    };
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            console.log(`${lc} created starting...`);
+            const root = this.shadowRoot!;
+
+            this.elements = {
+                contentEl: root.getElementById('clone-dialog') as HTMLDivElement,
+                backdropEl: root.getElementById('clone-backdrop') as HTMLDivElement,
+                dialogEl: root.getElementById('clone-dialog') as HTMLDivElement,
+                headerEl: root.getElementById('clone-header') as HTMLDivElement,
+                btnCloseEl: root.getElementById('btn-clone-close') as HTMLButtonElement,
+                targetTitleEl: root.getElementById('clone-target-title') as HTMLSpanElement,
+
+                scopeCosmosLabelEl: root.getElementById('scope-cosmos-label') as HTMLLabelElement,
+                scopeGalaxyLabelEl: root.getElementById('scope-galaxy-label') as HTMLLabelElement,
+                scopeItemLabelEl: root.getElementById('scope-item-label') as HTMLLabelElement,
+                scopeCosmosRadioEl: root.getElementById('scope-cosmos') as HTMLInputElement,
+                scopeGalaxyRadioEl: root.getElementById('scope-galaxy') as HTMLInputElement,
+                scopeItemRadioEl: root.getElementById('scope-item') as HTMLInputElement,
+
+                treeContainerEl: root.getElementById('clone-tree-container') as HTMLDivElement,
+                singleItemContainerEl: root.getElementById('clone-single-item-container') as HTMLDivElement,
+                selectionSummaryEl: root.getElementById('clone-selection-summary') as HTMLSpanElement,
+
+                tabCliEl: root.getElementById('tab-cli') as HTMLButtonElement,
+                tabZipEl: root.getElementById('tab-zip') as HTMLButtonElement,
+                tabDagEl: root.getElementById('tab-dag') as HTMLButtonElement,
+
+                panelCliEl: root.getElementById('panel-cli') as HTMLDivElement,
+                panelZipEl: root.getElementById('panel-zip') as HTMLDivElement,
+                panelDagEl: root.getElementById('panel-dag') as HTMLDivElement,
+
+                cmdPreviewEl: root.getElementById('clone-cmd-preview') as HTMLElement,
+                btnCopyEl: root.getElementById('btn-clone-copy') as HTMLButtonElement,
+
+                btnDownloadZipEl: root.getElementById('btn-clone-download-zip') as HTMLButtonElement,
+                btnDownloadDagEl: root.getElementById('btn-clone-download-dag') as HTMLButtonElement,
+
+                statusMessageEl: root.getElementById('clone-status-message') as HTMLDivElement,
+            };
+
+            this.bindEvents();
+            this.applyScopeRules();
+            this.renderTree();
+            this.updateCommandPreview();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    /**
+     * Configure modal with options when invoked by shell service.
+     */
+    public setOptions(opts: CloneModalOptions): void {
+        const lc = `${this.lc}[${this.setOptions.name}]`;
+        console.log(`${lc} configuring options:`, opts);
+
+        if (opts.cosmosId) {
+            this.treeState.cosmosId = opts.cosmosId;
+            this.treeState.cosmosName = opts.cosmosName || opts.cosmosId;
+        }
+
+        if (opts.singleItem) {
+            this.treeState.singleItem = opts.singleItem;
+            this.activeScope = CLONE_SCOPE_ITEM;
+        } else if (opts.galaxyName) {
+            this.treeState.singleItem = undefined;
+            this.activeScope = CLONE_SCOPE_GALAXY;
+        } else {
+            this.treeState.singleItem = undefined;
+            this.activeScope = CLONE_SCOPE_COSMOS;
+        }
+
+        if (this.elements) {
+            this.applyScopeRules();
+            this.renderTree();
+            this.updateCommandPreview();
+        }
+    }
+
+    private bindEvents(): void {
+        // Close modal on close button or backdrop click
+        this.el.btnCloseEl?.addEventListener('click', () => this.close());
+        this.el.backdropEl?.addEventListener('click', (e) => {
+            if (e.target === this.el.backdropEl) {
+                this.close();
+            }
+        });
+
+        // Scope change listeners
+        this.el.scopeCosmosRadioEl?.addEventListener('change', () => this.setScope(CLONE_SCOPE_COSMOS));
+        this.el.scopeGalaxyRadioEl?.addEventListener('change', () => this.setScope(CLONE_SCOPE_GALAXY));
+        this.el.scopeItemRadioEl?.addEventListener('change', () => this.setScope(CLONE_SCOPE_ITEM));
+
+        // Modality tabs
+        this.el.tabCliEl?.addEventListener('click', () => this.setModality(CLONE_MODALITY_CLI));
+        this.el.tabZipEl?.addEventListener('click', () => this.setModality(CLONE_MODALITY_ZIP));
+        this.el.tabDagEl?.addEventListener('click', () => this.setModality(CLONE_MODALITY_DAG));
+
+        // CLI Copy button
+        this.el.btnCopyEl?.addEventListener('click', () => this.copyCommandToClipboard());
+
+        // Downloads
+        this.el.btnDownloadZipEl?.addEventListener('click', () => this.executeDownload('zip'));
+        this.el.btnDownloadDagEl?.addEventListener('click', () => this.executeDownload('dag'));
+    }
+
+    /**
+     * Enforces the mutual exclusion / greying-out rule:
+     * - If Single Item context is present: Single Item is selected; Cosmos and Galaxy are greyed out.
+     * - If Single Item context is NOT present: Single Item is greyed out; Cosmos and Galaxy are selectable.
+     */
+    protected applyScopeRules(): void {
+        const hasSingleItem = !!this.treeState.singleItem;
+
+        if (hasSingleItem) {
+            // Force Single Item active
+            this.activeScope = CLONE_SCOPE_ITEM;
+            this.el.scopeItemRadioEl.checked = true;
+
+            // Grey out Cosmos and Galaxy
+            this.el.scopeCosmosRadioEl.disabled = true;
+            this.el.scopeGalaxyRadioEl.disabled = true;
+            this.el.scopeItemRadioEl.disabled = false;
+
+            this.el.scopeCosmosLabelEl.classList.add('disabled');
+            this.el.scopeGalaxyLabelEl.classList.add('disabled');
+            this.el.scopeItemLabelEl.classList.remove('disabled');
+
+            this.el.scopeCosmosLabelEl.classList.remove('selected');
+            this.el.scopeGalaxyLabelEl.classList.remove('selected');
+            this.el.scopeItemLabelEl.classList.add('selected');
+
+            this.el.targetTitleEl.textContent = this.treeState.singleItem!.path;
+        } else {
+            // No single item: Grey out Single Item
+            this.el.scopeItemRadioEl.disabled = true;
+            this.el.scopeItemLabelEl.classList.add('disabled');
+            this.el.scopeItemLabelEl.classList.remove('selected');
+
+            this.el.scopeCosmosRadioEl.disabled = false;
+            this.el.scopeGalaxyRadioEl.disabled = false;
+            this.el.scopeCosmosLabelEl.classList.remove('disabled');
+            this.el.scopeGalaxyLabelEl.classList.remove('disabled');
+
+            if (this.activeScope === CLONE_SCOPE_ITEM) {
+                this.activeScope = CLONE_SCOPE_COSMOS;
+            }
+
+            if (this.activeScope === CLONE_SCOPE_COSMOS) {
+                this.el.scopeCosmosRadioEl.checked = true;
+                this.el.scopeCosmosLabelEl.classList.add('selected');
+                this.el.scopeGalaxyLabelEl.classList.remove('selected');
+                this.el.targetTitleEl.textContent = this.treeState.cosmosName;
+            } else {
+                this.el.scopeGalaxyRadioEl.checked = true;
+                this.el.scopeGalaxyLabelEl.classList.add('selected');
+                this.el.scopeCosmosLabelEl.classList.remove('selected');
+                this.el.targetTitleEl.textContent = `${this.treeState.cosmosName} (Galaxy Scope)`;
+            }
+        }
+    }
+
+    private setScope(scope: CloneScope): void {
+        this.activeScope = scope;
+        this.applyScopeRules();
+        this.renderTree();
+        this.updateCommandPreview();
+    }
+
+    private setModality(modality: CloneModality): void {
+        this.activeModality = modality;
+
+        this.el.tabCliEl.classList.toggle('active', modality === CLONE_MODALITY_CLI);
+        this.el.tabZipEl.classList.toggle('active', modality === CLONE_MODALITY_ZIP);
+        this.el.tabDagEl.classList.toggle('active', modality === CLONE_MODALITY_DAG);
+
+        this.el.panelCliEl.classList.toggle('active', modality === CLONE_MODALITY_CLI);
+        this.el.panelZipEl.classList.toggle('active', modality === CLONE_MODALITY_ZIP);
+        this.el.panelDagEl.classList.toggle('active', modality === CLONE_MODALITY_DAG);
+    }
+
+    /**
+     * Renders the tree hierarchy or single item details.
+     */
+    protected renderTree(): void {
+        if (this.activeScope === CLONE_SCOPE_ITEM && this.treeState.singleItem) {
+            this.el.treeContainerEl.style.display = 'none';
+            this.el.singleItemContainerEl.style.display = 'block';
+
+            const item = this.treeState.singleItem;
+            const icon = item.isDir ? '📁' : '📄';
+            this.el.singleItemContainerEl.innerHTML = `
+                <div class="single-item-row" style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <span style="font-size: 1.2rem;">${icon}</span>
+                        <div>
+                            <strong style="color: #f8fafc;">${item.path}</strong>
+                            <div style="font-size: 0.75rem; color: #94a3b8; margin-top: 2px;">
+                                ${item.isDir ? 'Directory Subtree Workspace' : 'Isolated File Timeline Projection'}
+                                ${item.galaxyName ? `&bull; Galaxy: ${item.galaxyName}` : ''}
+                                ${item.branchName ? `&bull; Branch: ${item.branchName}` : ''}
+                            </div>
+                        </div>
+                    </div>
+                    <button type="button" id="btn-clone-modal-branch-item" class="btn-action" style="background: rgba(16, 185, 129, 0.15); border: 1px solid #10b981; color: #6ee7b7; padding: 4px 10px; border-radius: 5px; font-size: 0.78rem; cursor: pointer; white-space: nowrap;" title="Branch from this item (🌿+)">🌿+ Branch</button>
+                </div>
+            `;
+            this.bindSingleItemEvents(item);
+            this.el.selectionSummaryEl.textContent = 'Single item isolated projection';
+            return;
+        }
+
+        this.el.singleItemContainerEl.style.display = 'none';
+        this.el.treeContainerEl.style.display = 'block';
+
+        let html = '';
+
+        // Cosmos Root Node
+        html += `
+            <div class="tree-node depth-0">
+                <input type="checkbox" id="chk-tree-cosmos" ${this.treeState.selected ? 'checked' : ''}>
+                <span class="node-icon">🌌</span>
+                <span>${this.treeState.cosmosName}</span>
+            </div>
+        `;
+
+        // Galaxies & Branches
+        this.treeState.galaxies.forEach((galaxy, gIdx) => {
+            html += `
+                <div class="tree-node depth-1">
+                    <input type="checkbox" id="chk-tree-g-${gIdx}" ${galaxy.selected ? 'checked' : ''}>
+                    <span class="node-icon">${galaxy.icon}</span>
+                    <span>${galaxy.name}</span>
+                    <span class="node-badge">${galaxy.branches.length} branches</span>
+                </div>
+            `;
+
+            galaxy.branches.forEach((branch, bIdx) => {
+                html += `
+                    <div class="tree-node depth-2" style="justify-content: space-between;">
+                        <div style="display: flex; align-items: center; gap: 8px;">
+                            <input type="checkbox" id="chk-tree-g-${gIdx}-b-${bIdx}" ${branch.selected ? 'checked' : ''}>
+                            <span class="node-icon">🌿</span>
+                            <span>${branch.name}</span>
+                            ${branch.isCanonical ? '<span class="node-badge" style="background:#1e3a2f; color:#6ee7b7;">canonical</span>' : ''}
+                        </div>
+                        <button type="button" class="btn-tree-branch-action" data-branch="${branch.name}" data-galaxy="${galaxy.name}" title="Branch from ${branch.name} (🌿+)" style="background: transparent; border: none; color: #6ee7b7; cursor: pointer; font-size: 0.75rem; padding: 1px 6px; border-radius: 3px;">🌿+</button>
+                    </div>
+                `;
+            });
+        });
+
+        this.el.treeContainerEl.innerHTML = html;
+        this.bindTreeEvents();
+        this.updateSelectionSummary();
+    }
+
+    private bindSingleItemEvents(item: CloneItemContext): void {
+        const btnBranchItem = this.el.singleItemContainerEl.querySelector('#btn-clone-modal-branch-item');
+        btnBranchItem?.addEventListener('click', async () => {
+            const filename = item.path.split('/').pop() || item.path;
+            let candidateName = `feature-branch-${filename.replace(/[^a-zA-Z0-9_.-]/g, '-')}`;
+            let promptMsg = `Enter branch name isolating and diverging from item [${item.path}]:`;
+            let cleanBranchName = '';
+
+            while (true) {
+                const newBranchName = await promptForText({
+                    title: `Create Branch from 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;
+            }
+
+            this.showStatus(`Branch created: ${cleanBranchName}`);
+            window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                detail: {
+                    galaxyName: item.galaxyName || 'Code Galaxy',
+                    sourceBranch: item.branchName || 'main',
+                    itemPath: item.path,
+                    isDir: item.isDir,
+                    newBranchName: cleanBranchName,
+                    scope: 'item',
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+
+    private bindTreeEvents(): void {
+        const rootChk = this.el.treeContainerEl.querySelector('#chk-tree-cosmos') as HTMLInputElement | null;
+        rootChk?.addEventListener('change', () => {
+            const checked = rootChk.checked;
+            this.treeState.selected = checked;
+            this.treeState.galaxies.forEach(g => {
+                g.selected = checked;
+                g.branches.forEach(b => b.selected = checked);
+            });
+            this.renderTree();
+            this.updateCommandPreview();
+        });
+
+        this.treeState.galaxies.forEach((galaxy, gIdx) => {
+            const gChk = this.el.treeContainerEl.querySelector(`#chk-tree-g-${gIdx}`) as HTMLInputElement | null;
+            gChk?.addEventListener('change', () => {
+                const checked = gChk.checked;
+                galaxy.selected = checked;
+                galaxy.branches.forEach(b => b.selected = checked);
+                this.syncParentState();
+                this.renderTree();
+                this.updateCommandPreview();
+            });
+
+            galaxy.branches.forEach((branch, bIdx) => {
+                const bChk = this.el.treeContainerEl.querySelector(`#chk-tree-g-${gIdx}-b-${bIdx}`) as HTMLInputElement | null;
+                bChk?.addEventListener('change', () => {
+                    branch.selected = bChk.checked;
+                    galaxy.selected = galaxy.branches.some(b => b.selected);
+                    this.syncParentState();
+                    this.renderTree();
+                    this.updateCommandPreview();
+                });
+            });
+        });
+
+        // Branch from branch buttons in tree
+        this.el.treeContainerEl.querySelectorAll('.btn-tree-branch-action').forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                const branchName = btn.getAttribute('data-branch') || 'main';
+                const galaxyName = btn.getAttribute('data-galaxy') || 'Code Galaxy';
+                let candidateName = `feature-branch-from-${branchName}`;
+                let promptMsg = `Enter branch name diverging from [${branchName}]:`;
+                let cleanBranchName = '';
+
+                while (true) {
+                    const newBranchName = await promptForText({
+                        title: 'Create Branch from Branch',
+                        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;
+                }
+
+                this.showStatus(`Branch created: ${cleanBranchName}`);
+                window.dispatchEvent(new CustomEvent('space-gib-branch-requested', {
+                    detail: {
+                        galaxyName,
+                        sourceBranch: branchName,
+                        newBranchName: cleanBranchName,
+                        scope: 'branch',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+    }
+
+    private syncParentState(): void {
+        this.treeState.selected = this.treeState.galaxies.some(g => g.selected);
+    }
+
+    private updateSelectionSummary(): void {
+        let totalBranches = 0;
+        let selectedBranches = 0;
+        this.treeState.galaxies.forEach(g => {
+            totalBranches += g.branches.length;
+            selectedBranches += g.branches.filter(b => b.selected).length;
+        });
+        this.el.selectionSummaryEl.textContent = `${selectedBranches} of ${totalBranches} branches selected`;
+    }
+
+    /**
+     * Generates the dynamic CLI command string.
+     */
+    protected updateCommandPreview(): void {
+        const host = window.location.host || 'space-gib.localhost';
+        const protocol = window.location.protocol === 'http:' ? 'http' : 'https';
+        const cosmosPath = this.treeState.cosmosId;
+        const baseUrl = `${protocol}://${host}/${cosmosPath}`;
+
+        let cmd = `$ vcs clone ${baseUrl}`;
+
+        if (this.activeScope === CLONE_SCOPE_ITEM && this.treeState.singleItem) {
+            cmd += ` \\\n  --item "${this.treeState.singleItem.path}"`;
+        } else {
+            const selectedFlags: string[] = [];
+            this.treeState.galaxies.forEach(g => {
+                const selectedBranches = g.branches.filter(b => b.selected);
+                selectedBranches.forEach(b => {
+                    selectedFlags.push(`--galaxy ${g.type}:${b.name}`);
+                });
+            });
+
+            if (selectedFlags.length > 0) {
+                cmd += ` \\\n  ${selectedFlags.join(' ')}`;
+            }
+        }
+
+        if (this.el.cmdPreviewEl) {
+            this.el.cmdPreviewEl.querySelector('code')!.textContent = cmd;
+        }
+    }
+
+    private async copyCommandToClipboard(): Promise<void> {
+        const code = this.el.cmdPreviewEl.querySelector('code')?.textContent?.replace(/^\$\s*/, '') || '';
+        try {
+            await navigator.clipboard.writeText(code);
+            this.el.btnCopyEl.textContent = '✓ Copied!';
+            this.el.btnCopyEl.classList.add('copied');
+            this.showStatus('Command copied to clipboard!');
+            setTimeout(() => {
+                if (this.el.btnCopyEl) {
+                    this.el.btnCopyEl.textContent = '📋 Copy';
+                    this.el.btnCopyEl.classList.remove('copied');
+                }
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy to clipboard:', err);
+        }
+    }
+
+    private executeDownload(type: 'zip' | 'dag'): void {
+        const desc = type === 'zip' ? 'Workspace ZIP archive' : 'ibGib DAG bundle';
+        this.showStatus(`Preparing ${desc} download...`);
+
+        this.dispatchEvent(new CustomEvent(EVENT_SPACE_GIB_CLONE_EXECUTED, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                scope: this.activeScope,
+                type,
+                treeState: this.treeState,
+            }
+        }));
+
+        setTimeout(() => {
+            this.showStatus(`Download started: ${this.treeState.cosmosName}-${type}.zip`);
+        }, 800);
+    }
+
+    private showStatus(msg: string): void {
+        if (!this.el.statusMessageEl) return;
+        this.el.statusMessageEl.textContent = msg;
+        this.el.statusMessageEl.classList.add('visible');
+        setTimeout(() => {
+            if (this.el.statusMessageEl) {
+                this.el.statusMessageEl.classList.remove('visible');
+            }
+        }, 3000);
+    }
+
+    public close(): void {
+        this.dispatchEvent(new CustomEvent(EVENT_SPACE_GIB_CLONE_CLOSED, {
+            bubbles: true,
+            composed: true,
+        }));
+        this.remove();
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}

package/src/client/ui/component/clone/index.mts

@@ -0,0 +1,11 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { CloneComponentMeta } from "./clone.mjs";
+
+export * from "./clone.mjs";
+export * from "./clone-constants.mjs";
+export * from "./clone-types.mjs";
+
+export async function registerCloneComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new CloneComponentMeta());
+}